Blogs about css from Pew Pew Laser Blog

Fantastic Tabs.

This X/HTML and CSS technique differentiates the current page or section from others in a navigation bar, using a single stylesheet and without requiring any server side code. In the iframe below, "Home", "About" and "Contact" are different pages, each sharing the same CSS file. Click the different tabs and note that the current tab remains highlighted during navigation.

Read more about it in my article here.

Pixels versus Ems.

In CSS, pixels are an easy-to-understand unit of measurement. A pixel is the smallest possible display unit on an electronic device. The most common computer screens are 1280 pixels wide, and 1024 pixels high. Both the iPhone and Pre have a 480 by 320 pixel screen. Pixels are best used when precise positioning of elements is required - such as with images.

Let's take a moment to consider the full implications of a common practice: using pixels to specify text size on a web page. As manufacturers continue to develop monitors with more pixels, the physical screen dimensions tend to stay the same. Therefore, it appears that pixels (or font sizes declared in pixels) are getting smaller, and more difficult to read.

EMs are a little trickier to grok. Ems are relative to the current text size. To quote Robert Bringhurst:

The em is a sliding measure. One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.

Ems are best when specifying text size and spacing where you want the user to have the ability to read your content with the text size that's best for them. Font sizes specified with ems will respect operating system or browser changes to default font size that the user has made.

You should avoid using ems when slight variances in size would cause layout problems - such as if a floated item were bumped out of place. Small text size differences may exist even between two computers with the exact same browser and operating system.

Print Style Sheets.

Today, I'll talk about creating tweaking the way that your website will print using print style sheets.

Let's start with the standard disclaimer that electronic screens and paper are different, and that perfect screen to print matching is nigh impossible. The immutable inherent differences between screens and paper: dynamic and interactive abilities, color gamut, author and browser control conspire against perfect matching.

Now on to the good stuff. Here are a couple tips for developing a print style sheet.

• Consider how a visitor would use a printed version of your web page. It's probably best to hide elements will never be useful in the printed version - such as on-line-call sign-up forms or Flash movies. Better yet, use the print style-sheet to replace them with versions suitable for offline use - such a phone number to call for more information, or a textual transcript of the movie. (You should probably have these elements present on the page anyway for SEO.)
• If you have elements that need to appear only in the print version, simply include them in the HTML along with all the regular elements, and hide them in the screen style sheet.
• Any JavaScript (including libraries like jQuery) will override the screen style sheet. You can override these JavaScript style declarations by adding !important to the print style sheet's declaration.

Webmonkey is Back.

Webmonkey is back. And it's in wiki-form. Webmonkey was the gold standard site for web site makers back in the late 90s and early 00s. A few years laster, Webmonkey was bought, and as the bubble burst, it's content became dusty and decrepit. It had a short rebirth, then died again. But now Wired's got Webmonkey back, and there seems to be a great commitment keep it new, and try to bring it back as a forerunner of web tech news and how-tos. I'm very exited. Welcome back, my old friend.

Firefox Extensions for Developers.

Firefox is my number one tool for web development. I could live without Dreamweaver, but not Firefox. In fact, syntax coloring in the source code viewer is the original reason I started using Firefox a few years ago. Once I discovered all of the marvelous add-ons and tab-based browsing, I switched from IE permanently. Here are many of the add-ons that I use for web development.

• There's the Web Developer toolbar, and Firebug of course. But you already know about those, don't you?
• View Source Chart is one of the most undervalued add-ons out there. Not only are the collapsible code blocks indispensable for figuring out what's going on with foreign code, but the Source Chart will show you the results of any JavaScript executing on the page. That's right - you get the source code; post JavaScript render.
• FireFTP - a fully capable FTP client, which can store settings for multiple. What more do you need?
• JS View gives you a list of all the external CSS and JavaScript files that are pulled in by a web page. This is a very effective tool for inspecting code, or figuring out what resources your pages actually rely on.
• Live HTTP Headers displays header information for webpages. That's the sneaky, secret webpage stuff like redirects, form submission info or status codes like 200 OK.
• YSlow will analyze webpages and recommend speed improvements. It requires Firebug, but all you developers have that installed, right?