La liste des propriétés qui suivent n’inclue pas toutes les propriétés CSS3 existantes à ce jour. C’est une sélection des 10 propriétés qui vous donneront une bonne base pour vos développements front-end futurs et qui vous permettra de vous faire gagner du temps.
Note : à l’exception de @font-face, ni IE6, IE7 ou IE8 ne supportent les propriétés CSS3. IE9 en supporte quelques une, ce sera indiqué lorsque ça sera le cas.
@font-face
@font-face permet aux polices d’écritures d’être téléchargé du serveur vers le navigateur client afin d’afficher une police donnée de façon correcte. La syntaxe est la suivante :
@font-face {
font-family: "nom de la police";
src: url(nomduficher.ext) format ("nom du format");
}Comme c’est une propriété qui existe depuis déjà longtemps, c’est une des seules supportée par tous les navigateurs. Cependant, les anciennes versions de IE nécessitent l’utilisation de polices d’écritures au format .eot. IE9 supporte en plus le format .woff.
Il y a un bug connu des anciennes versions de IE et ce même en utilisant des polices en .eot. Il se peut que IE n’affiche pas les polices correctement à cause des valeurs subséquentes de la déclaration. Pour palier à ce problème, il est possible d’avoir deux déclarations de @font-face. La première sera déclarée avec le format .eot et la seconde sera une déclaration standard.
Il y a aussi un bug avec les navigateurs basés sur Webkit lorsque l’on applique un font-weight bold ou un font-style italic sur la police : ça ne fonctionne pas. La solution est d’ajouter ‘normal’ comme font-weight, style et variant lors de la déclaration.
La solution complète donne :
@font-face {
font-family: 'Colborate Light';
src: url('Colalig.eot');
src: local('?'), url('Colalig.woff') format('woff');
url('Colalig.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-variant: normal;
}Le smiley est intentionnel : il empêche le navigateur de recherche une copie locale de la police d’écriture et le force à utiliser la police téléchargeable.
Outils : Font Squirrel a un bon générateur de polices pour @font-face qui vous donnera toutes les polices désirées ainsi que le CSS qui va bien : cliquez ici
Opacity
Vous pouvez contrôler l’opacité d’un élément en allant d’un élément opaque à complètement transparent. La propriété opacity s’applique à l’élément cible ainsi qu’à tous les éléments fils de ce dernier. La syntaxe est la suivante :
opacity: valeur;
La valeur à spécifier est entre 0.0 et 1.0 (opaque). Bien que la valeur peut avoir deux décimales, la différence n’est pas discernable. Bien qu’aucune version d’Internet Explorer ne soit compatible, Microsoft a mis en place un filtre spécifique :
filter: alpha(opacity=40);
C’est un alias de la propriété suivante :
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
Il y a aussi un filtre spécifique à IE8 et IE9 avec le préfixe -ms-. L’ordre des propriétés CSS3 est important pour la rétrocompatibilité entre les versions d’IE :
.element-transparent {
background-color: #3C4C55;
color: #fff;
opacity: 0.2;
/* IE 8 seulement */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
/* IE 6,7,8 */
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
filter: alpha(opacity=20);
}RGBA
La couleur RGBA est un des nombreux moyens dont vous pouvez déclarer vos couleurs en CSS3. Ce qui la différencie des autres est que vous pouvez déclarer l’opacité de la police en même temps que la déclaration de sa couleur.
La syntaxe est la suivante :
rgba(<valeur de la couleur rouge>, <valeur de la couleur verte>, <valeur de la couleur bleue>, <opacité>);
Les valeurs des couleurs sont entre 0 et 255 et la transparence est entre 0.0 et 1.0. Tous les navigateurs modernes sont compatibles avec cette propriété CSS3, IE 9 inclus. Les vieilles version de IE le sont moins.
Plusieurs bugs sont présents dans les vielles versions de IE. Il y a d’un côté la couleur qui ne s’affiche pas si on utilise background-color. La solution est ici d’utiliser la propriété background ou d’utiliser des couleurs en hexadécimal au lieu de RGBA. Il y a finalement un bug avec la transparence de l’élément, bug qui peut être résolu en utilisant gradient filter.
La solution en utilisant background-color et background :
#element {
background: rgb(255, 0, 0);
background: rgba(255, 0, 0, 0.3);
background-color: #ff0000;
background-color: rgba(255, 0, 0, 0.3);
}La solution en utilisant les filter :
#element {
background-color: #ff0000;
background-color: transparent; /* nécessaire pour que le filtre fonctionne */
background-color: rgba(255, 0, 0, 0.3);
/* filtre pour IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cff0000, endColorstr=#4cff0000)";
/* filtre pour les IE plus vieux */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cff0000, endColorstr=#4cff0000);
}Border-radius
Cette propriété CSS3 permet d’afficher les fameuses bordures arrondies. C’est l’une des plus utiles en CSS3 :
border-radius : <valeur du haut> <valeur de droite> <valeur du bas> <valeur de gauche>;
On peut noter ici l’utilisation du préfixe -webkit- utilisé pour les navigateurs basés sur Webkit et le préfixe -moz-. Border-radius est supportés par tous les navigateurs modernes mais il n’y a pas de code de rétrocompatibilité pour les anciennes versions de IE. Par contre vous pouvez utiliser une solution basée sur des images mais il est encore plus simple de laisser les coins carrés pour IE.
.coins_arrondis {
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}Vous pouvez aussi spécifier des arrondis plus ou moins prononcés en fonction des coins des élements de cette façon :
.coins-arrondis {
border: 5px solid #aaa;
-moz-border-radius: 10x 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5x;
border-radius: 10px 5px;
}Outils : voici un générateur de border-radius bien utile qui vous compile directement les codes d’inter compatibilité entre les différents navigateurs : www.border-radius.com
Box-shadow
C’est une propriété CSS3 qui a été longuement attendue et qui permet d’appliquer une ombre sur des éléments sans plus avoir à utiliser des images ou à faire des découpages approximatifs :
box-shadow: <position> <coordonnées x> <coordonnées y> <degré de floutage>;
La position peut être externe (outset), c’est la valeur par défaut et il n’y a pa besoin de la spécifier ais elle peut aussi être interne (inset), et dans ce cas là il faut la spécifier.
Box-shadow est bien supporté par l’ensemble des navigateurs récents incluant IE9. Dans Firefox 4.0, le préfixe -moz- a été abandonné est n’a plus besoin d’être utilisé. Par ailleurs, pour les version de Firefox plus anciennes, il est toujours nécessaire de l’utiliser. Vous pouvez même appliquer plusieurs ombres sur un éléments en définissant plusieurs propriétés CSS3 à la suite.
Concernant IE, les filtres dropshadow et shadow fonctionnent tous les deux mais le filtre shadow a un meilleur rendu à l’écran.
La solution complète est :
.ombre {
-moz-box-shadow: 3px 3px 10px #333;
-webkit-box-shadow: 3px 3px 10px #333;
box-shadow: 3px 3px 10px #333;
/* pour IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
/* pour IE5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');
}Text-shadow
C’est le petit cousin de la propriété CSS3 box-shadow. Celle-ci ajoute une ombre portée sur du texte si bien que l’on peut avoir des effets variés. La syntaxe de text-shadow est la même que pour box-shadow sauf pour la valeur inset qui n’est pas applicable sur du texte. Il est également bien supporté par tous les navigateurs modernes y compris IE9 et il est également possible d’ajouter plusieurs ombres à un élément en définissant plusieurs fois la propriété.
.text_ombre {
text-shadow: 1px 1px 2px rgba(48, 80, 82, 0.8);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#305052')";
/* pour IE5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#305052');
}Outils : il y a de bons outils pour la générations d’ombre portée sur du texte dont voici les liens : www.westciv.com/tools/shadows et www.westciv.com/tools/text-properties/index.html
Gradient
Les dégradés sont pour moi l’une des propriétés CSS3 les plus intéressantes à travailler. A vrai dire, le dégradé n’est une propriété à proprement parlé, c’est plutôt un ensemble de définitions qui peuvent être utilisées avec background, border-image et list-style-image.
Le dégradé est généré par le navigateur, ce qui nous évite de devoir utiliser des images pour arriver à notre fin. C’est d’ailleurs la propriété CSS3 qui a le plus de variations au niveau de la syntaxe entre les différents navigateurs.
Mozilla permet d’utiliser des degrés d’angle pour incliner plus ou moins le dégradé. Les navigateurs basés sur Webkit définissent le dégradé de la couleur de début vers la couleur d’arrivé. Par ailleus, ni Opera ni aucunes des version de IE (IE9 également) ne supportent le dégradé. Pour Opera, on poura utiliser une image de font pour améliorer l’inter-compatibilité entre les navigateurs. Enfin, pour les version d’Internet Explorer, nous allons utiliser des filtres.
Notre solution complète donne :
.degrade {
color: #fff;
/* Opera, tranche de 1px de large */
background: #aaaaaa url(tranche_degrade.jpg) 0 0 repeat-x;
background-image: -moz-linear-gradient(top, #07407c, #aaaaaa);
background-image: -webkit-gradient(linear, left, top, left, bottom, color-stop(0, #07407c), color-stop(1, #aaaaaa));
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa')";
/* pour IE5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#07407c', EndColorStr='#aaaaaa');
}Outils : deux générateurs de dégradés qui peuvent vous être utile sont gradients.glrzad.com et www.colorzilla.com/gradient-editor
Images de fond multiples
En CSS3, vous pouvez définir plus de une image de fond pour un élément. Il était déjà possible d’attribuer plusieurs image à un élément en CSS2 mais maintenant cela fonctionne plus comme des calques. On peut définir par exemple que telle image doit s’afficher tout en haut de l’élément et que telle image doit s’affiche sous cette dernière, et ce, très facilement en empilant nos définitions lors de la déclaration du style.
Background : <image> <position> <repeat>, <image> <position> <repeat>, <image> <position> <repeat> <couleur>;
Tous les navigateurs modernes supportent les images de fond multiples sauf, vous l’aurez deviné, les vieilles version de IE. IE9 supporte cette propriété CSS3. Pour les navigateur qui ne la supportent pas, il faut placer le code d’inter-compatibilité au début de déclaration de la propriété CSS. Il y a toutefois un filtre pour les vieilles version d’IE mais qui reste assez limité. On peut effectivement charger plusieurs images avec le filtre AlphaImageLoader mais bien que l’on peut en contrôler la transparence, on ne peut en contrôler la position. (ça sera en haut à gauche par défaut – sans compter les problèmes de performances du filtre)
body {
background: url(body-entier.png) top left no-repeat;
background: url(body-haut.png) top left no-repeat,
url(body-bas.png) bottom left no-repeat,
url(body-milieu.png) left repeat-y;
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='body-haut.png', sizingMethod='scale')";
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='body-haut.png', sizingMethod='scale') ";
zoom: 1;
}Transform
Cette propriété CSS3 peut prendre plusieurs type de valeur différent si bien que l’on peut effectuer des rotation, des translations, des déformations, etc. Nous parlerons juste des rotations dans un premier temps mais vous pouvez avoir un aperçu de toutes les possibilités que vous laisse cette propriété ici : www.standardista.com/css3-transforms
La syntaxe pour effectuer les rotations est la suivante :
<-prefix->transform : rotate(<valeur>);
Les valeurs positives vont faire pivoter votre objet dans le sens des aiguilles d’une montre et les valeurs négatives vont faire pivoter l’objet dans le sens inverse. Pour IE, il faut utiliser le filtre spéfique Matrix. Il faudra cependant ne pas oublier d’appliquer zoom: 1 à votre élément pour que cela fonctionne correctement.
.rotation {
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.9961946980917455,
M12=0.08715574274765817,
M21=0.08715574274765817,
M22=0.9961946980917455);
zoom: 1;
}Outils : ce générateur de propriété transform génère le code pour les navigateurs modernes : www.westciv.com/tools/transforms/index.html
Pour avoir le code de compatibilité inter-navigateur, il faut aller sur css3please.com
PS : vous pouvez aussi aller sur www.outsideapp.com pour voir une parfaite implémentation de cette propriété CSS3 au niveau du soleil en haut a droite.
Transition
Cette propriété permet de modifier dynamiquement les valeurs définies de vos éléments pour les animer de façon harmonieuse. La syntaxe est la suivante :
<-prefixe->transition : <propriété> <durée> <fonction temporelle> <début de la transition>;
La proriété est le nom de la propriété CSS à laquelle l’effet sera appliqué. Vous pouvez utilisez all. La durée est la période de temps que la transition va prendre pour s’effectuer en intégralité. La fonctionne temporelle est la fonction qui va calculer les valeurs de temps intermédiaires entre le début et la fin de la transition.
Vous pouvez définir plusieurs valeurs différentes à la propriété transition. Bien que la propriété soit compatible avec tous les navigateurs récents, la façon de définir les transitions ne sont pas les mêmes. Les transitions sous Mozilla saccadent un peu alors qu’elles sont vraiment fluides sous Chrome et Safari. Concernant les filtres pour Internet Explorer, Il y en a une flopée et ça dépend vraiment de la transition que vous voulez effectuer. Pour plus d’informations à ce niveau, vous pouvez visiter ce lien.
Voila ce que ça pourrait donner :
#photos > img:hover {
-moz-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}