Scarf*oo

Now that IE6 is practically dead and gone, we can embrace the power that comes with CSS 2.1 selectors. Hurray! Forgotten CSS selectors | 456 Berea Street.

If you haven’t decided to drop IE6 support, this might be the right time to do it. The article CSS Differences in Internet Explorer 6, 7 and 8 over at Smashing Magazine is a great reference to CSS differences between various IE versions when handling advanced CSS rules. Looks like versions 7 and up already support the vast majority of rules you throw at them, so if you want to take advantage of advanced CSS selectors to ease styles development, go on, I don’t believe many will be hurt in the process.

Let’s face it, navigating and maintaining large CSS files is no fun. As long as the site is small or if you happen to be in the early stages of development, the CSS file looks manageable, but once you hit the 2k+ line mark, finding what you are looking for can take a while. Not to mention how your team is going to pollute your style.css if the file structure is overly complicated.
(more…)

Too bad that there are still many clients running and demanding your product to run on IE6. At least in my case, 80% of the clients are of the aforementioned sort and I am in no position to change that. It’s a sad sad thing really.

Someone should really write a conditionally included universal CSS file to handle IE6 bugs and just be off with it. On the other hand, there are other approaches such as providing a universal readable and pleasant style just for IE6 users and hoping the clients will be happy with it.

Check the proposed style in question at Universal Internet Explorer 6 CSS | For A Beautiful Web.

An interesting short article on the pitfalls of using CSS to hide page elements: Hiding with CSS: Problems and solutions | 456 Berea Street.

Personally, for elements where accessibility matters, like navigation menus, etc. I prefer hiding those elements with a short javascript statement I put right after the element I want to hide. This way the user does not notice the element getting closed and best of all, it remains accessible to all.

If you are into em-based layouts, you probably want more precision when translating your photoshop designs into pixel-perfect HTML and CSS creations. Simply setting the font-size in your body element to 62.5%, will make sure that from now on, you can rely on the rule of 1em = 10 pixels.

body {
	font-size: 62.5%; /* 1em = 10px */
}

Note: Careful if you modify the font-size on a container element – that will break the 10px rule on all the contained elements!

This one’s got my heart pumping again – and it hasn’t happened in a while, mind you. I am talking about Mr. Jason Santa Maria and his latest article titled Making Modular Layout Systems over at 24ways.org.

The method is simple: write a bunch of well-thought classes, chain them together and you get a robust and versatile grid layout. A recommended read!

This issue is all about the standards we love (or hate). Molly E. Holzschlag tells us how the standards movement is splitting and going separate ways and opens a can-o-worms for us to discuss upon. The second article written by Scott Jehl is all about testing the target browser capabilities before delivering specific enhancements to the web. An interesting read, although who will bother implementing it is a completely different story.

WebKit, the development version of Apple’s Safari web browser now supports another advanced CSS feature, which keeps blowing it way ahead of the competition…

Competition?

For more info on the subject, visit Surfin’ Safari Blog.

There are tutorials and there are Tutorials coming from great web authors like Cameron Moll. The Highly Extensible CSS interface is a great collection of resources divided into four distinct parts, which guide you into creating a neat and sophisticated web page. Each part provides you with a working online demo, downloadable files, and links to articles and books related to each step of the tutorial.

• Part one builds a resolution-dependent page layout and demonstrates the use or a reset style sheet.
• Part two demos the use of CSS selectors and dives into the realm of scripting and adds some neat effects using the jquery library.
• Part three covers the integration of ajax technology and starts up with a shout-out on resolution dependence.
• The fourth and last part in this series is about testing for extensibility with 8 benchmarks to thoroughly bulletproof your site.

Overall this is a carefully written Tutorial worth spending time on. Thumbs up!