Web Design Articles

If you’ve been developing with CSS for some time now, you’re certainly familiar with the inline-block value for the display property. The most common use for this property/value pair is when getting IE6’s margins to behave.

To briefly explain what I’m talking about, if you float an element in IE6 and give it a margin setting on the same side as the direction of the float, the margin will (strangely) be doubled. You could fix this with an IE6 hack with a margin setting that’s half the value of the original, or you could (in many cases) give the element’s display property a value of inline-block (again in an IE6-only hack or stylesheet). This will resolve the issue in most, if not all circumstances.

Although this IE6 workaround for floated elements has probably been the most useful way to implement the inline-block value, it could serve a much more legitimate purpose if the value itself is better understood.

I’ve added five new items to the CSS3 Click Chart. I also added a couple of filter hacks for IE, and corrected some syntax examples.

Each item on the chart includes a clickable heading that opens an info panel on the bottom of the screen displaying a basic description of the item, along with example syntax. To accommodate the fact that the chart is now more than one screen, I’ve integrated Alen Grakalic’s Easy Slider jQuery plugin.

CSS opacity has been a bit of a trendy technique for a few years now, and it’s been especially frustrating for developers trying to implement opacity (also referred to as CSS transparency) in a cross-browser fashion, because it’s taken a while for the different browsers to finally agree on settings. There is still not a universal method to ensure opacity settings work on all currently-used browsers, but things have improved in the last little while.

This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers.

One thing that should be noted about CSS opacity is that, although it’s been in use for a number of years now, it has never been, and is currently not a standard property. It’s a non-standard technique that is supposed to be part of the CSS3 specification.

In the past I’ve displayed some serious animosity towards the CSS font shorthand property, so I feel I should make up for it. After all, the font shorthand property was just minding its own business, trying to save developers some lines of code, and I come along and declare it an outcast. So, although I still don’t agree with ever using font shorthand, I do think it’s important that CSS developers understand how it works.

So to make up for my former font shorthand hostilities, I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project. Enjoy!

Since my knowledge of CSS3 is fairly shoddy, I decided to create and release a CSS3 “click chart” or “help chart” (for lack of a better term) that displays examples of some of the newest features in CSS.

The initial release only has 8 examples, with more to be added in the future. Each example visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.

The box that opens gives a description along with browser support, an external link (usually W3C info), and some example syntax taken from the CSS of the page itself.