Il est temps de repenser les préfixes des fournisseurs en CSS. Préfixes spécifiques au navigateur

De l'auteur : Le préfixe -webkit- est si courant en CSS aujourd'hui que certains sites refusent de fonctionner correctement sans lui. Alors que les préfixes CSS des fournisseurs ont été un signe clair de propriétés loin d'être parfaites pour les développeurs au cours des deux dernières années, cela a conduit Mozilla à prendre une mesure désespérée mais nécessaire. Dans Firefox 46 ou 47 (publiés en avril ou mai 2016), Mozilla prévoit d'introduire la prise en charge d'une série de préfixes –webkit- non standard pour améliorer la compatibilité du navigateur avec ce préfixe (même sur les appareils mobiles).

L'idée n'est pas nouvelle, Microsoft Edge prend également en charge divers préfixes -webkit- pour la compatibilité. Opera a commencé à prendre en charge les préfixes -webkit- en 2012, puis est passé au moteur Webkit Blink. Le W3C et les développeurs de navigateurs n'avaient pas prévu d'utiliser ce préfixe dans le développement de sites Web :

« La politique officielle du W3C stipule que les propriétés expérimentales ne doivent pas être utilisées dans le code du site. Cependant, les gens les utilisent parce qu'ils veulent que leurs sites utilisent les dernières technologies et aient un look cool. »— Page du W3C sur l'optimisation du contenu pour différents navigateurs

Cependant, les développeurs souhaitent toujours accéder aux dernières fonctionnalités le plus rapidement possible. Les préfixes des fournisseurs ont tout bouleversé et ont donné la domination à Webkit, mais je pense que les préfixes ont eu un impact énorme sur le développement rapide d'Internet.

Les méthodes de Mozilla et Microsoft ne feront que nuire à la plupart des sites. La plupart des sites auront déjà les préfixes –moz- activés, ou constateront qu'avec la nouvelle mise à jour, Mozilla prendra en charge les nouvelles propriétés sans qu'il soit nécessaire d'apporter des modifications. Cependant, en tant que développeurs Web professionnels, nous devons mettre cela de côté et comprendre que certaines conceptions peuvent produire des résultats mitigés. Vous savez peut-être déjà lesquels de vos projets seront détruits par cette mise à jour. Développeurs Web, il est temps de repenser votre approche des préfixes des fournisseurs et de les tester sur les sites.

Nouveaux préfixes

Mozilla va inclure un certain nombre de préfixes –webkit-. D'après ce que j'ai compris, il semble que Mozilla n'a pas l'intention de faire correspondre sa liste avec les propriétés Edge. Toutes les propriétés ne doivent pas nécessairement être compatibles avec le moteur Mozilla. Parmi les préfixes que Mozilla va ajouter, à en juger par la page wiki Compatibilité/Mobile/Compatibilité non standard, figurent les suivants :

Webkit - pour les dégradés

Transformations Webkit

Transitions du kit Web

Apparence du Webkit

Webkit-background-clip

Rapport de pixels sur l'appareil Webkit

Animation du kit Web

Certaines autres propriétés peuvent se trouver dans @-webkit-keyframes.

Les tests multi-navigateurs seront essentiels

Si vous, développeur Web, n'avez pas inclus le préfixe -moz- pour ne pas tester de nouvelles propriétés CSS dans Firefox, et que la date limite approche et que le client vous oblige à ajouter ce préfixe, alors vous devrez retester le site dans Firefox 46 ou 47. Ces versions sortiront en avril ou mai, vous avez donc encore du temps.

Pour tester votre site Web sans attendre Firefox 46/47, vous pouvez activer ces modifications dans Firefox Nightly en définissant layout.css.prefixes.webkit dans about:config. Si la dernière version de Nightly est installée, la valeur par défaut devrait être vraie. Toutes les modifications du préfixe -webkit- ne fonctionnent pas encore dans Firefox Nightly, mais c'est toujours un bon endroit pour tester à quoi ressemblera bientôt votre site. J'attendrais mars avant de tester sérieusement le site dans Firefox Nightly.

Plus important encore, Microsoft Edge interprète et affiche déjà les préfixes -webkit- de la même manière. Cela signifie que tous les styles WebKit de votre site sont déjà affichés dans un navigateur complètement inattendu. Si vous n'avez pas encore travaillé avec ce navigateur, installez Windows 10 et accédez-y aux sites de test.

Les préfixes des fournisseurs disparaissent progressivement

Heureusement, les préfixes des fournisseurs disparaissent progressivement à mesure que les équipes de développement trouvent de nouvelles solutions. L'équipe Chrome/Blink a légèrement modifié son approche :

"À l'avenir, au lieu d'activer les préfixes des fournisseurs par défaut, nous conserverons les propriétés normales derrière l'indicateur 'activer les propriétés expérimentales de la plateforme Web' dans about:flags jusqu'à ce que ces propriétés soient activées par défaut."— L'équipe Chrome/Blink

L'équipe Firefox a suivi un chemin similaire : « La principale direction de travail chez Mozilla consiste désormais à s'éloigner des préfixes des fournisseurs, en les désactivant ou en les transférant à l'état de propriétés normales s'ils sont déjà stables. C'est du moins notre politique générale ; les cas individuels méritent des exceptions. »—Boris de Mozilla

Microsoft Edge vise également la suppression de la prise en charge des préfixes : « Microsoft essaie également de supprimer les préfixes des fournisseurs dans Edge. Cela signifie que les développeurs n'auront pas besoin d'ajouter un préfixe spécial pour le navigateur Edge lorsqu'ils utiliseront des balises HTML5 spéciales ou des propriétés CSS. Au lieu de cela, les développeurs écriront du code standard. »— Écrasable

La dégradation gracieuse utilisant des préfixes ne fonctionne plus

S'éloigner des préfixes des fournisseurs ne signifie qu'une chose : la technique de dégradation gracieuse via les préfixes n'est plus une option. Isoler des navigateurs spécifiques via des préfixes de fournisseurs (par exemple, pour Chrome) n'était pas le but de ces préfixes ; Les développeurs ont toujours été encouragés à utiliser tous les préfixes (–webkit- à –o-). Si vous utilisez une fonctionnalité qui fonctionne sur des propriétés avec des préfixes de fournisseur et que vous avez également utilisé la technique de dégradation gracieuse dans votre conception pour d'autres navigateurs, cela ne fonctionne plus.

Conclusion

Les temps changent. La domination de WebKit n'était pas intentionnelle et a provoqué des troubles et des incompatibilités sur Internet. D'autres navigateurs cherchent à étendre la compatibilité en ajoutant des préfixes –webkit-. Progressivement, avec la disparition des préfixes des fournisseurs, ce problème disparaîtra également. Les développeurs doivent vérifier si l'utilisation de préfixes n'entraîne pas de conséquences indésirables dans les navigateurs non WebKit.

Le préfixe -webkit- est tellement dominant en CSS que certains sites ne fonctionnent pas correctement sans lui. Cela indique que les développeurs n'ont pas suivi les meilleures pratiques ces dernières années, ce qui a conduit à une décision malheureuse, mais presque forcée de la part de Mozilla. Dans la version 46 ou 47 de Firefox (avril ou mai 2016), Mozilla prévoit d'implémenter la prise en charge des préfixes -webkit- non standard pour améliorer la compatibilité de Firefox avec les sites qui utilisent activement -webkit (généralement des sites destinés aux mobiles).

Cependant, les développeurs utilisent des préfixes pour utiliser les dernières fonctionnalités du navigateur le plus rapidement possible. Les préfixes ont semé la confusion avec la domination de WebKit, mais ils ont également forcé le Web à avancer à un rythme accéléré.

L'approche de Mozilla et Microsoft est sûre pour la plupart des sites. De nombreux sites utiliseront le préfixe -moz- ou ne nécessiteront aucune action pour être compatibles avec une future mise à jour de Firefox. Mais en tant que développeurs Web professionnels, nous devons soigneusement réfléchir et comprendre les conséquences que cela entraînera. Vous savez probablement lesquels de vos sites peuvent être concernés par cette mise à jour.

Il est donc temps de repenser l'approche des préfixes et de tester les sites avec eux.

Préfixes pris en charge

Il existe un certain nombre de préfixes -webkit- que Mozilla peut implémenter. D'après ce que j'ai compris, Mozilla n'a pas tendance à faire correspondre sa liste de propriétés de préfixes prises en charge avec celle d'Edge, car elles ne sont pas toutes nécessaires à la compatibilité du moteur de mise en page.

Les développeurs de Firefox sont également proches d’une approche similaire :

La tendance actuelle chez Mozilla est d'éviter les préfixes des fournisseurs en désactivant les propriétés sans préfixe et en utilisant la version sans préfixe avec une stabilité suffisante. Il s'agit d'une politique générale : des exceptions peuvent s'appliquer dans certains cas - Boris de Mozilla

Microsoft Edge va également abandonner les préfixes des fournisseurs :

« Microsoft va également éliminer les préfixes des fournisseurs dans Edge. Cela signifie que les développeurs qui souhaitent utiliser des fonctionnalités HTML et CSS spécifiques n'utiliseront pas de préfixe spécifique à Edge. Au lieu de cela, ils écriront simplement du code selon les normes » - Mashable

Il n'y aura plus de dégradation progressive basée sur les préfixes

Cet éloignement des préfixes de fournisseur signifie une chose : la dégradation progressive utilisant les préfixes de fournisseur n'a aucune perspective.

L'utilisation de préfixes de fournisseurs pour appliquer des styles à un navigateur spécifique (par exemple, Chrome uniquement) n'était pas le but de leur introduction ; La recommandation aux développeurs a toujours été d'utiliser tous les préfixes (de -webkit- à -o-). Si vous utilisez des fonctionnalités qui dépendent des propriétés des préfixes et que vous utilisez des préfixes pour dégrader progressivement votre conception dans d'autres navigateurs, cela ne fonctionne plus.

Conclusion

Les temps changent. La domination de WebKit a involontairement conduit à des problèmes d'incompatibilité, obligeant d'autres fournisseurs de navigateurs à implémenter les préfixes -webkit-. Ce problème prendra fin à mesure que les fournisseurs de navigateurs élimineront progressivement les préfixes des fournisseurs, mais entre-temps, les développeurs doivent s'assurer que les préfixes ne provoquent pas de résultats inattendus dans les navigateurs non-WebKit.

Il existe de nombreuses façons de compresser un fichier CSS ou de générer automatiquement des préfixes de navigateur pour CSS3. En règle générale, la résolution d'un tel problème nécessite un utilitaire supplémentaire, ce qui peut être assez peu pratique à utiliser. Dans ce tutoriel, nous verrons comment une telle tâche peut être résolue en utilisant PHP.

Examinons trois questions :

• Générez des propriétés CSS3 avec des préfixes de navigateur afin de ne pas avoir à les gérer manuellement.
• Concaténez les fichiers CSS et éliminez les commentaires et les espaces supplémentaires pour réduire le nombre de requêtes adressées au serveur et améliorer le temps de chargement des pages.
• Exécutez les processus ci-dessus lorsqu'une page est demandée.

Donnons un exemple qui montre à quel point le résultat de notre leçon est facile à utiliser.

Le fichier CSS utilise des traits de soulignement au lieu de préfixes :

Rayon de bordure : 10 px ;

Le code du script générera une liste complète de propriétés avec des préfixes :

Rayon de la bordure O : 10 px ; -moz-border-radius : 10px ; -webkit-border-radius : 10 px ; rayon de bordure : 10 px ;

Une balise de lien charge trois fichiers CSS à la fois. Le script css.php lit les fichiers répertoriés (css_file1.css, css_file2.css et css_file3.css), les combine et renvoie un seul fichier.

Voyons maintenant comment fonctionne le script.

Écrire du code

Créez un fichier css.php avec le code suivant :

Le script récupère d'abord la liste des fichiers CSS à traiter sous forme de chaîne à partir du paramètre URL (disponible en PHP sous la forme $_GET["f"]). Chaque fichier est séparé par une barre verticale. La fonction éclater() divise une chaîne au niveau du caractère barre verticale et renvoie un tableau de noms de fichiers.

La fonction file_get_contents() récupère le contenu de chaque fichier, un par un, et nous les ajoutons à la variable $contents.

Une fois le contenu des fichiers CSS récupéré, une recherche commence pour les propriétés commençant par un trait de soulignement, qui est remplacé par le préfixe du navigateur. La fonction preg_match_all() trouve toutes les parties du texte qui correspondent à l'expression régulière et les place sous forme de tableau dans $matches .

La figure décrit le modèle de l'expression régulière :

Le tableau $prefixes contient les préfixes du navigateur. Vous pouvez ajouter ou supprimer ce dont vous avez besoin. Chaque propriété dans $matches sera transformée en un ensemble de propriétés CSS3 avec des préfixes de navigateur. Le code traite chaque propriété et crée un tampon de résultat en remplaçant le trait de soulignement de la propriété par le préfixe suivant, puis en remplaçant la propriété d'origine par le contenu du tampon.

Après avoir ajouté les préfixes du navigateur et renvoyé les propriétés à $contents , le script supprime tous les commentaires dans le contenu pour en réduire la taille. La figure ci-dessous décrit l'expression régulière correspondante.

Une autre expression régulière est ensuite utilisée pour supprimer les espaces et les nouvelles lignes inutiles.

Les propriétés qui correspondent à l'expression régulière seront fortement compressées :

Le résultat dans la variable $contents est un fichier CSS prêt à être envoyé. Le premier appel à la fonction header() informe le navigateur que les informations transmises doivent être traitées comme un fichier CSS. Le deuxième appel à header() indique au navigateur que le fichier est valide pendant une heure, de sorte que le navigateur en mettra une copie dans son cache et ne demandera plus le fichier au serveur.

Utiliser le script

Donnons un exemple simple d'utilisation de notre script. Plaçons le fichier css.php dans le répertoire css de votre projet avec trois fichiers CSS.

Premier fichier header.css :

#header ( largeur : 800 px ; hauteur : 100 px ; remplissage : 20 px ; _border-radius : 10 px ; _box-shadow : 0px 0px 10px #000000 ; arrière-plan : _linear-gradient(#D30000, #3D0000); )

Le deuxième fichier est center.css :

#center ( largeur : 800 px ; hauteur : 400 px ; remplissage : 20 px ; marge : 20 px 0 px ; _border-radius : 10 px ; _box-shadow : 0px 0px 10px #000000 ; arrière-plan : _linear-gradient(#8ED300, #213D00); )

Le troisième fichier est footer.css :

#pied de page (largeur : 800 px ; hauteur : 100 px ; remplissage : 20 px ; _border-radius : 10px ; _box-shadow : 0px 0px 10px #000000 ; arrière-plan : _linear-gradient(#006ED3, #00203D); )

Remarquez comment les propriétés CSS3 sont écrites. Ceux qui nécessitent des préfixes de navigateur sont définis une seule fois avec un trait de soulignement avant le nom.

Nous créons maintenant un fichier index.html qui utilise ces styles.

Notez l'attribut href dans la balise de lien. Chaque fichier CSS est séparé par une barre verticale.

Conclusion

Ce tutoriel montre quelques manipulations CSS de base à l'aide de PHP. Le script est basé sur l'utilisation d'expressions régulières - un outil puissant pour manipuler des chaînes. Le code s'est avéré très simple, mais assez efficace.

Dans cet article, nous verrons ce que sont les préfixes de navigateur, pourquoi ils existent et comment les utiliser en CSS.

Que sont les préfixes ?

Un développeur Web qui commence à étudier les fondements théoriques du CSS et utilise ces connaissances dans la pratique peut rencontrer des problèmes lorsqu'il examine des exemples réels. Cela pourrait l’amener à mal comprendre ce qui se passe et décourager toute envie d’étudier cette technologie.

Par exemple, lorsqu'il examine les styles d'un site Web, un développeur Web peut rencontrer des propriétés contenant des mots incompréhensibles devant : -webkit-, -moz-, -ms-, etc.

* ( -webkit-box-sizing : bordure-boîte ; -moz-box-sizing : bordure-boîte ; box-sizing : bordure-boîte ; )

Qu'est-ce que c'est? En fait, tout est simple, ces mots étranges sont les préfixes des navigateurs suivants :

• -webkit- : navigateurs Chrome, Safari, Opera ;
• -moz- : navigateur Mozilla Firefox ;
• -ms- : navigateur Internet Explorer.

Ainsi, s'il y a un préfixe avant le nom de la propriété, cela signifie que cette propriété est implémentée et sera utilisée exclusivement dans le navigateur spécifié. Tous les autres navigateurs ignoreront cette propriété, car pour eux, ce préfixe est inconnu.

Raisons de l’apparition des préfixes ?

Il y avait plusieurs raisons à l'apparition des préfixes :

• Pour inclure des propriétés CSS expérimentales dans le navigateur qui n'ont pas encore été approuvées par la norme. Par conséquent, les fournisseurs de navigateurs testent et font des suggestions avant d'adopter les propriétés CSS dans la norme.
• Pour résoudre les problèmes de compatibilité entre navigateurs.
• Pour créer vos propres propriétés qui ne sont pas incluses dans la norme CSS, mais qui peuvent y apparaître après un certain temps.

Lorsqu'une propriété expérimentale est approuvée dans la norme et testée dans le navigateur, son préfixe est généralement supprimé.

Comment utiliser les préfixes ?

Considérons le code suivant comme exemple :

* ( -webkit-box-sizing : bordure-boîte ; -moz-box-sizing : bordure-boîte ; box-sizing : bordure-boîte ; )

Ce code applique des propriétés CSS qui modifient l'algorithme de calcul de la largeur et de la hauteur pour tous les éléments de la page Web. La première propriété CSS -webkit-box-sizing avec la valeur border-box est destinée aux navigateurs utilisant le moteur webkit (Safari) ou Blink (Chrome, Opera, Yandex.Browser). La deuxième propriété CSS -moz-box-sizing avec la valeur border-box est destinée aux navigateurs utilisant le moteur Gecko (Mozilla Firefox). La dernière propriété CSS est destinée aux navigateurs où la propriété a déjà été testée et implémentée selon la norme.

Lorsque vous utilisez des préfixes pour les propriétés CSS, vous devez vous rappeler qu'ils doivent être placés avant la propriété CSS sans préfixe. Pourquoi est-ce si important ? Ceci est important car si un jour le navigateur implémente la propriété d'origine (sans préfixe), alors elle sera utilisée (puisqu'elle est située en dernier), et non sa version expérimentale.

Par exemple : Application d'une propriété CSS à tous les éléments d'une page Web dans Google Chrome version 40.

Dans l'image ci-dessus, vous pouvez voir que la propriété box-sizing d'origine est déjà implémentée dans ce navigateur, et comme elle vient en dernier, le navigateur l'utilise plutôt que la propriété -webkit-box-sizing ci-dessus.

Comment vérifier la prise en charge d'une propriété spécifique dans le navigateur ?

Un site sur lequel vous pouvez vérifier si cette propriété est implémentée ou non dans un navigateur spécifique est disponible sur le lien ci-dessous. De plus, le site affiche le nombre d'utilisateurs en pourcentage qui utilisent cette version du navigateur.

Par exemple : vérifions comment la propriété transform est implémentée dans les navigateurs.

Sur le site CanIUse, les navigateurs sont marqués de différentes couleurs en fonction de l'état de prise en charge de certaines propriétés ou balises :

• Le rectangle rouge est un navigateur dans lequel cette propriété n'est pas implémentée ;
• Un rectangle vert avec un trait d'union situé dans le coin supérieur droit est un navigateur dans lequel cette propriété est utilisée via un préfixe ;
• Un rectangle vert clair est un navigateur dans lequel cette propriété est partiellement implémentée ;
• Le rectangle vert est un navigateur dans lequel cette propriété est implémentée conformément à la norme.