Breakpoints

Min/Max Values

Clamp CSS Function Résult

clamp( minPx||Rem, vVw + rRem, maxPx||Rem )Click to copy


Je vous propose ici un générateur de valeurs pour clamp(), la fonction CSS permettant de calculer des valeurs fluides pour vos tailles de polices, de marges ou toute autre valeur CSS basée sur la taille du viewport.
Ce calculateur clamp vous permettra réaliser facilement les intégration web de vos projets fluid design, ou de vos créations de site web moderne.

Retour sur la fonction clamp

Pour rappel, la fonction clamp() permet d’assigner à un règle CSS, une valeur fluide contrainte entre deux valeurs (minimale et maximale) fixes. La problématique soulevée par la fonction clamp est la portée, l’étendue des viewports couverts par le résultat de clamp(), et par voie de conséquence, l’utilisation qu’il nous est permis d’en faire afin de nous exempter des media queries traditionnelles et quelque peu rigides.

La fonction clamp prend en paramètre deux valeurs fixes, contraignant son résultat à ces deux extrêmes, ainsi qu’un calcul relatif à la taille du viewport et au zoom utilisateur par addition de la taille de police du navigateur fixée par celui-ci.

.mon-selecteur {

            maPropriete: clamp( valeur-min, %viewport + xRem, valeur-max );  

}

N’hésitez pas à consulter mon article sur le calcul des valeurs relatives de clamp en fonction des exigences de breakpoints fixés par le design web.

Objectif du calculateur clamp

L’objectif d’une intégration web est généralement de reproduire de façon fonctionnelle, le design web réalisé en amont de la mise en œuvre technique. Cette intégration doit donc fréquemment prendre en compte les breakpoints définis lors la création des différents templates graphiques, et c’est dans ce contexte, que vous souhaiterez bénéficier de valeurs fluides permettant d’adapter le design réalisé à une ou plusieurs tailles de cibles de viewports.  

Ce générateur (ou calculateur) de valeurs de clamp(), vous permet, non seulement de calculer les valeurs de fraction du viewport et de l’addition du « rem », mais aussi d’y insérer deux breakpoints nécessitant habituellement de recourir aux media queries pour intégrer votre design responsive.

Utilisation du générateur de valeurs pour clamp

Utiliser le générateur de fonction clamp est très simple :

Basez-vous sur le template de votre design web :

Les champs breakpoints 1 et breakpoint 2 définissent tour à tour :

La taille minimal du viewport (la largeur de la fdenêtre du navigateur) sous laquelle clamp() arrêtera de fournir un résultat dynalmique, et retournera votre valeur minimale passée dans le champ correspondant ;

La taille maximale du viewport au-dessus de laquelle clamp() le retournera qu’un résultat statique correspondant à la valeur maximale passée dans le champs éponyme.

La valeur du rem correspond à celle que vous, webmasteur ou développeur web, avez défini sur votre sélecteur <html> pour faciliter vos intégrations de valeurs en « rem ».

Typiquement, 1 « em » étant par défaut égale à 16px, fixer fixer une taille relative à 10px pour votre « rem » revient à définir une taille par défaut à 62.5% :

html {

            font-size : 62.5% ; /* 10 / 16 * 100 == 62.5 */

}

Cela vous permet ensuite de une intégration relative sémantiquement compréhensible :

.mon-selecteur {

            Font-size : 15px; /* fallback pour navigateur obsolètes */

            font-size : 1.5rem; /* identique à 15px , mais en valeur relative, donc zoomable */

}

Par défaut la taille du « Rem «  est fixée ici à 16px, modifiez cette valeur afin de faire correspondre la fonction clamp() à votre déclaration de taille de police sur le sélecteur <html>.

Choisissez ensuite l’unité de Valeur utilisée dans votre fonction clamp (pixel ou rem) et cliquez sur le bouton « Calculer les valeurs de clamp » pour afficher votre résultat.

Vous pourrez finalement copier-coller votre résultat dans votre presse papier, pour l’intégrer à votre fichier CSS ou votre fichier theme.json.

Amusez-vous bien ! 😉