But not all CSS property names are that friendly. In this post, I’ll describe 10 properties that can be quite useful but have little or no support in Internet Explorer.
Often during the debugging of a CSS issue, I’ll put borders on specific elements to see exactly what’s going and help determine the source of the problem. This usually helps, as it gives me a more specific visual of the layout, which otherwise may be hidden. But if block-level elements with specific widths and heights are at fault, adding a 1 pixel border around any of those elements will affect the layout, making the bordered elements 2 pixels wider/taller.
outline property is the perfect replacement, because it outlines an object without affecting the document flow. But Internet Explorer versions 6 and 7 do not support the
outline property, so it cannot be used to debug issues that are specific to those browsers.
2. Inherit (value)
There are many instances in CSS development where you can avoid quite a few keystrokes by overriding specific styles set on a particular element by telling that element to “inherit” the styles of its parent for any given property.
This is easily accomplished by giving a property the value of
inherit. This could come in handy, for example, when overriding the
background property, which will often have quite a bit of text in it (a color value, a url pointer, position, etc). So, instead of having to rewrite those values, you may just want the element in question to have the same background as its parent. A value of
inherit will accomplish this, potentially saving some keystrokes.
Unfortunately, the value
inherit is not supported in IE6 and IE7 except when used for the
This property only applies to table elements, or elements that have their
display property set to
table-cell. If you’re populating a table dynamically, there could be an instance where a particular table cell has no content and you may not want the borders, background color, or background image on the empty cell to be visible.
empty-cells: hide, and this will resolve this problem for any table where this could potentially occur, hiding the empty cells.
Internet Explorer does not support use of the
On the subject of table properties, this property is used to declare what side of a table a table’s caption is displayed on. It accepts values of
right. Internet Exporer does not support the use of this property, so the table’s caption will always appear at the top in versions 6 and 7 of that browser.
5. Counter-Increment / Counter-Reset
Ordered lists are very handy, because they save you the trouble of manually entering incrementing numbers on lists of items, and they allow you to change the order of the items without having to change the numbers.
CSS includes the
counter-reset properties, which allow you to apply automatically generated incrementing numbers to virtually any set of HTML elements, similar to how ordered lists produce generated numbers.
Here is an example:
content: counter(headers) ". ";
The above CSS will add an automatically incrementing number before all
<h2> tags on the page, allowing you to have the same flexibility on your
<h2> tags as you would on the
<li> elements inside of an ordered list.
But IE6, IE7 and even Safari (up to version 3) do not support the use of these properties.
Sometimes, the design or layout structure of a site requires that the content area be a specific height, at the least, otherwise the intended visual effect is lost. This can be due to a gradient background, a unique drop shadow, or possibly a lighting effect done in Photoshop. But sometimes content on one or two pages is small, and the page doesn’t expand as required.
This is where the
min-height property comes in handy, because it tells the browser to render a particular block-level element to a minimum height, regardless of actual content. Then, if the content is larger than the minimum height, the element will expand accordingly.
The only caution with min-height is that it has no support in IE6. We all know IE6 is (slowly!) on the way out, but a client may still require that their site be operational in that browser version.
Happily, IE6 renders the
height value the same way that other browsers render “min-height”, so all you need is an IE6-only hack or separate stylesheet that applies a specified
height to the element, and the problem is solved.
IE6 also ignores
max-width, but no easy workarounds are available.
:hover is a pseudo-class, but is worth mentioning because of its limited support in IE6. The
But if the site you’re developing requires full support in IE6, then you will want to avoid using hover on anything except an
<a> tag that has an
Display is usually used when setting one of three values:
none. Thanks to Internet Explorer, other useful values for the
display property are rarely used. Those values include
table-cell — each of which could come in handy to resolve specific layout issues.
So, although IE does support the three basic values for
display, it provides little or no support for the others.
This is an interesting CSS property that could come in handy in a specific situation, possibly in conjunction with dynamically generated content, which can be unpredictable. Basically, this property allows you to specify invisible areas on a particular element. The syntax looks like this:
clip: rect(20px, 300px, 200px, 100px);
Clipping can only be used on an absolutely positioned element, and can only use the rectangle shape. The dimensions provided inside the parentheses create the “visible” area, making everything inside the element that falls outside those dimensions invisible, or “clipped”.
clip property is supported by IE, but only when you use comma-less syntax for the dimensions, like this:
clip: rect(20px 300px 200px 100px);
The above CSS will work across most browsers, but will not qualify as valid CSS, as the syntax without commas is deprecated.
This is another pseudo-class that deserves mention on this list due to the fact that it is fully supported in every browser except Internet Explorer. The
:focus pseudo-class allows you to declare specific styles to apply dynamically to a page element when that element receives keyboard focus. This can be useful on a form, as you can add a border to an input element when it is selected, or “focused” by the user.
The following code will add a red border to an input element that is given keyboard focus:
border: solid 1px #f00;
That’s it for this list, I hope you enjoyed it. I certainly learned a lot while researching this information, so I hope it helped you as well.