A quoi Servent les Préfixes CSS Navigateur (webkit, moz, ms et o) ?

Comprendre les moteurs de rendu

Avant même de parler de préfixe CSS, il est essentiel de comprendre ce qu’est un moteur de rendu.

Un moteur de rendu est la technologie intégrée aux navigateurs pour afficher des pages web dans des navigateurs. Ils sont en charge d’interpréter le HTML et CSS pour rendre des sites web.

Un moteur de rendu est un élément clé du navigateur et se doit donc d’être rapide et efficace.

Qu’est-ce qu’un préfixe CSS ?

Définition

Les préfixes CSS, également appelés « préfixes vendeurs » (ou « vendor prefixes » en anglais), sont des petits morceaux de code que l’on ajoute devant certaines propriétés CSS dans le but de les rendre compatibles avec des moteurs de rendu spécifiques et donc par extension les navigateurs les exploitant.

Concrètement, cela ressemble à ça :

.element {
    <monprefixe>-border-radius: 8px;
}

<monprefixe> est bien entendu à remplacer par un préfixe existant.

Leur objectif principal est de permettre l’utilisation de fonctionnalités CSS nouvelles ou expérimentales avant qu’elles ne deviennent des standards largement acceptés par tous les navigateurs.

Préfixes CSS principaux

Les principaux préfixes CSS que l’on rencontre sont -webkit-, -moz-, -ms- et -o-.

-webkit-

Le préfixe CSS -webkit- est utilisé pour tous les navigateurs basés sur les moteurs de rendu WebKit et Blink. Parmi ces navigateurs on retrouve pour les principaux :

• Safari
• Google Chrome
• Microsoft Edge
• Opera
• Brave

.element {
    -webkit-border-radius: 8px;
}

-moz-

Le préfixe CSS -moz- est utilisé pour les navigateurs basés sur le moteur de rendu Gecko, majoritairement utilisé par Firefox.

.element {
    -moz-border-radius: 8px;
}

-ms-

Le préfixe CSS -ms- (pour « Microsoft ») était utilisé pour les navigateurs basés sur les moteurs de rendu Trident et EdgeHTML, utilisés par Internet Explorer et les premières versions de Microsoft Edge.

.element {
    -ms-border-radius: 8px;
}

-o-

Le préfixe CSS -o- est utilisé pour les navigateurs basés sur le moteur de rendu Presto, majoritairement utilisé par Opera.

.element {
    -o-border-radius: 8px;
}

Rôle des préfixes CSS

Cycle de standardisation

Avant qu’une propriété CSS ne devienne standard, elle passe par une phase expérimentale.

Lors de cette phase, les nouvelles propriétés CSS sont introduites avec des préfixes spécifiques aux navigateurs (comme -webkit- ou -moz-).

Cela permet aux développeurs de commencer à utiliser ces propriétés dans leurs projets et fournir des retours sur leur utilisation. Ils peuvent signaler des bugs, des comportements inattendus, ou des améliorations potentielles.

Les équipes de développement des navigateurs et les groupes de travail des standards (comme le CSS Working Group du W3C) examinent ces retours. Ils peuvent ajuster l’implémentation de la propriété pour corriger les bugs, améliorer la compatibilité, ou ajouter des fonctionnalités demandées.

Une fois que la propriété a été suffisamment testée et ajustée, elle peut être proposée pour standardisation. Si elle est acceptée, elle devient une partie officielle des standards CSS, et les préfixes spécifiques aux navigateurs sont généralement abandonnés.

Pour une propriété comme border-radius (qui est maintenant standard), voici comment elle devait être écrite pour fonctionner dans tous les navigateurs à l’époque de son développement :

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;

Ces préfixes permettent d’assurer la compatibilité d’une propriété CSS avec des navigateurs qui n’ont pas encore totalement adopté une fonctionnalité spécifique.

Compatibilité

Les préfixes CSS sont essentiels pour garantir la compatibilité des styles au sein des navigateurs web, et cette compatibilité se divise en deux catégories : compatibilité anticipée et rétrocompatibilité.

Compatibilité anticipée

La compatibilité anticipée concerne l’utilisation de fonctionnalités CSS non encore standardisées. Grâce aux préfixes CSS (comme -webkit- ou -moz-), les développeurs peuvent tester et utiliser ces propriétés avant leur adoption officielle.

Cela permet d’expérimenter de nouvelles fonctionnalités et de fournir des retours aux navigateurs sur l’implémentation de ces fonctionnalités.

Rétrocompatibilité

La rétrocompatibilité fait référence à la capacité d’un site ou d’une application à fonctionner correctement sur des versions antérieures des navigateurs. Cela garantit que tous les utilisateurs, même ceux utilisant des versions anciennes/obsolètes, peuvent accéder au contenu sans rencontrer de problèmes majeurs.

Les préfixes CSS aident à assurer cette compatibilité en permettant aux anciennes versions des navigateurs de reconnaître et d’appliquer des propriétés CSS de manière appropriée.

La compatibilité anticipée et la rétrocompatibilité jouent un rôle clé pour le développement web moderne. Tandis que la compatibilité anticipée permet aux développeurs d’expérimenter au plus tôt de nouvelles fonctionnalités de style, la rétrocompatibilité garantit une base de style solide aux utilisateurs exploitant d’anciennes versions de navigateurs.

Comment préfixer mon CSS ?

À la main

Faire les choses manuellement, c’est possible, mais laborieux ! Imaginez-vous devoir ajouter les préfixes CSS pour chaque propriété nécessitant un support multi-navigateurs.

Cette approche augmente la charge de maintenance et le risque d’erreurs. En plus, les standards évoluent constamment, ce qui vous obligerait à suivre de près les changements dans la compatibilité des navigateurs depuis le site de référence Can I Use.

Heureusement, il existe une solution bien plus optimale !

Avec Autoprefixer

La meilleure solution consiste à automatiser le processus de génération des préfixes.

Des outils comme Autoprefixer se chargent de vérifier les préfixes nécessaires pour les propriétés CSS en fonction des navigateurs que vous souhaitez cibler. Cela permet de maintenir un code plus propre et évite le sur-préfixage, s’il ne présente pas de réelle utilitée.

En fonction de votre workflow, vous pouvez intégrer Autoprefixer dans des outils de build comme Webpack, Gulp ou PostCSS.