CSS Hacks, Tricks and Proprietary Extensions

Below is a list of CSS hacks that can be used to filter out different browsers in cases when standard CSS does not work or the conditional comments of IE cannot be applied. Internet Explorer 6 * html .elementOrClassName { property: value; } .elementOrClassName { _property: value; } Internet Explorer 7 * + html .elementOrClassName [...]

Read Full Post »

CSS Hack for Safari and Google Chrome: Redux

As body:nth-of-type(1) and body:first-of-type are supported by FireFox 3.5x, the hack that I wrote about in this post cannot be used anymore. You may try the following one, which targets only Google Chrome and Safari: @media screen and (-webkit-min-device-pixel-ratio:0) {  div  {   color: red; /* The text will appear red only in Safari and Google [...]

Read Full Post »

CSS Hack for Internet Explorer 8

Notwithstanding the improvements in the CSS support in Internet Explorer 8, there may be cases when a CSS hack for that particular browser is necessary. Here is one that works in IE8 Standards Compliance Mode: .classnameOrElement {  color /*\**/: blue\9 } And another one that will be applied in all IE versions: .classnameOrElement {  color: [...]

Read Full Post »

10 Dirty CSS Tips and Tricks

Here is a collection of 10 CSS tips, tricks in blogposts I have written during the last year that you may find useful: 01. Better Image Scaling and Resampling in Internet Explorer 02. Setting Opacity and Other Filters in Internet Explorer 8 03. The 32 External CSS Files Limitation of Internet Explorer and More 04. Unobtrusive CSS Loading Indicator for Images 05. CSS: Filtering [...]

Read Full Post »

CSS: Filtering and Distinguishing Google Chrome and Safari

 As body:nth-of-type(1) and body:first-of-type are supported by FireFox 3.5x, the hack that I wrote about in this post cannot be used anymore. You may try the following one, which targets only Google Chrome and Safari. Personally, I avoid using CSS hacks, and when writing client code I always assume that anything can be done the “legal” [...]

Read Full Post »

Emulating border-color: transparent in Internet Explorer 6

Fortunately, Internet Explorer 7 supports border-color: transparent, but still, there are hardcore IE6 users and it seems that they will never update their browsers. This post is targetted to the developers that care and dare to make their websites crossbrowser. Thanks to a less known Interner Explorer CSS filter, the transparent border in Internet Explorer [...]

Read Full Post »

An Exotic CSS Hack for Internet Explorer

Here is a less known and rather exotic CSS hack, visible for Internet Explorer based on a rendering bug. Unfortunately, it is visible both in versions 6 and 7, but still it can be useful as a last resort for styling. And here it comes: h1 {  color: green; .color: red; } Internet Explorer 6 [...]

Read Full Post »