73
Utilisation des effets d’arrière‑plan
Ce rêve.un.peu.fou.devient.aujourd’hui.réalité,.grâce.à.la.nouvelle.propriété.CSS 3.borderradius..Tout.ce.que.vous.avez.à.faire.est.de.définir.le.rayon.de.l’arrondi.désiré ;.le.navigateur.
s’occupe.du.reste.(voir.Figure 4.13).
.box {
border-radius: 1em;
}
Figure 4.13
Une boîte à bords
arrondis créée avec la
propriété CSS 3 borderradius.
Cette. propriété. étant. récente,. des. désaccords. demeurent. sur. la. manière. dont. elle. devrait.
fonctionner..Jusqu’à.ce.qu’elle.soit.uniformément.acceptée,.vous.devrez.donc.utiliser.des.
extensions.spécifiques.des.navigateurs.pour.l’invoquer..Actuellement,.seuls.Firefox.et.Safari.
la.prennent.en.charge..C’est.la.raison.pour.laquelle.j’utilise.les.préfixes.–moz.et.–webkit.
.box {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
Les éditeurs de navigateurs expérimentent toujours de nouvelles extensions pour les CSS. Certaines
proviennent de versions CSS qui ne sont pas encore implémentées, alors que d’autres ne se fraient un
chemin dans les spécifications que plus tardivement. Certaines encore peuvent ne jamais atteindre la
spécification officielle, comme celles utilisées par Safari pour afficher des éléments d’interface utilisateur
sur l’iPhone.
Pour ne pas perturber d’autres agents utilisateur ou invalider votre code, vous pouvez invoquer ces
extensions en ajoutant un préfixe propre à l’éditeur dans votre sélecteur, votre propriété ou votre valeur.
Par exemple, Mozilla utilise le préfixe –moz, alors que Safari utilise le préfixe –webkit. Il existe des
préfixes similaires pour Internet Explorer, Opera et tous les principaux navigateurs. Chaque navigateur
possède son propre jeu de fonctionnalités spéciales auquel vous pouvez accéder avec ces préfixes. Vous
devrez donc probablement vérifier lesquels sont disponibles sur le site de développement des éditeurs.
Grâce à ce mécanisme, vous pouvez tester de nouvelles fonctionnalités CSS 3 avant qu’elles ne fassent
partie de la recommandation officielle. Cependant, utilisez ces extensions prudemment, car le format
de ces fonctionnalités expérimentales peut différer d’un navigateur à l’autre et peut même changer ou
disparaître d’ici à ce que la spécification devienne une recommandation officielle.
Utilisation des effets d’arrière‑plan
Ce rêve.un.peu.fou.devient.aujourd’hui.réalité,.grâce.à.la.nouvelle.propriété.CSS 3.borderradius..Tout.ce.que.vous.avez.à.faire.est.de.définir.le.rayon.de.l’arrondi.désiré ;.le.navigateur.
s’occupe.du.reste.(voir.Figure 4.13).
.box {
border-radius: 1em;
}
Figure 4.13
Une boîte à bords
arrondis créée avec la
propriété CSS 3 borderradius.
Cette. propriété. étant. récente,. des. désaccords. demeurent. sur. la. manière. dont. elle. devrait.
fonctionner..Jusqu’à.ce.qu’elle.soit.uniformément.acceptée,.vous.devrez.donc.utiliser.des.
extensions.spécifiques.des.navigateurs.pour.l’invoquer..Actuellement,.seuls.Firefox.et.Safari.
la.prennent.en.charge..C’est.la.raison.pour.laquelle.j’utilise.les.préfixes.–moz.et.–webkit.
.box {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
Les éditeurs de navigateurs expérimentent toujours de nouvelles extensions pour les CSS. Certaines
proviennent de versions CSS qui ne sont pas encore implémentées, alors que d’autres ne se fraient un
chemin dans les spécifications que plus tardivement. Certaines encore peuvent ne jamais atteindre la
spécification officielle, comme celles utilisées par Safari pour afficher des éléments d’interface utilisateur
sur l’iPhone.
Pour ne pas perturber d’autres agents utilisateur ou invalider votre code, vous pouvez invoquer ces
extensions en ajoutant un préfixe propre à l’éditeur dans votre sélecteur, votre propriété ou votre valeur.
Par exemple, Mozilla utilise le préfixe –moz, alors que Safari utilise le préfixe –webkit. Il existe des
préfixes similaires pour Internet Explorer, Opera et tous les principaux navigateurs. Chaque navigateur
possède son propre jeu de fonctionnalités spéciales auquel vous pouvez accéder avec ces préfixes. Vous
devrez donc probablement vérifier lesquels sont disponibles sur le site de développement des éditeurs.
Grâce à ce mécanisme, vous pouvez tester de nouvelles fonctionnalités CSS 3 avant qu’elles ne fassent
partie de la recommandation officielle. Cependant, utilisez ces extensions prudemment, car le format
de ces fonctionnalités expérimentales peut différer d’un navigateur à l’autre et peut même changer ou
disparaître d’ici à ce que la spécification devienne une recommandation officielle.