Huh, where are the styles?

March 31st, 2007 · Filed under Archives

In my previous article I spoke about reasons why it’s better to use web standards when designing websites instead of tables.

Simonne Mathew found my blog through BegforPost, where bloggers can shamelessly beg for a review of their site. He decided to review my blog. In this review, it were these words that impressed me:

Rehuel explains the advantages of using CSS instead of tables in web programming. If I still had a shadow of doubt regarding this CSS stuff (which requires, at least from my side, a lot of study), now I am convinced it is worth the pain of doing it.

Also read his comments on the previous post.

This positive response to my writings made me decide to write a little more on the CSS subject. If you didn’t read my previous post, please do so now, so you have a better understanding of what we’re talking about.

Look ma, no styles
Let’s look at my blog again without styles. Go ahead, turn off the styles in your browser. Those of you who read From Tabled to Tableless design before I wrote this article will notice that there is a part that was not there yesterday. And look, this text is nowhere to be found on the original site.

Why?
Let’s first look at the “why” question. If for some reason people will view your site without styles, it’s good to let them know that this is not what the site is really supposed to look like. They see this, because either their browser styles are disabled, or they view it through a browser that does not know how to process stylesheets (or it does a very bad job in processing them). If it’s the latter, give them an alternative to be able to see the site the way it is supposed to be viewed: offer them to install a browser of which you are certain that it adheres to web standards.

Now you don’t see me, now you do
Right click somewhere in this window and select “View page source” or something similar. This will open a new window (or tab in your browser) with the pure HTML code that was received from the web server. Right beneath the <body> tag, you see the following code:
<div id="nocss">
<p><a href="#content">Skip To Content</a></p>
<p>You are veiwing this either because the browser did not load the stylesheet, your browser does not support web standards as it should, or you chose to disable stylesheets.</p>
<p>Rehu&euml;l recommends
<script type="text/javascript"><!--
google_ad_client = "pub-3385129733653814";
google_ad_output = "textlink";
google_ad_format = "ref_text";
google_cpa_choice = "CAAQzcLH7QEaCD_4BVTjvVryKLGsuIEB";
google_ad_channel = "3411989245";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>! It's a great standards-compliant, open-source, free browser.</p>
<p>Alternatively, you might want to consider upgrading your browser.</p>
<hr />
</div>
The first line defines a layer with id “nocss”. Later you will use this id to style this particular layer.
The second line makes a link to the content of the page. Actually, when you click this link, you will be brought to the tag with id “content”, which is usually where the real content of the page starts. On my blog, the content starts virtually right away, so there is not too much scrolling needed to view the content. But if you were to look at Darren Rowse’s Problogger blog without styles, you would need to scroll a long way down to reach the content you actually wanted to read. In this case, such a link to the content would be really advisable.
From the third line onward to the </div> closing tag for the layer, I defined the “you are viewing the site without styles” message. Within that part I added a referral link to download Firefox with Google bar. Right before the closing tag of the layer, I added a horizontal line (rule) by adding the <hr /> tag.

In my CSS stylesheet I added 1 line to style the tag with the “nocss” id:
#nocss { display: none; }
So when the styles are turned on, this style definition just tells the browser NOT to display anything between the tag with this id and it’s closing tag. This is why you don’t see this message when browsing my blog normally. But when the styles are turned off, there is no definition for this style, so the browser will display everything unstyled. You then see my message.

I want that too!
It’s very easy to have this on your own site. Just copy mine and put it your own HTML. But do it in this order, so visitors won’t even notice that you’re changing things around a bit:

  1. Copy this: #nocss { display: none; } and paste it all the way at the bottom of your stylesheet.
  2. Copy the first code mentioned and paste it right beneath your <body> tag. This tag can usually be found in the header file.
  3. Change the message to reflect your own thought. If you want to you can leave my referrer number in the “Firefox with Google bar” link, but it’s ok to change it to your own. If you don’t have a referrer code yet,
  4. Check out your site without styles!

Wordpress users:
Your main stylesheet can be found by going to Presentation -> Theme Editor in you Admin section, and then clicking on Main Stylesheet or something similar.
The <body> tag can be found in the same Theme Editor but by selecting Header.

Other users:
The stylesheet is usually named style.css or some other name, ending with .css. To find you’re <body> tag you will need to look for it somewhere where the head of the HTML page is defined. If you’re not sure, and you don’t want to risk messing up your blog, contact me or any other web design expert for advise.

Final thought
Now that we know that there are browsers that display websites without styles, it’s good to let people know that the site actually looks different with styles and that they are not viewing the site as it’s supposed to look. Offering them a chance to download a browser that IS standard compliant is always good, especially for those who don’t know better than to browse the Internet with Internet Explorer 4.

If you don’t think it is necessary to display this message, at least give people a link straight to the content, so they have less scrolling to do.


Previous Post: From Tabled to Tableless design »
Next Post: Make your own healthy pepper sauce »

Trackback URL for this post:
http://rehuel.com/2007/03/31/huh-where-are-the-styles/trackback/

Related Reading:

  • Hi, thank you for mentioning me. This is a great trick you just showed us. I did not know it was possible. Besides, it is a smart way of promoting Google referrals.
blog comments powered by Disqus