Comment puis-je utiliser les variables CSS dans IE11 ?

Polyfills IE11 pour les variables CSS

IE11 ne prend pas en charge les variables CSS, ce qui présente des défis pour les environnements de développement Web à navigateurs mixtes. Heureusement, une solution existe sous la forme de polyfills ou de scripts.

CSS Vars Ponyfill

L'un de ces polyfill est CSS Vars Ponyfill, disponible sur GitHub et NPM. Cette bibliothèque légère (6 Ko min gzip) et sans dépendance offre diverses fonctionnalités :

• Transformation côté client des propriétés personnalisées CSS
• Mises à jour en direct pour les valeurs d'exécution
• Prise en charge des fonctions var() chaînées et imbriquées
• Compatibilité avec les composants Web et le shadow DOM CSS

Limitations et considérations

Pendant que les variables CSS Ponyfill fournit une prise en charge substantielle, mais elle présente des limites :

• La prise en charge des propriétés personnalisées est limitée aux déclarations :root et :host.
• L'utilisation de var() est limitée aux valeurs de propriété, selon le W3C. spécifications.

Exemples d'implémentation

Le polyfill démontre ses capacités avec des exemples tels que :

• Au niveau racine propriétés personnalisées :

  :root {
    --a: red;
  }
  
  p {
    color: var(--a);
  }

• Propriétés personnalisées chaînées et imbriquées :

  :root {
    --a: var(--b);
    --b: var(--c);
    --c: red;
  }
  
  p {
    color: var(--a);
  }

• Valeurs de secours :

  p {
    font-size: var(--a, 1rem);
    color: var(--b, var(--c, var(--d, red))); 
  }

• Transformations pour les importations CSS et les composants Web :

  <link rel="stylesheet" href="/absolute/path/to/style.css">
  <link rel="stylesheet" href="../relative/path/to/style.css">
  
  <style>
    @import "/absolute/path/to/style.css";
    @import "../relative/path/to/style.css";
  </style>

Conclusion

En employant CSS Vars Ponyfill, les développeurs peut tirer parti des avantages des variables CSS même dans IE11. Ce polyfill permet la création de styles cohérents et réutilisables dans les navigateurs modernes et existants, améliorant ainsi la flexibilité et les performances des applications Web.

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!