Migrer vers Flexbox en coupant la moutarde

Les plats clés

• L'article discute de la transition de l'utilisation de flotteurs CSS à Flexbox pour structurer les dispositions dans CSS. Il met en évidence les limites de la syntaxe ancienne et twener de Flexbox et recommande de cibler uniquement les versions de syntaxe et de navigateur Tweener qui implémentent pleinement la nouvelle syntaxe.
• Le concept de «couper la moutarde» ou la détection de fonctionnalités est introduit comme un moyen d'identifier quel navigateur / appareil / agent utilisateur est utilisé et servir la solution la plus appropriée pour la technologie disponible. Cela peut être fait en utilisant un javascript simple ou en utilisant modernizr.
• L'auteur suggère d'utiliser SASS pour réduire la taille de la sortie CSS et le rendre plus facile à entretenir. Il mentionne également que la mise en œuvre de Flexbox ne sera pas exactement la même dans chacune des expériences en raison du concept d'amélioration progressive.
• L'article conclut en soulignant que cette approche de la détection des fonctionnalités peut être adaptée et évoluée pour répondre aux exigences futures à mesure que de nouvelles fonctionnalités sont développées pour les navigateurs. Il encourage les lecteurs à se familiariser avec Flexbox dans leur prochain projet.

En tant que développeurs frontaux, le moment est venu de s'éloigner de l'utilisation de chars CSS et de plonger dans le nouveau monde passionnant de Flexbox. Les flotteurs CSS sont une approche datée des dispositions de style; Ils sont disponibles dans Internet Explorer depuis la version 4.0 et les solutions de contournement sont nécessaires pour les rendre malléables (y compris le piratage de ClearFix et l'utilisation de la pseudo-classe pour les colonnes d'emballage).

.

Le sujet principal de cet article est de savoir comment implémenter Flexbox sur plusieurs navigateurs en tenant compte de sa fragmentation. Si vous voulez vous familiariser avec Flexbox, il existe de nombreuses bonnes ressources disponibles, et je recommande fortement ce qui suit:

• sommes-nous prêts à utiliser Flexbox? par Nick Salloum sur SitePoint
• Un guide complet de Flexbox par Chris Coyier sur CSS-Tricks
• Boîte flexible («flexbox») Disposition dans Internet Explorer 10 sur MSDN (Facultatif)

À la fin de cet article, vous devriez pouvoir:

• comprendre quelles versions de Flexbox cibler pour un site Web réactif.
• Utilisez Flexbox via la détection des fonctionnalités (coupe la moutarde) et fournissez une secours pour les navigateurs hérités.
• s'éloignez de l'utilisation des commentaires conditionnels IE dans la plupart des situations.
• Démontrez une utilisation pratique pour Flexbox en créant une grille 2 × 2 de base avec une repli héritée.

Un bref historique de Flexbox

Le module de mise en page flexible de la boîte (A.K.A. Flexbox) est une nouvelle façon de structurer les dispositions dans CSS. Il a subi plusieurs révisions et a évolué de manière significative dans son existence relativement courte. Au moment de la rédaction du temps, Flexbox est toujours un projet de travail W3C, mais, comme d'autres normes, cela ne devrait pas le rendre peu attrayant dans un environnement de production.

Il y a trois itérations de la norme, communément appelée l'ancienne syntaxe, la syntaxe de Tweener et la nouvelle syntaxe.

Les limites de Flexbox sont bien documentées:

• L'ancienne syntaxe ne prend pas en charge Flex-Wrap.
• La syntaxe Tweener n'est prise en charge que dans IE 10 (y compris le mobile).
• La nouvelle syntaxe n'est pas entièrement implémentée dans Firefox (22-27) car il manque les propriétés flexibles et flexibles.

Enveloppement (flex-wrap) est une caractéristique importante de la spécification, qui est nécessaire pour créer une grille réactive. Pour cette raison, il est préférable de cibler uniquement les versions de syntaxe et de navigateur Tweener qui implémentent pleinement la nouvelle syntaxe.

Cela nous laisse avec les versions de navigateur suivantes:

• Internet Explorer 10 (syntaxe de twener avec le préfixe -ms)
• Internet Explorer 11 et Edge (nouvelle syntaxe)
• Firefox 28 (nouvelle syntaxe)
• Chrome 21-28 (nouvelle syntaxe avec le préfixe -webkit)
• Chrome 29 (nouvelle syntaxe)
• Safari 6.1 (nouvelle syntaxe avec le préfixe -webkit)
• iOS Safari 7.0 (nouvelle syntaxe avec le préfixe -webkit)

Comme il y a des navigateurs avec une part de marché importante qui ne prend pas en charge Flexbox, celles-ci devraient se rendre à l'utilisation des flotteurs CSS. Mais comment cela peut-il être exprimé dans le code? Quelle est la meilleure façon de différencier les versions du navigateur qui devraient recevoir CSS avec des flotteurs au lieu de Flexbox? Quelle stratégie peut être utilisée pour garantir que les versions de Firefox qui soutiennent la nouvelle syntaxe mais ne prennent pas en charge l'emballage sont identifiées comme héritées?

Présentation: couper la moutarde.

Couper la moutarde (détection des fonctionnalités)

Si vous ne l'avez pas entendu comme terme technique auparavant, «Couper la moutarde» a été inventée par l'équipe de développement de BBC News. Le terme provenait du fait que le site Web de la BBC doit répondre à un vaste public international et cibler des versions et des appareils de navigation en particulier aurait été une solution lourde.

Le nœud du concept identifie le navigateur / périphérique / agent utilisateur est utilisé et sert des polyfills pour faire fonctionner le site. L'existence de fonctionnalités spécifiques est détectée du côté client et donc la solution la plus appropriée pour la technologie disponible est livrée.

La détection des fonctionnalités n'est pas nouvelle. L'article de la BBC susmentionné a été publié en mars 2012 et bien qu'il ait gagné en popularité, il est surprenant de voir des sites Web mettant en œuvre des classes conditionnelles spécifiques à l'IE telles que popularisées par Paul Irish en 2008.

Modernizr (contribué à Paul Irish) est une question de détection des fonctionnalités:

Profiter de nouvelles technologies Web cool est très amusante, jusqu'à ce que vous deviez prendre en charge les navigateurs qui sont à la traîne. Modernizr vous permet de rédiger facilement JavaScript conditionnel et CSS de gérer chaque situation, que ce soit un navigateur prend en charge une fonctionnalité ou non. Il est parfait pour faire une amélioration progressive facilement.

Bien que CSS ait désormais une détection des fonctionnalités natives, il n'a actuellement pas suffisamment de part de marché pour être viable pour une utilisation réelle. Le reste de cet article discutera comment abandonner les commentaires conditionnels de l'IE en faveur de la détection des fonctionnalités en JavaScript.

Identification des fonctionnalités et des navigateurs

Chaque projet nécessite un ensemble différent de fonctionnalités pour fonctionner. Il existe plusieurs façons dont la détection des fonctionnalités peut être réalisée, dont la plus facile comprend:

• en utilisant un javascript simple (comme utilisé par la BBC)
• en utilisant modernizr (qui sera utilisé dans cet article)

L'approche la plus efficace est la mise en œuvre de la vanille JavaScript. Il est rapide (car il ne nécessite pas que le client télécharge des bibliothèques supplémentaires) et ne nécessite aucun traitement supplémentaire. Cette approche est loin d'être parfaite car il y a des problèmes connus; Cependant, il existe des moyens de surmonter les problèmes communs de détection des caractéristiques.

[b] La détection du rowser est devenue un enchevêtrement impossible et est largement tombée en désaccord, pour être remplacée par quelque chose de bien mieux - détection de caractéristiques.

[…] La détection des fonctionnalités n'est pas complètement fiable non plus - il y a des moments où il échoue.

- James Edwards

Choisir Modernizr pour couper la moutarde peut ne pas être aussi efficace (car il nécessite le téléchargement et le traitement des clients), mais la détection manuelle du support Flex-Wrap n'est pas une tâche simple. Il est également important de noter que bien que Modernizr version 2 ne détecte pas Flex-Wrap, la version 3 le fait! La fonction est étiquetée comme un enveloppement de ligne flexible.

Bien que l'option existe pour utiliser les classes CSS attachées à la racine du document produite par Modernizr (par exemple: html.flexwrap), il est préférable de servir des fichiers CSS séparés pour chaque expérience pour réduire la taille de téléchargement du site.

Les développeurs de nouvelles de la BBC se réfèrent à deux types de navigateurs:

quelqu'un de l'équipe a commencé à les qualifier de «navigateurs HTML4» et de «navigateurs HTML5», ce que nous constatons est plus facile à communiquer le sentiment aux personnes non techniques.

- BBC Responsive News

Cette justification était parfaitement valable lorsque vous considérez le climat du paysage du navigateur en 2012; Cependant, à mesure que de nouvelles fonctionnalités deviennent disponibles, la division n'est pas nécessairement aussi claire. Flexbox, par exemple, n'est pas entièrement pris en charge dans tous les navigateurs "HTML5".

Une approche robuste consiste à faire la différence entre les versions de navigateur «hérité» et «moderne». De plus, certains projets peuvent nécessiter plusieurs divisions où les navigateurs à mi-chemin (ou «transitionnels») peuvent être identifiés.

Implémentation de l'approche

Commencez par créer les fichiers suivants:

• index.html - Le fichier HTML principal
• Styleshets / moderne.css - Styles pour les navigateurs modernes (requêtes multimédias, flexbox avec emballage)
• Stylesheets / Legacy.css - Styles pour les navigateurs hérités (pas de requêtes multimédias, pas de flexible)
• scripts / dépendances.js - effectue la détection des fonctionnalités

Voici à quoi ressemblera notre fichier index.html:

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> class<span>="no-js"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Cutting the mustard<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="javascripts/dependencies.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><noscript</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="stylesheets/legacy.css"</span>></span>
</span>    <span><span><span></noscript</span>></span>
</span>    <span><!-- ... -->
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> class<span>="container"</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-1"</span>></span>Cell 1<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-2"</span>></span>Cell 2<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-3"</span>></span>Cell 3<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-4"</span>></span>Cell 4<span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Remarquez qu'il n'y a pas de commentaires conditionnels IE? Il suffit de nettoyer et un code HTML valide. Et si le navigateur n'a pas de JavaScript activé, il reprendra l'utilisation de Legacy.css quel que soit son niveau de soutien.

Vous pouvez également remarquer que les balises de script sont en haut de la page HTML. En effet, Modernizr devrait traiter et injecter les feuilles de style avant que le navigateur ne peint pour la première fois. Cela réduit la repeinte et aide à éviter un éclair de contenu non utilisé (FOUC). Mais n'oubliez pas que la plupart des balises de script seraient en bas de la page.

Notre fichier hérité.css contiendra les éléments suivants:

<span><span>.container</span> {
</span><span>}
</span>
<span>/* clearfix */
</span><span><span>.container:after</span> {
</span>  <span>content: "";
</span>  <span>display: table;
</span>  <span>clear: both;
</span><span>}
</span>
<span><span>.cell</span> {
</span>  <span>width: 50%;
</span>  <span>float: left;
</span><span>}
</span>
<span>/* wrapping */
</span><span><span>.cell:nth-child(<span>2n+1</span>)</span> {
</span>  <span>clear: left;
</span><span>}
</span>
<span>/* for visiblity */
</span><span><span>.cell-1</span> { background-color: #000; color: #fff; }
</span><span><span>.cell-2</span> { background-color: #666; color: #fff; }
</span><span><span>.cell-3</span> { background-color: #ccc; color: #000; }
</span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>

Cette implémentation comprend un piratage ClearFix et la pseudo-classe: Nth-Child pour l'emballage. Cela fonctionne dans la plupart des navigateurs; Cependant, Internet Explorer 8 nécessite une sélectivizr ou une solution équivalente pour faire fonctionner le sélecteur.

Ensuite, notre fichier moderne.css:

<span><span>.container</span> {
</span>  <span>/* Internet Explorer 10
</span><span>   */
</span>  <span>display: -ms-flexbox;
</span>  <span>-ms-flex-wrap: wrap;
</span>
  <span>/* Chrome 21-28
</span><span>   * Safari 6.1+
</span><span>   * Opera 15-16
</span><span>   * iOS 7.0+
</span><span>   */
</span>  <span>display: -webkit-flex;
</span>  <span>-webkit-flex-wrap: wrap;
</span>
  <span>/* Chrome 29+
</span><span>   * Firefox 28+
</span><span>   * Internet Explorer 11+
</span><span>   * Opera 12.1 & 17+
</span><span>   * Android 4.4+
</span><span>   */
</span>  <span>display: flex;
</span>  <span>flex-wrap: wrap;
</span><span>}
</span>
<span><span>.cell</span> {
</span>  <span>-webkit-flex: 1 0 50%;
</span>      <span>-ms-flex: 1 0 50%;
</span>          <span>flex: 1 0 50%;
</span><span>}
</span>
<span>/* for visiblity */
</span><span><span>.cell-1</span> { background-color: #000; color: #fff; }
</span><span><span>.cell-2</span> { background-color: #666; color: #fff; }
</span><span><span>.cell-3</span> { background-color: #ccc; color: #000; }
</span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>

Ne soyez pas découragé par la taille de ce fichier. Les commentaires le rendent plus grand, mais ceux-ci facilitent le développement de comprendre ce que chaque section cible.

Ensuite, nous rédigeons le code pour les dépendances.js.

Comme mentionné, nous devons générer une version de Modernizr (version 3) qui détecte la prise en charge de la propriété Flex-Wrap. Incluez le code en haut du fichier javascript.

<span>/* Include Modernizr v3 with 'Flex line wrapping' here */
</span>
<span>(function() {
</span>  <span>var isModern = Modernizr.flexwrap;
</span>
  <span>var link = document.createElement('link');
</span>  link<span>.rel = 'stylesheet';
</span>  link<span>.type = 'text/css';
</span>  link<span>.href = 'stylesheets/' + (isModern ? 'modern' : 'legacy') + '.css';
</span>
  <span>document.getElementsByTagName('head')[0].appendChild(link);
</span><span>})();</span>

Vous pouvez éventuellement augmenter les exigences pour une expérience moderne en ajoutant à l'iSmodern Boolean. Par exemple:

<span>var isModern = Modernizr.flexwrap && 'querySelector' in document;</span>

solutions sass

Vous pouvez utiliser SASS pour abstraction de votre approche pour implémenter Flexbox. Cela réduit la taille de la sortie CSS et le rend plus facile à entretenir:

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> class<span>="no-js"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Cutting the mustard<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="javascripts/dependencies.js"</span>></span><span><span></script</span>></span>
</span>    <span><span><span><noscript</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="stylesheets/legacy.css"</span>></span>
</span>    <span><span><span></noscript</span>></span>
</span>    <span><!-- ... -->
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> class<span>="container"</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-1"</span>></span>Cell 1<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-2"</span>></span>Cell 2<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-3"</span>></span>Cell 3<span><span></div</span>></span>
</span>      <span><span><span><div</span> class<span>="cell cell-4"</span>></span>Cell 4<span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Amélioration progressive et tests de navigateur

Il est important de comprendre les différences entre les flotteurs Flexbox et CSS. Votre mise en œuvre ne sera pas exactement la même dans chacune des expériences - mais la notion d'amélioration progressive signifie qu'il n'est pas nécessairement nécessaire.

Par exemple, par défaut, Flexbox étirera toutes les cellules de la même ligne pour avoir la même hauteur. Par conséquent, si une cellule est de 3 lignes et la ligne adjacente est de 10 lignes de long, l'arrière-plan s'étendra sur les deux cellules à 10 lignes. La secours pour les flotteurs CSS ne le fera pas et les deux cellules auront des hauteurs inégales.

Tester la mise en page dans plusieurs navigateurs est toujours une exigence, mais n'oubliez pas que forcer la valeur de l'ismoderne à false en javascript peut aider à tester les solutions héritées dans n'importe quel navigateur:

<span><span>.container</span> {
</span><span>}
</span>
<span>/* clearfix */
</span><span><span>.container:after</span> {
</span>  <span>content: "";
</span>  <span>display: table;
</span>  <span>clear: both;
</span><span>}
</span>
<span><span>.cell</span> {
</span>  <span>width: 50%;
</span>  <span>float: left;
</span><span>}
</span>
<span>/* wrapping */
</span><span><span>.cell:nth-child(<span>2n+1</span>)</span> {
</span>  <span>clear: left;
</span><span>}
</span>
<span>/* for visiblity */
</span><span><span>.cell-1</span> { background-color: #000; color: #fff; }
</span><span><span>.cell-2</span> { background-color: #666; color: #fff; }
</span><span><span>.cell-3</span> { background-color: #ccc; color: #000; }
</span><span><span>.cell-4</span> { background-color: #fff; color: #000; }</span>

Conclusion

Dans cet article, j'ai fourni les bases de l'utilisation de la détection des fonctionnalités pour servir deux feuilles de styles différentes sur la même base de code HTML. Il s'agit d'un moyen extrêmement efficace de commencer le processus de mise à niveau des flotteurs CSS et de réduire la dépendance aux commentaires conditionnels IE.

Bien que l'accent ait été mis sur la détection du support pour Flexbox, il est important de noter que de nouvelles fonctionnalités sont développées pour les navigateurs, cette approche pour couper la moutarde peut être adaptée et évoluée pour s'adapter aux exigences futures.

Une fois qu'Internet Explorer 10 redonne de popularité avec la part de marché du navigateur dans votre secteur cible, vous pourrez peut-être abandonner la syntaxe de Tweener et livrer du code plus maigre uniquement grâce à l'utilisation de la nouvelle syntaxe.

Alors maintenant que vous avez toute la théorie, pourquoi ne pas vous familiariser avec Flexbox dans votre prochain projet?

Posés fréquemment posés aux questions sur la migration vers Flexbox et pour éviter le héritage javascript

Quelle est la signification de la migration vers Flexbox?

La migration vers Flexbox est une étape importante dans le développement Web moderne. Flexbox, ou disposition flexible de la boîte, est un modèle de disposition Web CSS3 qui permet de disposer automatiquement des éléments réactifs dans un conteneur en fonction de la taille de l'écran. Cela signifie que la disposition de vos pages Web peut facilement s'adapter à différentes tailles d'écran, garantissant une expérience utilisateur transparente sur divers appareils. Il simplifie également le processus de conception d'une structure de mise en page flexible et réactive sans utiliser de flotteur ou de positionnement.

Comment le service javascript hérité aux navigateurs modernes affecte-t-il les performances de mon site Web?

Servir le JavaScript hérité aux navigateurs modernes peut avoir un impact significatif sur les performances de votre site Web. Le héritage JavaScript est souvent gonflé avec du code inutile dont les navigateurs modernes n'ont pas besoin. Ce code supplémentaire peut ralentir votre site Web car le navigateur doit télécharger, analyser, compiler et l'exécuter. En servant JavaScript moderne aux navigateurs modernes, vous pouvez améliorer le temps de chargement de votre site Web et les performances globales.

Comment puis-je éviter de servir le JavaScript hérité aux navigateurs modernes?

Pour éviter de servir le javascript hérité aux navigateurs modernes, vous pouvez utiliser le motif module / nomodule. Ce modèle vous permet de créer deux faisceaux distincts de votre JavaScript - un faisceau moderne et «module» et un bundle hérité, «nomodule». Les navigateurs modernes qui comprennent l'attribut «type =» '' téléchargeront le bundle moderne, tandis que les navigateurs plus anciens l'ignoreront et téléchargeront le bundle hérité à la place.

Quels sont les avantages de l'utilisation de Flexbox sur les méthodes de mise en page traditionnelles?

Flexbox offre plusieurs avantages par rapport aux méthodes de mise en page traditionnelles. Il permet des structures de mise en page flexibles, ce qui facilite la conception de sites Web réactifs. Il simplifie également l'alignement, la distribution et l'ordre des éléments dans un conteneur. Avec Flexbox, vous pouvez facilement obtenir des dispositions et des alignements complexes qui seraient difficiles avec CSS traditionnelle.

Comment puis-je assurer une transition en douceur lors de la migration vers Flexbox?

Migrer vers Flexbox peut être un complexe processus, en particulier pour les grands projets existants. Il est important de bien comprendre le modèle Flexbox avant de commencer la migration. Commencez par expérimenter avec des dispositions simples, passant progressivement à des dispositions plus complexes. Utilisez une approche étape par étape, migrant un composant à la fois et testez soigneusement chaque modification.

Quels outils puis-je utiliser pour vérifier si je sert le javascript hérité aux navigateurs modernes?

Des outils comme Google Lighthouse, GTMetrix et WebPageTest peuvent vous aider à identifier si vous servez un JavaScript hérité aux navigateurs modernes. Ces outils fournissent des rapports de performances détaillés, mettant en évidence les domaines où les performances de votre site Web peuvent être améliorées.

Puis-je utiliser Flexbox avec des navigateurs hérités?

Bien que Flexbox soit un modèle de mise en page moderne, il a un certain niveau de soutien dans les navigateurs plus âgés. Cependant, il peut y avoir des incohérences et des bogues. Il est recommandé d'utiliser des outils comme AutopRefixer, qui peuvent ajouter les préfixes du fournisseur nécessaire à votre CSS, assurant la compatibilité avec les navigateurs plus âgés.

Comment la migration vers le flexion affecte-t-elle le référence SEO. Un site Web réactif et à chargement rapide offre une meilleure expérience utilisateur, ce qui est un facteur clé du référencement. De plus, les sites Web qui se chargent plus rapidement sont plus susceptibles d'être rampés et indexés par les moteurs de recherche.

Quels sont les défis courants lors de la migration vers Flexbox?

Certains défis courants lors de la migration vers Flexbox incluent la compréhension de la Nouveau modèle de mise en page, traitant des incohérences du navigateur et garantissant la compatibilité en arrière. Il est important de tester soigneusement votre site Web dans divers navigateurs et appareils pour assurer une expérience utilisateur cohérente.

Comment puis-je en savoir plus sur Flexbox et Modern JavaScript?

Il existe de nombreuses ressources en ligne pour en savoir plus sur Flexbox et le JavaScript moderne. Des sites Web comme CSS-Tricks, MDN Web Docs et SitePoint offrent des guides et tutoriels complets. De plus, les plateformes de codage en ligne comme CodeCademy et FreeCodeCamp fournissent des leçons interactives sur ces sujets.

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!