Skip to main content
Ben Nadel at InVision In Real Life (IRL) 2018 (Hollywood, CA) with: Gabriel Zeck
Ben Nadel at InVision In Real Life (IRL) 2018 (Hollywood, CA) with: Gabriel Zeck ( @GabeZeck )

The CTRL+SHIFT+S Test For Proper Page Architecture

By on
Tags: ,

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

57 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.

15,640 Comments

@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.

57 Comments

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...

15,640 Comments

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.

2 Comments

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

15,640 Comments

@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.

11 Comments

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.

15,640 Comments

@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.

11 Comments

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

1 Comments

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.

1 Comments

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

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel