Hiding content from non-CSS

Hiding content with CSS when support is off

[alexr86]

Is it possible to use CSS to instead of hiding content from CSS viewers with display:none; or visibility:hidden; to do the reverse? I want to hide content from browsers that do not interpret style sheets like Lynx. Thanks.

-Alex

[aevea]

I don't really understand your question...

If Lynx doesn't interpret stylsheets, then it doesn't see the css. If you mean showing things only to css2+ browsers, you can do it with the content property together with the ::before and ::after pseudo-elements. The only problem is that ie6 and many others besides lynx won't get the info.

[w3.org...]

Adam

[tedster]

Welcome to the boards.

Well, the answer for the exact way you worded the question -- if you can use CSS to do a job when the browser doesn't interperet CSS -- is no. You can do a browser sniff, server side or javascript and use the sniffer results to serve alternate content.

This might get pretty complex, depending on how thorough you want to be. If it's just Lynx you are concerned with, it's relatively simple.

But you still might have trouble, for instance, if the browser is set to override your stylesheet with the owner's.

[mep00]

Scripting it the most reliable approach.

For a pure CSS approach you could use generated content, and browsers like IE6, which aren't standards compliant, wouldn't be able to display it. However, I'm guessing that you don't want quite so strict an interpretation of "do not interpret style sheets."

One other possiblity is to set the color and the background-color the same, and then override it with CSS. Depening on how you do it you could run into validation problems, and some SE's might see it as spamming, but it should work in most cases. I'm not sure how Lynx, an aural browser, or a brail browser would handle it, though.

[DrOliver]

I want to hide content from browsers that do not interpret style sheets like Lynx.

I could not come up with a situation I would want to do this. Interesting… Maybe you could tell what you want to achieve or why. We'll then maybe find another way.

I'm with those who say it ain't possible to use CSS only in this case (at least as long as generated content is not widely supported).

I am sure you do need some scripting. But then you're hiding this part of your content also from all those who use a non-Javascript-browser or who have Javascript disabled.

Well maybe you could use a *cough* table *cough* with a background image, set the size to 1 px so that the table (and its background image) won't be shown (or only 1px tall), give it an id attribute, then override the sizes within your CSS. Ouch. What a hack. I'd use this only if the text is relatively short, so you can give the table a summary-attribute to make the text available to screen readers, for example.

What Lynx will do with this I don't know. Does Lynx interpret tables or does it not? If there is absolutely no text within the table but only a background-image is set, then you should be fine.

Somewhere in your HTML:

<table id="hide" width="1" border="0" cellpadding="0" cellspacing="0" [b]summary="your text goes here"[/b] background="/images/picture-with-your.text.gif">
<tr><td width="1" height="1" background="/images/picture-with-your.text.gif"><td><tr>
<table>

This won't validate, though. There might no consistency in behaviours of browsers. Mostly should not show anything, but this is a guessing.

In your CSS:

table#hide, table#hide td{width:300px;height:400px;} /* The exaxt size of your image with the text in it */

I did not test this. Maybe you want to give it a try?

[mep00]

with a background image

This won't work if the browser isn't displaying images, while background color might.

Another possibility is to set the font size very small and resize it with CSS.

Server side scripting is probibly the best solution. Besides browser sniffing, an easier solution might be to see if the browser supports the mime type for CSS.

[TheDoctor]

set the font size very small

Not much good with Lynx, since it shows all text at the same size. Lynx reads tables, but, being text mode, it doesn't lay them out.

I think the only way to hide text from Lynx is to use frames. Whether this helps I can't say, since you don't tell us why you want to hide stuff.

[alexr86]

I'll explain what I want to do.

I use CSS to make a pull-quote in a long article of text. But when you disable style sheets, the quote looks out of place. While it's not terrible and I can deal with it, I want it to be that all <p>'s that have class="pullquote" to disappear when CSS isn't supported (ie. in Lynx or JAWS or anything like that.)

Thanks for the help so far.

-Alex

[TheDoctor]

How about going at the problem from the opposite direction: surround the pullquote with something that explains what it is, and use CSS to hide the explanation. You have to work on the text of the explanation, but you should be able to come up with a meaningful wording.

If someone uses a non-CSS browser, they'll see the explanation, but a CSS user won't. Both, of course, will see the pullquote.