The Principles Of Cross-Browser CSS Coding

In this article, I’ll be describing what I believe are some of the most important CSS principles and tips that can help both new and experienced front-end developers achieve as close to a consistent cross-browser experience as possible, with as little CSS code as possible…

Cross-Browser CSS Gradient

The CSS gradient feature was introduced by Webkit for about two years but was rarely used due to incompatibility with most browers. But now with the Firefox 3.6+, which supports gradient, we can style create gradient without having to create an image. This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome…

CSS Performance: UI with Fewer Images

Often performance improvements come with their drawbacks, sometimes improving performance causes pains in other parts of the development process or strips stuff from the final product. Sometimes there’s even a conflict where you have to pick: slow, unusable and beautiful or fast and looking like hacked with a blunt axe. But it doesn’t have to be this way. This post outlines some approaches to achieving common UI elements using CSS tricks in as many browsers as possible while using as fewer images as possible. Some of the tricks are brand new, some are very, very old. They all have in common the “fewer or no images” mantra. Using fewer images comes with some pronounced benefits…

To CSS Reset or Not to CSS Reset

Question: Which Global Reset for CSS Should I Use? The short answer is the simplest one possible. The slightly longer answer is that you should reset some styles, but do so with a good reason. The long answer is that the exact CSS reset you choose will depend on the needs of your design…

Cross-browser Drop Shadows Using Pure CSS

There’s an awful lot of noise at the moment regarding dropping IE6 and forging ahead with CSS3 properties for the finer touches on web layouts. One such example is adding drop shadows to content blocks. There are countless ways of achieving this, most requiring additional HTML markup and one or more PNG images. Not to mention hacks for IE6 to get render PNGs properly.

CSS3 provides the box-shadow property to achieve just that. Thankfully Safari/Webkit has supported this for some time, and Firefox more recently with Firefox 3.5. Internet Explorer provides a DropShadow filter but this provides a hard-edged shadow unlike its CSS3 counterpart. By combining the Glow and Shadow filters however, we can achieve something that fairly closely resembles the rendered CSS3 shadow…

CSS Browser Compatibility Master Table

This is a general overview table. A “yes” here does not mean a browser supports every tiny detail of the specification correctly. Instead, it means that it supports a workable subset of the specification. In IE’s case this may mean that it supports its proprietary methods and properties, and that those properties are generally equivalent to the W3C spec…

Maximum value of z-index

Z-index is used to determine the stacking order of absolutely positioned elements on a page. The CSS 2.1 spec says the value of z-index should be an integer. But it doesn’t define the any maximum values for it. So the actual max is often determined by what variable type the browser uses to store the z-index…

Understanding CSS Image Opacity / Transparency

Image transparency/opacity is not yet a CSS standard. However, it works in all modern browsers, and is a part of the W3C CSS 3 recommendation. Here’s a nice clear tutorial that explains how to achieve cross-browser transparency. It’s easy to understand and there are some useful examples…