Aperçu de propriétés CSS3 avec le moteur de rendu Gecko
Cet article va vous permettre de découvrir quelques unes des propriétés CSS3 que le moteur de rendu Gecko 1.8 - qui est utilisé, entre autres, par Firefox 1.5 et 2.0 - implémente déjà.
Cet article comporte de nombreux termes techniques. Vous devez posséder de solides bases en CSS : bien connaître les différents modèles de boîtes ainsi que les différents termes regroupés dans le glossaire situé plus bas dans l’article. Si vous avez du mal à comprendre le modèle de boîtes, vous pouvez jeter un œil à cette représentation en 3D.
Voici la traduction des termes anglais ↔ français utilisés dans cet article (basée sur la traduction française de la recommandation CSS2.0) :
| Anglais | Français |
|---|---|
| border | bordure |
| padding | espacement |
| margin | marge |
| background | arrière-plan |
| outline | contours |
| child | enfant |
| box | boîte |
Avant de s’attaquer au vif du sujet, il est important de rappeler que pour l’instant, ces propriétés sont spécifiques aux navigateurs de la fondation Mozilla (et tout autre navigateur basé sur Gecko). La mise à disposition de ses propriétés dans Gecko alors que la documentation sur CSS3 n’est pas encore achevée permet justement de vérifier l’implémentatibilité des travaux du W3C. Notons au passage que ces propriétés sont intitulées « -moz-nom-propriete », conformément aux règles en vigueur, de façon à ne pas faire croire à une instruction standardisée alors que la spécification n’est pas encore publique. Il aurait été risqué d’implémenter les propriétés directement par leur vrai nom car il est possible qu’il change d’ici la publication finale des spécifications CSS3.
-moz-background-clip
Indique si l’arrière-plan, que ce soit une couleur ou une image, doit s’étendre sous la bordure de l’élément ou pas. Cette propriété est similaire à la propriété CSS3 background-clip.
border (défaut) : l’arrière-plan s’étend sous la bordure de l’élément.
padding : l’arrière-plan s’étend jusqu’à la bordure.
Code :
<div id="test1_mozilla"> </div>
<style type="text/css">
#test1_mozilla {
height: 50px;
width: 50px;
border: dotted #000 10px;
background: #EEE;
-moz-background-clip: border;
}
</style>Code :
<div id="test2_mozilla"> </div>
<style type="text/css">
#test2_mozilla {
height: 50px;
width: 50px;
border: dotted #000 10px;
background: #EEE;
-moz-background-clip: padding;
}
</style>-moz-background-origin
Indique à partir de quoi doit se positionner l’arrière-plan. Cette propriété est similaire à la propriété CSS background-origin.
border : La position est relative à la bordure.
content : La position est relative au contenu.
padding (defaut) : La position est relative à l’espacement.
Code :
<div id="test3_mozilla">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin facilisis purus ac ante. Curabitur eleifend arcu a felis. Aenean convallis sapien. Fusce leo. In eget diam. Vivamus semper tempor sem. In hac habitasse platea dictumst. Ut dictum vulputate neque. Nam at dui. Nullam lobortis scelerisque purus. Nunc purus felis, volutpat eget, hendrerit ut, facilisis sodales, risus. Donec laoreet euismod turpis. Aenean convallis arcu vitae justo. Morbi lectus dui, auctor lobortis, mattis in, lacinia ut, sem. Proin varius diam lobortis purus. Nulla felis turpis, fermentum id, iaculis pretium, ornare non, odio. Vivamus eleifend. Pellentesque lacinia sollicitudin urna.</div>
<style type="text/css">
#test3_mozilla {
border: solid #000 10px;
padding: 30px;
background: url("redpanda.jpg");
-moz-background-origin: border;
}
</style>Code :
<div id="test4_mozilla">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin facilisis purus ac ante. Curabitur eleifend arcu a felis. Aenean convallis sapien. Fusce leo. In eget diam. Vivamus semper tempor sem. In hac habitasse platea dictumst. Ut dictum vulputate neque. Nam at dui. Nullam lobortis scelerisque purus. Nunc purus felis, volutpat eget, hendrerit ut, facilisis sodales, risus. Donec laoreet euismod turpis. Aenean convallis arcu vitae justo. Morbi lectus dui, auctor lobortis, mattis in, lacinia ut, sem. Proin varius diam lobortis purus. Nulla felis turpis, fermentum id, iaculis pretium, ornare non, odio. Vivamus eleifend. Pellentesque lacinia sollicitudin urna.</div>
<style type="text/css">
#test4_mozilla {
border: solid #000 10px;
padding: 30px;
background: url("redpanda.jpg");
-moz-background-origin: content;
}
</style>Code :
<div id="test5_mozilla">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin facilisis purus ac ante. Curabitur eleifend arcu a felis. Aenean convallis sapien. Fusce leo. In eget diam. Vivamus semper tempor sem. In hac habitasse platea dictumst. Ut dictum vulputate neque. Nam at dui. Nullam lobortis scelerisque purus. Nunc purus felis, volutpat eget, hendrerit ut, facilisis sodales, risus. Donec laoreet euismod turpis. Aenean convallis arcu vitae justo. Morbi lectus dui, auctor lobortis, mattis in, lacinia ut, sem. Proin varius diam lobortis purus. Nulla felis turpis, fermentum id, iaculis pretium, ornare non, odio. Vivamus eleifend. Pellentesque lacinia sollicitudin urna.</div>
<style type="text/css">
#test5_mozilla {
border: solid #000 10px;
padding: 30px;
background: url("redpanda.jpg");
-moz-background-origin: padding;
}
</style>-moz-border-radius
Cette propriété permet d’arrondir les angles des boîtes. La valeur doit être une valeur numérique indiquant le degré de l’arrondi. Vous devez utiliser une unité (habituellement en pixels). Une valeur élevée rend la bordure ronde. Cf. la recommandation du W3C sur border-radius
-moz-border-radius-bottomleft
Définit l’arrondi de l’angle en bas à gauche de la bordure.
-moz-border-radius-bottomright
Définit l’arrondi de l’angle en bas à droite de la bordure.
-moz-border-radius-topleft
Définit l’arrondi de l’angle en haut à gauche de la bordure.
-moz-border-radius-topright
Définit l’arrondi de l’angle en haut à droite de la bordure.
Code :
<div id="test6_mozilla"> </div>
<style type="text/css">
#test6_mozilla {
height: 50px;
width: 50px;
border: solid #000 1px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft 0px;
-moz-border-radius-bottomright: 0px;
}
</style>Code :
<div id="test7_mozilla"> </div>
<style type="text/css">
#test7_mozilla {
height: 50px;
width: 50px;
border: solid #000 1px;
-moz-border-radius: 100px;
}
</style>-moz-column-***
Ces propriétés permettent de controller l’affichage du texte sous forme de colonnes. Deux propriétés CSS contrôlent la présence et le nombre de colonnes qui seront affichées : -moz-column-count et -moz-column-width. -moz-column-gap gère l’espace entre les colonnes, qui est relativement faible par défaut.
Je vous conseille de lire la documentation, traduite en français, sur DevMo.
Code :
<div id="test8_mozilla">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin quis magna vitae sem venenatis posuere. Proin id turpis a justo mollis convallis. Integer laoreet tortor nec est. Maecenas condimentum orci eget lacus. Suspendisse eu quam non massa facilisis porta. Pellentesque quis massa et quam accumsan ornare. Integer erat ipsum, venenatis eu, condimentum eget, dictum at, turpis.</div>
<style type="text/css">
#test8_mozilla {
-moz-column-count:2;
-moz-column-gap:2em;
}
</style>-moz-outline
Cette propriété permet d’afficher le contour d’un élément.
Si vous cherchez des d’informations plus précise lisez la recommandation CSS sur outline. Note : je ne sais pas si Mozilla supporte toutes les valeurs telles que décritent dans la recommandation, c’est pour cela que la propriété est encore de la forme ’’-moz-*’’ alors que c’est une propriété CSS2.
On notera que :
Parfois, les auteurs de feuilles de style peuvent souhaiter créer des contours autour d’objets visuels, comme les boutons, les champs actifs des formulaires, les images découpées, etc., pour les faire ressortir. Les contours CSS2 diffèrent des bordures ainsi :
le contour est le même pour tous les côtés, à l’inverse des bordures, il n’existe pas de propriétés ’outline-top’ ou ’outline-left’.
Cas pratique :
<div id="test9_mozilla"><input type="text" class="bordure" value="bordure" /><br/><input type="text" class="contour" value="contour" /></div>
<style type="text/css">
#test9_mozilla .bordure:hover { border: 4px solid black }
#test9_mozilla .contour:hover { -moz-outline: 4px solid black }
</style>-moz-outline-color
Indique la couleur du contour. Similaire à border-color.
-moz-outline-radius
Cette propriété permet d’arrondir les contours des boîtes. Similaire à -moz-border-radius.
-moz-outline-radius-bottomleft
Définit l’arrondi de l’angle en bas à gauche du contour.
-moz-outline-radius-bottomright
Définit l’arrondi de l’angle en bas à droite du contour.
-moz-outline-radius-topleft
Définit l’arrondi de l’angle en haut à gauche du contour.
-moz-outline-radius-topright
Définit l’arrondi de l’angle en haut à droite de l’outline.
-moz-outline-style
Indique le style du contour. Similaire à border-style.
-moz-outline-width
Indique la largeur du contour. Similaire à border-width.
Conclusion
Il est important de rappeler à nouveau que ces propriétés ne doivent pas être utilisées sur des sites professionnels, on ne doit pas compter dessus, et encore moins compter avec les bugs qui y sont déjà associés. Ces propriétés ne sont là que pour vérifier l’implémentatibilité des travaux du W3C ! Il ne faut en aucun cas que la navigation sur votre site soit gênée si vos visiteurs utilisent un navigateur qui ne supporte pas ces propriétés, sans quoi on retomberait dans une guerre de fonctionnalités spécifiques à chaque navigateur...
Articles dans la même rubrique
- Nettoyage de printemps pour Firefox (8 février 2010 - 30164 visites - popularité 20%)
- XUL et XULRunner : fonctionnement de l’interface des logiciels Mozilla (12 septembre 2008 - 9851 visites - popularité 1%)
- Un dictionnaire français intégré par défaut dans Firefox, Thunderbird et Seamonkey (8 février 2008 - 35713 visites - popularité 5%)
