Display HTML element only in text browsers?

Question

I have a layout that looks well in normal browsers, but in links and lynx is looks like a large jumble of text. I'd like to add a <hr> or <br> between sections in the text browsers, but I don't want them to interfere with the CSS layout in normal browsers. I tried setting hr {display: none;} in the CSS, but it's also hiding it in the text browsers.

Answer 1

UPDATE 21/12/2016: tty will be deprecated (along with a lot of other media types that you can check here https://drafts.csswg.org/mediaqueries/#media-types) and should be substituted with a combination of media feature, a method that is a more fine-grained test than media types, testing a single, specific feature of the user agent or display device. For targeting a text browsers you can ty with a combination with the grid plus monochrome feature.

ORIGINAL ANSWER:

As Paul stated, you should use the media queries to let the browsers select the css that suits better for the device/browser. For text browser, such as lynx and links, you should use the following media query:

tty

that is the format suited for media using a fixed-pitch character grid.

To target CSS rules you can import the css files with <link> tag specifing the media like this:

<link rel='stylesheet' media='tty' href='lynx.css' />

or by defining the media inside a css file using the following syntax :

@media tty {
    my-lynx-css-rule {
        ...
    }
}

for a detailed description of the available media queries, please check the following page: http://cssmediaqueries.com/what-are-css-media-queries.html