The CTRL+SHIFT+S Test For Proper Page Architecture
Posted July 24, 2007 at 9:16 AM by Ben Nadel
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.
@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.
Handy tip Ben, thanks!
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...
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.
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
@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.
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.
@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.
If you use a full qualified path ("http://..."), it will work. That's only an option sometimes, I realize, but better than nothing.
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.
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
thanxs for the post
