Blogs about css from Pew Pew Laser Blog

Quick And Easy CSS Targeting.

I have been a staunch staunch supporter of conditional comments as the best way to send different CSS to different versions of Internet Explorer. I found that the other options - selector-based CSS rules - were just too hack-y. I was going to have to see a very persuasive technique for me to consider it.

Here it is:

#myelement { color: #999; /* shows in all browsers */ *color: #999; /* notice the * for IE7 and below */ _color: #999; /* notice the _ for IE6 and below */ }

The above code is lifted directly from http://briancray.com/2009/04/16/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/.

These are still hacks, so there's always the possibility that the browser vendor could fix the bug that these hacks exploit, or that a new browser will react oddly to this code. For a short term site or a quick and dirty build, I might be willing to take that chance.

I think I'll stick with conditional comments for my larger endeavors. I'm willing to subject the IE6/7 users to the hit of an extra HTTP request.

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.