今天做风格，遇到了一个很郁闷的问题：opera下正常，firefox和ie6下有不同的错位。这种情况下普通的hack是行不通的，遂google爬网找到了下面这篇文章，比较可惜的是这种方法hack后CSS文件无法通过验证：（
There is lots and lots of CSS hackery out there to hide CSS from certain browsers. But what about the times when you want to show CSS only to certain browsers.
CSS3 Media Queries
This trick, using CSS3 Media Queries makes styles invisible to any browser, but Opera 7. The explanation is simple: A browser should, when it encounters an @media rule it doesn’t recognize, ignore the entire rule. In CSS2, you can specify that a portion of a stylesheet should only be available for a certain media type, for instance @media print { } that will make the rules contained within only valid for printout.
In CSS3, this feature will be greatly expanded, so that you can query not only which media a style should be available to, but also which capabilities should be supported. An example:
The example above will make the body background red for normal screen media when the width of the canvas is 550 pixels or wider, and green when is is narrower. As I have demonstrated earlier, Opera 7, as the only known browser, has experimental support for these queries, and we will use this feature to create stylesheets only Opera can see.
Opera 7-compatible example
The following rule enables the style rules to Opera:
What happens here, is that a browser with media-query capabilities will match the rules inside @media for all media, as long as the viewable area of this media is wider than zero pixels, which it usually is.
The stylesheet on this site contains the following rule:
If you are using Opera 7, and you hover the page footer on this site, you will see an image appear. If this rule was visible to other browsers, like Mozilla, it would choke, since it uses the CSS 2.1 feature absolute positioning of generated content, using the pseudo element :after. However, since Mozilla behaves as it should when encountering a CSS rule it doesn’t understand, all of the content is ignored, and Mozillians, Safari users and users of other browsers, can see the page without breakage, and without the visual bonus Opera users get.
Use the technique as you wish, but keep in mind that neither CSS 2.1 or CSS 3 are final recommendations yet, so the syntax of the rules and techniques within here may change.
Update
Before you use this method, you should read this message from Jonny Axelsson of Opera Software.
There is lots and lots of CSS hackery out there to hide CSS from certain browsers. But what about the times when you want to show CSS only to certain browsers.
CSS3 Media Queries
This trick, using CSS3 Media Queries makes styles invisible to any browser, but Opera 7. The explanation is simple: A browser should, when it encounters an @media rule it doesn’t recognize, ignore the entire rule. In CSS2, you can specify that a portion of a stylesheet should only be available for a certain media type, for instance @media print { } that will make the rules contained within only valid for printout.
In CSS3, this feature will be greatly expanded, so that you can query not only which media a style should be available to, but also which capabilities should be supported. An example:
body { background: green; }
@media screen and (min-width: 550px){
body { background: red; }
}
@media screen and (min-width: 550px){
body { background: red; }
}
The example above will make the body background red for normal screen media when the width of the canvas is 550 pixels or wider, and green when is is narrower. As I have demonstrated earlier, Opera 7, as the only known browser, has experimental support for these queries, and we will use this feature to create stylesheets only Opera can see.
Opera 7-compatible example
The following rule enables the style rules to Opera:
@media all and (min-width: 0px){
[ Normal CSS rules here ]
}
[ Normal CSS rules here ]
}
What happens here, is that a browser with media-query capabilities will match the rules inside @media for all media, as long as the viewable area of this media is wider than zero pixels, which it usually is.
The stylesheet on this site contains the following rule:
@media all and (min-width: 0px){
div.pagefooter:hover:after {
position: absolute;
right: 30%;
width: 265px;
height: 131px;
bottom: 3.5em;
z-index: 0;
content: url(/images/ghostgirl.png);
}
}
div.pagefooter:hover:after {
position: absolute;
right: 30%;
width: 265px;
height: 131px;
bottom: 3.5em;
z-index: 0;
content: url(/images/ghostgirl.png);
}
}
If you are using Opera 7, and you hover the page footer on this site, you will see an image appear. If this rule was visible to other browsers, like Mozilla, it would choke, since it uses the CSS 2.1 feature absolute positioning of generated content, using the pseudo element :after. However, since Mozilla behaves as it should when encountering a CSS rule it doesn’t understand, all of the content is ignored, and Mozillians, Safari users and users of other browsers, can see the page without breakage, and without the visual bonus Opera users get.
Use the technique as you wish, but keep in mind that neither CSS 2.1 or CSS 3 are final recommendations yet, so the syntax of the rules and techniques within here may change.
Update
Before you use this method, you should read this message from Jonny Axelsson of Opera Software.
This entry comes from Making CSS visible for Opera 7 only and has been read for 1732 times.It is tagged with csshack , css.
0 Responses