Générateur de pinces CSS

Un générateur de pince (s) CSS construit une déclaration de pince unique (minimum, préféré, maximum) qui met une valeur à l'échelle en douceur entre deux largeurs d'écran Au lieu d'écrire plusieurs requêtes multimédias pour faire passer un cap de 24 px sur les téléphones à 48 px sur les ordinateurs de bureau, vous définissez une taille minimale, une taille maximale et la plage de fenêtre à laquelle ils correspondent, et le générateur renvoie une ligne de CSS qui interpole chaque taille entre les deux.

La fonction clamp () prend trois arguments : une borne inférieure, une valeur préférée et une borne supérieure Le navigateur utilise la valeur préférée à moins qu'elle ne tombe en dessous ou au-dessus du minimum, auquel cas elle se verrouille sur cette borne Ce générateur calcule la valeur préférée en fonction linéaire de la fenêtre, combinant un terme rem fixe avec un terme vw, de sorte que le résultat croît au rythme de la fenêtre sans jamais descendre en dessous de votre minimum ou dépasser votre maximum Cette technique est souvent appelée typographie fluide, bien qu'elle fonctionne aussi bien pour les marges, le rembourrage, les espaces et les largeurs.

Tout est calculé dans votre navigateur avec JavaScript côté client, donc rien de ce que vous entrez n'est téléchargé et l'outil fonctionne hors ligne une fois chargé Vous pouvez saisir des tailles en pixels ou rem, définir une taille de police racine personnalisée et lire un tableau d'aperçu montrant la valeur calculée aux largeurs de fenêtre communes, afin de pouvoir confirmer le comportement de la courbe avant de coller la ou les pinces dans votre feuille de style.

Le dimensionnement fluide a un piège d'accessibilité qui mérite d'être évité délibérément Une expression de clamp dont le terme moyen est exprimé uniquement dans les unités de port de vue ignore le paramètre de taille de police du lecteur, car vw n'y répond pas et le texte qui ne peut pas croître échoue WCAG 1.4.4. Garder une composante rem dans la valeur préférée, ce que fait la sortie générée, signifie que la taille répond toujours au zoom du navigateur et à une police par défaut plus grande. Définissez toujours les deux limites : sans elles, la valeur évolue sans limite dans les deux sens.

Voici le générateur de pinces CSS sur un cap réel Entrez 24 et 48 px comme tailles, 360 et 1440 comme fenêtres, gardez la racine 16 px, et appuyez sur Générer une pince ().La sortie est de taille police : clamp (1.5rem, 1rem + 2.2222 vw, 3rem) ; La table de prévisualisation le confirme : 24 px à 360, 33.07 px à 768, 38.76 px à 1024 et 48 px à 14000.3.3.