Développement Web / tests CSS

:before et :after (CSS 2.1)

CONTENU DU DIV
.class-name:before { content: "avant"; } .class-name:after { content: "après"; } → Chrome 9.0.597.107, ChromePlus 1.5.2.0, Firefox 3.6.14, Internet Explorer 6 et 7 (avec la bibliothèque JavaScript ie7-js), Internet Explorer 8, Opera 11.01, Safari 5.0.3
border (CSS 2.1)

background-color: yellow; border-color: red green blue black; border-style: solid; border-width: 10px 20px 30px 40px; height: 50px; width: 60px; → Chrome 9.0.597.107, ChromePlus 1.5.2.0, Firefox 3.6.14, Internet Explorer 6, Opera 11.01, Safari 5.0.3

border-color: red green blue black; border-style: solid; border-width: 10px 20px 30px 40px; height: 0; width: 0; → Chrome 9.0.597.107, ChromePlus 1.5.2.0, Firefox 3.6.14, Internet Explorer 7, Opera 11.01, Safari 5.0.3

border: 20px solid; border-color: red green blue black; height: 0; width: 0; → Chrome 9.0.597.107, ChromePlus 1.5.2.0, Firefox 3.6.14, Internet Explorer 7, Opera 11.01, Safari 5.0.3
border-radius (CSS 3)

border-radius: 10px; → Chrome 8.0.552.224, ChromePlus 1.5.1.1, Firefox 4, Internet Exlorer 9, Opera 11, Safari 5.0.3 Windows

-icab-border-radius: 10px;

-khtml-border-radius: 10px; → Chrome 8.0.552.224, ChromePlus 1.5.1.1, Safari 5.0.3

-moz-border-radius: 10px; → Firefox 3.6.13 (ne fonctionne plus au moins à partir de Firefox 13)

-o-border-radius: 10px;

-webkit-border-radius: 10px; → Chrome 8.0.552.224, ChromePlus 1.5.1.1, Safari 5.0.3
border-bottom-left-radius (CSS 3)

border-bottom-left-radius: 10px; → Chrome 8.0.552.224, ChromePlus 1.5.1.1, Firefox 4, Internet Exlorer 9, Opera 11, Safari 5.0.3 Windows

-khtml-border-bottom-left-radius: 10px; → Chrome 8.0.552.224, ChromePlus 1.5.1.1, Safari 5.0.3

-moz-border-radius-bottomleft: 10px; → Firefox 3.6.13 (ne fonctionne plus au moins à partir de Firefox 13)

-webkit-border-bottom-left-radius: 10px; → Chrome 8.0.552.224, ChromePlus 1.5.1.1, Safari 5.0.3
box-shadow (CSS 3)

box-shadow: 5px -2px 5px teal; → Firefox 4, Internet Exlorer 9, Opera 11

-icab-box-shadow: 5px -2px 5px teal;

-khtml-box-shadow: 5px -2px 5px teal; → Chrome 8.0.552.224, ChromePlus 1.5.1.1, Safari 5.0.3

-moz-box-shadow: 5px -2px 5px teal; → Firefox 3.6.13

-o-box-shadow: 5px -2px 5px teal;

-webkit-box-shadow: 5px -2px 5px teal; → Chrome 8.0.552.224, ChromePlus 1.5.1.1, Safari 5.0.3
- BoxShadows: “see the differences in various box-shadow declarations across browsers”
cursor (CSS 2.1)
- Général : default
- Liens et statut : help pointer progress wait
- Sélection : crosshair text
- Glisser-déposer : move
- Redimensionnement n-resize ne-resize e-resize se-resize s-resize sw-resize w-resize nw-resize
- Image : cursor: url(../../_png/DS_t.png), auto
Nouveau en CSS 3
- Liens et statut : context-menu
- Sélection : cell vertical-text
- Glisser-déposer : alias copy not-allowed no-drop
- Redimensionnement et défilement all-scroll col-resize row-resize ew-resize ns-resize nesw-resize nwse-resize
- Zoom : zoom-in zoom-out
- Image : cursor: url(../../_png/DS_t.png) 40 17, auto
opacity (CSS 3)

opacity: .4; → Amaya 11.3.1, Chrome 8.0.552.224, ChromePlus 1.5.1.1, Firefox 3.6.13, Internet Exlorer 9, Opera 11, Safari 5.0.3

-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=40)'; → Internet Explorer 8 (utilise ActiveX)

filter: alpha(opacity=40); → Internet Explorer 8 (utilise ActiveX)