#Conditional #CSS - Ahmad Shadeed
▻http://ishadeed.com/article/conditional-css
In 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-design
Responsive 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-functions
CSS 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-here
Avec 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/article
Pas 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
Évolutions assez énormes qui arrivent du côté des CSS :
– :has() est désormais intégré à Chrome 105, déjà présent dans Safari 15.4 :
▻https://seenthis.net/messages/969309
– CSS Container Query Units et CSS Container Queries (Size) dans Chrome 105, annoncées pour Safari 16.
Un peu de lecture au sujet des container queries :
►https://ishadeed.com/article/container-queries-are-finally-here
▻https://www.oddbird.net/2022/08/18/cq-syntax
Arg, par contre ça ne peut pas être utilisé pour gérer des images reponsives, pour optimiser mon plugin correspondant avec des media= et des srcset= en fonction de la largeur l’affichage de l’image sans attendre javascript.
Comme ces éléments sont conçus pour faciliter le préchargement (preload) des images avant le rendu de la page, ils ne peuvent pas être adaptés à des container queries.
Hello, CSS Cascade Layers - Ahmad Shadeed
▻http://ishadeed.com/article/cascade-layers
In 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-separator
To 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-css
You 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-components
Before 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.
