#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
#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.
#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
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.
Image Techniques On The Web
▻https://ishadeed.com/article/image-techniques
Manipulations avancées pour la gestion des images dans les pages web :
– balises <img> et <picture>,
– attributs HTML height, width, alt et srcset
– propriétés CSS object-fit et object-position (dément !),
– embed de balise <img> dans une balise <svg> pour pouvoir jouer avec la propriété CSS preserveAspectRatio, lui associer un <title> et une <desc>
– intégration d’images SVG et utilisation de balises mask
– exemples d’utilisation d’un div avec border pour emballer une image et la faire ressortir si ton sur ton
Pour les #svg, dernièrement, sous Angular Material, j’ai utilisé angular-svg-icon pour pouvoir facilement styler les SVG, sans que leur code « pollue » le dev.
Concrètement, lorsqu’on inspecte dans le navigateur, le code du SVG s’affiche. Donc on peut aller faire ce qu’on veut sur les parh & co 😁
J’avais utilisé un outil un peu similaire, il y a quelques années sur un projet en JS, donc on peut aussi trouver pour d’autres choses qu’Angular 😉
#angular #css
▻https://www.npmjs.com/package/angular-svg-icon