2015, apprendre les layouts CSS de façon méticuleuse

 (book.mixu.net)
6 points par GN⁺ 2024-03-01 | 1 commentaires | Partager sur WhatsApp
  • Une ressource d’apprentissage structurée par chapitres, conçue pour aider les lecteurs ayant déjà utilisé les layouts CSS à comprendre l’algorithme de layout jusque dans ses règles de détail
  • Réexplique inline, block, z-index et le modèle de boîte non pas comme de simples usages, mais comme des règles de décision telles que le formatting context et le stacking context
  • Dans le flux normal, la position relative des éléments de bloc et en ligne n’est pas déterminée par display seul ; les éléments frères et le contexte influencent aussi le résultat
  • La taille du modèle de boîte et le calcul de margin: auto varient selon le mode de positionnement, ce qui rend difficile la mémorisation d’une règle unique
  • Après avoir couvert le flux normal, les flottants, le positionnement absolu, le margin collapsing, l’overflow, z-index, les pseudo-éléments et Flexbox, le contenu mène à des problèmes concrets de layout comme le centrage et les frameworks de grille

Comprendre les layouts CSS à travers les règles

  • Cette ressource est un long support d’apprentissage qui considère les layouts CSS non comme une collection d’astuces, mais comme un système fondé sur des règles, en expliquant chaque règle chapitre par chapitre
  • Comme l’expression “pedantic” l’indique, l’approche prend en compte même les détails qui paraissent mineurs et les règles formelles
  • Le public visé n’est pas celui qui découvre CSS, mais les personnes qui l’utilisent déjà et veulent comprendre plus rigoureusement le fonctionnement des layouts
  • Les sites web évoluent généralement de manière progressive ; il est donc facile d’apprendre les layouts uniquement à travers de petites astuces et tricks, au risque de passer à côté de l’algorithme de layout lui-même
  • Les concepts principaux sont abordés dans l’ordre, avec des exemples pratiques permettant de vérifier chaque notion

Structure par chapitres

  • Chapter 1: Box positioning in CSS traite de la manière dont les boîtes créées par les éléments HTML se placent les unes par rapport aux autres
    • Les trois grands modes de positionnement en CSS : flux normal, flottants et positionnement absolu
    • Dans le flux normal : anonymous box generation, formatting context, line box, et alignement à l’intérieur de la line box
    • Ordre des flottants, clearfix, et interaction entre les flottants et la hauteur du parent
  • Chapter 2: Box sizing in CSS traite du modèle de boîte et des différences selon le mode de positionnement
    • Les calculs de height, width et margin utilisent des mécanismes différents
    • Pour comprendre la méthode de calcul, il faut examiner à la fois le mode de positionnement utilisé et le mécanisme de calcul correspondant
  • Chapter 3: Additional properties that influence positioning récapitule les propriétés et mécanismes supplémentaires qui influencent le placement des boîtes
    • margin collapsing, marges négatives, overflow
    • max-width, max-height, min-width, min-height
    • stacking context et z-index
    • Influence des pseudo-éléments sur le layout
    • Propriété CSS3 box-sizing
  • Chapter 4: Flexbox explique le mode de layout Flexbox de CSS 3
  • Chapter 5: CSS layout - tricks and layout techniques applique le contenu des chapitres précédents à des problèmes concrets
    • Centrage horizontal et vertical
    • Fonctionnement des frameworks de grille CSS
    • Layouts multi-colonnes
    • Pièges fréquents et astuces de layout
  • reference index permet de retrouver un concept ou une propriété précise et d’aller au chapitre ou à la section correspondants

À lire aussi

1 commentaires

 
GN⁺ 2024-03-01
Avis Hacker News

  • Quand on explique les mises en page CSS, la première chose à dire est qu’il existe quatre systèmes de mise en page différents : le plus ancien, les tables, encore utilisées dans les e-mails ; float pour les images dans le corps du texte ; flexbox, le plus utilisé aujourd’hui ; et grid, l’alternative moderne aux tables
    Les positionnements absolute et fixed peuvent aussi être utilisés comme des hacks pour contourner la mise en page

    • absolute et fixed ne sont pas des hacks et ne « contournent » pas la mise en page
      Ce sont deux des cinq options de positionnement qui déterminent comment un élément est placé et se comporte dans le flux du document, ou à l’intérieur d’un conteneur donné : https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • Les deux premiers relèvent plutôt de systèmes de mise en page alternatifs utilisés avant flexbox et grid
      La propriété float peut aussi être utilisée avec Grid. Le système de mise en page le plus simple et le plus fondamental, le flux normal, manque à la liste : https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • Dire que « les tables sont le plus ancien système de mise en page CSS et sont encore utilisées dans les e-mails » n’est pas tout à fait exact
      Le balisage HTML réel des tables est l’une des plus anciennes façons de disposer côte à côte certaines parties d’une page web, et il est aussi utilisé dans les e-mails, mais c’est une autre histoire que CSS
      CSS propose display: table et des valeurs associées, mais, de mémoire, c’était plus difficile à utiliser que float dans les anciens IE et son usage était limité. Je n’ai presque jamais vu cela beaucoup utilisé sur le web moderne non plus, peut-être parce que les exigences de balisage autour sont trop strictes. Par exemple, il n’y a pas moyen de changer l’ordre, et si plusieurs lignes sont nécessaires, il faut mettre dans le HTML des éléments qui jouent ce rôle
    • Au passage, Flexbox Froggy est la meilleure façon d’apprendre flex, et avant d’écrire du CSS il vaut mieux importer des règles de css-reset faites par quelqu’un d’autre
      Elles remplacent d’anciens comportements de rétrocompatibilité par des valeurs par défaut plus raisonnables. Exemple : https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...
    • Les tables ne sont pas le plus ancien système de mise en page CSS. C’est le flow layout, et curieusement il est totalement absent de cette liste

  • La description selon laquelle float « sert à placer des boîtes sur les bords gauche et droit d’une boîte conteneur » n’est pas exacte
    On peut faire cela avec float, mais depuis l’arrivée de flexbox et grid, on ne l’utilise plus ainsi. Comme l’élément sort du flux normal, c’est une façon de créer des mises en page qui embrouille les personnes qui apprennent CSS
    float ressemble davantage à un outil de composition typographique qu’à un outil de mise en page. Si le texte se présente comme pédant, il devrait être plus rigoureux

    • Dans une introduction à HTML/CSS, il faut absolument expliquer que ces technologies, lorsqu’elles ont été créées, avaient pour seul but le rendu de documents en ligne
      À la base, elles ont été conçues comme une sorte de Microsoft Word pour des fichiers situés sur l’ordinateur de quelqu’un d’autre, et c’est pourquoi la plupart des premières propriétés comme float servaient à la mise en page typographique
    • Tous les éléments dans un conteneur flottent vers le haut du conteneur, puis vers la droite ou la gauche de l’élément précédent selon que la direction du texte est ltr ou rtl
      S’il ne reste plus d’espace, ils descendent sous les éléments précédents. Si un élément est en display: block, il occupe tout l’espace horizontal, donc tous les éléments suivants flottent en dessous. C’est pour cela que cela s’appelle float, et c’est ainsi que la position des éléments est calculée
      Avec float:left|right, on force cet élément à flotter à gauche ou à droite avant les autres éléments du même conteneur. Bien sûr, si le conteneur utilise flex ou grid, cela ne fonctionne plus ainsi
    • Une grande partie du chapitre 1 (https://book.mixu.net/css/1-positioning.html#float-positioni...) traite de la complexité de float et de son flux particulier, et explique comment réutiliser et adapter prudemment ce comportement à d’autres fins
      En particulier si l’on tient compte du fait qu’au moment de la rédaction, les mises en page flexbox/grid n’existaient pas, je trouve que c’est une explication suffisamment méticuleuse
    • La mise en page flexbox est simplifiée par cet outil
      Il réduit le nombre de propriétés dont il faut se préoccuper : https://flexboxcss.com
    • Je ne vois pas bien comment placer des sidenotes ou des notes marginales sans utiliser float
      Surtout quand la note doit être alignée sur le point de référence au milieu d’un paragraphe

  • Ce genre d’article paraît intimidant même s’il date d’avant CSS Grid. Avec l’arrivée de CSS Grid, la mise en page CSS est devenue encore plus complexe, et même après 10 ans de développement web, j’ai toujours l’impression de ne pas en connaître les profondeurs
    Son fonctionnement, ses rares cas limites, ses mécanismes internes, le nombre énorme de fonctionnalités… j’ai d’ailleurs écrit récemment un article à ce sujet
    Avant même d’avoir rattrapé tous les détails de Grid Layouting, subgrid et les container queries sont arrivés. Plusieurs nouvelles propriétés ajoutées traitent de cas tellement spécifiques que je doute d’avoir un jour l’occasion de m’en servir (hanging-punctuation, font-palette, par exemple)
    Il existe au moins trois propriétés liées à la césure des paragraphes, et on peut ignorer que la propriété filter prend aussi en charge un tout autre type de filtres utilisant SVG. On peut également ajuster l’algorithme de mise à l’échelle des images, et border-radius prend aussi en charge les coins elliptiques
    On pourrait dire ça de n’importe quelle technologie, mais CSS est différent. Il gère trop de choses de trop de façons, et change trop, trop vite : https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/

    • Je me demande ce que signifie « même après 10 ans de développement web, j’ai toujours l’impression de ne pas connaître les profondeurs de CSS »
      Je manipule CSS depuis encore plus longtemps, mais je n’essaie même pas de mémoriser si c’est align-items ou justify-content, donc je ne m’en souviens pas. Dès que j’utilise flexbox, j’ouvre https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      Grid, je m’en souviens encore moins. Pourtant, après avoir râlé quelques fois et lâché quelques WTF, j’arrive assez facilement à faire ce que je veux, donc je n’ai pas cette impression de ne pas en connaître les profondeurs. J’ai souvent entendu ce genre de chose à propos de CSS, mais dans la plupart des cas, je trouve qu’il est assez facile de créer la mise en page voulue sans gros effort. C’est juste que je ne mémorise pas CSS comme je mémorise JS
    • Si la mise en page CSS vous intéresse, je recommande d’apprendre d’abord Flexbox et CSS Grid
      Les deux sont bien documentés et relativement intuitifs, et grid en particulier a peu de comportements étranges
      De nos jours, il n’est pas nécessaire de beaucoup connaître la mise en page en flux, et on peut complètement sauter les mises en page avec float et table. Il suffit de les utiliser pour leur objectif initial : les images flottantes dans du contenu texte et les vrais tableaux
    • Le problème constant dans le travail frontend, c’est que tous les articles supposent que leurs lecteurs ont suivi les tendances récentes en continu pendant les 15 dernières années
      La première fois que j’ai fait un vrai travail frontend rémunéré en dollars, je générais directement du DHTML depuis perl. Même taper cet acronyme est devenu si lointain dans mon cache de mémoire musculaire que mes doigts hésitent
      Je connais le frontend au niveau d’un enfant de six ans qui connaîtrait le calcul infinitésimal, donc j’ai maintenant l’impression qu’il n’y a plus moyen de rattraper
    • Pareil pour moi. Si je commence simplement à utiliser grid un peu partout, ça marche généralement bien
      Cela dit, j’utilise du CSS plain et je n’ai généralement pas non plus de feuille de style globale, ce qui aide pas mal
    • Ça pourrait être pire. Ça pourrait être LaTeX

  • Je développe beaucoup d’apps UI, surtout avec Angular, et ces temps-ci j’utilise simplement un framework comme Bootstrap ou Foundation
    Les innombrables options de mise en page en CSS pur sont écrasantes et donnent mal à la tête, surtout pour le responsive design. J’ai essayé le CSS pur, mais je finis par utiliser beaucoup de boilerplate et par créer quelque chose qui ressemble à un mini-framework
    Si l’on ne crée pas un site web de designer sur mesure, personnellement je ne vois pas l’intérêt de réinventer la roue sans arrêt

    • Il reste toujours un peu de boilerplate, mais j’aime Open Props parce que c’est une approche hybride
      CSS ne consiste pas forcément à réinventer la roue ; il permet de rendre plus faciles et plus puissantes des mises en page difficiles, ou des tâches qui nécessitaient auparavant du JS
      Bootstrap est très bien aussi, mais pour résoudre des problèmes de mise en page avancés, on finit souvent par inspecter les éléments pour voir quels styles sont réellement appliqués. C’est en tout cas mon expérience, et c’est pourquoi, personnellement, je miserais plutôt sur CSS
      La nouvelle fonctionnalité que j’attends est la règle @scope, qui devrait rendre les styles scopés beaucoup plus simples à créer
      https://open-props.style/
      https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
    • Les fonctionnalités CSS modernes comme flexbox, grid et les media queries ont été ajoutées pour réduire le besoin de frameworks comme Bootstrap

  • Cet article a-t-il été écrit avant CSS Grid et les CSS columns ?
    Il existe aussi un article sur z-index : https://philipwalton.com/articles/what-no-one-told-you-about...

    • Oui. D’après https://book.mixu.net/, il a été écrit en 2015, et je crains qu’un article vieux de 9 ans ne soit pas très utile pour le CSS moderne

  • À voir le chapitre 3 traiter du margin collapsing et des negative margins, cet article privilégie la compréhension des anciennes techniques de mise en page
    C’est utile quand on travaille sur une base de code legacy, mais mieux vaut les éviter dans les nouveaux projets

  • Quelle est la meilleure façon d’apprendre CSS en profondeur ? La documentation officielle donne une impression un peu étrange quant à ce qui est encore valable ou non

    • Employer “actual” au sens de “current” est hors sujet, mais c’est l’une de mes expressions d’anglais UE préférées
      Quand on sait qu’en néerlandais, current se dit actueel et actual se traduit par daadwerkelijk, ça se comprend très bien. Si un locuteur natif s’y perd, ça peut même aider
    • Je pense que la meilleure méthode est de construire des choses, encore et encore
      Cela dépend peut-être du mode d’apprentissage, mais en manipulant réellement les styles et les mises en page, on assimile clairement les aspects pratiques de leur fonctionnement
      Quand j’écris du CSS, mon objectif est d’en écrire le moins possible. Pas parce que je déteste CSS — au contraire, je pense qu’il souffre injustement d’une mauvaise réputation — mais parce que cela permet d’apprendre à styliser des layouts plus efficacement, sans empiler trop de déclarations
    • Cette semaine, en me remettant à jour sur les technologies frontend, j’ai fait un peu d’étude de marché
      La meilleure ressource pour les bases de CSS était https://web.dev/learn/css, qui couvre aussi flexbox et grid
      Pour les guidelines de design, je recommande Refactoring UI. On y trouve beaucoup de conseils actionnables qui manquent dans des livres comme The UX Book
      Dans mon projet, j’utilise TailwindCSS, par les auteurs de Refactoring UI, et les composants Daisy UI, donc en pratique je n’écris pas de CSS brut. Au début, TailwindCSS donne l’impression d’un retour en arrière vers du CSS inline, mais c’est tout simplement mieux que les alternatives. Je recommande d’essayer
    • Je me demande ce que signifie ici “documentation officielle”. Les spécifications[1], ou MDN[2] ?
      [1] https://drafts.csswg.org/
      [2] https://developer.mozilla.org/en-US/docs/Web/CSS
      Les premières ne sont pas un support d’apprentissage pour les nouveaux développeurs web. Le second n’est pas non plus une documentation officielle ou faisant autorité, mais il contient généralement des informations sur le support Baseline et des tableaux de compatibilité des navigateurs
    • Il vaut mieux apprendre flexbox, le modèle de boîte, et surtout quand utiliser margin et padding
      Il est aussi utile d’apprendre comment fonctionne la cascade des styles, ce qui permet aussi de comprendre pourquoi on utilise SCSS et le développement par composants pour ne presque plus avoir à s’en préoccuper
      Il faut aussi se familiariser avec les media queries et le ciblage selon la taille d’écran. Et surtout, il ne faut pas avoir honte de chercher sur le Web “comment faire x en CSS”. La spécification est énorme et il y a beaucoup de choses à mémoriser ; si on ne les utilise pas souvent pendant longtemps, on ne peut pas tout retenir