CSS3 and Browsers
CSS3 Selector Test: http://www.css3.info/selectors-test/test.html
| Browser |
Passed |
Buggy |
Unsupported |
| Firefox 3.0.1 |
36 |
0 |
7 |
| Firefox 3.1b1pre |
43 |
0 |
0 |
| MSIE 6 |
10 |
1 |
32 |
| MSIE 7 |
13 |
4 |
26 |
| MSIE 8 Beta 2 |
21 |
2 |
20 |
| Opera 9.52 |
43 |
0 |
0 |
| Safari 3.1 |
43 |
0 |
0 |
Firefox 3.1b1pre, Opera 9.52 and Safari 3.1: (Passed 578 out of 578 tests)
Firefox 3.0.1: (Passed 373 out of 578 tests)
MSIE 6: (Passed 276 out of 578 tests)
MSIE 7: (Passed 329 out of 578 tests)
MSIE 8 Beta 2: (Passed 348 out of 578 tests)
CSS3 Attribute Selectors: http://www.css3.info/preview/attribute-selectors/
CSS3 Opacity: (http://www.css3.info/preview/opacity/)
This text is on red background opacity 0.6, works fine on Firefox, Safari and Opera
CSS3 Round Borders:
#somediv {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
Only on Firefox and WebKit this Div is round.
More about CSS3 http://www.css3.info
web
css
CSS and MSIE
MSIE (Microsoft Internet Explorer) CSS Hack:
.somediv {
height: 15px; /* all browsers */
#height: 20px; /* all IE Browser */
_height: 25px; /* only IE6 Browser */
}
MSIE use conditional comments: (http://msdn.microsoft.com/en-us/library/ms537512.aspx)
<!--[if IE 6]>
<script src="js/iefix.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/iefix.css" type="text/css"></style>
<div> some html code </div>
<![endif]-->
In this example only if the Browser are IE6 add this code:
<script src="js/iefix.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/iefix.css" type="text/css"></style>
<div> some html code </div>
Old browsers (MSIE) support :hover, :active and :focus:
http://www.xs4all.nl/~peterned/csshover.html
<style type="text/css">
body {
behavior:url("csshover.htc");
}
</style>
Make MSIE behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. http://code.google.com/p/ie7-js/
web
css, javascript
Recent Comments