Wednesday, August 6, 2014

leading underscores and asterisks in CSS

In the stylesheet I have at http://www.tomjaeschke.com/blog/code.zip one may see:

.swirl
{
   width: 141px;
   padding-left: 859px;
   height: 30px;
   padding-top: 527px;
   _background-image: url("/images/swirl.gif");
   background-repeat: no-repeat;
   position: absolute;
   z-index: 2;
}
.swirl[class]
{
   background-image: url("/images/swirl.png");
}

 
 

The leading underscore at _background-image: url("/images/swirl.gif"); means that only Internet Explorer 6 will see the style. A leading asterisk would have the effect of making the style only applicable to Internet Explorer 7 and 6 and of course one may override a style with a leading asterisk with a style with a leading underscore in the name of making a differentiation between an Internet Explorer 7 specific styling and an Internet Explorer 6 specific styling. This trick was taught to me by Dustin Wells himself. Clearly that was some time ago as... well, who worries about this stuff anymore? .swirl[class] will only be seen by browsers BETTER than Internet Explorer 6! In this CSS I am trying to use a transparent .png for a background, but I am failing over to using a transparent .gif for a background (with, sigh, no antialiasing) if I really have to in Internet Explorer 6 where a transparent .png will not be transparent. Old school, eh?

No comments:

Post a Comment