Comment CSS peut-il demander une mise à niveau du navigateur sans utiliser les préfixes du fournisseur ?

Utiliser CSS pour demander une mise à niveau du navigateur sans préfixes

Problème :

Malgré le soutien généralisé pour flexbox dans les navigateurs modernes, certains navigateurs plus anciens nécessitent toujours des préfixes de fournisseur. En tant que tels, les développeurs peuvent être confrontés au dilemme de savoir s'ils doivent utiliser des préfixes et s'adapter à ces navigateurs existants ou demander aux utilisateurs de mettre à niveau leurs navigateurs pour une base de code plus rationalisée.

Solution :

Pour résoudre ce problème, il est possible d'utiliser CSS pour cibler les navigateurs obsolètes et afficher un message de mise à niveau sans avoir besoin de préfixes.

1. Règle CSS pour les navigateurs modernes :

   @supports (display: flex) {
      .browserupgrade {
         display: none;
      }
   }

   Copier après la connexion

   Cette règle masque le message de mise à niveau pour les navigateurs qui prennent entièrement en charge flexbox. Son objectif principal est les navigateurs les plus récents.

2. Règles CSS pour les navigateurs indésirables spécifiques :

   /* IE 11 and Opera Mini 8 */
   _:-ms-fullscreen, :root .browserupgrade {
      display: none;
   }
   
   /* Opera Mini 8 */
   :-o-prefocus, .browserupgrade {
      display: none;
   }

   Copier après la connexion

   Ces règles gèrent spécifiquement IE 11 et Opera Mini 8, masquant le message de mise à niveau dans ces navigateurs bien.

En combinant ces règles CSS, il est possible de cibler les anciens navigateurs restants qui ne prennent pas entièrement en charge flexbox sans utiliser de préfixes.

3. Intégration 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>

   Copier après la connexion

   Cet élément HTML affiche le message de mise à niveau dans le format ciblé navigateurs.

Options supplémentaires :

Bien que CSS fournisse une solution robuste pour les demandes de mise à niveau du navigateur, il existe des méthodes supplémentaires à considérer :

• Modernizr : Une bibliothèque JavaScript qui détecte le navigateur capacités.
• PHP : Scripts côté serveur pour vérifier les détails du navigateur et rediriger les utilisateurs vers une page de mise à niveau.
• jQuery : Fonctions JavaScript pour le navigateur détection et affichage des messages de mise à niveau.
• CSS.supports() : Une API qui permet un style conditionnel basé sur fonctionnalités spécifiques du navigateur.
• browser-update.org : Un service en ligne qui fournit une détection et une redirection automatiques de mise à niveau du navigateur.

Le choix de la méthode dépendra de exigences et préférences individuelles du projet, mais l'approche CSS décrite ci-dessus offre une solution simple et légère.

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!