Les préfixes CSS

Dans une vieille feuille de style, tu trouves plusieurs lignes presque identiques : -webkit-border-radius, -moz-border-radius, et à la fin un simple border-radius. On dirait du désordre, mais c'était autrefois le seul moyen de faire fonctionner une nouvelle propriété dans tous les navigateurs. Ces ajouts sont les préfixes de navigateur (en anglais vendor prefixes).

Les préfixes en CSS servent à assurer la compatibilité avec les différents navigateurs, en particulier lorsqu'il s'agit de propriétés et de fonctionnalités plus récentes ou expérimentales. Ce sont des préfixes spéciaux ajoutés à certaines règles CSS pour aider les différents navigateurs à interpréter ces règles. Pense à la pierre de Rosette : le même décret y a été gravé dans trois écritures - les hiéroglyphes, le démotique et le grec - pour que quiconque connaissait au moins l'une d'elles puisse le lire. Les préfixes fonctionnent de la même façon : tu écris la même déclaration en plusieurs « dialectes », et chaque navigateur lit celui qu'il comprend.

1. Pourquoi les préfixes sont-ils importants ?

Tous les navigateurs ne prennent pas en charge toutes les propriétés CSS de la même façon, surtout lorsqu'il s'agit de fonctionnalités plus récentes. Les préfixes aident à garantir que ces propriétés fonctionneront correctement dans les différents navigateurs. Quand un éditeur de navigateur introduisait une nouvelle propriété, pas encore standardisée, il l'ajoutait avec son propre préfixe - il pouvait ainsi expérimenter sans abîmer la future version standard.

2. Les préfixes de navigateur les plus populaires

Voici les préfixes de navigateur les plus couramment utilisés :

• -webkit- : pour les navigateurs basés sur le moteur WebKit, comme Safari, ainsi que pour Chrome, les versions récentes d'Opera et Microsoft Edge, dont le moteur Blink est issu de WebKit.
• -moz- : pour les navigateurs basés sur Firefox (Mozilla).
• -o- : pour les anciennes versions d'Opera.
• -ms- : pour Internet Explorer et les anciennes versions de Microsoft Edge, antérieures au passage au moteur Chromium.

3. Comment appliquer les préfixes ?

Les préfixes s'appliquent en les ajoutant devant le nom de la propriété CSS. L'ordre compte : d'abord les versions préfixées, et tout à la fin la version standard. Voici à quoi ressemblait autrefois une règle avec la propriété border-radius, quand celle-ci était encore une nouveauté :

1div {
2  -webkit-border-radius: 10px;
3  -moz-border-radius: 10px;
4  -ms-border-radius: 10px;
5  -o-border-radius: 10px;
6  border-radius: 10px; /* version standard */
7}

Le navigateur lit les déclarations de haut en bas et ignore celles qu'il ne comprend pas. S'il connaît plusieurs versions de la même propriété, c'est celle écrite le plus bas qui s'applique - c'est pourquoi la version standard se trouve à la fin et l'emporte toujours sur l'expérimentation précédente. Vois cet exemple comme une leçon sur l'ordre : aujourd'hui, border-radius fonctionne sans préfixe dans tous les navigateurs, et les versions -ms- et -o- de cette propriété n'ont jamais été nécessaires, car Internet Explorer et Opera ont tout de suite pris en charge l'écriture standard.

4. Les outils et Autoprefixer

Ajouter manuellement des préfixes à chaque nouvelle propriété peut être fastidieux et peu pratique. Heureusement, il existe des outils comme Autoprefixer, qui peuvent ajouter automatiquement les préfixes requis à ta feuille de style. Regarde le code ci-dessous - uniquement des propriétés standard, sans aucun préfixe :

1.my-element {
2  transform: rotate(45deg);
3  animation: my-animation 5s infinite;
4  box-shadow: 10px 10px 5px #888;
5  border-radius: 10px;
6}
7
8@keyframes my-animation {
9  from { transform: rotate(0deg); }
10  to { transform: rotate(360deg); }
11}

C'est ainsi que tu écris au quotidien : une seule fois, lisiblement, dans la version standard. Si tu colles ce code dans Autoprefixer Online et que tu configures la prise en charge de très vieux navigateurs, tu obtiendras à peu près le résultat suivant :

1.my-element {
2  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
3  -moz-transform: rotate(45deg);    /* Firefox */
4  -ms-transform: rotate(45deg);     /* IE 9 */
5  -o-transform: rotate(45deg);      /* Anciennes versions d'Opera */
6  transform: rotate(45deg);         /* Standard */
7
8  -webkit-animation: my-animation 5s infinite; /* Chrome, Safari, Opera */
9  -moz-animation: my-animation 5s infinite;    /* Firefox */
10  -ms-animation: my-animation 5s infinite;     /* IE 10+ */
11  -o-animation: my-animation 5s infinite;      /* Anciennes versions d'Opera */
12  animation: my-animation 5s infinite;         /* Standard */
13
14  -webkit-box-shadow: 10px 10px 5px #888; /* Chrome, Safari, Opera */
15  -moz-box-shadow: 10px 10px 5px #888;    /* Firefox */
16  box-shadow: 10px 10px 5px #888;         /* Standard */
17
18  -webkit-border-radius: 10px; /* Chrome, Safari, Opera */
19  -moz-border-radius: 10px;    /* Firefox */
20  border-radius: 10px;         /* Standard */
21}
22
23@-webkit-keyframes my-animation {
24  from { -webkit-transform: rotate(0deg); }
25  to { -webkit-transform: rotate(360deg); }
26}
27
28@-moz-keyframes my-animation {
29  from { -moz-transform: rotate(0deg); }
30  to { -moz-transform: rotate(360deg); }
31}
32
33@-ms-keyframes my-animation {
34  from { -ms-transform: rotate(0deg); }
35  to { -ms-transform: rotate(360deg); }
36}
37
38@-o-keyframes my-animation {
39  from { -o-transform: rotate(0deg); }
40  to { -o-transform: rotate(360deg); }
41}
42
43@keyframes my-animation {
44  from { transform: rotate(0deg); }
45  to { transform: rotate(360deg); }
46}

Voilà à quoi ressemblaient les feuilles de style qui devaient fonctionner dans les navigateurs d'il y a une bonne quinzaine d'années - les commentaires indiquent quel navigateur lisait quelle ligne. D'ailleurs, toutes ces lignes n'étaient pas nécessaires : Internet Explorer 10 prenait en charge les animations sans préfixe, donc -ms-animation et @-ms-keyframes sont superflus. Autoprefixer vérifie dans la base de données Can I use ce dont ont besoin les navigateurs indiqués dans la configuration (Browserslist), et n'ajoute que ces préfixes-là. Avec les réglages par défaut d'aujourd'hui, il n'ajouterait presque rien à ce code.

5. As-tu encore besoin des préfixes aujourd'hui ?

Bien que les préfixes soient utiles, il faut garder à l'esprit que toutes les propriétés n'en ont pas besoin, et que certaines sont peut-être déjà largement prises en charge par la plupart des navigateurs. Consulter la documentation et utiliser des outils de test de compatibilité des navigateurs peut t'aider à comprendre quand et comment appliquer les préfixes.

Aujourd'hui, les éditeurs de navigateurs s'éloignent des préfixes : ils cachent les fonctionnalités expérimentales derrière des options (flags) dans les paramètres, et seules les versions standard arrivent sur les sites. Il reste toutefois quelques propriétés qui ne fonctionnent qu'avec le préfixe -webkit-, alors avant d'utiliser une nouveauté, consulte le tableau de compatibilité sur MDN ou sur le site Can I use. Mon conseil : n'ajoute pas les préfixes à la main - écris des propriétés standard et laisse les préfixes à Autoprefixer.

Pratique

Dans l'éditeur ci-dessous, une page égyptienne attend d'être colorée - complète les couleurs manquantes en suivant les commentaires. Ensuite, ajoute dans la balise <style> une règle pour l'image avec border-radius: 10px, sans aucun préfixe, et vérifie que les coins de la fresque se sont arrondis :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>Égypte antique</title>
6    <style>
7        /* Ajoute le style CSS ici */
8        /* 1. Mets la couleur du titre h1 en or foncé (#7A5C00) */
9        /* 2. Mets la couleur de fond du body en sable (#F4E4C1) */
10        /* 3. Mets la couleur du texte p en brun foncé (#4A3C2A) */
11
12        body {
13            /* background-color: ??? */
14            font-family: serif;
15            padding: 20px;
16        }
17
18        h1 {
19            /* color: ??? */
20            text-align: center;
21        }
22
23        p {
24            /* color: ??? */
25            line-height: 1.6;
26        }
27    </style>
28</head>
29<body>
30    <h1>Les pyramides de l'Égypte antique</h1>
31    <p>Les pyramides ont été construites comme tombeaux des pharaons. La plus grande d'entre elles - la pyramide de Khéops - est l'une des sept merveilles du monde antique.</p>
32    <img src="https://placehold.co/400x200/FFD700/4A3C2A?text=Fresk+Egipski" alt="Fresque égyptienne" style="display:block;margin:20px auto;">
33</body>
34</html>

Retiens : les préfixes sont la pierre de Rosette du CSS - la même écriture en plusieurs dialectes, avec la version standard toujours à la fin, et aujourd'hui, c'est Autoprefixer qui les écrit pour toi.