About the Author

Chris Shiflett

Hi, I'm Chris, a web developer and a founding member of Analog. I live and work in Brooklyn, NY.

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

ConFoo

10 - 12 Mar 2010

At Hilton Montréal Bonaventure, Montréal, Canada.

South by Southwest

12 - 16 Mar 2010

At Austin Convention Center, Austin, Texas.

Dutch PHP Conference

10 - 12 Jun 2010

At TBD, Amsterdam, Netherlands.

O'Reilly Open Source Convention

19 - 23 Jul 2010

At Oregon Convention Center, Portland, Oregon.

New Comments

Niall Kelly wrote:

Having tried other methods without success and looked through plenty of bloated documentation, th...

Posted in Git on Snow Leopard
liukang wrote:

I have problem with this example. In my php.ini magic_quotes_gpc is off so i'm using only addsla...

Posted in addslashes() Versus mysql_real_escape_string()
RyanTheGreat wrote:

Well, I'm not Chris, but I will do my best to address the questions raised in the comments by Ian...

Posted in Security Corner: Cross-Site Request Forgeries
Chris Shiflett wrote:

Thanks for the kind words, Simon. I'm glad you liked the tutorial. In case it's helpful, here'...

Posted in Webstock
Chris Shiflett wrote:

Hi Robin, I plan to post something about it, but it's going to be hard to express everything i...

Posted in Webstock

Browse Comments

Work and Books

Analog Essential PHP Security HTTP Developer's Handbook