Il est temps de repenser les préfixes du fournisseur dans CSS

Points clés

L'utilisation généralisée du préfixe
• dans -webkit- dans CSS fait que certains sites Web ne fonctionnent pas correctement sans lui, forçant Mozilla à prendre en charge les préfixes non standard -webkit pour améliorer la compatibilité de Firefox avec les pages Web à l'aide de -webkit- préfixe, Cela est cohérent avec l'approche de Microsoft Edge et de l'opéra.
Les développeurs
• sont invités à repenser leur utilisation des préfixes et à tester la compatibilité de leur site Web, en particulier ceux qui omettent le préfixe -moz-, car de nouveaux changements peuvent affecter leurs sites Web sur les performances de Firefox 46 ou 47.
• Alors que les équipes Chrome / Blink, Firefox et Microsoft Edge recherchent de meilleures solutions, le préfixe du fournisseur disparaît progressivement. L'abandon des préfixes des fournisseurs signifie que les utiliser pour des déclassements élégants n'est pas une approche viable, et les développeurs devraient s'assurer que leur utilisation des préfixes ne produit pas de résultats inattendus dans des navigateurs non webkit.

Étant donné que le préfixe -webkit- domine CSS sur le réseau, certains sites Web ne fonctionnent pas correctement sans lui. Bien que ce soit clairement un signe que l'approche du développeur n'est pas idéale au cours des dernières années, cela a conduit à une mesure plutôt malheureuse mais presque nécessaire de Mozilla. Jusqu'à Firefox 46 ou 47 (publié en avril ou mai 2016, respectivement), Mozilla prévoit de mettre en œuvre la prise en charge d'une gamme de préfixes non standard -webkit- pour améliorer la compatibilité des pages Firefox et utiliser -webkit préfixes (généralement mobile).

Ce n'est pas une nouvelle idée, et Microsoft Edge prend également en charge une plage de préfixes -webkit- pour la compatibilité. Opera a commencé à implémenter le préfixe -webkit- dès 2012 et a depuis passé au moteur Blink basé sur Webkit.

W3C et les fabricants de navigateurs n'ont pas l'intention d'utiliser le préfixe du fabricant sur les sites Web de production:

"Énoncé de politique officiel de W3C, vous ne devriez pas utiliser les attributs expérimentaux dans le code de production, mais les gens le font parce qu'ils veulent rendre le site Web cool et rester à l'avant-garde de la technologie."

Cependant, les développeurs du monde entier souhaitent les utiliser dès que possible pour accéder aux dernières fonctionnalités. Bien que les préfixes aient provoqué une certaine confusion en raison de la domination de Webkit, je pense qu'ils ont réussi à aider le réseau à se développer rapidement. L'approche de Mozilla et Microsoft peut être inoffensive pour la plupart des sites Web. La plupart des sites en ligne peuvent déjà inclure le préfixe -moz-, ou vous constaterez que les mises à jour de Mozilla n'ont besoin d'aucune action pour améliorer la compatibilité de leur site Web. Cependant, en tant que développeurs Web professionnels, nous devons être approfondis et comprendre que certaines conceptions peuvent avoir des résultats anormaux. Vous savez peut-être déjà lequel de vos œuvres peut être interrompu par les mises à jour.

Développeurs, il est évidemment temps de repenser la façon dont vous utilisez les préfixes et testez ces sites.

Préfixes impliqués

Mozilla peut avoir besoin d'inclure une série de préfixes -webkit-. Pour autant que je comprends, Mozilla ne correspondra pas à la liste des préfixes -webkit- prise en charge par Edge, car tout cela ne peut pas nécessiter de veiller à ce que le moteur de mise en page Gecko de Mozilla ne soit compatible avec le réseau plus large.

Selon leur déclaration sur la page Wiki sur la compatibilité / compatibilité mobile / non standard, les préfixes que Mozilla peut adopter comprennent:

• -webkit-flexbox
• -webkit- Gradient du préfixe
• -webkit-transforms
• -webkit-transitions
• -webkit-appearance
• -webkit-background-clip
• -webkit-device-pixel-ratio
• -webkit-animation
• -webkit-border*

Certaines autres fonctionnalités peuvent également être affectées, telles que @-webkit-keyframes.

Les tests de navigateur croisé sont cruciaux

Si vous êtes un développeur Web qui omet le préfixe -moz- pour éviter la nécessité de tester les fonctionnalités CSS plus récentes sur Firefox - supposons que vous êtes pressé et que vos clients vous obligent à le faire - vous aurez besoin de retester Le site de Firefox 46 ou 47. Ces versions de Firefox seront publiées en avril ou mai, vous avez donc le temps de planifier à l'avance.

Pour tester votre site Web avant que ces modifications n'arrivent sur Firefox 46/47, vous pouvez accéder à l'état actuel des modifications de Firefox tous les soirs via les préférences about:config dans layout.css.prefixes.webkit. Si vous avez installé la dernière version nocturne, elle doit être définie sur true par défaut. Tous les modifications de préfixe ne sont pas apparues dans Firefox tous les soirs, mais c'est là que vous pouvez tester l'apparence actuelle de votre site. Je recommande d'attendre jusqu'en mars pour utiliser Firefox tous les soirs pour un test plus approfondi. -webkit-

Plus urgent, Microsoft Edge a interprété et affiché le préfixe

de cette manière. Cela signifie que tous les styles spécifiques à WebKit inclus dans votre site Web ont peut-être déjà été affiché dans un navigateur que vous ne vous attendiez pas. Si vous ne l'avez pas fait, visitez Microsoft Edge dans Windows 10 et testez ces sites! -webkit-

Le préfixe du fabricant disparaît

Heureusement, le préfixe du fournisseur semble disparaître alors que l'équipe du navigateur recherche une meilleure solution. L'équipe Chrome / Blink a modifié son approche:

"Dans l'attente, nous n'utiliserons plus le préfixe du fournisseur pour activer la fonction par défaut, mais laisserons plutôt la fonction (non préfixée) derrière l'indicateur de plate-forme Web Activer Expérimental dans

jusqu'à ce que la fonctionnalité soit prête à par défaut jusqu'à ce qu'elle soit activée. »—— Chrome / Équipe de clignotement about:flags

L'équipe Firefox se dirige vers une approche similaire:

"Selon ses propres conditions, la tendance actuelle de Mozilla est d'éviter les préfixes des fournisseurs en désactivant les fonctionnalités avant la publication ou la publication des fonctionnalités sans préfixes si elles sont suffisamment stables. Au moins comme stratégie générale; des exceptions peuvent être nécessaires pour des cas spécifiques . ”- Boris de Mozilla

Microsoft Edge vise à supprimer complètement la prise en charge des préfixes:

"Microsoft se débarrasser également des préfixes du fournisseur d'Edge. aux normes Web.

Plus de dégradations élégantes à travers les préfixes

Cet éloignement du préfixe du fabricant signifie un aspect - les rétrogradations élégantes à travers le préfixe du fabricant ne sont évidemment pas possibles.

Utilisation des préfixes de fournisseurs pour localiser les navigateurs spécifiques (par exemple, un contenu spécifique pour Chrome uniquement) n'est pas l'intention des préfixes du fournisseur; Si vous utilisez une fonctionnalité qui repose sur des attributs préfixés et que vous baissez élégamment la conception sur d'autres navigateurs à l'aide de préfixes, cela ne fonctionnera plus.

-webkit- -o- Conclusion

Les temps changent. La domination de WebKit a conduit par inadvertance à des divisions et à une incompatibilité du réseau, et d'autres navigateurs tentent d'améliorer leur compatibilité pour suivre le rythme en implémentant le préfixe . Bien que ce problème devrait disparaître car les préfixes des fournisseurs sont supprimés, les développeurs doivent vérifier que leur utilisation des préfixes ne produit pas de résultats inattendus dans des navigateurs non webkit.

-webkit- Liens utiles

La documentation de l'intention de Mozilla sur ces changements

Le suivi des insectes de Mozilla pour ce problème dans Bugzilla
La dernière version de Microsoft Edge prend en charge l'API WebKit
Documentation sur l'introduction du préfixe
• dans la norme de la vie en ligne
• Le rapport du registre sur les modifications de compatibilité Firefox Webkit -webkit-
Des questions fréquemment posées sur les préfixes du fabricant dans CSS

Que sont les préfixes des fournisseurs dans CSS et pourquoi les utilisez-vous?

Le préfixe du fournisseur est un moyen pour les fabricants de navigateurs d'ajouter de nouvelles fonctionnalités CSS avant de faire partie de la spécification CSS officielle. Ils sont utilisés pour s'assurer que ces nouvelles fonctionnalités n'interfèrent pas avec les fonctionnalités existantes dans d'autres navigateurs. Cela permet aux développeurs d'expérimenter de nouvelles fonctionnalités et de fournir des commentaires au processus de spécification CSS.

Le préfixe du fournisseur est-il toujours nécessaire dans le développement Web moderne?

La nécessité des préfixes des fournisseurs a toujours été un sujet de débat parmi les développeurs Web. Bien qu'ils soient autrefois cruciaux pour assurer la compatibilité des navigateurs croisés, le Web moderne a connu une normalisation importante des capacités CSS parmi les différents navigateurs. Par conséquent, la demande de préfixes des fournisseurs est considérablement réduite, mais dans certains cas, il est toujours utilisé pour les fonctions expérimentales.

Quels sont les préfixes de fournisseurs communs?

Certains préfixes de fournisseurs communs incluent -webkit- (Chrome, Safari, nouvelle version d'opéra), -moz- (Firefox), -o- (ancienne version d'opéra pré-webkit) et -ms- (Internet Explorer et Microsoft Bord).

Comment utiliser le préfixe du fournisseur dans mon code CSS?

Pour utiliser un préfixe de fournisseur, ajoutez-le simplement avant la propriété CSS dans la feuille de style. Par exemple, pour utiliser l'attribut border-radius avec le préfixe du fournisseur Firefox, vous pouvez écrire -moz-border-radius: 10px;.

Quels sont les inconvénients de l'utilisation des préfixes du fabricant?

Le principal inconvénient de l'utilisation des préfixes des fournisseurs est qu'ils rendent votre code CSS plus complexe et plus difficile à maintenir. Chaque navigateur a son propre préfixe de fournisseur, vous devrez donc peut-être écrire plusieurs lignes de code pour une seule propriété CSS. De plus, les préfixes des fournisseurs peuvent entraîner des problèmes de vérification du code car ils ne font pas partie de la spécification CSS officielle.

Comment éviter le problème du préfixe du fabricant?

Une façon d'éviter les problèmes de préfixe des fournisseurs consiste à utiliser un préprocesseur CSS comme SASS ou moins, ce qui ajoute automatiquement les préfixes des fournisseurs à votre code. Une autre option consiste à utiliser un postprocesseur comme AutopRefixer, qui peut ajouter des préfixes de fournisseurs en fonction du navigateur que vous souhaitez prendre en charge.

Existe-t-il une alternative à l'utilisation des préfixes du fabricant?

Oui, il existe des alternatives à l'utilisation des préfixes de fournisseurs. Une alternative consiste à utiliser une bibliothèque de détection de fonctionnalités comme Modernizr, qui vous permet de tester des fonctionnalités CSS spécifiques et de fournir une solution de secours pour les navigateurs qui ne les prennent pas en charge. Une autre alternative consiste à utiliser CSS Grid ou Flexbox, qui sont désormais largement prises en charge et ne nécessitent pas de préfixes de fournisseurs.

Quel est l'avenir du préfixe du fabricant dans CSS?

L'avenir du préfixe du fabricant dans CSS est incertain. Bien qu'ils soient toujours utilisés dans certains cas, la tendance consiste à évoluer vers la normalisation et l'utilisation de la détection fonctionnelle plutôt que des préfixes des fournisseurs. Cependant, ils sont susceptibles de rester partie de l'environnement CSS dans un avenir prévisible.

Comment le préfixe du fournisseur affecte-t-il les performances du site Web?

Les préfixes des fournisseurs peuvent affecter les performances du site Web car elles augmentent la taille du code CSS. Cependant, l'impact est généralement faible, surtout si vous utilisez un compresseur CSS pour compresser votre code.

Comment suivre les derniers développements des préfixes du fabricant?

En raison de la nature en évolution rapide du développement Web, se tenir au courant des derniers développements dans les préfixes des fournisseurs peut être difficile. Cependant, il peut être utile de suivre les blogs, les forums et les comptes de médias sociaux liés au CSS. De plus, le site Web du groupe de travail CSS et le réseau de développeurs Mozilla sont d'excellentes ressources pour se tenir au courant des dernières informations.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!