Hide Stylesheet for IE6

IE6 has become the source of our frustrations — and for certain sites, giving it an unstyled, naked view is exactly what I want to do. Alpha-channel PNGs, min-width, max-width, rendering bugs galore — there are plenty of sites I’ve designed and maintain where the IE6 stats are low enough to drop the axe and move on. Now is the time! We can use conditional comments to hide styles from IE6 only…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Understanding CSS Specificity

The “C” in CSS stands for cascading. This means that that style rules that show up later in the stylesheet will override rules which appear earlier. But this isn’t always the case. There’s something else you have to take into consideration, as well: specificity…

VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)

Quick and Easy CSS @font-face Code

What seems to be an ideal chunk of CSS code for implementing the @font-face rules. Tested on quite a few browsers, including the following:

Safari 3.1+, Opera 10+, Firefox 3.5+, Chrome 4.0+, Internet Explorer 6+

This technique delivers your custom fonts quite consistently to all of these browsers, and degrades gracefully for those that don’t support it. I share it here hoping it will help others implement custom @font-face fonts quickly and easily. Let’s step to it…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Everything you Know about Clearfix is Wrong

Too often, authors trigger hasLayout without thinking of adding the necessary styling to create the same rendering across all browsers. Because of this, they end up adding IE specific declarations to “patch” their styling. This does not mean we should avoid clearfix at all costs though. It is a great tool which is safe to use as long as we remember that besides containing floats, it may also prevent collapsing margins and will “escape” surrounding floats in IE…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

inline-block vs float

With display:inline-block finally ready for everyday use across the most popular browsers (in all honesty, it has been for a while now), I quickly hit a pretty big dilemma. When comparing inline-block to floats, it wasn’t immediately clear what the exact differences were and what method to prefer. I looked online but couldn’t find a source listing the difference between the two. Guess that’s a good reason for keeping a blog then.

Note that inline-block still needs fixes in IE6 and IE7 (more about that later this week) and isn’t supported in FireFox versions prior to FF3. There is a -moz fix if you still want to support these browsers though. Apart from those (easy to fix) issues, you can play around with it all you like…

VN:F [1.9.22_1171]
Rating: -1 (from 3 votes)

CSS3 support in Internet Explorer 6, 7, and 8

IE-CSS3 is a script to provide Internet Explorer support for several of the popular new styles available in the upcoming CSS3 standard. How it works, if you view the page in Internet Explorer, some of the elements will be rebuilt by the script in Vector Markup Language VML, an IE-specific vector drawing language. VML supports things that are missing from IE’s CSS implementation like rounded corners and blur effects…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

cssSandpaper – a CSS3 JavaScript Library

The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others. This script is not only useful for developers who want to support CSS3 in IE which doesn’t support it in IE natively but in other browsers which implement their own vendor-specific variants of these properties…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

CSS Specificity And Inheritance

Understanding a few often overlooked CSS concepts is important. The concepts may be hard to grasp and look boring at first, but understanding them and knowing how to take advantage of them is important.

Two of these concepts are specificity and inheritance. Not very common words among Web designers, are they? Talking about border-radius and text-shadow is a lot more fun; but specificity and inheritance are fundamental concepts that any person who wants to be good at CSS should understand. They will help you create clean, maintainable and flexible style sheets. Let’s look at what they mean and how they work…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Creating a Realistic Looking Button with CSS3

I had previously created the Cadmus “post” button in Photoshop and it was essentially three images for the different states. I wanted to use this style for all our buttons, but doing it with single images is not a good idea. So I set about creating the same style of the buttons with CSS3. And this is what I ended up with…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Create Windows 7 start menu using CSS3 only

I am fascinated with how much you can do with so little using CSS3. Many user interface elements that require images in order to have appropriate visual appearance now can be styled only with CSS3. In order to prove that I assigned myself a task to create Windows 7 start menu only with CSS3 (and some icons)…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)