#Media_Queries Range Syntax
▻https://ishadeed.com/article/range-syntax
/* Before */
.section {
@media (min-width: 300px) and (max-width: 500px) {
/* styles for the card */
}
}
/* After */
.section {
@media (300px <= width <= 500px) {
/* styles for the card */
}
}
#css
Merci !
Media queries are the backbone of responsive design. We use them to control how a design should change based on the viewport size. But the min-width and max-width syntax can be confusing, and in some cases, cause layout bugs that take time to spot.
This article aims to convince you to use range queries, starting today.
Ah ça y est, c’est enfin utilisable ? Quelle bonne nouvelle, ça va enfin devenir lisible tout ça, quel progrès.
The Basics of #Anchor_Positioning
▻https://ishadeed.com/article/anchor-positioning
In this article, I will cover the basics of Anchor Positioning and how I wish I had learned it earlier.
▻https://ishadeed.com/_astro/anchor-02.Dm6tIZ3X_NKU2n.webp
#css
Better CSS layouts: Time.com Hero Section
▻https://ishadeed.com/article/time-layout
In this article, I went through a #layout that looks simple at first, and took it further to make it more dynamic with #CSS. Having this flexibility is a game-changer as it will allow you to build fluid and conditional layouts, with less CSS.
For example, being able to combine CSS #:has() and #grid-area is a powerful combination! Add #container #querie to it, and magic will happen.
▻https://ishadeed.com/_astro/layout-analyze-1.C7KPAnhT_o8i4H.webp
▻https://ishadeed.com/_astro/layout-analyze-2.DtggeFWO_2fnkGR.webp
▻https://ishadeed.com/_astro/layout-analyze-3.DDurODEH_1f4aoM.webp
▻https://ishadeed.com/_astro/layout-analyze-4.Cze0A0FS_1vo7XE.webp
▻https://ishadeed.com/_astro/layout-analyze-5.DbQDrqe8_Z1MpGWI.webp
#Overflow Clip
▻https://ishadeed.com/article/overflow-clip
When the overflow is set to hidden on one axis, say overflow-y, the other axis overflow-x will become auto by default, resulting in clipping both sides. This behavior isn’t always desired. In some cases, we want clipping on only one axis. Additionally, the other axis will become scrollable, which may lead to unexpected results.
This is where the clip value becomes helpful.
#css
#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
An Interactive Guide to #CSS #Container_Queries
▻https://ishadeed.com/article/css-container-query-guide
CSS 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.
CSS :has() Interactive Guide
▻https://ishadeed.com/article/css-has-guide
On peut faire des trucs sympas avec :has(), exemples :
With CSS :has(), we can replicate the logical operators like ”&&” and ”||“
/* OR */
.shelf:has(.bookPurple, .bookYellow) {
outline: dashed 2px deeppink;
}
/* AND */
.shelf:has(.bookPurple):has(.bookYellow) {
outline: dashed 2px deeppink;
} In this example, I want to show an additional visual clue if the page has an alert.
.main:has(.alert) .header {
box-shadow:
inset 0 2px 0 0 red,
0 3px 10px 0 rgba(#000, 0.1);
background-color: #fff4f4;
}Et plein d’autres trucs comme “Quantity queries with CSS :has” , “We can select an element if it’s followed by another.”, “For example, if the user selects “other”, we want to show input to let them fill in more info.” qui pourrait être utile à saisies de #SPIP et son afficher_si, etc.
Alors j’aime beucoup :has. Mais j’y vais tout de même mollo : on se retrouve rapidement avec des CSS avec une structure imbitable. Surtout si en plus on utilise des CSS imbriqués (puisque la logique du :has contredit la stricte lecture descendante des CSS imbriqués).
Pour l’aspect rapidement illisible, ça vient aussi du fait qu’on utilise :has pour faire des choses qu’on ne peut pas faire autrement. Et par exemple sur un truc que je fais en ce moment, je me retrouve à faire des choses comme ceci :
#timeline:not(:has(li:nth-child(6))) li:nth-child(1)::before { … }:has, j’essaie de rester plus simple.
Designing better target sizes
▻https://ishadeed.com/article/target-size
via @b_b
#intégration #web #ergonomie #clic #UX #accessibilité #CSS
New #Viewport Units
▻https://ishadeed.com/article/new-viewport-units
However, 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-balance
Vivement 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 grid au lieu de flex ; les navigateurs qui ne pigent pas grid auront une maquette totalement explosée, et tu risques de ne même pas t’en rendre compte – actuellement Opera Mini comprend flex, mais pas grid.
Linting defensive and logical CSS with Stylelint plugins - LogRocket Blog
▻https://blog.logrocket.com/linting-defensive-logical-css-stylelint-plugins
En lien avec ▻https://ishadeed.com/article/defensive-css & ▻https://seenthis.net/messages/476044
#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.