CSS 3, tout le monde est prêt, sauf IE8
VEN, 11/09/2009 - 00:11 - SYLVAIN
Soumis par Sylvain le ven, 11/09/2009 - 00:11
Voici un tableau récapitulatif de quelques propriétés CSS 3 ( et propriétés CSS 2 nouvellement implémentées ) qui vont changer la vie des intégrateurs. La nouvelle spécification des feuilles de style étant très riche, cet article sera en 2 parties. Nous aborderons les selecteurs et quelques autres surprises dans la prochaine partie. Vous trouverez en dessous du tableau de recap quelques précisions importantes sur chacune de ces propriétés, et des liens pour aller plus loin. Le tableau ne liste pas Opéra, c'est un manque, c'est vrai, et je m'en excuse auprès de ceux qui l'utilise tous les jours. Voilà, bonne lecture ;-)
Propriétées CSS 3 | Firefox 3.5 | Webkit (Safari / Chrome / Air ) | Internet Explorer 8 |
@font-face | 1 | 1 | 1 |
Text-shadow | 1 | 1 | 1/2 |
Opacity | 1 | 1 | 1/2 |
Box-shadow | 1 | 1 | 1/2 |
Multiple background | 0 | 1 | 0 |
Border-image | 1 | 1 | 0 |
Border-radius : | 1 | 1 | 0 |
Background-origin, Background-clip | 1 | 1 | 0 |
Multi-column | 1 | 1 | 0 |
Transforms | 1 | 1 | 1/2 |
Border-color (dégradé) | 1 | A vérifier. 0 ? | 0 |
Background-size | 0 | 1 | 0 |
Text-overflow | 1 | 1 | 1 |
Box-sizing | 1 | 1 | 1 |
Media queries | 1 | 1 | 0 |
Display:table | 1 | 1 | 1 |
@Font-Face
Ex :@font-face{ font-familly:"Nom de votre police"; src:url('Font/custom_font.otf'); }Cette propriété que vous pouvez appeler en haut de votre feuille de style, où directement dans votre html entre 2 balises styles, va vous permettre d'utiliser des polices "serveurs". Une fois déclarée, il suffit de spécifier la propriété font-familly, et indiquer le nom de votre police. J'ai mis 1/2 pour IE, se qui peut paraître paradoxal puisque cette propriété a été implémenté dans IE 5 ! Simplement, Microsoft a choisi d'utiliser des polices .eot, des polices "normales" converties via Web Embedding Fonts Tool, format qu'aucun autre navigateur n'a choisi d'utiliser... Une solution consiste donc à utiliser la régle avec un commentaire conditionnel pour ie qui va utiliser une police .eot, ou si vous êtes allergique à ce format, un js-font-maker fera l'affaire. Pour aller plus loin, lisez l'article de A-List-Apart sur le sujet, et / ou Font Embedding for the Web de Microsoft.Text-Shadow
Ex :.yourCssClass { text-shadow : 2px 2px 2px #000; filter : progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45) ; }Ceci est un texte avec une ombre générée grace à CSS3Mise en oeuvre :Text-Shadow, c'est du CSS 2 remis au bout du jour par CSS 3. Les 2 premiers chiffres positionnent l'ombre par rapport au coin haut et gauche de la boite. Le 3e correspond à la largeur de l'ombre. On peut faire des effets assez complexe en introduisant la série de parèmetres blur, qui permettent des effets dégradés. Je vous laisse faire vos gammes, voici la référence de l'effet chez mozilla. J'ai mis un 1/2 à ie, parce qu'on peut utiliser le static filter shadow.Si vous avez ouvert cette article avec ie, ou avec un navigateur très récent, vous devriez voir les effets en action (sur l'exemple plus haut, la propriété text-shadow, sur ce paragraphe, le static filter).Opacity
Ex :.yourCssClass { opacity : 0.5; filter : progid:DXImageTransform.Microsoft.Alpha(opacity=50); }Mise en oeuvre :Ceci est le contenu d'une balise span dont l'opacité est réduite grâce aux css.Idem mais avec le filtre ieCette propriété est tellement essentielle et indispensable qu'on ne peut que s'étonner qu'elle ne soit implémentée que maintenant... La valeur de la propriété évolue de 0 (invisible) à 1 (opaque). Voici la référence mozilla. Le static filter alpha évolue lui de 0 à 100. Voilà, s'en est finit du javascript ou des images de fond en png, on a maintenant une solution cross-browser pour faire évoluer l'alpha de nos élements html :-)Box-shadow
Ex :.yourCssClass { -webkit-box-shadow : 10px 10px 5px #ccc; -moz-box-shadow : 10px 10px 5px #ccc ; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true') }Mise en oeuvre :Texte sur lequel s'applique la propriété box-shadow.Texte sur lequel s'applique le filtre dropShadow.Cette propriété est assez puissante, et permet de faire de jolies choses, notamment appliquer des dégradés de couleurs (sans images donc) sur des divs. Notez qu'on utilise des extensions propriétaires ( -moz, -webkit ). La différence avec text-shadow, c'est que l'ombre ne suit pas les contours des textes, mais s'applique à toute votre div. Cette propriété est très personnalisable, via ses 6 parametres : inset, color, offset-x et y, blur-radius etspread-radius... Je vous laisse lire la référence mozilla pour tout essayer. Pour ie, on va utiliser DropShadow ouShadow. Je ne maîtrise pas la différence entre ces 2 filtres (je suis sous ubuntu, je ne crois pas qu'il y ai un ie sous ubuntu :-), je vous laisse essayer.Multiple Background
Ex :.yourCssClass { background: url(image.png) top left no-repeat, url(image2.png) top 11px no-repeat; }Cette propriété permet donc d'associer plusieurs images au fond d'un élément. On image tout de suite la richesse qu'une telle possibilité peut engendrer, tout en favorisant un balisage sémantique, puisqu'on pourrait se passer de divs introduites uniquement pour insérer une image supplémentaire. Malheureusement les 2 principaux navigateur ne l'implémente pas... Alors, à moins de coder un intranet pour une société macophile, on va pas s'attarder.Border-image
Ex :.yourCssClass { -moz-border-image : url(example.jpg) 3 4 6 8 / 10px 12px 14px 22px; }On peut donc désormais utiliser une image pour spécifier une bordure. Avec webkit, la propriété s'écrit -webkit-border-image. Beaucoup de paramètres, notamment stretch ou round ou repeat, qui va indiquer comment le navigateur utilise votre image, en recalculant sa taille mais en gardant les proportions (round), en l'étirant (stretch) ou simplement en la répétant (repeat). Pour aller plus loin, vous pouvez lire cet article de John Resig (jQuery), cet article de Design Shack, ou la référence Mozilla.Border-Radius
Ex :.yourCssClass { -moz-border-radius : 2em 1em; -webkit-border-radius : 2em 1em; }Mise en oeuvre :Un paragraphe dont les bordures sont arrondies via CSS3Cette propriété est un peu l'emblème des CSS 3. C'est sans doute la plus connue, elle résume bien la volonté du w3c de définir des outils efficaces qui minimisent le besoin de hack. Si ie l'implémentait, nous pourrions jeter aux orties toutes ces div imbriquées et autres sliding doors, qui n'avaient d'autres buts que de créer des boîtes aux coins arrondies, via les images de fond... Mais ie8 ne reconnaît pas cette propriété ! On pourra utiliser 2 petits scripts qui permettent de roundifier les div d'ie, un qui utilise htc (un format de fichier made in microsoft, qui contient souvent du javascript ou du vbs), un autre via js. Dans les 2 cas, intégrer le script s'accompagne de petits désagrément, lisez bien les docs. Concernant la propriété, on spécifie en général 2 valeurs, la largeur et l'angle de l'arrondi, mais d'autres combinaisons sont possibles, pour créer des bordures en forme d'ellipse par exemple. Lisez la référence Mozilla pour plus de détails. Il faut noter que l'on peut appliquer l'effet box-shadow sur un border-radius, l'effet sera cohérent graphiquement.Background-origin et Background-clip
Ex :.yourCssClass { -moz-background-origin: content; -moz-background-clip: padding }Background-origin permet de modifier le comportement de la propriété background-position. Elle peut prendre 3 valeurs, border-box, padding-box ou content-box. Background-clip elle modifie l'interaction entre la bordure et l'intérieur d'un élement html. Elle prend les mêmes arguments que background-origin. Lisez cet article de CSS3.info pour voir ces propriétés en action, et comme toujours, la référence Mozilla.Multi-column
Ex :.yourCssClass { -moz-column-width : 13em; -moz-column-gap : 1em; -moz-column-count : 3; -moz-column-rule : 1px solid black; }Voici donc venir une nouvelle manière de définir nos layouts. Multi-column, ce n'est pas une propriété, mais plusieurs, qui s'appliquent à définir le comportement du texte à l'intérieur d'une div. Multi-column, c'est un peuInDesign ou Quark Express dans nos pages web. C'est très puissant donc, et il va falloir potasser tout ça. Malheureusement ie ne reconnait pas ces propriétés. Néanmoins, il existe un javascript qui permet d'utiliser ces propriétés :-) On peut donc s'y mettre dès aujourd'hui ! Voici la page de css3-multi-column.js, ici un article d'introduction de A-List-Apart très complet, et là un petit topo de CSS3.info pour voir les propriétés en action.CSS Transforms
Ex :.yourCssClass { -moz-transform : rotate( -5deg ) ; }Mise en oeuvre :Un paragraphe décalé via la propriété -moz-transformCSS Transforms, c'est une petite révolution. L'idée c'est d'appliquer un effet visuel sur un élèment html, afin de transformer son aspect. 5 effets sont possibles : matrix, rotate, scale, skew, et translate. On imagine déjà ce qu'on va pouvoir faire en faisant évoluer dans le temps les effets via javascript. CSS Transforms, c'est un peu flash sans plugin... Avec ie, il va falloir "filtrer" : avec Matrix Filter par exemple. 2 articles d'introduction chez Mozilla, CSS Transfroms sur le dev center et Using CSS transforms. La référence Mozilla pour tout savoir.Border-color (dégradé)
Ex :.yourCssClass { border: 8px solid #000 ; -moz-border-radius : 1.5em ; -moz-border-top-colors : #555 #666 #777 #888 #999 #aaa #bbb #ccc ; -moz-border-left-colors : #555 #666 #777 #888 #999 #aaa #bbb #ccc ; -moz-border-right-colors : #555 #666 #777 #888 #999 #aaa #bbb #ccc ; -moz-border-bottom-colors : #555 #666 #777 #888 #999 #aaa #bbb #ccc ; padding: 5px 5px 5px 15px ; }Mise en oeuvre :Voici un paragraphe dont les bordures sont stylées grace aux nouvelles propriété css3Voici une propriété qui va donner du style à nos bordures... Malheureusement, ni ie, ni webkit (?), ne semble l'implémenter. Si vous surfez avec FF 3.5 vous devriez voir que cette propriété se marrie bien avec un border-radius. On peut regretter toutefois qu'il n'existe pas de forme courte, il va falloir dupliquer votre code pour chaque coté de la bordure... Pour en savoir plus, Mozilla référence ;-)Background-size
Ex :.yourCssClass { -webkit-background-size : 150px 300px ; }Cette propriété n'est implémentée que par Webkit (et Opéra), et c'est bien dommage, parce qu'en plus de possibilités graphiques nouvelles, cette propriété aurait pu être utilisé dans le cadre d'une optimisation du nombre d'images à télécharger, via des sprites (carte d'image), et ainsi compléter les propriétés background-position. Un tout petit article pour voir la propriété en action (avec Chrome ou Safari donc), la référence CSS webkit, et un article sur les sprites CSS.Text-overflow
Ex :.yourCssClass { border : 1px solid #000000 ; overflow : hidden ; width: 50px ; height : 1.6em ; }Voici une petite propriété qui s'applique aux textes, lorsque ceux-ci débordent de leur élément conteneur. Malheureusement, je n'ai pas réussit à la mettre en oeuvre. Impossible de reproduire cet exemple. C'est dommage, elle implémentée nativement par ie ! Plus d'infos ici. Si vous voyez mon erreur, n'hésitez pas à laisser un commentaire qui explicite le fonctionnement de cette propriété.Box-sizing
.yourCssClass { -moz-box-sizing : border-box ; -webkit-box-sizing : border-box ; box-sizing : border-box; }Cette propriété permet de modifier le "box-model" de l'élèment sur lequel s'applique box-sizing. On peut donc émuler le comportement des navigateurs qui calculent la largeur ou la hauteur d'un élément différemment des recommandations du w3c, comme ie7. La valeur par défaut est content-box, la largeur d'un élément se calcule en ajoutant la bordure, le padding et les marges. A l'inverse, border-box calcule la largeur d'un élement en comptant padding et border, mais pas les margins. C'est le modèle d'ie7 donc. Mozilla rajoute une 3e valeur, padding-box, qui donne une width incluant le padding, mais pas les marges ni les bordures. IE semble implémenter cette propriété ! Mais je n'ai pas pu vérifier. Une illustration ici, et la référence de Mozilla.Media Queries
<link rel="stylesheet" media="only screen and (color)" href="example.css" />Les CSS 2 permettaient déjà d'appliquer une feuille de style en fonction de l'attribut media de la balise link :media="screen" ou media="print". Les CSS 3 vont (beaucoup) plus loin, en créant une syntaxe de requête afin de charger une feuille de style dans des conditions très spécifiques. On peut donc appliquer un style en fonction du ratio de l'écran, de la taille de celui-ci, du nombre de couleurs, de l'orientation (portrait ou paysage), de la résolution, avec en plus la possibilité d'utiliser des opérateurs logiques... Malheureusement ie n'y comprend rien. On peut imaginer des hack js qui appliqués via des commentaires conditionnels permettront de charger telle ou telle feuille de style. Mais tout de même c'est dommage, met avis que cette propriété va changer beaucoup de choses ! Sur les Media Queries, lire l'article homonyme sur le dev center de Mozilla, un article d'introduction en français sur Kiwano, ou encore une intro compléte chez hacks.mozilla.org.Display:table ou display:table-cell
.example{ display : table-cell; border-collapse : collapse ; vertical-align : middle; }La propriété display existe depuis longtemps, et un intégrateur utilise display:block tous les jours. J'ai choisi de vous en parler parce qu'ie implémente une série de "nouvelles" (pour ie ...) valeurs dont display:table etdisplay:table-cell, qui vont donc donner à votre élément les comportements d'un tableau ou d'une cellule, et ainsi accepter des styles spécifiques. Le centrage vertical, souvent cauchemardesque, va s'en trouver simplifié, de même que la gestion des bordures, puisque la propriété border-collapse ne s'applique qu'à des cellules. Un articletrès intéressant de Alsacréation sur la propriété display, et la liste de toutes les valeurs que peut rendre display dans ie.
Voici donc toute une série de propriétés que nous pouvons utiliser dès aujourd'hui, étant implémentées par tous les navigateurs récents : @font-face et les polices serveurs, text-shadow, opacity, box-shadow, transforms etdisplay:table. Toutefois, ces propriétés sont implémentées différement dans chacune des 3 grandes familles de navigateurs, nous obligeant à tester beaucoup, et à hacker massivement pour bien appliquer les styles partout. Il faut aussi garder à l'esprit que tout le monde ne met pas à jour son navigateur, il va donc falloir aussi penserdégradation progressive pour conserver des sites accessibles. Il faut enfin noter que ces quelques propriétés ne sont qu'une petite partie des CSS 3, qui comptent énormément d'attributs. Je ne vous ai pas parlé des nouveaux selecteurs, j'essayerai de le faire lors d'un prochain article. Pour une vision d'ensemble des nouveatés CSS 3 vous pouvez voir le sommaire de la référence CSS Mozilla, ou une page de liens essentielle du site CSS3.info . Les nouvelles propriétés css 3 étant nombreuses, utiliser un pense-bête devient indispensable. Et Smashing Magazinenous en propose justement un. Jens Meiert lui a pris le temps de construire une page qui liste toutes les propriétées, chacune renvoyant vers la doc du w3c. Voilà, lançons Aptana si ce n'est pas déjà fait, et codons des designs fabuleux pour un web plus beau que jamais !
