About the Author

Chris Shiflett

Chris Shiflett is an author and speaker who leads the web application security practice at OmniTI.


My First CSS Naked Day

I'm a bit late for CSS Naked Day, but since I finally have a blog that respects web standards, strives for accessibility, and produces logically-ordered markup, I decided to give it a go.

What is CSS Naked Day?

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good 'ol play on words. It's time to show off your <body>.

So, for the rest of the day, this site will be naked (sans CSS).

About This Post

My First CSS Naked Day was posted on Thu, 05 Apr 2007 at 17:24:57 GMT.

20 Comments

1. Jacob Santos's GravatarJacob Santos said:

Hmm, naked sounds good, but where is the design? Rather like the old site as it wasn't laid out (pun intended) for a printer or such as a site whose style mistress ran away with the money.

Thu, 05 Apr 2007 at 17:58:42 GMT Link


2. Jacob Santos's GravatarJacob Santos said:

Hmm, okay, ignore last comment, I've checked your source and it appears you have something against Firefox as your stylesheet only supports IE, ie any other browser would appear as if a college student wrote it.

Thu, 05 Apr 2007 at 18:01:01 GMT Link


3. Jacob Santos's GravatarJacob Santos said:

Okay, from my understanding lte is the same as <= 6, which would mean that any browser less than or equal to IE 6 would get the style sheet information.

Shouldn't it had been gte IE 6]?

When will you have support for the Firefox browser?

Thu, 05 Apr 2007 at 18:05:43 GMT Link


4. Jordi Adame's GravatarJordi Adame said:

I don't really see the point in this CSS Naked thing, specially when nowadays you can even have Opera running in your phone. :S

My guess is that in about 2 years, all cell phones will be packed with a decent web browser, perhaps <a href=http://www.mozilla.org/projects/minimo/>minimo (?)</a>

Cheers

Thu, 05 Apr 2007 at 18:21:33 GMT Link


5. Chris Shiflett's GravatarChris Shiflett said:

Hi Jacob,

I'm sorry, but I don't follow you at all. Can you explain how you equate CSS Naked Day with having something against Firefox?

Thu, 05 Apr 2007 at 18:25:47 GMT Link


6. Aaron Forgue's GravatarAaron Forgue said:

Bravo!

Thu, 05 Apr 2007 at 18:48:01 GMT Link


7. Will Oller's GravatarWill Oller said:

It appears Mr. Santos is mistaken; the line in the source:

<!--[if lte IE 6]> ... etc

is only hiding one of two style blocks.

The second block is further down, past the comment:

<!--
  CSS Naked Day!
  <style type="text/css" media="screen">@import "/css/default.css";</style>
  <link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
  -->
</head>

So it appears that under normal (non-naked) circumstances, there is a perfectly good stylesheet available for Firefox and other non-IE browsers. The IE-specific block is just a min-width(?) hack.

willoller.com

Thu, 05 Apr 2007 at 19:58:08 GMT Link


8. Mike's GravatarMike said:

I think Jacob doesn't understand that you've removed all css for just today - his posts indicate that he thinks you've permanently changed your style to this no-css version. When he viewed the source he saw your conditional comments for IE and assume that you've only designed something for IE, hence, no css for firefox.

Thu, 05 Apr 2007 at 20:01:10 GMT Link


9. Chris Shiflett's GravatarChris Shiflett said:

Thanks, Will and Mike.

Jon explains the conditional comment on the about page:

Although the CSS validates, the single exception is an IE6-specific conditional comment, included separately to work around non-existent support for the max-width property, a fairly important property in a semi-fluid layout.

Thu, 05 Apr 2007 at 20:22:46 GMT Link


10. chris D's Gravatarchris D said:

Not sure your use of the EM tag for the name of this blog post (just under About This Post) or for comment-makers names is the apropriate use of that tag, sematically speaking.

Thu, 05 Apr 2007 at 20:30:35 GMT Link


11. funkatron's Gravatarfunkatron said:

People are very, very confused by this, Chris. 8D

Thu, 05 Apr 2007 at 21:02:25 GMT Link


12. Nathan Wright's GravatarNathan Wright said:

chris D: I personally think the EM in About This Post is appropriate, but you may want to take a second look at the comment code. The EM wraps the image and not the poster's name. It's a CITE tag that wraps the name, which seems appropriate. But why an image should have emphasis escapes me :)

All in all, this site design remains impressive even whilst naked.

Thu, 05 Apr 2007 at 21:21:57 GMT Link


13. Travis Swicegood's GravatarTravis Swicegood said:

Cool idea... Just stripped the CSS from my site too.

Thu, 05 Apr 2007 at 21:37:54 GMT Link


14. Jon Tan's GravatarJon Tan said:

Fantastic Chris! Love that you've participated. Quite right about the conditional comment too. I have other thoughts prompted by naked day which I'll send to you separately.

Jordi: One point is that if the site works without style then will almost certainly be accessible. Another is it's a chance for pedants to show off their structure - or find ways to improve it! :)

Chris D: Nathan's right:

It's a CITE tag that wraps the name

Default browser styling for cite is italics.

Nathan: Thanks! You have a point about the em around the gravatar. It's a slight stylistic hook but it does have some potential side benefits: 1. Screen readers will emphasise the images alt attribute value so if ever Gravatars are passed with descriptive alt attribute values (I can hope) then it will be further defined. Also, the em is a parent of the link so the title attribute value is also further defined.

Thu, 05 Apr 2007 at 22:19:10 GMT Link


15. Jacob Santos's GravatarJacob Santos said:

Okay. I thought the concept was not to use any inline style, not stripping out all style sheets. It is in fact very confusing and I feel for those who have to see this site in this way.

Accessibility is good to test for, not too many sites do so.

It does make me rethink the way design should be done for those who can't see, can't hear, to understand the context of the site the way it would be for those who can see and hear in cases.

I've looked at ways to handle printing, which is easy to test. Not so easy is looking at the perspective of those who can't see and use audio aids.

Thu, 05 Apr 2007 at 23:59:30 GMT Link


16. Chris Shiflett's GravatarChris Shiflett said:

Thanks everyone for the detailed critique. This is what Naked CSS Day is all about!

Jon, I made the changes you identified via private email. I'm sure there are other improvements that need to be made, but I'm happy to have such a solid foundation from which to grow. :-)

Fri, 06 Apr 2007 at 03:41:18 GMT Link


17. jay's Gravatarjay said:

i can see your site's naked <body> anytime i want with "Disable All Styles" in the Firefox Web Development toolbar, Chris :p

no seriously, css naked day is a great initiative, glad you support it.

keep up the good work!

Fri, 06 Apr 2007 at 06:28:35 GMT Link


18. Christian Wenz's GravatarChristian Wenz said:

today is the day ... :-)

Wed, 09 Apr 2008 at 14:25:45 GMT Link


19. Chris Shiflett's GravatarChris Shiflett said:

Thanks for the reminder, Christian. My CSS is now gone. :-)

Wed, 09 Apr 2008 at 14:37:55 GMT Link


20. Christian Wenz's GravatarChristian Wenz said:

wow -- that was quick!

See you next month!

Wed, 09 Apr 2008 at 16:11:48 GMT Link


Post A Comment

Personal Details and Comment

Style Guide

Line breaks are converted to paragraphs. Also use:

  • <a href="" title="">text</a>1
  • <em>text</em>
  • <blockquote><p>text</p></blockquote>
  • <code>2  <?php  if ($foo) {      $foo = TRUE;  }  ?></code>
  1. Note: <code> can be used inline (e.g. in paragraphs) or in a block as shown. Include whitespace and newlines in blocks.

Please enter Chris (my first name) below. This is a primitive spam prevention technique, and I apologize for the inconvenience.

Preview and Submit

Upcoming Talks

php|tek

21 - 23 May 2008

At Sheraton Gateway Suites Chicago O'Hare, Chicago, Illinois.

DC PHP Conference

02 - 04 Jun 2008

At Cafritz Conference Center, Washington, District of Columbia.

O'Reilly Open Source Convention

21 - 25 Jul 2008

At Oregon Convention Center, Portland, Oregon.

ZendCon

15 - 18 Sep 2008

In Santa Clara, California.

PHP Appalachia

11 - 14 Oct 2008

At Big Bear Lodge, Gatlinburg, Tennessee.

New Comments

Joseph Crawford wrote:

404 not found :( What's with this OpenID thing, you know how long it took me to figure out I h...

Posted in Zend Framework Tutorial
Laurent Cottereau wrote:

I am very interested in the possibilities of this service. However, I am wondering about what is ...

Posted in OpenID with myVidoop
Zac wrote:

Awesome code! Thanks!

Posted in Convert Smart Quotes with PHP
Muttley wrote:

Thanks for this, Shiffers. I've been working on a similar thing, using a similar method, so it's ...

Posted in Allowing HTML and Preventing XSS
hossein wrote:

Hi! May you give me an example how to use mcrypt_encrypt() in order to save passwrod in databa...

Posted in OpenID with myVidoop

Browse Comments