ansaurus

Question

How does one hide content from a user until a stylesheet is loaded and executed?

Answer 1

A:

Accessibility-wise, you should not assume your stylesheets are actually being used by the client. Your content should be accessible without the stylesheet, and stylesheet should only enhance the presentation - that's Progressive Enhancement.

If accessibility matters less, you can hide the entire page (or at least the brouhaha) with display: none in the wrapper div or body.

MaxVT 2010-06-28 09:51:27

Heyo Max! Thanks for the article on Progressive Enhancement. For now I'm going with display:hidden but I'll make it a near-future project to degrade gracefully with some cold Soviet cybernetics style text based website. You answered my question with display: none.

Emile 2010-06-28 10:29:07

Answer 2

A:

It's very easy to hide content that's going to be processed by JavaScript. You just need to generate the content itself with JavaScript or set its style to display: none.

The problems is accessibility. You normally want the content to be available for tools that do not support all the advanced features, including old browsers, search engines, mobiles phones, screen readers... That's what prevents you from doing what I mentioned in the first paragraph.

My advice is to alter your CSS so the content looks good even with JavaScript disabled.

(As for your latest requirement, you can use the jQuery.ipanema-girl.js plugin.)

Álvaro G. Vicario 2010-06-28 09:55:18

Dude! I got RickRoll'd! Alvaro, great advice! Turns out that "display:hidden" isn't a thing. Either "display:none" or "visibility:hidden." But for all the other good advice I would of totally voted you up one if I had 15 reputation pts. F! Who doesn't have 15 reputation points?!!

Emile 2010-06-28 10:31:23

I fixed the CSS, thanks for pointing it out. And welcome to Stack Overflow. You get 15pt easily if you just come back ;-)

Álvaro G. Vicario 2010-06-28 10:42:37

Answer 3

+2 A:

You can have the stylesheet hide specific elements as display: none until they are needed.

However, if you do this directly in the stylesheet you've got accessibility problems, as on a browser without JavaScript available the content will not appear at all. A way around this is to key the hiddenness on a variable that is set from JavaScript before any of the deferrable elements are loaded, for example as a class on <body>:

<head>
    <style type="text/css">
        body.withjs .deferred { display: none; }
    </style>
</head>
<body>
    <script type="text/javascript">
        $('body').addClass('withjs');

        $(document).ready(function() {
            // set up slideyness
        });
    </script>

    <p>Content that loads normally...</p>

    <div id="slideything" class="deferred">
        content
    </div>
</body>

bobince 2010-06-28 09:57:25

Hello! This looks like the best of both worlds! But, it sent me back into my old problem: having a bunch of layers of content on top of each other. I don't know why. I copied your code almost exactly. Does the inline code load different way than as is presented in the document?

Emile 2010-06-28 10:48:38

Can you put an example up (eg. pastebin et al)? Anything with class `deferred` should not be displayed at all on JS-enabled browsers; you can then set up the positioning and hidden/shownness of the deferred elements at document ready time. If you are just testing this on your local filesystem, be aware that IE turns JavaScript off by default.

bobince 2010-06-28 11:04:37

perfect! got it to work. thanks bobince! for your have-your-cake-and-eat-it-too solution.

Emile 2010-06-28 20:13:42

ansaurus

tags:

views:

answers:

How does one hide content from a user until a stylesheet is loaded and executed?

related questions