Thursday, Feb 09th

Last update:01:44:47 PM GMT

You are here: Web Development Overview The Power and Peril of Cascading Style Sheets

The Power and Peril of Cascading Style Sheets

E-mail Print PDF

Power CSSYou've heard that the plumber's house leaks right? Well, let's say there was this guy I know, yeah that's it; not me, mind you, but this guy I know really well, we went to high school together. This guy does things that you or I would never do. Things like editing live webpages onscreen rather than testing them first and then uploading the finished, working product.

One of the most welcome developments in web editing for hypertext markup language (or HTML) has been the move to separate content from presentation. This is valuable because the specs for projecting to a 30' screen for a large audience are different enough from the specs for presenting the same webpage on a 17" monitor, that one size just doesn't fit all.

Erik Meyer[1] is one of the web geniuses who has helped the web to "grow up" in the way information (content) is rendered or presented in multiple formats. These different formats are accomplished through collecting all the formatting codes that used to be repeated throughout your website into one place, a document called a style sheet. A key reason this is valuable is because your pages will load faster. Delays in rendering pages (because the code is not 'clean' or 'efficient') are directly traceable to lost sales.[2]

The Cascading Style Sheets (CSS) specification at the World Wide Web Consortium (w3.org) has defined lots of different ways to present web content. This article is about how to recover from errors, if someone you know made a big mistake in updating a style sheet, or in other words, a CSS file. The power of CSS is that it can make you look really good with less work and gives you many formatting capabilities that just weren't available even three or four years ago. The peril of CSS is that if you mess up your style sheet it can make all the pages on your site look real bad all...at...the...same...time!

So to pull our friend out of a pinch, we'll use the document compare feature of MS Word to find out what's changed from when the CSS file was working to when it got messed up. CSS files are straight text with no formatting of their own, so you would just "Select All" (whether that's on-screen in your browser or from your text editor) and paste this text into a new, blank MS Word doc. Name them differently, such as CSS-good and CSS-bad and save them as separate files. Pick the older file, the backup copy of the CSS before you made the changes and open it in MS Word. (Backups and versioning or version control are topics well-deserving of their own articles.) Under Tools - Compare and Merge Documents, when you pick the Compare and Merge, you'll see a dialog box opens up for you to pick the second file (the one you're comparing with the first, in our case, CSS-bad); notice the little down-pointing arrow to the right of the Merge button in the lower right hand corner of the file selector dialog box. Click on the arrow and choose New Document to capture the changes between the two in this new document without affecting either one.

Save this with a related file name like CSS-changes and print a hardcopy. Ignore the 'green extreme' that says you never need to print. When you need to do fine-tooth-comb review such as this, you need to be able to flip back and forth between pages, to write your own notes next to the file text and generally take your time digesting the changes, so you can discover where "Two roads diverged in a wood, and I - I took the one less traveled by, And that has made all the difference." [3]

Notes:

1. Eric Meyer's Meyerweb
2. Stoyan Stefanov, The performance business pitch
3. Robert Frost, The Road Not Taken, last stanza

The Systems Thinking Institute, systemkey.net, is a web-enabled, values-driven innovation forum advancing the practice of layering human intuition onto the architecture of science and technology. Our mission is to enhance how people understand, learn and collaborate from a systems thinking perspective. For an overview, visit http://systemkey.info and pick the brief corresponding to your desired level of detail.

All of our tools, from the Systemkey™ SEMI-tool, to Elegant eMail™ to our process improvement and capacity building workshops are just elements to "create conversations" that are the real work of creating innovative, resilient organizations. As an engineer, I think engineers are uniquely ill-equipped to build trust when they're functioning all day long in a world of black and white data. Yet if you will take that same skilled engineer and empower, or equip them with some knowledge of human relationships and an understanding of the business model they're in, then they can virtually move mountains because they have the "street cred" with the tech guys and can build it with the others.

There's a bit of my perspective and like Mike Huckabee says on his show, I'm interested in yours. Follow me on twitter.com/systhink to join the conversation. Article Source:  EzineArticles