Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at BFusion / BFLEX 2009 (Bloomington, Indiana) with: Andy Matthews and Steve Withington and Rob Huddleston

The CTRL+SHIFT+S Test For Proper Page Architecture

By Ben Nadel on
Tags: HTML / CSS, Work

As of late, I have been really getting into trying to develop with tight CSS and web standards compliance. The other day, one of my co-workers, David Stamm (aka The Secret Weapon), told me that in FireFox's web developer plugin, the key stroke CTRL+SHIFT+S will turn on and off all style sheets in the current page. Using this during development has almost become an addiction - I'm constantly checking to see if my sites look Good without style (the new sites, not the existing ones that are already without hope). Going forward, and this may seem silly, but I am going to make it a priority to have all my client sites look good (degrade elegantly) without style sheets.

Please don't look at my site, www.bennadel.com, without style sheets :) It's lame. It will be redesigned one day with some better code.



Reader Comments

Oh yes - how did we ever do web development before Firefox and the web developer toolbar? :)

If you haven't checked out jQuery yet - I'd give it a peek. I just picked up the recently released book and it's really making me re-think how I implement CSS.

Reply to this Comment

@Jim,

Most definitely. Web Developer toolbar AND FireBug! I've barely scatched the surface of the FireBug functionality and already I can't live without it.

I love jQuery :D It's making me rethink how I do all my Javascript. It's funny that after like 8 years of web development, it's now that I am really going back and re-examining some of the most basic things like CSS and page structure.

Reply to this Comment

The other one I use quite a bit is CTRL+SHIFT+A - it'll send the page you are working on to the W3C validator...

Reply to this Comment

Oh snap! I feel like between Web Developer and FireBug, I just need to sit down and read the manual (so to speak). I am certainly not leveraging these things as well as I could be.

Reply to this Comment

Hi Ben,

A very cool showoff the capabilities of css is www.csszengarden.com

This is the site that convinced me that css is the way and the site I show to my developer-friends.

- Mikkel

Reply to this Comment

@Mikkel,

CSS Zen Garden is the perfect! example of how a site should look when it degrades without CSS. It's so freakin' clean and readable. Good tie-in to the conversation. Thanks.

Reply to this Comment

A little bit of thread necromancy - sorry about that. I just can't resist though, after you said you're doing all your CSS development with Ctrl+Shift+S...

Try this: Ctrl+Shift+E. It'll pop up a sidebar that shows your your CSS. Even better: you can edit it and see the changes on the fly. Don't like that border/color/etc? Just change it... no need to refresh the page at all! Then just save it over the existing style sheet once you're happy.

Reply to this Comment

@Adam,

That's pretty cool! I just tried it. The only problem seems to be that it cannot keep the background image URLs properly calculated. For instance, my background URLs are like:

"../../images/logo.gif"

Because my CSS files are two levels deep. However, in the CTRL+SHIFT+E, I have to take out the ../../ cause it looks like the background images are relative to the page, not to the CSS file. But, cool, nonetheless.

Reply to this Comment

If you use a full qualified path ("http://..."), it will work. That's only an option sometimes, I realize, but better than nothing.

Reply to this Comment

You can use domain relative paths to images in your css (/images/bg.jpg) rather than full http:// paths and it will also work correctly.

Reply to this Comment

This is the first i heard of this, so i checked it out. Good idea. I don't see anything wrong with relying on style sheets, but i can see why you are interested in doing what you can with the minimum amount of interfering code as possible.

It will probably make it easier in the future when going back to edit everything so that you know where everything is at without so much code to look through.

-jared bartholomew

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.