CSS Button Styles You Might Not Know - David Bushell
▻https://dbushell.com/2024/03/10/css-button-styles-you-might-not-know
.button,
::file-selector-button {
inline-size: fit-content;
touch-action: manipulation;
user-select: none;
}
* {
&:focus {
outline: none;
}
&:focus-visible {
outline: 2px solid magenta;
outline-offset: 2px;
}
}
]]>A Complete #CSS Tutorial: Mastering the Art of Web Styling
▻https://itcodestuff.com/a-complete-css-tutorial-mastering-the-art-of-web-styling
Hello Guys, Cascading Style Sheets (CSS) are an essential part of web development. They enable web designers to control the presentation and layout of web ... Read more
]]>The truth about #CSS selector performance
If you’re a web developer, you may have already heard that some CSS selectors are faster than others. And you’re probably hoping to find a list of the better selectors to use in this article.
Well, not quite. But bear with me, I promise that by the end, you’ll have learnt something new about CSS selector performance.
Avec un outil (pas encore testé) permettant de mesurer tout ça.
▻https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance
via ▻https://hachyderm.io/@cvennevik/111997002061348375
#web
]]>How To #Center a Div
▻https://www.joshwcomeau.com/css/center-a-div
Before we wrap up, let’s summarize what we’ve learned by building a sort of decision tree, so that we can figure out when to use which method.
– If we want to horizontally center a single element without disturbing any of its siblings, we can use the Flow layout auto margin strategy.
If we have a piece of floating UI, like a modal or a banner, we can center it using Positioned layout and auto margins.
– If we want to center a stack of elements one on top of the other, we can use CSS Grid.
– If we want to center text, we can use text-align. This can be used in conjunction with any of the additional methods.
Finally, in most other situations, we can use Flexbox. It’s the most versatile method; it can be used to center one or multiple children, horizontally and/or vertically, whether they’re contained or overflowing.
#css
]]>CSS : comment appliquer une autre font à certains caractères ?
Je travaille sur un projet de plusieurs centaines de pages avec beaucoup d’endroits où le numérique est là et peut être combiné à des lettres.
L’équipe design m’a demandé si on pouvait mettre une typo différente pour les chiffres. J’ai d’abord proposé le font-variant-numeric qui peut permettre de les gérer avec du tabular-num. Mais l’espacement n’est pas forcément idéal avec la font utilisée.
J’ai continué de creuser et j’ai trouvé comment utiliser une font spécifique uniquement pour certains caractères. J’ai fait un Codepen pour partager ;-) Comme indiqué dedans, il faudra s’y prendre autrement si vous passez par une font que vous appelez chez Google.
PS : j’ai mis le Arial Black en font pour les chiffres et je m’aperçois qu’on ne verra pas forcément la différence sur mobile (ça ne doit pas être dans les font déjà enregistrées sur les mobiles) mais sur un ordi, vous devriez voir
]]>The Complex But Awesome CSS border-image Property
▻https://www.smashingmagazine.com/2024/01/css-border-image-property
Did you know border-image property was such a powerful — and flexible — CSS property? Despite the challenge it takes to understand the syntax, there are ways to keep the code clean and simple. Plus, there is often more than one “right” way to get the same result. It’s a complicated and robust CSS feature.
via la-grange.net
]]>CodePen - CSS clip-path Editor
▻https://cdpn.io/stoumann/fullembedgrid/abZxoOM?animations=run&type=embed
un outil simple pour créer des règles CSS clip-path
visuellement
The untold history of web development:
▻https://functional.cafe/@juliobiason/111613996060167180
The untold history of web development:
1990: HTML invented
1994: CSS invented to fix HTML
1995: JS invented to fix HTML/CSS
2006: jQuery invented to fix JS
2010: AngularJS invented to fix jQuery
2013: React invented to fix AngularJS
2014: Vue invented to fix React & Angular
2016: Angular 2 invented to fix AngularJS & React
2019: Svelte 3 invented to fix React, Angular, Vue
2019: React hooks invented to fix React
2020: Vue 3 invented to fix React hooks
2020: Solid invented to fix React, Angular, Svelte, Vue
2020: HTMX 1.0 invented to fix React, Angular, Svelte, Vue, Solid
2021: React suspense invented to fix React, again
2023: Svelte Runes invented to fix Svelte
2024: jQuery still used on 75% of websites
(by @fireship_dev on Birdsite)
]]>An Interactive Guide to #CSS #Grid
▻https://www.joshwcomeau.com/css/interactive-guide-to-grid
In this tutorial, I’m going to share the biggest lightbulb moments I’ve had in my own journey with CSS Grid. You’ll learn the fundamentals of this layout mode, and see how to do some pretty cool stuff with it.
To break things down even further:
– justify — deals with columns.
– align — deals with rows.
– content — deals with the grid structure.
– items — deals with the DOM nodes within the grid structure.
]]>Dans les #CSS Text Level 4, il y a l’alignement vertical (dans des tableaux) selon un caractère (la virgule ou le point des nombres décimaux par exemple):
▻https://www.w3.org/TR/css-text-4/#character-alignment
text-align: "." center
Choisir entre balance et pretty pour text-wrap - Alsacreations
▻https://www.alsacreations.com/astuce/lire/1920-Choisir-entre-balance-et-pretty-pour-text-wrap.html
Gestion des retours lignes automatique en CSS : utiliser les valeurs balance
et pretty
pour la propriété text-wrap
#CSS #text-wrap #pretty #balance #web_dev #présentation_texte #justifier #retour_ligne
]]>Suppression de l’AME : 3 500 médecins prêts à « désobéir » si le texte est voté
▻https://www.leparisien.fr/politique/suppression-de-lame-3-500-medecins-prets-a-desobeir-si-le-texte-est-vote-
#Transition #animations: a practical guide | by Dongkyu Lee | Oct, 2023 | #UX Collective
▻https://uxdesign.cc/transition-animations-a-practical-guide-5dba4d42f659
6 principles for better transition animations
– Fade in and out with opacity
– Scale to add liveliness
– Maintain consistent directionality
– Balance speed
– Prioritize, order, and group
– Establish spatiality
According to some articles, a speed from 100ms to 500ms is ideal and suitable for most cases.
#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 { In Real Life } | Breaking Out of a Central Wrapper
▻https://css-irl.info/breaking-out-of-a-central-wrapper
▻https://css-irl.info/breaking-out-of-a-central-wrapper-05.webp
Using viewport units, we can force an element to break out of the wrapper, without changing our original markup!
.full-width {
width: 100vw;
margin-left: 50%;
transform: translate3d(-50%, 0, 0);
}
▻https://caniuse.com/viewport-units => 96.73%
▻https://caniuse.com/?search=translate3d => 96.15%
La #CMU passe à 95% de remboursement (vs 100%) en loucedé ? | via Mammouth | 25.09.23
après vérification : pas exactement ; pas -5% mais y a bien rabotage :-)
The devil is in the details
]]>#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
]]>Designing Accessible Text Over Images: Best Practices, Techniques, And Resources — Smashing Magazine
▻https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part1
▻https://www.smashingmagazine.com/2023/08/designing-accessible-text-over-images-part2
En complément de ▻https://seenthis.net/messages/924372
]]>la sécu assaisonne les pauvres - relevé aux marges de l’oiseau mort
ça me rappelle quand la sécu m’est tombé dessus pour une merde dans le traitement ortho [de l’enfant].
la salope me demandait à moi un trop perçu alors que c’était IMPOSSIBLE que je sois la source de l’erreur. ce sont les SOIGNANTS qui font les déclarations d’actes, pas moi !
et pareil j’avais du chercher partout comprendre la cotation en TO d’un foutu orthodontiste qui gagne 150k par an et faire bosser sa secrétaire pour arriver à PROUVER une erreur de SA PART qui ne pouvait PAS m’être imputée. je ne passe pas les actes sur ma vitale moi même hein.
mais la sale conne de la #cpam elle était FASCISTE DONC elle voyait aucun prb à me dire à moi de rendre 300 euros au lieu de demander à la soignante de vérifier sa compta !
et vous voyez pas le NOMBRE de VIES que vous BOUSILLEZ comme ça INJUSTEMENT en BROYANT DES GENS qui n’ont pour la plupart pas les moyens de défendre parce qu’ils sont PAS même AUTORISES à entrer dans leur propre dossier !!
pour ma part, je paume près de 200 euros de remboursement de frais de santé (une paille) et je ne suis pas certains après moultes démarches de récupérer un #indu en ma faveur de 200 balles résultant de prélèvements automatiques pour une couverture solidarité santé (#CSS, mais ils aiment pas la langue ordinaire, faut dire #C2S !) à laquelle j’étais de droit éligible gratos et de façon automatique du fait de dépendre du RSA socle durant la période concernée.
après déplacements, messages, coups de fils, courriers divers, tous suivis de non réponses (on me parle d’autre chose que ce qui motive mes démarches ah ah ah), j’ai l’impression de devoir entamer une procédure... pour que - comme Pôle, CAF et préfectures savent le faire - ils lâchent le morcif la veille d’une audience afin d’éviter une condamnation. grosse fatigue.
dernier contact en date :
moi, en guise de politesse un tant soit peu politique, une manie avec les employés qui font du phoning (I did some), quelque soit l’objet, et pour les commerciaux c’est le standard " non je suis pas disponible pour vos employeurs, désolé, et puisque vous ne pouvez sans doute pas faire grève, n’hésitez pas à prendre un arrêt maladie si vous avez une mutuelle qui vous couvre", après avoir pris un énième râteau dans les ratiches, je conclue , "bon courage à vous, ça ne doit pas être facile de claquer la porte au nez des gens comme ça madame"
l’agente qui m’a dit que c’est #normal que l’on me rembourse 40€ sur 220€ de frais de santé parce que c’est l’État mais pas eux qui fait payer chaque année 50 euros de #franchise sur les frais et que j’ai fait l’erreur d’aller au même labo d’imagerie que de coutume pour un truc éventuellement urgent mais qu’ils ont contrairement à l’habitude fait payer un dépassement : "mais non, rassurez-vous ! je suis très contente de mon métier, on aide les gens"
l’impression d’avoir affaire à un contrôleur sncf zélé qui fait tout pour te mettre à l’amende et que ça sourd, effectivement, le fascisme, l’obéissance infinie dans la bonne conscience à bloc.
]]>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
]]>#CSS : place-content
▻https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
The place-content CSS shorthand property allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.
Ne rigole pas, je découvre donc seulement maintenant cette ligne qui va changer ma vie :
place-content: center
#CSS Tip: Learn CSS the easy one
▻https://css-tip.com
A small website where you can learn a new CSS #trick every day. All the CSS secrets are here (Flexbox, CSS Grid, Gradients, Colors, Animation, Masking, Selectors, etc). It takes one minute to read a tip.
Quelques trucs sympas comme ▻https://css-tip.com/horizontal-line-title ou ▻https://css-tip.com/css-ribbon
]]>The problems with viewport units - Kevin Powell
▻https://www.youtube.com/watch?v=veEqYQlfNx8
Intéressant :
– les unité svh
et dvh
– le clamp avec le +1rem
pour la taille des polices.
#css
]]>Lighthouse overview - Chrome Developers
▻https://developer.chrome.com/docs/lighthouse/overview
Est-ce que vous avez une opinion à propos de cet outil ?
Je me contente toujours de validator.w3.org et de Lynx (en plus de Firefox, Chrome et Safari sous des OS divers) pour tester mes sites. C’est déjá assez coûteux quand tu fabriques du code propre (validator) et des pages facilement accessibles (des textes bien structurés, pas de menus interminables en haut de page, des alt/titre pour les images et vidéos, des liens parlants etc.). Avec l’inspecteur de code de Firefox et les autres outils (SPIP) je me sens à l’aise, alors quel argument est-ce qu’il y a pour ajouter Lighthouse à ma boîte d’outils (dans ungoogled Chromium ) ?
Je m’en fous du nombre de visiteurs répertoriés car je ne travaille plus du tout pour les commerciaux, et toute la magie noire SEO ne m’intéresse plus que pour m’amuser.
Merci pour vos idées.
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.
Lighthouse logo
You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.
You can also use Lighthouse CI to prevent regressions on your sites.
]]>Modern #Font #Stacks
▻https://modernfontstacks.com
System #font_stack #CSS organized by typeface classification for every modern OS
The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.
]]>#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.
]]>“Quand on voit le niveau de dysfonctionnement de l’automatisation actuelle, on n’a pas envie de voir ce que donnera plus d’automatisation encore !” “Mais pourquoi font-ils ça ?” C’est la grande question ou le cri du coeur qui vient naturellement à qui comprend le délire du contrôle social automatisé que pratique la CAF. C’est la question à laquelle ont tenté de répondre la Quadrature, Changer de Cap et le sociologue Vincent Dubois à l’invitation du Mouton Numérique pour la 3e édition du cycle de rencontres Dématérialiser pour mieux régner. C’est à lire par ici : ▻https://hubertguillaud.wordpress.com/2023/01/20/le-controle-social-automatise-dans-la-plus-grande-opacite #dematerialisation #caf #quadrature #controlesocial
]]>image-orientation - CSS : Cascading Style Sheets | MDN
▻https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation
propriété CSS 3 pour permettre l’affichage d’une image selon son EXIF ou pas
#image-orientation #EXIF #image #CSS #SPIP
]]>Du #CSS en 2023 : entre incongruités et grid
▻https://onpk.net/index.php/2023/01/17/854-du-css-en-2023-entre-incongruits-et-grid
Il y a bien longtemps, j’étais webmaster : c’était au bon vieux temps de Netscape 3. Le CSS n’existait pas encore et je m’extasiais devant des colonnes colorés de 1px de large. Depuis ce métier a explosé, éclaté par de multiples spécialités (pour le contenu, l’interface,...
]]>The best classless CSS frameworks in 2021 - DEV Community 👩💻👨💻
▻https://dev.to/skypack/the-best-classless-css-frameworks-in-2021-427a
Courte explication du concept de « classless CSS » + un codepen pour tester une 12aine de framework bâtis sur ce concept
]]>AnimatiSS - A nice, colorful collection of CSS animations for your projects
▻https://xsgames.co/animatiss
Une collection d’animations « full CSS » clés en main
]]>Savez-vous que #NVDA ne lit pas bien les chiffres romains ? Dans mon article + sketchnote, je vous explique comment résoudre le souci, pour peu que vous puissiez modifier le #HTML 😉
#CSS #sketchnote #a11y #accessibilite #article #blog #SketchCode
▻https://sketchnote-style.netlify.app/sketchcode/nvda-et-les-chiffres-romains
]]>Crescono le vendite di armi delle prime 100 aziende del mondo. Nonostante la crisi
Nel 2021 le prime 100 multinazionali del settore -soprattutto statunitensi- hanno registrato un giro di affari pari a 592 miliardi di dollari, più 1,9% rispetto al 2020. L’Italia è tra i Paesi che cresce di più per via del forte incremento dei fatturati di Leonardo. I dati dall’istituto di ricerca indipendente Sipri
La vendita di armamenti e sistemi d’arma da parte delle prime 100 aziende al mondo ha raggiunto nel 2021 quota 592 miliardi di dollari, in crescita dell’1,9% rispetto all’anno precedente e confermando un trend iniziato nel 2015. L’Italia, per via del boom dei ricavi di Leonardo, è tra le aree che segnano la crescita relativa più forte: più 15%, al primo posto con la Francia. Tutto questo nonostante gli effetti della pandemia da Covid-19 abbiano rallentato le commissioni e messo in crisi i fornitori, rendendo ad esempio i componenti più costosi e difficili da reperire. Lo mostrano i dati diffusi il 5 dicembre 2022 dal Sipri, l’Istituto indipendente di ricerca sulla pace di Stoccolma che si occupa di conflitti, armamenti, controllo delle armi e disarmo.
“Avremmo potuto aspettarci una crescita ancora maggiore delle vendite di armi nel 2021 senza i persistenti problemi della catena di approvvigionamento -ha spiegato Lucie Béraud-Sudreau, direttrice del Programma di spesa militare e produzione di armi del Sipri-. Sia le grandi aziende produttrici di armi sia quelle più piccole hanno dichiarato che le loro vendite sono state influenzate durante l’anno da questi fattori. Alcuni produttori, come #Airbus e #General_dynamics, hanno anche segnalato carenze di manodopera”. Le catene di approvvigionamento hanno sofferto a causa della loro estensione e complessità: l’italiana Leonardo ha segnalato nei suoi rapporti una rete di fornitori pari a oltre 11mila aziende. A questo scenario si sono aggiunte le conseguenze dell’invasione russa dell’Ucraina che ha portato ulteriori difficoltà anche per l’importanza che riveste Mosca nel commercio di componenti d’arma. “Sebbene i rapporti indichino che le aziende russe stanno aumentando la produzione a causa della guerra, queste hanno avuto difficoltà ad accedere ai semiconduttori. Inoltre hanno subito l’impatto delle sanzioni. Ad esempio #Almaz-Antey (non inclusa nella Top 100 per il 2021 per mancanza di dati, ndr) ha dichiarato di non essere riuscita a ricevere i pagamenti per alcune delle sue forniture di armi”, riportano gli esperti del Sipri.
Veniamo ora alle 100 multinazionali oggetto dello studio. Gli Stati Uniti sono il Paese più rappresentato: sono 40 le aziende Usa tra le prime 100 e le prime cinque per valore assoluto: #Lockheed_Martin, #Raytheon_technologies, #Boeing, #Northrop_grumman e #General_dynamics. Nonostante abbiano affrontato una diminuzione delle vendite di armamenti, perdendo lo 0,9% rispetto al 2020, le principali aziende statunitensi hanno venduto materiale bellico per un totale di 300 miliardi di dollari, pari al 51% della spesa esaminata. Un calo che ha riguardato quattro dei maggiori cinque produttori con l’esclusione di Raytheon Technologies che ha aumentato le vendite del 9,1%. Una particolarità del “mercato” statunitense riguarda le recenti acquisizioni e fusioni tra i produttori del settore. Una delle operazioni più significative è stata l’acquisto da parte di Peraton di Perspecta, azienda specializzata in informatica governativa, per 7,1 miliardi di dollari. “Probabilmente nei prossimi anni potremo aspettarci un’azione più incisiva da parte del governo statunitense per limitare le fusioni e le acquisizioni nell’industria degli armamenti -ha dichiarato Nan Tian, ricercatore senior del Sipri-. Il dipartimento della Difesa degli Stati Uniti ha infatti espresso la preoccupazione che la riduzione della concorrenza nel settore possa avere effetti a catena sui costi di approvvigionamento e sull’innovazione”. Un timore piuttosto paradossale considerando come funziona il mercato delle armi, con gli Stati a fare da principali committenti.
Secondo i dati del 2021 sono 27 le aziende in classifica con sede in Europa e le loro vendite complessive hanno registrato un incremento del 4,2%, raggiungendo i 123 miliardi di dollari. Le velocità di crescita cambiano a secondo del settore. “La maggior parte delle aziende europee specializzate nel settore aerospaziale militare ha registrato perdite per il 2021, imputate alle interruzioni della catena di approvvigionamento -ha fatto notare Lorenzo Scarazzato, ricercatore del Programma di spesa militare e produzione di armi del Sipri-. Al contrario i costruttori navali europei sembrano essere stati meno colpiti a e sono stati in grado di aumentare le loro vendite nel 2021″. Tra questi c’è #Fincantieri, che occupa la 46esima posizione e che ha registrato un incremento del 5,9% dei ricavi rispetto all’anno precedente. Crescita che condivide con l’altro gruppo italiano, Leonardo, che ha segnato un aumento fortissimo del 18% e che occupa la 12esima posizione con 13,9 miliardi di dollari di fatturato. Una delle poche aziende del settore aereo che hanno segnato una crescita è la francese Dassault aviation group che ha riportato una crescita del 59% grazie alla commissione di 25 aerei modello “Rafale”.
Il mercato asiatico, infine, comprende 21 aziende tra le prime cento e ha raggiunto i 136 miliardi di dollari nel corso del 2021 con una crescita del 5,8% rispetto all’anno precedente. La tendenza è stata guidata dai produttori cinesi che da soli contano per 109 miliardi di dollari e hanno aumentato le loro vendite del 6,3%. “A partire dalla metà dello scorso decennio si è verificata un’ondata di consolidamento nell’industria degli armamenti cinese -ha sottolineato Xiao Liang, anch’egli ricercatore del Programma del Sipri-. Nel 2021 la #CSSC cinese è diventata il più grande costruttore di navi militari al mondo, con vendite per 11,1 miliardi di dollari, dopo una fusione tra due società già esistenti”.
▻https://altreconomia.it/crescono-le-vendite-di-armi-delle-prime-100-aziende-del-mondo-nonostant
#armes #armement #commerce_d'armes #statistiques #chiffres #monde #multinationales #business #vente_d'armes
Color Formats in CSS - hex, rgb, hsl, lab
▻https://www.joshwcomeau.com/css/color-formats
#CSS has a whole slew of different #color_formats: hex codes, rgb(), hsl(), lch(), the list goes on!
]]>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é
#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
]]>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);
}
#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
]]>