#CSS #Grid #Areas
▻https://ishadeed.com/article/css-grid-area
Pour les personnes qui comme l’auteur ont du mal à se rappeler des références des 1fr :)
Perso je m’étais bien amusé à apprendre ça avec ▻https://seenthis.net/messages/702365
Index of /assets
/assets
-
-
An Interactive Guide to #CSS #Container_Queries
▻https://ishadeed.com/article/css-container-query-guideCSS container queries help us to write a truly #fluid #components that change based on their container size. In the next few years, we’ll see less media queries and more container queries. Of course, using media queries will still be useful for general layout stuff.
-
New #Viewport Units
▻https://ishadeed.com/article/new-viewport-unitsHowever, using the vh unit on mobile is buggy. The reason is that the viewport size won’t include the browser’s address bar UI. To solve that, we now have new viewport units. Let’s find out about them in this article.
https://ishadeed.com/assets/new-viewport-units/small-viewport-css.png 
https://ishadeed.com/assets/new-viewport-units/large-viewport-css.png 
https://ishadeed.com/assets/new-viewport-units/dynamic-viewport-css.png #css
-
#CSS #Text balancing with text-wrap:balance
▻https://ishadeed.com/article/css-text-wrap-balanceVivement que ça soit dispo dans Firefox !
Luckily, we now have experimental support for
text-wrap: balance#wrap
-
Utilisable illico presto : c’est typiquement le genre de css qui se dégrade parfaitement sans avoir rien à faire.
-
-
Tu veux dire que c’est de la 💩, @arno ?
-
Au contraire, je veux dire qu’on peut l’utiliser sans risque. (J’ai commencé à le déployer sur mes sites.)
Si ton navigateur ne le comprend pas, il ne se passe rigoureusement rien de différent de d’habitude. Mais si ton navigateur le comprend, tu as une amélioration énorme de tes titres (en gros, la première cible, c’est les titres).
Il y a d’autres styles, si tu les utilises sans faire attention, tu peux casser totalement ta maquette. Par exemple tu décides de faire un élément de maquette avec
gridau lieu deflex; les navigateurs qui ne pigent pasgridauront une maquette totalement explosée, et tu risques de ne même pas t’en rendre compte – actuellement Opera Mini comprendflex, mais pasgrid. -
-
-
-
-
#Conditional #CSS - Ahmad Shadeed
▻http://ishadeed.com/article/conditional-cssIn this article, I will go over a few CSS features that we use every day, and show you how conditional they are.
Belle collection d’astuces/manières de faire du conditionnel en css.
-
The Guide To #Responsive_Design In 2023 and Beyond - Ahmad Shadeed
▻http://ishadeed.com/article/responsive-designResponsive design isn’t about #media_queries anymore.
So, the web is responsive by default, unless we start getting creative in designing our layouts.
Using modern CSS
– The typography is responsive to the viewport width via clamp() function.
– The spacing is responsive to the viewport width via clamp() function.
– The hero section is responsive to its content via flexbox wrapping.
– The cards grid is responsive to the available space with minmax(), no media queries.
– The card component is responsive to its wrapper via size container queries and style container queries.
– The margins and paddings are responsive to the websites language via logical properties.Using media queries
– The site navigation is responsive to the viewport width.
– The theming is responsive to the user preferences in their operating system.
– The card hover effect is responsive to what the user is using (touch vs mouse).
-
Use cases for #CSS #comparison #functions - Ahmad Shadeed
▻http://ishadeed.com/article/use-cases-css-comparison-functionsCSS comparison functions have been supported since almost April 2020, and I wrote an introductory article about them back then. I like to use all of them, but my favorite one of them is #clamp() and it’s the top used one for me.
In this article, I will explore a few use-cases for comparison functions, and explain each one in detail. Mostly, the use cases will be about situations other than using them for fluid sizing, as this is the most popular use case and I will keep that to the last.
Le truc qui me cause le plus est cet exemple :
.hero {
min-height: 250px;
}
@media (min-width: 800px) {
.hero {
min-height: 500px;
}
}peut s’écrire...
.hero {
min-height: calc(350px + 20vh);
}
@media (min-width: 2000px) {
.hero {
min-height: 600px;
}
}mais aussi...
.hero {
min-height: clamp(250px, 50vmax, 500px);
}-
A lire avant : ▻https://ishadeed.com/article/css-min-max-clamp pour être au point sur min() max() et clamp()
-
-
#CSS #container_queries are finally here - Ahmad Shadeed
►http://ishadeed.com/article/container-queries-are-finally-hereAvec pas mal d’exemples intéressants par ici ▻https://lab.ishadeed.com/container-queries
Une pagination qui s’adapte bien aux petits écrans ▻https://lab.ishadeed.com/container-queries/pagination
Un bloc article qui passe de a card au « hero » ▻https://lab.ishadeed.com/container-queries/articlePas encore dispo sous firefox malheureusement...
En lien avec ▻https://seenthis.net/messages/971675
-
même quand dispo sur FF faudra quand même attendre que ce soir sur 98% des navs ou ce genre pour l’utiliser en prod comme il faut :)
mais ENFIN, à partir de là, yora quasiment plus jamais besoin des media queries, très peu souvent quoi, et les composants (card, footer, pagination, listes, etc) seront totalement autonomes et vraiment responsives, sans être dépendants d’aucun breakpoints généraux
-
l’article initial qui annonçait les @container query avec 5 ou 6 cas d’usage très parlants : ▻https://ishadeed.com/article/say-hello-to-css-container-queries
En attendant que tous les navigateurs soient compatibles, (mais qu’est-ce qu’ils attendent chez Mozilla ???) des pistes de fall-back : ▻https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox -
Et la suite, les « style queries » ▻https://ishadeed.com/article/css-container-style-queries
-
-
Hello, CSS Cascade Layers - Ahmad Shadeed
▻http://ishadeed.com/article/cascade-layersIn this article, we’ll explore how #cascade_layers work, and how they will help us write #CSS with more confidence, along with use-cases and examples.
In the layers panel, notice how each button lives in a layer. The order is per the @layer definition at the top.
When the order of layers is changed, the components layer will override the variations one. As a result, the default button style will win.
https://ishadeed.com/assets/cascade-layers/cascade-layers-3-1.png 
https://ishadeed.com/assets/cascade-layers/cascade-layers-4.png
Enfin une explication claire de ce truc, ça y est, je peux dire que j’ai capté le bouzin ^^
-
Je savais même pas que ça existait mais maintenant j’ai capté quand même.
#intégration #web #layer
-
-
#Flexbox Dynamic Line #Separator - Ahmad Shadeed
▻http://ishadeed.com/article/flexbox-separatorTo make this work on all screen sizes, we need to have the flex-direction: column mobile and flex-direction: row for larger screens.
.section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.section:before {
content: "";
border: 1px solid #d3d3d3;
align-self: stretch;
}
@media (min-width: 700px) {
.section {
align-items: center;
flex-direction: row;
}
}#css
-
Handling #Text Over #Images in #CSS - Ahmad Shadeed
▻http://ishadeed.com/article/handling-text-over-image-cssYou might come across a UI component that has text above an image. In some cases, the text will be hard to read depending on the image being used. There are some different solutions like adding a #gradient overlay, or a tinted background image, text-shadow, and others.
-
-
Ça c’est le truc le plus fun dans mon boulot : tu peux être certain que quand le graphiste propose les maquettes au client où il y a du texte sur des images, il va à tous les coups choisir la plus belle image possible, avec de très beaux aplats de couleur (la mer bleue jusqu’à l’horizon, un grand champ de blé bien flou au premier plan…) sur lesquels il prendra bien soin d’installer son texte. Oh c’est beau. Et la première image que le client mettra en ligne sera évidemment une photo super-moche, avec des micro-contrastes épouvantables partout, et parfois même (oh joie) déjà du texte dans l’image elle-même. Évidemment le texte devient illisible, et c’est à toi de trouver fissa une solution magique.
L’autre caractéristique du texte sur une image, c’et que c’est souvent dans des blocs de dimensions fixes. Et là encore, le graphiste va soumettre des maquettes où les titre sont « Lorem ipsum », ou « Ici le titre ». Et le premier article que le client va publier sera titré « En réponse à la question posée par un interlocuteur à propos de la posture de notre entreprise quant au truc au nom duquel qu’on se positionne ». Et forcément, ça tient pas (mais le client veut désormais que ça tienne sans avoir à raccourcir son titre, tu penses bien).
(Et je pourrais ajouter que, même dans les exemples illustrés de l’article ci-dessus, on n’échappe généralement pas à des problèmes de lisibilité et d’accessibilité avec ces différentes solutions. C’est assez chiant, mais si on fait dans le subtile et joli comme ci-dessus, on sera toujours très très limite sur le contraste et la lisibilité, et donc l’accessibilité.)
-
C’est pour ça qu’on demande toujours un droit de regard sur les maquettes graphiques, pour faire des commentaires ergo/accessibilité :)
-
-
#Grid for layout, #Flexbox for components
▻http://ishadeed.com/article/grid-layout-flexbox-componentsBefore diving into concepts and examples, I want to make sure that you understand the main difference between #CSS grid and flexbox. CSS Grid is a multi-dimension layout module, which means that it has columns and rows. Flexbox can lay out its child items either as columns or rows, but not both
Let me be clear about that, there is no direct way to decide between CSS grid and flexbox. Adding on that, there is no correct or incorrect way to use them. This article is a kind of guide that recommends using a technique for a specific use-case. I will explain the general concept, and then go into examples, and the rest is on you to explore and experiment more.
Deciding between CSS grid and flexbox can be a bit hard (sometimes), especially if you are new to CSS. I can hear you! Here are some initial kick-off questions that I ask myself when choosing between them:
– How the component child items are displayed? Inline or as columns and rows?
– How the component is expected to work on various screen sizes?Article intéressant avec pas mal d’exemples d’usage.
-
#CSS Writing Mode
▻http://ishadeed.com/article/css-writing-mode
The writing-mode property defines whether lines of #text are laid out horizontally or vertically and the #direction in which blocks progress.
