Comment Modernizr peut-il vous aider à créer des solutions de secours Flexbox pour IE9 ?

Alternative IE9 Flexbox : Modernizr à la rescousse

Comme vous l'avez découvert, IE9 ne prend pas en charge Flexbox, ce qui pose un défi pour la maintenance croisée -cohérence du navigateur. Cependant, en tirant parti de Modernizr, vous pouvez détecter les fonctionnalités de Flexbox et fournir des styles de secours si nécessaire.

Implémentation de secours de Modernizr

Modernizr ajoute des classes spécifiques à l'élément HTML pour indiquer Flexbox. soutien. Cela vous permet d'appliquer des styles appropriés en fonction des capacités détectées :

<code class="css">.container {
  display: flex; /* For browsers with Flexbox */
}

.no-flexbox .container {
  display: table-cell; /* Fallback for IE9 and older */
}</code>

Recommandations de secours de Zoe Gillenwater

Zoe Gillenwater (@zomigi) fournit des informations précieuses dans ses présentations. sur les solutions de repli Flexbox. Voici quelques points clés à retenir :

• Espacement de navigation horizontal : Utilisez le bloc en ligne pour espacer les éléments dans la navigation horizontale.
• Épingler des éléments : Si flexbox n'est pas disponible, l'affichage des cellules du tableau peut être utilisé pour épingler des éléments.
• Résolutions de secours en matière d'alignement des formulaires : Pensez à utiliser Inline-flex pour les formulaires afin d'obtenir une mise en page stable.
• Retours des commandes flexibles : Modernizr ajoute une classe sans commande flexible pour indiquer la prise en charge manquante des commandes flexibles.

Ressources supplémentaires

Pour plus d'informations sur la compatibilité Flexbox entre navigateurs, reportez-vous aux ressources suivantes :

• [Données de support Caniuse Flexbox](https://caniuse.com/flexbox)
• [ Présentation « Mise à niveau avec Flexbox » de Zoe Gillenwater](https://slides.com/zomigi/level-up-your-flexbox-skills-latest-techniques-css-tuts#/1/0)
• [Présentation "CSS3 Layout" de Zoe Gillenwater](https://slides.com/zomigi/css3-layout-new-old-and-sexy#/1/0)

Conclusion

En combinant les capacités de détection de Modernizr avec des styles de secours informés par les recommandations de Zoe Gillenwater, vous pouvez efficacement offrir une expérience utilisateur cohérente sur tous les navigateurs qui prennent en charge ou qui manquent de Flexbox.

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!