An #Interactive Guide to #Flexbox in #CSS
▻https://www.joshwcomeau.com/css/interactive-guide-to-flexbox
In this blog post, I want to refine your mental model for Flexbox. We’ll build an intuition for how the Flexbox algorithm works, by learning about each of these properties. Whether you’re a CSS beginner, or you’ve been using Flexbox for years, I bet you’ll learn quite a bit!
Article très détaillé avec plein de petites démos sympas.
Tree views in CSS
▻https://iamkate.com/code/tree-views
A tree view (collapsible list) can be created using only HTML and CSS, without the need for JavaScript.
Utilise les balises <details> (avec éventuellement l’attribut open) et <summary>.
à priori OK pour l’accessibilité
À priori ça a l’air de correspondre à l’usage prévu par la balise « details » : voir le contenu « plus détaillé » de quelque chose sur lequel on clique, ce qui est bien le cas pour une arborescence.
Un petit exemple en SPIP, pour ouvrir et voir les mots-clefs d’un article
<B_mots>
<ul>
<li>
<details>
<summary>#TOTAL_BOUCLE mots clefs</summary>
<ul>
<BOUCLE_mots(MOTS){id_article}>
<li>
#TITRE
</li>
</BOUCLE_mots>
</ul>
</details>
</li>
</ul>
</B_mots>
#CSS Logical Properties and Values | CSS-Tricks - CSS-Tricks
▻https://css-tricks.com/css-logical-properties-and-values
Now that cross-browser support is at a tipping point, it’s a good time to take a look at #logical_properties and values. If you’re creating a website in multiple languages, logical properties and values are incredibly useful. Even if you’re not, there are still some convenient new shorthands it’s worth knowing about.
Performance #web : l’intégrateur, ce héros
J’ai envie de pousser un concept absolument nouveau : l’amélioration progressive (ah pardon on me dit que ça date de 2003). Au minimum c’est la clé d’un premier affichage éclair car on peut se passer de #JavaScript quelques secondes.
Puis abordons le gros sujet des images : comment les charger rapidement, sans toucher aux fichiers eux-même ? Il y a eu quelques nouveautés ces deux dernières années, mais on va voir que même sur des choses que l’on peut croire acquises comme le lazy loading, il y a quelques pièges qui peuvent être contre-productifs.
Enfin terminons avec un petit résumé sur les polices : elles tapent dans l’œil mais il faut en garder le contrôle si l’on veut un bon CLS (une des métriques Google dont on va reparler).
Article intéressant sur les optimisations au moment de l’#intégration web. Ça parle (un peu) performance mais surtout #UX, #ergonomie, #HTML, #CSS, #javascript...
▻https://www.24joursdeweb.fr/2021/performance-web-lintegrateur-ce-heros
Ya des gens qui trouvent ça enthousiasmant, comme plein de techniciens qui sont à fond dans leur petite spécialité technique, mais moi ça me terrifie, ça devrait pas exister du temps à passer sur ça :D
Et surtout encore moins devoir s’en préoccuper à chaque intégration (plutôt que ce soit les gens qui font le CMS, langage de template, plugins de lazy, etc, et qu’ensuite pour un site précis à intégrer on n’y pense presque plus).
Oui, l’article est intéressant en tant que ressources, pour choisir les plugins qu’on utilise (par ex Adaptive images qui gère le WebP et le lazy loading nativement), faire ses boilerplates persos (préchargement des polices et font-display: swap;), les optimisations côté CMS (chargement JS en asynchrone)... etc, évidemment dans l’idée d’automatiser au maximum.
Et aussi, se rendre compte que #SPIP gère une bonne partie de tout ça <3
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
Générateur de triangle CSS avec propriété CSS border | Les outils Css
▻https://outils-css.aliasdmc.fr/generateur-de-triangles-css.php
(ce n’est pas le truc le plus intuitif qui soit mais ça fonctionne...)
Pour obtenir un rendez-vous médical, mieux vaut ne pas être bénéficiaire d’une aide à la santé
▻https://www.slate.fr/story/235168/refus-soins-medecins-patients-precaires-discrimination-aides-sante-maladie-ame
Certains praticiens refusent de prendre en consultation les personnes bénéficiant de l’aide médicale d’État (AME) ou de la complémentaire santé solidaire (C2S). Face à cette discrimination, les recours sont rares car longs et surtout méconnus des patients.
« Ma mère avait rendez-vous chez le dentiste. Une fois installée sur le fauteuil dentaire, il lui a demandé comment elle avait l’intention de payer. Ma mère lui a répondu qu’ayant la CMU complémentaire [la CMU-C, aujourd’hui complémentaire santé solidaire, ndlr], elle n’avait rien à payer. Le dentiste lui a alors dit qu’il ne prenait pas la CMU-C et, relevant brutalement le fauteuil, il lui a intimé l’ordre de partir. »
« Je viens de déménager. Quand j’ai voulu prendre rendez-vous avec un pédiatre pour les enfants, la première chose qu’il m’a demandé c’est si j’étais à la CMU-C. Je lui ai dit que oui. Il m’a dit qu’il ne me prenait pas, du coup. »
Ces témoignages ont été livrés à Santé info droits, une ligne d’écoute téléphonique de France Assos Santé, un collectif d’association de patients, qui en reçoit tous les jours plusieurs de ce type. Trop souvent, des patients bénéficiaires de la complémentaire santé solidaire (C2S), ex-couverture maladie universelle complémentaire (CMU-C) et aide à la complémentaire santé (ACS), ou de l’aide médicale d’État (AME) se voient refuser des soins du fait de leur protection sociale. Même des personnes atteintes de maladies chroniques n’y échappent pas : « J’ai une myopathie et les médecins ne veulent pas me soigner parce que j’ai l’aide médicale d’État »_, raconte ainsi une autre patiente.
La C2S, sous conditions de ressources, est octroyée pour couvrir les dépenses de santé, et l’AME est destinée aux personnes étrangères en situation irrégulière. Mais ces aides, mises en place au début des années 2000 afin de permettre l’accès aux soins à celles et ceux qui n’en ont pas les moyens, deviennent parfois un frein dans leur parcours de prise en charge.
rien de mieux pour savoir ce que c’est que la droite que les #médecins ...
#médecine #santé #accès_aux_soins #CSS (il ont trouve un acronyme moins malsonnant avec leur #C2S, c’est top moderne
vu que les médecins sont conventionnés, je n’ai jamais compris comment ça pouvait être possible de pouvoir refuser des gens qui ont la sécu (quelque soit le type)… ils devraient avoir un blâme direct, être interdit de pratiquer pendant 1 mois, puis 6 mois, etc, quand ils font un truc pareil
Certes, mais on nous explique plus loin qu’il existe des recours aux #refus_de_soin, pratique illégale et contraire à l’éthique.
Deux options s’offrent au patient qui se voit refuser une prise en charge médicale : « une victime de refus de soins peut se présenter devant la commission mixte paritaire [constituée de représentants de la caisse primaire d’assurance-maladie et du conseil de l’Ordre du professionnel de santé mis en cause, ndlr] et devant le juge », indique Flore Ganon-Lecomte, référente technique et plaidoyer pour l’accès aux droits santé chez Médecins du monde.
Par contre,
Mais il s’agit de théorie, car le plus souvent, les personnes qui en sont victimes ne savent pas ce qu’est un refus de soins et ne connaissent pas les recours qui existent. Selon Flore Ganon-Lecomte, le manque d’information des personnes concernées est d’ailleurs le premier obstacle rencontré. Par ailleurs, les victimes de refus de soins « sont dans une difficulté sociale très importante et ont autre chose à faire que d’engager des procédures longues et coûteuses », pointe Florence Navattoni.
Maintenant, quelle est la pertinence de maintenir cette « commission mixte et paritaire », vu que le Conseil de l’Ordre aura beau jeu de défendre les « intérêts économiques » des praticiens indélicats ? Quant au juge (quelle juridiction ?), ne fera-t-il qu’avaliser les conclusions retenue par la commission ? Il y a là (amha) un vice de procédure patent en matière de justice.
Faut-il brûler le Conseil de l’Ordre des Médecins ? François Dupuis (1972)
▻https://www.nouvelobs.com/societe/20221030.OBS65301/il-y-a-50-ans-dans-l-obs-faut-il-bruler-le-conseil-de-l-ordre-des-medecin
(...) à quoi sert ce Conseil de l’Ordre, créé par Louis-Philippe, supprimé en 1848, puis rétabli par Vichy ? C’est ce qu’exposait, en 1972, l’article que nous republions ci-dessous
Carpentier revient, tes collègues sont des chiens !
la dentiste compétente qui me suivait depuis des années m’a fait dire par son secrétariat qu’elle ne me prendrait plus en rendez-vous ayant « changé de manière de travailler », sans doute lassée de dispenser des séances de soins simples (sans prothèses etc. et pour cause...) au tarif CMU CSS.
à la recherche d’un.e autre praticien.ne et contraint au nomadisme médical, j’ai eu la surprise lors d’un détartrage de m’entendre dire en cours de séance par une jeune dentiste, « je peux finir par un polissage, mais ce sera 30 euros »... j’ai hésité, commencé par dire oui, puis décidé de partir.
tout le monde le sait, l’immense majorité des dentistes choisissent cette spécialité car les études sont moins longues et le gain assuré
ces temps-ci je ne tombe que sur des sans masques, tel ce Kiné qui me dit « je peux le mettre si vous avez peur », je me casse, j’avais peur, oui, de lui mettre un grosse tarte, un infirmier qui tient à me faire payer le tiers payant de moins de 5 euros pour une vaccination ("comme ça les patients savent ce que ça coute"), et c’est parti pour des courriers et un traitement admin par la CPAM (combien ça coûte ?) etc.
sagouins, maltraitants, âpres au gain, moralisateurs, paternalistes (femmes compris), plus ça va plus j’aime les médecins et les soignants
Cela fait des années que certains dentistes refusent les personnes à la CMU, quand j’ai voulu prendre rendez-vous, la secrétaire m’avait indiqué clairement « on ne prend pas les CMU ». Il parait qu’ils doivent avancer les frais avant d’être remboursés, sur qu’il y a un truc qui cloche mais que tout le monde s’en fout dans les hautes sphères administrative du droit aux soins, les pauvres peuvent crever et la honte envahir nos cœurs. En discutant avec certains médecins, la haine des indigents et des pauvres est latente « ils n’arrivent jamais à l’heure » m’a sorti un dentiste. Reste alors l’hôpital où sont formés les étudiants, entre boucherie et mépris et il faut supporter le médecin formateur qui humilie continuellement sa petite troupe docile. j’y ai perdu pas mal de dents à servir de terrain d’exercice aux uns et aux autres.
Quand au recours, ahahah, j’ai tenté une fois et signalé un refus de soin à cause de la CMU, mais sans témoin, (je ne sais plus quel organisme peut-être le défenseur des droits) ont seulement demandé à la personne qui avait refusé de me soigner ce qu’il s’était passé, et si c’était vrai. j’ai reçu une lettre pour me dire que je devais avoir mal compris :))) Faut avoir envie de militer, j’espére qu’elle a au moins un peu chié dans son pantalon et payé la laverie.
Home | The Component Gallery
▻https://component.gallery
Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of #interface #components based on examples from the world of #design_systems
Concepts de base des propriétés et valeurs logiques - CSS : Feuilles de style en cascade | MDN
▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts
CSS Logical Properties (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l’orientation du texte.
Historiquement, CSS permettait de dimensionner des objets selon les dimensions physiques de l’écran. On pouvait alors décrire des boîtes avec une certaine largeur (width) et une certaine hauteur (height), positionner les éléments à partir du haut (top) et de la gauche (left), faire flotter les objets, créer des bordures, des marges, du remplissage (padding) en haut, à droite, en bas et à gauche (resp. top, right, bottom, left, etc.). La spécification sur les propriétés et valeurs logiques définit des correspondances entres ces valeurs physiques et des valeurs logiques, relatives au flux : start et end plutôt que left et right ou top et bottom.
Voir aussi :
– la page de la propriété writing-mode qui définit si les lignes d’un texte sont écrites horizontalement ou verticalement et la direction selon laquelle le bloc grandit
– la page de référence des propriétés et valeurs : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Logical_Properties
#CSS #logical_properties #rtl #sens_ecriture #propriétés_logiques_CSS #SPIP #multilinguisme
GitHub - unocss/unocss : The instant on-demand atomic CSS engine.
▻https://github.com/unocss/unocss#scanning
Un générateur de styles CSS « atomiques » pour construire son framework CSS : les style sont générés à partir d’un ensemble configurable d’éléments ("presets") : reset, typo, icones, animations...
Les classes sont générés à la demande = si elles sont utilisées dans le code (HTML, JS...) du projet.
Présentation du concept et des principes de fonctionnement : ▻https://antfu.me/posts/reimagine-atomic-css
UnoCSS is an atomic-CSS engine instead of a framework. Everything is designed with flexibility and performance in mind. There are no core utilities in UnoCSS, all functionalities are provided via presets.
[...]
The main goals of UnoCSS are intuitiveness and customization. It allows you to define your own utilities literally in seconds.
Livré avec un ensemble de presets « officiels » (tirés de Tailwind ou Bootstrap entre autre) + contributions disponible sur ▻https://github.com/unocss/unocss#community-presets
Inclus de nombreux utilitaires (shortcuts, themes...) et outils complémentaires (scanner, inspecteur...)
Documentation des classes générées par les presets « officiels » : ▻https://uno.antfu.me
Sur le concept de CSS atomique voir : ▻https://css-tricks.com/lets-define-exactly-atomic-css
J’ai vraiment du mal à comprendre cette mode (plutôt très récente) du CSS atomique. Quand je vois 99% des exemples ça fait exactement ce que le CSS a permis de rejeter depuis 20 ans, cad la présentation dans le HTML : <center> <blink> <table> de présentation avec toutes les marges en dur dans le code, etc. Tout ce qui a été honnis (avec raison !) pendant des années.
<div h-full text-center flex select-none all:transition-400>
<div ma>
<div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
unocss
</div>
<div op30 text-lg fw300 m1>
The instant on-demand Atomic CSS engine.
</div>
<div m2 flex justify-center text-2xl op30 hover="op80">
<a
i-carbon-logo-github
text-inherit
href="https://github.com/unocss/unocss"
target="_blank"
></a>
</div>
</div>
</div>
<div absolute bottom-5 right-0 left-0 text-center op30 fw300>
on-demand · instant · fully customizable
</div>
Le syndrome de l’empilement - Icem7
▻https://www.icem7.fr/pedagogie/le-syndrome-de-l-empilement
avant
Les graphiques en barres empilées sont notoirement peu lisibles, la presse le sait et les évite. Des alternatives plus efficaces existent. Nous les rencontrons pourtant partout dans la production institutionnelle : pas une étude statistique, pas un rapport d’activité où l’on ne subisse ces guirlandes de bâtons multicolores[1], leurs légendes extensibles et leurs inévitables aides au déchiffrage.
Prenons deux exemples publiés la semaine dernière : à chaque fois la matière est intéressante, mais le traitement graphique la dessert.
après…
attention, ces considérations sur les choix de #représentation_graphique pourrait faire oublier la , qui contrairement à la #CMU-C à laquelle elle a succédé, est devenue payante pour nombre de fauchés, une attaque réussie contre l’#accès_aux_soins. le doc de la Dress porte sur des données de 2017. on nous donne encore à voir les mythiques « classes moyennes »...
@colporteur je me rends compte que tu tagues css, or, ça mélange deux choses du coup la css html et la CSS santé :/
la Cpam n’aime pas que l’on dise CSS et préfère C2S... pas trop envie de cet acronyme postmoderne bienveillant, faudrait malgré la paresse et le temps qui presse écrire #Complémentaire_solidarité_santé ? je ne sais pas
j’ai découvert la chose alors que j’étais chômeur indemnisé : 25 euros par mois pour une complémentaire santé. puis les prélèvements ont continué alors que j’étais passé au RSA, alors même que la CSS était coupée ! (j’ai retardé des examens et soins et dû payer une part pour quelques médocs) ce que j’ai découvert... en allant en pharmacie avec une ordonnance pour laquelle je ne me suis pas fait délivrer la prescription. j’ai donc payé 4 mois alors que j’étais au RSA, puis 4 mois (100 balles) pour une CSS que je n’avais pas, puis j’ai réussi à faire rétablir la CSS et je continue à casquer.
Après moultes démarches, le plus fun étant l’appel à la #CPAM, dont les items du site ne sont pas destinés à traiter de tels cas, qui durent de longues minutes avant de s’entendre dire, à plusieurs reprises, "nos services sont surchargés, merci de rappeler plus tard" , on me répond sur un ton de pleine bonne conscience que la situation a été "rétablie administrativement" (sic aie !), j’ai rétroactivement droit à la CCS durant les mois où je ne l’avais pas, youpi ! la barrière à l’accès aux soins durant 6 mois passe à la trappe, et que les prélèvement vont continuer puisque ils sont calculés sur l’année antérieure à l’ouverture de droits, une année ou figurent 9 mois d’un maigre chômage et 3 d’un plantureux RSA. des 526 euros de RSA, 25 sont donc mensuellement déduit. Byzance. tout ça en rencontrant bien des difficultés avec divers praticiens (dentiste, généraliste, ophtalmos) en raison de ce « statut ». les toubibs sont d’ailleurs directement incités à résister à la demande des pauvres : ils mettent parfois des mois à récupérer le fric de cette complémentaire, spécialement quand les ayant droit ne choisissent pas à ce titre la CPAM mais une mutuelle ou assurance privée, et ça engage du temps de secrétariat (au point que certains s’en abstiennent).
É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.
Contextual Spacing For Intrinsic Web Design | Modern #CSS Solutions
▻https://moderncss.dev/contextual-spacing-for-intrinsic-web-design
- Contracting & Expanding - the way we consider how our design will adapt to a change in available space
– Flexibility - using primarily flexbox and grid in combination with newer units and functions in a way that enables our layouts to adapt at various rates to the available space
– Viewport - the ability to use all four sides of the viewport as well as take advantage of viewport units
Du du clamp(), min(), max() et tout le tralala au lieu des media queries :)
Media Queries Level 4 : Media Query Range Contexts (Media Query Ranges)
La déclaration de medias queries va enfin devenir lisible, quel progrès !
Avant
@media (min-width: 300px) and (max-width: 750px) {
…
}Après
@media (300px <= width <= 750px) {
…
}/* Old Way */
@media (max-width: 750px) {
…
}
/* New Way */
@media (width <= 750px) {
…
}▻https://www.bram.us/2021/10/26/media-queries-level-4-media-query-range-contexts
#css
Comment se passer de jQuery.spip.positionner_marge ▻https://git.spip.net/spip/spip/commit/9f50bd16bfce863b0db3393ca27c0df6de6a251a & du plugin ancres douces à la fois :
html {
scroll-padding-top: 6rem;
scroll-behavior: smooth;
}
Un truc sympa pour l’accessibilité : tu peux désactiver le « smooth scrolling » directement dans les CSS pour les gens qui désactivent les animations dans leurs options de smartphone (en tout cas sur iOS) :
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
2 bémols :
Can I use indique un peu plus de 80% : ▻https://caniuse.com/?search=scroll-behavior
Mais le défilement se fait dans tous les cas, donc pas grave.
Ça évite d’ajouter du js mais, dans le cas de liens de retour en haut de page par exemple, on n’a pas forcément envie que l’url soit changée (avec une ancre #haut et même juste #) et je ne sais pas s’il y a une autre solution que du js. Mais là encore, c’est pas bien grave :)
Pure CSS Stripes Generator - No Flash, No Image, ONLY CSS
▻https://stripesgenerator.com
Générateur de rayures en background-image « pure CSS »
Voir aussi Mozdev pour la doc de linear-gradient : ▻https://developer.mozilla.org/fr/docs/Web/CSS/gradient
#CSS: Flexible Repeating #SVG Masks
▻https://tylergaw.com/blog/css-repeating-svg-masks
▻https://tylergaw.com/blog/assets/post-image-repeating-masks-streetcred-banner.webp
This is a technique I used recently to create a flexible, repeating pattern using SVG with CSS mask.
A #flexible #header with a little squiggle at the bottom instead of a straight line.
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
Responsive and #fluid_typography, the easy way
▻https://codepen.io/renevanderlende/details/YzEaKvO
:root { font-size: calc(0.658vmin + 0.75rem) }
Sur le même sujet j’ai aussi vu passer ▻https://piperhaywood.com/fluid-type-sizes-and-spacing & ▻https://css-tricks.com/consistent-fluidly-scaling-type-and-spacing qui proposent des solutions « un peu plus complexes ».
Et une autre ressource sur le sujet à base de css clamp :
▻https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp
L’auteur a fait un outil pour tester et jouer avec les valeurs à utiliser ▻https://modern-fluid-typography.vercel.app
#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
Here’s what I didn’t know about :where() - Manuel Matuzović
▻https://www.matuzo.at/blog/2022/heres-what-i-didnt-know-about-where
It feels like using a shorthand property instead of longhand properties; fewer lines of code, but harder to process. I didn’t get the point, but a few days ago it clicked.
:where(header, main, footer) p:hover {
color: red;
}Perso, i get the point rien que pour ça :p
#css
2022 s’annonce plutôt bien du côté du #CSS ! 🥳🥳🥳
Quelqu’un a déjà testé les color-function() ?
▻https://www.bram.us/2021/12/27/css-in-2022/#the-hotlist--color-functions
Quand ce sera bien opérationnel, ça me facilitera beaucoup les choses avec la personnalisation qu’on propose à nos clients.
J’espère aussi que les #viewport units mettront fin aux soucis #Safari sur #smartphone ☺
▻https://www.bram.us/2021/12/27/css-in-2022/#the-hotlist--viewport-units
Vous avez repéré quoi en particulier ?
#integration #integrationWeb #ui #HTML #responsive #variables
A Clever #Sticky #Footer Technique | CSS-Tricks
▻https://css-tricks.com/a-clever-sticky-footer-technique
▻https://css-tricks.com/wp-json/social-image-generator/v1/image/357053
html, body { height: 100%;}
body > footer {
position: sticky;
top: 100vh;
}#css
Paged.js — About Paged.js
▻https://www.pagedjs.org/about
Paged.js is a free and open source JavaScript library that paginates content in the browser to create PDF output from any HTML content. This means you can design works for print (eg. books) using HTML and CSS!
Une librairie javascript pour paginer le HTML pour générer du PDF « joli »
– le repo Gitlab : ▻https://gitlab.pagedmedia.org/tools/pagedjs
– la documentation : ▻https://www.pagedjs.org/documentation
– les spécifications CSS « Paged Media Module Level 3 » supportées : ▻https://www.pagedjs.org/documentation/cheatsheet
– une étude de cas complète pour la création/mise en page d’un livre : ►https://polylogue.org/apres-la-page-la-double-page
– rendu testable sur ►https://printcss.live