Devriez-vous préfixer le code Flexbox ou demander poliment une mise à niveau du navigateur ?

Demande de mise à niveau du navigateur sans préfixe

Pour les sites Web tirant parti de la puissance de CSS flexbox, la compatibilité du navigateur devient une considération cruciale. Alors que la plupart des navigateurs modernes prennent en charge flexbox de manière transparente, les navigateurs existants comme Safari 8 et IE 10 nécessitent l'utilisation de préfixes de fournisseur. Avec seulement un petit pourcentage d'utilisateurs qui accèdent encore à des sites Web à l'aide de ces anciens navigateurs, les développeurs peuvent s'interroger sur la nécessité de préfixer leur code pour s'adapter à une technologie obsolète.

Au lieu d'utiliser des préfixes, une approche alternative consiste à demander poliment aux visiteurs de mettre à niveau. leurs navigateurs. Cela garantit que la grande majorité des utilisateurs utilisent le site Web comme prévu, tout en préservant la simplicité et l'efficacité du code.

Cibler les navigateurs plus anciens pour les demandes de mise à niveau

Pour cibler efficacement les navigateurs plus anciens et afficher un message personnalisé, différentes méthodes sont disponibles. L’une de ces méthodes consiste à utiliser judicieusement les commentaires conditionnels. Les commentaires conditionnels sont spécifiques à Internet Explorer, permettant aux développeurs de cibler des versions spécifiques d'IE. Cependant, cette approche est insuffisante pour les navigateurs comme Safari et Opera.

Solution CSS uniquement

Une solution plus complète, englobant plusieurs navigateurs, consiste à utiliser un CSS- seule approche. Cela repose sur la règle @supports, qui permet l'application conditionnelle de propriétés CSS en fonction des capacités du navigateur. En tirant parti de cette règle, les développeurs peuvent adapter CSS pour cibler des versions de navigateur spécifiques.

Exemple de code

Le code suivant montre comment cibler des navigateurs plus anciens sans utiliser de préfixes :

.browserupgrade { display: block; }

/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade { display: none; }

/* Opera Mini 8 */
:-o-prefocus, .browserupgrade { display: none; }

/* all modern browsers */
@supports (display: flex) { .browserupgrade { display: none; }}

HTML

<div class="browserupgrade">
    <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">
       upgrade your browser</a> to improve your experience.</p>
</div>

Supplémentaire Considérations

Pour les situations où une interaction utilisateur supplémentaire est justifiée, un script JavaScript ou jQuery peut être utilisé pour rediriger automatiquement les utilisateurs vers une URL désignée après un délai prédéterminé. Cela garantit que les visiteurs utilisant des navigateurs obsolètes sont guidés en douceur vers une expérience de navigation compatible.

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!