Préfixe du fournisseur: Pourquoi avez-vous besoin d'un préfixe de moteur de navigateur?

2020-01-10

Quel est le préfixe du moteur de navigateur (préfixe du fournisseur)?

Préfixe du fournisseur: les préfixes du moteur de navigateur sont de petites chaînes placées devant les propriétés CSS pour garantir que ces propriétés ne sont reconnues et efficaces que sous certains moteurs de rendu de navigateur. Google Chrome et Safari utilisent le moteur de rendu WebKit, Firefox utilise le moteur Gecko, Internet Explorer utilise le moteur Trident, Opera utilisait auparavant le moteur Presto, puis est devenu le moteur WebKit. Un moteur de navigateur n'implémente généralement pas les attributs CSS identifiés par d'autres préfixes de moteur. Cependant, comme les navigateurs mobiles basés sur WebKit sont très populaires, des navigateurs tels que Firefox implémentent également certains des attributs CSS préfixés du moteur WebKit dans leurs versions mobiles.

Quels sont les préfixes du moteur de navigation (préfixe fournisseur)?

-moz- / * Firefox et autres navigateurs utilisant le moteur de navigation Mozilla * /
-webkit- / * Safari, Google Chrome et autres navigateurs utilisant le moteur Webkit * /
-o- / * Navigateur Opera (tôt) * /
-ms- / * Internet Explorer (pas nécessairement) * /

Pourquoi un préfixe de moteur de navigateur (préfixe fournisseur) est requis?

Ces préfixes de moteur de navigateur (Vendor Prefix) sont principalement utilisés par divers navigateurs pour expérimenter ou tester les nouvelles caractéristiques des attributs CSS3. Peut être résumé comme les 3 points suivants:

        
  • Expérimentez avec certaines propriétés CSS qui ne sont pas encore devenues standard, peut-être ne deviendront-elles jamais standard
  •     
  • Implémentation expérimentale de nouvelles caractéristiques d'attribut CSS3 standard
  •     
  • Implémentation personnelle d'une sémantique équivalente pour certains nouveaux attributs dans CSS3
  • Tous ces préfixes ne sont pas nécessaires, mais en général, vous ne faites aucun mal en les ajoutant - souvenez-vous en un et mettez la version non préfixée sur la dernière ligne:

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    Certaines nouvelles propriétés CSS3 ont été testées depuis longtemps et certains navigateurs n'ont plus préfixé ces propriétés. La propriété Border-radius est un exemple très typique. La dernière version du navigateur prend en charge la propriété Border-radius sans préfixe.

    Nécessite les propriétés CSS3 des préfixes fournisseurs

    Les principaux attributs qui doivent être ajoutés au préfixe du moteur de navigation (préfixe fournisseur) incluent:

          
    • @keyframes
    •     
    • Propriété de transition, durée de transition, fonction de synchronisation de transition, délai de transition
    •     
    • Propriétés d'animation (nom-animation, durée-animation, fonction-timing-animation, retard-animation)
    •     
    • border-radius
    •     
    • box-shadow
    •     
    • visibilité arrière
    •     
    • attribut de colonne
    •     
    • attribut flex
    •     
    • attributs de perspective
    • La liste complète n'est pas seulement celle-ci, mais elle s'allongera.

      Utilisation du préfixe du moteur de navigation (préfixe du fournisseur)

      Lorsque le préfixe du moteur de navigation (vendeur-préfixe) est nécessaire, il est préférable de mettre d'abord les préfixes avec divers préfixes, puis de mettre les préfixes standard sans préfixe à la fin. Par exemple:


       / * Attributs simples * /
       .myClass {
       -webkit-animation-name: fadeIn;
       -moz-animation-name: fadeIn;
       -o-animation-name: fadeIn;
       -ms-animation-name: fadeIn;
       nom-animation: fadeIn; / * mis à la fin sans préfixe * /
       }
       / * Images clés de propriétés complexes * /
       @ -webkit-keyframes fadeIn {
       0% {opacité: 0;} 100% {opacité: 0;}
       }
       @ -moz-keyframes fadeIn {
       0% {opacité: 0;} 100% {opacité: 0;}
       }
       @ -o-keyframes fadeIn {
       0% {opacité: 0;} 100% {opacité: 0;}
       }
       @ -ms-keyframes fadeIn {
       0% {opacité: 0;} 100% {opacité: 0;}
       }
       / * Mettre sans préfixe à la fin * /
       @keyframes fadeIn {
       0% {opacité: 0;} 100% {opacité: 0;}
       } 
       

      Internet Explorer

      Internet Explorer 9 a commencé à prendre en charge de nombreux (mais pas tous) nouveaux attributs dans CSS3. Par exemple, vous pouvez également utiliser la propriété border-radius sans préfixe de navigateur dans Internet Explorer.

      CSS3 n'est pas pris en charge dans IE6 à IE8. Malheureusement, de nombreux utilisateurs utilisent encore ces versions antérieures de navigateurs. Assurez-vous donc que la conception de votre site Web peut s'afficher correctement sans prise en charge CSS3. Pour certaines propriétés: border-radius, linear-gradient et box-shadow, vous pouvez utiliser CSS3Pie, c'est un petit fichier, le mettre dans le répertoire racine de votre site web, vous pouvez faire votre page dans IE6 , IE8 prend également en charge ces attributs.

      Ranch


www.xd1998.com@2001-2030Partage De Technologie