Vaut-il la peine de spécifier certaines propriétés pour IE, ou simplement toute autre version plus ancienne? [Rétrocompatible]

Vous ne devriez pas vous soucier des navigateurs plus anciens que IE 8. Ces navigateurs sont à peine utilisés et ils ne prennent pas en charge beaucoup de choses. Veuillez vous référer à ces sites Web:

https: // imagebox.com/industry/why-your-website-doesnt-look-the-same-in-every-browser/ http://dowebsitesneedtolookexactlythesameineverybrowser.com/ .

En ce qui concerne les différentes commandes border-radius, assurez-vous de les utiliser toutes. J'ai constaté que si vous n'incluez pas Webkit et Mozilla, vous perdez beaucoup de trafic. Dans mon site Web, j'inclus généralement toutes les variantes d'une commande, donc je sais avec certitude que mon site Web fonctionne. Mieux vaut avoir un code CSS volumineux et laid qu'un site Web défectueux.

N'hésitez pas à commenter cette réponse si vous avez besoin de plus de précisions.

Eh bien ... C'est un très gros sujet, il est donc difficile d'y répondre, mais il existe des bonnes pratiques que vous devriez / pourriez suivre.

Premièrement - Tout est basé sur VOTRE audience SPÉCIFIQUE. Examinez vos statistiques et voyez quels navigateurs sont utilisés. Les données pourraient vous surprendre, surtout si vous avez des utilisateurs de soins de santé américains ou gouvernementaux. Des outils tels que Stylelint vous aideront à trouver des règles non prises en charge dans votre CSS.

Ensuite, il est recommandé de utiliser la détection des fonctionnalités au lieu de cibler des navigateurs spécifiques. Vous pouvez mettre en œuvre cela en utilisant @supports en code conditionnel qui fonctionne comme une requête multimédia . De cette façon, votre code n'est appliqué que si le navigateur peut l'utiliser. Vous pouvez effectuer une détection similaire en javascript en utilisant Modernizr .

Enfin, personnellement, je recommande d'utiliser un post-processeur CSS ou un script de construction pour que vous puissiez arrêter de vous soucier du préfixage (en plus, cela accélérera votre développement avec des plugins optionnels). J'ai tendance à aimer une combinaison de PostCSS et de Prefixfree (plusieurs personnalisations Webpack sont fournies avec celles incluses) mais il existe de nombreuses options similaires.

Le principal avantage est que la bibliothèque suit ce qui a besoin de préfixes et ce qui ne l'est pas, donc vous écrivez la version non préfixée et le reste est pris en charge.

Il n'y a pas de règles strictes et rapides, mais vous devriez essayer de prendre en charge les appareils de vos utilisateurs au lieu de demander des mises à niveau. La bonne chose à propos des pratiques ci-dessus est que votre code résultant sera plus facile à maintenir, à l'épreuve du temps et ciblé pour vos utilisateurs.

Voici mes pensées - avant d'entrer dans les détails, je dois dire que je suis un monstre en ce qui concerne la prise en charge des navigateurs.

Il y a quelques années encore, j'essayais de soutenir IE8 et plus. La raison derrière cette logique était que les gens où «piégé» avec Windows XP et IE8 était la dernière version prise en charge par Windows XP. Par piégé, je veux dire qu'il s'agissait de cas comme les ordinateurs du gouvernement dont la mise à niveau était trop coûteuse.

Une fois que Windows 7 a suffisamment mûri et que l'utilisation de Windows XP a chuté, j'ai essayé de prendre en charge IE9 et les versions supérieures. Cela signifiait essentiellement que même après la sortie de propriétés utiles (comme flexbox), il me fallait beaucoup de temps pour migrer - donc je construisais des mises en page avec des tableaux pour une meilleure prise en charge du navigateur, etc.

Cependant, Javascript Frameworks a commencé à abandonner le support des anciens navigateurs (y compris IE9), puis les frameworks CSS ont commencé à abandonner le support. Si vous y réfléchissez pendant un certain temps, MS lui-même a abandonné le support il y a un certain temps. Les grandes entreprises de téléphonie mobile abandonnent l'assistance pour leurs appareils de 2 ans, alors pourquoi devrions-nous prendre en charge les navigateurs plus anciens? Comme indiqué dans d'autres réponses, cela dépend du public - imaginez le PDG de votre meilleure entreprise cliente ayant un ordinateur portable avec Windows XP ou un autre appareil obsolète - peu importe si quelqu'un d'autre utilisait des navigateurs modernes.

Il y a quelques années, il est donc arrivé que vous deviez choisir entre suivre le flux et être moderne ou prendre en charge des appareils plus anciens. Je suis tout à fait partant pour la cohérence et l'uniformité du contenu, donc prendre en charge les fonctionnalités modernes pour quelques navigateurs sélectionnés et les abandonner pour d'autres serait un non pour moi. Flexbox était l'une de ces propriétés qui m'ont poussé à ignorer la prise en charge des anciens navigateurs - cela m'a grandement aidé à réduire le balisage - facilitant ainsi la maintenance. Dans le même temps, même Bootstrap a décidé de supprimer la prise en charge des navigateurs plus anciens et doit donc être mis à niveau pour suivre le rythme de la concurrence.

Inutile de dire que le problème n'est pas seulement IE, mais aussi Android qui a pris jusqu'à la v4.4 pour que le navigateur stock prenne en charge des propriétés spécifiques - vh, flexbox wrapping, etc.

Cela dit, permettez-moi de vous donner une réponse claire:

• Ne vous embêtez pas avec le support d'IE9 - même pas 10. IE10 pourrait être mis à niveau vers 11 sur le même système d'exploitation, il devrait donc être mis à jour de toute façon pour des raisons de sécurité. IE9 n'est pas pris en charge par les frameworks JS (par exemple Ember), manque de transitions CSS3 et d'autres propriétés utiles, comme flexbox. Sans ces éléments, vos conceptions devraient prendre beaucoup de recul si vous visiez la cohérence de la conception.

• En guise de note secondaire, IE10 a commencé à supporter sa propre interprétation de flexbox (désolé pour toute cette persistance avec flexbox, mais c'est l'une des propriétés les plus utiles). Cela signifie que pour le supporter correctement, vous devrez écrire beaucoup de CSS. Imaginez ajouter 30 Ko de CSS minifié pour prendre en charge un seul navigateur, ce qui est assez rare. Cela en vaut-il la peine?

• Certains navigateurs Webkit (comme Opera) peuvent encore exiger des préfixes spécifiques au fournisseur pour les versions de navigateur publiées il y a 4 ans -eg pour les transformations CSS3. Des choses plus importantes sont cassées sur ces navigateurs (Opera inclus) que je m'inquiéterais davantage pour d'autres choses. Personnellement, je n'utilise le préfixe -webkit- que dans certains cas (par exemple les propriétés flexbox qui ont mûri récemment).

• Il peut y avoir des cas où les préfixes spécifiques au navigateur peuvent être utiles même dans les navigateurs modernes, par exemple en stylisant une entrée de plage ou une barre de défilement où vous devez jouer avec les propriétés spécifiques au navigateur pour obtenir la cohérence. Dans de tels cas, des hacks CSS spécifiques avec des préfixes de fournisseur peuvent être nécessaires.

En guise de note finale, j'éviterais toutes les propriétés de pointe, par exemple la grille; apprenez ce qu'il fait et comment il fonctionne, mais ne l'utilisez pas encore. Vous devriez jeter un œil à https://caniuse.com/ afin d'avoir une idée des propriétés CSS et du navigateur soutien.

Cependant, c'est à vous de décider et vous devez faire votre choix en fonction des exigences de votre projet. Il y a deux ans, je vous dirais de soutenir aussi vieux que vous le pouvez ... à l'époque, vous pouviez réaliser les mêmes choses avec des efforts différents, mais ce n'est plus le cas. À partir d'un moment donné ... les anciens navigateurs ne peuvent pas suivre le rythme.