Pour quoi nommer des classes comme « article » ? C’est une façon de désigner les choses qui est très générique. Les éléments sont déjà nommés comme cela ou peuvent être désignés de la même manière.
C’est vrai qu’on pourrait s’en contenter - encore plus dans le contexte d’un petit test isolé comme celui-ci. Mais malgré tout peut être que je l’ai mal nommé ici. Sûrement que dans un vrai projet j’aurai nommé ma classe “article-preview” par exemple.
Par contre l’inconvénient de la méthode est que tu proposes est que ça va augmenter de manière assez forte la spécificité de ton sélecteur CSS. Du coup si demain tu as besoin de surcharger la classe pour une raison ou une autre ça risque de te compliquer la tâche. Ça devient aussi plus facile de repérer quel code n’est plus utilisé et peut être supprimé au cours de l’évolution d’un projet.
Je ne suis pas tellement convaincu par votre explication. En théorie, on pourrait définir la spécificité des règles CSS en appliquant des sélecteurs adéquats et en plaçant les déclarations CSS dans les règles appropriées. En cas de conflit dans les déclarations, il n’y a pas de surcharge, c’est par exemple la déclaration CSS la plus spécifique qui s’applique (le principe de la cascade : combiner des déclarations CSS). Je veux bien croire que les noms de classes sont exploités par des outils automatisés pour effectuer des analyses sémantiques mais je ne pense pas qu’en tant que tel les noms de classes aient véritablement un rôle sémantique (à mon avis, ce sont plutôt des indicateurs). Après, je pense que isolément, cela peut-être plus évident à lire avec des noms de classe spécifiques comme par exemple .article-preview, dans une feuille de style. Dans le fichier HTML, c’est moche (parce que superflu). Graphiquement, je ne sais pas si on ne perd pas en corrélation sur la complémentarité CSS / HTML. C’est juste une intuition, je ne sais rien sinon, car je n’ai pas d’expérience.
Je me permets de revenir sur le sujet à titre pédagogique. Je souhaitais réaliser mon site Web de zéro. Je n’ai pas changé d’avis depuis mon dernier commentaire sur la méthode. Je pense que c’est fondamental de partir d’un modèle graphique pour mieux percevoir ce qui change dans l’apparence en fonction de divers aspects. Sinon, on se perd facilement avec la complexité. En bref, je trouve dommage que le choix graphique fluctuant intervienne avec la réalisation effective en CSS. À mon avis, c’est une mauvaise pratique de conception.
À noter : Les images sont placées au-dessus des titres dans la charte graphique du journal en ligne Le Monde. Le problème d’alignement des images ne se pose même plus.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#grid1 {
display: grid;
grid-template-areas:
"title title title"
"section_1 section_2 section_3";
}
#grid1 > h1 {
grid-area: title;
}
#grid1 > .box01 {
grid-area: section_1;
}
#grid1 > .box02 {
grid-area: section_2;
}
#grid1 > .box03 {
grid-area: section_3;
}
#grid1 > section > h2 {
text-transform: capitalize;
}
</style>
</head>
<body>
<article id="grid1">
<h1>Fun facts about cats</h1>
<section class="box01">
<h2>Positively mysteriously spurring</h2>
<img alt="A cute random kitten" src="https://placekitten.com/g/300/200"
width="300" height="200" />
<p>
Cats are the only animals that can purr while both inhaling and
exhaling, and the exact reason behind this unique behavior remains a
scientific puzzle.
</p>
</section>
<section class="box02">
<h2>Eyes of the night</h2>
<img alt="A cute random kitten" src="https://placekitten.com/g/300/200"
width="300" height="200" />
<p>
Thanks to the reflective layer behind their retinas called the tapetum
lucidum, cats have exceptional night vision, allowing them to see in
light levels six times lower than what humans need.
</p>
</section>
<section class="box03">
<h2>Whiskers wonders</h2>
<img alt="A cute random kitten" src="https://placekitten.com/g/300/200"
width="300" height="200" />
<p>
Cat whiskers are incredibly sensitive and help them navigate their
environment by detecting changes in texture, air currents, and even
gaps, making them essential tools for exploration.
</p>
</section>
</article>
</body>
</html>
Mais je suis confronté au problème qui est mentionné dans l’article. Ce qui est exposé dans l’article ne me convient pas du tout. En fait, on est face à un problème de conception inhérent au développement actuel du CSS. Je comprends mieux maintenant pourquoi Eric Meyer ne se réfère pas (ou ne fais pas référence) à display: contents pour élaborer des trames en CSS, dans son livre « CSS The Definitive Guide » 4 édition. Indéniablement, car ce problème flagrant apparaît de façon basique : les items positionnés sur une grille sont des éléments enfants sans pouvoir aligner les éléments descendants. L’un dans l’autre, tout reposerait sur l’implémentation des « subgrids ». Mais on est dans l’incertitude puisque, dans son livre, Meyer écrit « The problem is that, as of this writing, subgrid is an “at-risk” feature of grid layout, and may be dropped entirely. That’s why it rates just this small section, instead of a more comprehensive examination ». Pourtant à la même époque (Jan 2016), Meyer écrivait un article sur son site Web pour promouvoir les subgrids. Et au moment de ce commentaire, sur le site Web de Mozilla, on peut lire que les « subgrids » ne sont pas largement supportées (Oct 2023). Voir aussi l’article de Rachel Andrew : Why display: contents is not CSS Grid Layout subgrids. Peut-être que les choses se feront finalement, j’ai observé que plusieurs sections avaient été rajouté à la nouvelle édition de CSS The Definitive Guide (2023, 5 édition) à propos des « subgrids ».
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#grid1 {
display: grid;
grid-template-columns: repeat(3, 350px);
grid-template-rows: auto 100px 1fr 1fr;
grid-column-gap: 12px;
}
#grid1 > section {
display: grid;
grid: subgrid / subgrid;
grid-row: 2 / span 3;
}
</style>
</head>
<body>
<article id="grid1">
<h1>Fun facts about cats</h1>
<section>
<h2>Positively mysteriously spurring</h2>
<img alt="A cute random kitten" src="https://placekitten.com/g/300/200"
width="300" height="200" />
<p>
Cats are the only animals that can purr while both inhaling and
exhaling, and the exact reason behind this unique behavior remains a
scientific puzzle.
</p>
</section>
<section>
<h2>Eyes of the night</h2>
<img alt="A cute random kitten" src="https://placekitten.com/g/300/200"
width="300" height="200" />
<p>
Thanks to the reflective layer behind their retinas called the tapetum
lucidum, cats have exceptional night vision, allowing them to see in
light levels six times lower than what humans need.
</p>
</section>
<section>
<h2>Whiskers wonders</h2>
<img alt="A cute random kitten" src="https://placekitten.com/g/300/200"
width="300" height="200" />
<p>
Cat whiskers are incredibly sensitive and help them navigate their
environment by detecting changes in texture, air currents, and even
gaps, making them essential tools for exploration.
</p>
</section>
</article>
</body>
</html>
Je pense que vous avez embrouillé vos idées. Votre grille a deux rangées positionnées en dehors de la grille sans raison valable ; elles ont été ajouté automatiquement alors qu’elles auraient dû être définies explicitement.
Je suis désolé je ne vois vos commentaires que maintenant.
Qu’entendez vous par 2 rangées positionnées en dehors de la grille ? Je ne suis pas sûr de comprendre.
Dans le cas de https://codepen.io/julienpradet/pen/GRPpZrR je ne vois pas de rangées en dehors de la grille ?
L’avantage de grid-auto-columns est que cela permet d’avoir un nombre variable d’éléments dans la grille: y compris s’il n’y a qu’1 ou 2 articles. Ca ne marcherait pas pour des articles qu’on voudrait les uns en dessous des autres. Mais ce n’est pas le but de ce composant.
Vous ne connaissez pas le concept à mon avis. Les éléments sont disposés dans la grille. La grille que vous avez définie explicitement dans vos déclarations CSS n’a que trois lignes (row) et une seule colonne (column). Vous avez neuf éléments (items) à disposer (3x3). La propriété CSS grid-auto-column spécifie la largeur des colonnes créées implicitement, en relation avec la déclaration grid-auto-flow: column. En supposant que grid-auto-flow: row; soit effective (ce n’est pas ce qui est recherché), les éléments h2, img et p auraient été placés dans les trois lignes de la seule colonne définie explicitement. Les autres éléments auraient été placés dans de nouvelles lignes créées implicitement. On appelle cela la grille implicite (implicit grid).
Je dois admettre que ce n’est pas très bien expliqué de ma part. Normalement, grid-auto-flow spécifie l’ordre dans lequel disposer les éléments de la grille. La valeur row spécifie qu’il faut remplir la grille ligne par ligne : ligne 1 colonne 1, ligne 1 colonne 2, ligne 1 colonne 3, ligne 2 colonne 1, ligne 2 colonne 2, ligne 2 colonne 3, etc. Les éléments auraient été disposé l’un à côté de l’autre par groupe de trois si ces trois colonnes auraient été défini explicitement.
Le concept de grille est que le nombre d’éléments (ici, les articles) importe moins. On sait au préalable comment les éléments seront positionnés, c’est l’essentiel.
Je vous prie de m’excuser. J’ai une question à poser en lien avec le sujet mais ce n’est peut-être pas approprié dans un commentaire à propos de l’article. Est-il raisonnable de vouloir positionner des éléments avec CSS ? Je me pose cette question à cause de la multitude de façons apparaissant sur le Web. D’aucunes sont considérées comme du raccommodage ce dont je partage l’avis sauf que je n’ai jamais rien réalisé. Cela m’exaspérerait de devoir façonner du code HTML pour faire une mise en page. N’est-ce pas contraire au principe de conception Web ? Pourtant, on peut observer cela chez des développeurs Web. À tel point que je me demande s’il ne faut pas créer des éléments en SVG à intégrer dans le HTML.
Tout est question de compromis et nous devons faire avec les outils qui nous sont à disposition. Tout passer en SVG entraine de nombreuses complications d’accessibilité, je ne pense pas que ce soit une meilleure solution.
Pour quoi nommer des classes comme « article » ? C’est une façon de désigner les choses qui est très générique. Les éléments sont déjà nommés comme cela ou peuvent être désignés de la même manière.
C’est vrai qu’on pourrait s’en contenter - encore plus dans le contexte d’un petit test isolé comme celui-ci. Mais malgré tout peut être que je l’ai mal nommé ici. Sûrement que dans un vrai projet j’aurai nommé ma classe “article-preview” par exemple.
Par contre l’inconvénient de la méthode est que tu proposes est que ça va augmenter de manière assez forte la spécificité de ton sélecteur CSS. Du coup si demain tu as besoin de surcharger la classe pour une raison ou une autre ça risque de te compliquer la tâche. Ça devient aussi plus facile de repérer quel code n’est plus utilisé et peut être supprimé au cours de l’évolution d’un projet.
La méthode que j’ai utilisé ici est https://getbem.com/introduction/
Je ne suis pas tellement convaincu par votre explication. En théorie, on pourrait définir la spécificité des règles CSS en appliquant des sélecteurs adéquats et en plaçant les déclarations CSS dans les règles appropriées. En cas de conflit dans les déclarations, il n’y a pas de surcharge, c’est par exemple la déclaration CSS la plus spécifique qui s’applique (le principe de la cascade : combiner des déclarations CSS). Je veux bien croire que les noms de classes sont exploités par des outils automatisés pour effectuer des analyses sémantiques mais je ne pense pas qu’en tant que tel les noms de classes aient véritablement un rôle sémantique (à mon avis, ce sont plutôt des indicateurs). Après, je pense que isolément, cela peut-être plus évident à lire avec des noms de classe spécifiques comme par exemple
.article-preview, dans une feuille de style. Dans le fichier HTML, c’est moche (parce que superflu). Graphiquement, je ne sais pas si on ne perd pas en corrélation sur la complémentarité CSS / HTML. C’est juste une intuition, je ne sais rien sinon, car je n’ai pas d’expérience.Je me permets de revenir sur le sujet à titre pédagogique. Je souhaitais réaliser mon site Web de zéro. Je n’ai pas changé d’avis depuis mon dernier commentaire sur la méthode. Je pense que c’est fondamental de partir d’un modèle graphique pour mieux percevoir ce qui change dans l’apparence en fonction de divers aspects. Sinon, on se perd facilement avec la complexité. En bref, je trouve dommage que le choix graphique fluctuant intervienne avec la réalisation effective en CSS. À mon avis, c’est une mauvaise pratique de conception.
À noter : Les images sont placées au-dessus des titres dans la charte graphique du journal en ligne Le Monde. Le problème d’alignement des images ne se pose même plus.
Le code ci-dessus n’est pas génial mais j’espère pouvoir proposer une meilleure version.
Mais je suis confronté au problème qui est mentionné dans l’article. Ce qui est exposé dans l’article ne me convient pas du tout. En fait, on est face à un problème de conception inhérent au développement actuel du CSS. Je comprends mieux maintenant pourquoi Eric Meyer ne se réfère pas (ou ne fais pas référence) à
display: contentspour élaborer des trames en CSS, dans son livre « CSS The Definitive Guide » 4 édition. Indéniablement, car ce problème flagrant apparaît de façon basique : les items positionnés sur une grille sont des éléments enfants sans pouvoir aligner les éléments descendants. L’un dans l’autre, tout reposerait sur l’implémentation des « subgrids ». Mais on est dans l’incertitude puisque, dans son livre, Meyer écrit « The problem is that, as of this writing,subgridis an “at-risk” feature of grid layout, and may be dropped entirely. That’s why it rates just this small section, instead of a more comprehensive examination ». Pourtant à la même époque (Jan 2016), Meyer écrivait un article sur son site Web pour promouvoir les subgrids. Et au moment de ce commentaire, sur le site Web de Mozilla, on peut lire que les « subgrids » ne sont pas largement supportées (Oct 2023). Voir aussi l’article de Rachel Andrew : Why display: contents is not CSS Grid Layout subgrids. Peut-être que les choses se feront finalement, j’ai observé que plusieurs sections avaient été rajouté à la nouvelle édition de CSS The Definitive Guide (2023, 5 édition) à propos des « subgrids ».On peut faire mieux ! |-O
Je pense que vous avez embrouillé vos idées. Votre grille a deux rangées positionnées en dehors de la grille sans raison valable ; elles ont été ajouté automatiquement alors qu’elles auraient dû être définies explicitement.
Je suis désolé je ne vois vos commentaires que maintenant.
Qu’entendez vous par 2 rangées positionnées en dehors de la grille ? Je ne suis pas sûr de comprendre. Dans le cas de https://codepen.io/julienpradet/pen/GRPpZrR je ne vois pas de rangées en dehors de la grille ?
L’avantage de grid-auto-columns est que cela permet d’avoir un nombre variable d’éléments dans la grille: y compris s’il n’y a qu’1 ou 2 articles. Ca ne marcherait pas pour des articles qu’on voudrait les uns en dessous des autres. Mais ce n’est pas le but de ce composant.
Vous ne connaissez pas le concept à mon avis. Les éléments sont disposés dans la grille. La grille que vous avez définie explicitement dans vos déclarations CSS n’a que trois lignes (row) et une seule colonne (column). Vous avez neuf éléments (items) à disposer (3x3). La propriété CSS
grid-auto-columnspécifie la largeur des colonnes créées implicitement, en relation avec la déclarationgrid-auto-flow: column. En supposant quegrid-auto-flow: row;soit effective (ce n’est pas ce qui est recherché), les élémentsh2,imgetpauraient été placés dans les trois lignes de la seule colonne définie explicitement. Les autres éléments auraient été placés dans de nouvelles lignes créées implicitement. On appelle cela la grille implicite (implicit grid).Je dois admettre que ce n’est pas très bien expliqué de ma part. Normalement,
grid-auto-flowspécifie l’ordre dans lequel disposer les éléments de la grille. La valeurrowspécifie qu’il faut remplir la grille ligne par ligne : ligne 1 colonne 1, ligne 1 colonne 2, ligne 1 colonne 3, ligne 2 colonne 1, ligne 2 colonne 2, ligne 2 colonne 3, etc. Les éléments auraient été disposé l’un à côté de l’autre par groupe de trois si ces trois colonnes auraient été défini explicitement.Le concept de grille est que le nombre d’éléments (ici, les articles) importe moins. On sait au préalable comment les éléments seront positionnés, c’est l’essentiel.
De toute façon les choses sont intriquées car c’est d’ordre géométrique.
Je vous prie de m’excuser. J’ai une question à poser en lien avec le sujet mais ce n’est peut-être pas approprié dans un commentaire à propos de l’article. Est-il raisonnable de vouloir positionner des éléments avec CSS ? Je me pose cette question à cause de la multitude de façons apparaissant sur le Web. D’aucunes sont considérées comme du raccommodage ce dont je partage l’avis sauf que je n’ai jamais rien réalisé. Cela m’exaspérerait de devoir façonner du code HTML pour faire une mise en page. N’est-ce pas contraire au principe de conception Web ? Pourtant, on peut observer cela chez des développeurs Web. À tel point que je me demande s’il ne faut pas créer des éléments en SVG à intégrer dans le HTML.
Tout est question de compromis et nous devons faire avec les outils qui nous sont à disposition. Tout passer en SVG entraine de nombreuses complications d’accessibilité, je ne pense pas que ce soit une meilleure solution.