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 Chrome */
}
}
Archive for the ‘CSS Hacks’ Category
CSS Hack for Safari and Google Chrome: Redux
Posted in Browsers, CSS, CSS Hacks, Tips and Tricks, tagged css filters, css hack, google chrome css hack, safari css hack on July 30, 2009 | 3 Comments »
CSS Hack for Internet Explorer 8
Posted in Browsers, CSS, CSS Hacks, Tips and Tricks, tagged css hack, IE css hack, IE8 css hack, Internet Explorer 8 CSS hack, Internet Explorer 8 hack, Internet Explorer CSS hack on June 4, 2009 | Leave a Comment »
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: blue\9
}
10 Dirty CSS Tips and Tricks
Posted in CSS, CSS Hacks, Tips and Tricks, Web Development, tagged alpha transparency css filters internet explorer ie ove, CSS, css filters, css hack, css opacity, css tips and tricks, css transparency, css watermark, get css property value, google chrome css hack, IE6 css hack, IE7 css hack, IE8 CSS opacity, max number of css files, safari css hack, transparent border in IE6 on January 6, 2009 | 4 Comments »
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 and Distinguishing Google Chrome and Safari
06. [...]
Better Image Scaling and Resampling in Internet Explorer
Posted in Browsers, CSS, CSS Hacks, Tips and Tricks, Web Development, tagged anti-aliasing, bicubic interpolation, image scaling, internet explorer, resampling on January 5, 2009 | 4 Comments »
Oddly enough, but the image scaling by using bicubic interpolation is turned off in Internet Explorer. All other browsers have this turned on by default, because this is the only normal and expected behavior. Due to this badly chosen default, sometimes the images in Internet Explorer are not displayed as smooth as in other browsers. To [...]
Setting Opacity and Other Filters in Internet Explorer 8
Posted in Browsers, CSS, CSS Hacks, Tips and Tricks, tagged css opacity, css transparency, DX filter, IE8 CSS filters, IE8 CSS opacity, IE8 DX filters, internet explorer 8 opacity, set internet explorer 8 opacity, set opacity to internet explorer 8 on November 28, 2008 | 2 Comments »
It was expected that Internet Explorer 8 will support the standard “opacity” property of CSS, but it seems that its developers have decided not drop the support for filters yet, which is not that bad, though, as it still lacks support for <canvas> scripting.
However, there is a great difference between the filter support in IE8 and its [...]
CSS: Filtering and Distinguishing Google Chrome and Safari
Posted in Browsers, CSS, CSS Hacks, Tips and Tricks, tagged css filters, css hack, google chrome css hack, safari css hack on October 1, 2008 | 4 Comments »
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” way.
However, [...]
Controlling the CSS Opacity Rate of Child Elements in Transparent Parents in Internet Explorer
Posted in Browsers, CSS, CSS Hacks, Tips and Tricks, tagged cancel transparency propagation, control the alpha opacity filter in internet explorer, control the propagation of alpha opacity filter in inte, css filters, CSS Hacks, css opacity, ie css hacks, inheritance of opacity in html elements, internet explorer hack, opacity, override opacity, override transparency, stop opacity propagation on September 11, 2008 | 4 Comments »
The alpha transparency filter applied on parent elements is inherited by their children, which is not always the desired behavior and can create unwanted design effects.
However, due to a browser bug in Internet Explorer, there is a cool hack that allows not only to reset the alpha transparency of the parent element in its children, but also to control [...]
Emulating border-color: transparent in Internet Explorer 6
Posted in CSS, CSS Hacks, Tips and Tricks, tagged border-color: transparent in IE 6, border-color: transparent in Internet Explorer 6, css hack, transparent border in IE6, transparent border in Internet Explorer 6 on August 24, 2008 | 3 Comments »
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 6 can [...]
An Exotic CSS Hack for Internet Explorer
Posted in CSS, CSS Hacks, Tips and Tricks, tagged css hack, IE css hack, IE6 css hack, IE7 css hack, Internet Explorer CSS hack on August 19, 2008 | 2 Comments »
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 and 7 will render <h1>…</h1> in red, while [...]
