Type Fluidity
▻https://wearerequired.github.io/fluidity
Generator for #CSS #clamp values for #fluid_typography sizes.
-
-
Use cases for #CSS #comparison #functions - Ahmad Shadeed
▻http://ishadeed.com/article/use-cases-css-comparison-functionsCSS 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()
-
-
clamp() - CSS : Feuilles de style en cascade | MDN
▻https://developer.mozilla.org/fr/docs/Web/CSS/clamp()La fonction CSS clamp() permet de ramener (d’écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction clamp() peut être utilisée à tout endroit où une valeur de type <length>, <frequency>, <angle>, <time>, <percentage>, <number> ou <integer> peut être utilisée.
-
-
