clamp() méthode aujourd’hui en raison de la grande compatibilité des navigateurs. Dans cet article, Brecht De Ruyte explique comment cela peut être un bel ajout à votre prochain projet ou une mise à jour d’un précédent.
La typographie fluide devient de plus en plus populaire, d’autant plus que clamp() La fonction mathématique est disponible dans tous les navigateurs evergreen. Mais si nous sommes honnêtes, c’est encore beaucoup de maths pour accomplir cela. Vous pouvez utiliser des outils comme utopia.fyi, qui sont fantastiques. Mais sur de gros projets, cela peut se compliquer assez rapidement. Je suis un grand fan de code lisible et maintenable et je veux toujours voir ce que fait mon code en un coup d’œil. Je suis sûr que vous êtes beaucoup plus nombreux à aimer ça, donc au lieu d’ajouter un clamp() fonction dans notre code, nous pouvons peut-être rendre cela un peu plus lisible avec Sass.
Pourquoi utiliser la typographie fluide ?
Habituellement, lorsque nous concevons pour différentes tailles d’écran, nous utilisons des requêtes multimédias pour déterminer la taille de police de nos éléments typographiques. Bien que cela donne généralement suffisamment de contrôle pour la plupart des appareils conventionnels, cela ne couvre pas toutes les tailles d’écran.
Ceci est désormais possible dans tous les navigateurs permanents grâce à la clamp() fonction en CSS. Il est parfait pour le travail et réduit notre rédaction de requêtes multimédias, ce qui nous permet d’économiser un peu de taille de fichier sur la route.
comment faites-vous exactement clamp() Fonction d’emploi pour la typographie?
En bref, la fonction de serrage ressemble à ceci :
clamp([min-bound], [value-preferred], [max-bound]);
Celui-ci prend en compte trois nombres : une limite minimale, valeur préféréeOui une limite maximale. En utilisant rem valeurs, nous pouvons augmenter un peu l’accessibilité, mais ce n’est toujours pas infaillible à 100%, en particulier pour les outils de navigateur externes.
Si vous souhaitez une explication plus détaillée des mathématiques, je vous suggère de lire ce post d’Adrian Bece « Modern Fluid Typography Using CSS Clamp ».
Cependant, il y a un petit problème. quand tu les lis clamp fonctions dans votre CSS, il est toujours difficile de voir exactement ce qui se passe. Imaginez un fichier plein de tailles de police qui ressemble à ceci :
clamp(1.44rem, 3.44vw + 0.75rem, 2.81rem)
Mais avec un peu d’aide du sass fonction, nous pouvons rendre ces tailles de police beaucoup plus lisibles.
Que voulons-nous réaliser avec cette simple fonction Sass ?
En bref, nous voulons faire quelque chose comme ça : nous avons un taille de police minimaleà partir du moment où notre le point d’arrêt est supérieur à 400pxnous voulons que redimensionnez-le à notre plus grande taille de police jusqu’au le point d’arrêt maximal est atteint.
Les tailles de police minimale et maximale sont couvertes assez facilement. Si nous voulons une taille de police minimale de 16px (Soit 1rem) et une taille de police maximale de 32px (Soit 2rem), nous avons déjà les deux parties de notre fonction clamp :
clamp(1rem, [?], 2rem)
Création d’une fonction fluide automatisée de base
C’est là que les choses se compliquent, et je vous suggère de suivre l’article d’Adrian Bece, qui donne une excellente explication détaillée des mathématiques derrière cela.
En bref, l’équation est la suivante :
(taille de police max – taille de police min) / (point d’arrêt max – point d’arrêt min)
Préparons-nous à faire des calculs pour que cela se produise dans Sass, alors créons notre fluid-typography.scss fichier de fonction et commencez par ajouter sass:math et la fonction avec les valeurs dont nous aurons besoin :
@use "sass:math";
@function fluid($min-size, $max-size, $min-breakpoint, $max-breakpoint, $unit: vw) {
}
Maintenant, ajoutons le calcul de la pente à l’intérieur de notre fonction avec quelques sass:math:
@function fluid($min-size, $max-size, $min-breakpoint, $max-breakpoint, $unit: vw) {
$slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint);
}
Pour obtenir une valeur avec laquelle nous pouvons travailler, nous devrons multiplier notre pente par 100:
$slope-to-unit: $slope * 100;
Il ne nous reste plus qu’à trouver notre intersection pour construire l’équation. Nous pouvons le faire avec la fonction suivante :
$intercept: $min-size - $slope * $min-breakpoint;
Et enfin, renvoyons notre fonction :
@return clamp(#{$min-size}, #{$slope-to-unit}#{$unit} + #{$intercept}, #{$max-size});
Si nous appelons le créé sass fonction dans notre scss, nous devrions maintenant obtenir une police fluide :
h1 {
font-size: #{fluid(1rem, 2rem, 25rem, 62.5rem)}
}
Une note sur les unités
Dans la plupart des cas, nous utiliserons une largeur de fenêtre lorsque nous traiterons de la typographie fluide, c’est donc une bonne valeur par défaut. Cependant, il existe certains cas, notamment lors de l’utilisation de clamp() fonction pour l’espacement vertical, où vous souhaitez utiliser une hauteur de fenêtre au lieu de la largeur. Lorsque cela est souhaité, nous pouvons changer l’unité de sortie et utiliser un point d’arrêt minimum et maximum pour la hauteur :
h1 {
font-size: #{fluid(1rem, 2rem, 25rem, 62.5rem, vh)}
}
Mise à jour de la fonction pour rendre les calculs plus naturels
Nous avons ce dont nous avons besoin, mais soyons honnêtes, la plupart du temps, nous implémentons une mise en page et il ne semble pas naturel de passer nos fenêtres comme rems. Mettons donc à jour cette fonction pour utiliser les pixels comme mesure de la fenêtre. Pendant que nous y sommes, mettons à jour les tailles de police afin que nous puissions utiliser les valeurs de pixel pour tout. Nous allons encore les convertir en rem unités car elles sont meilleures pour l’accessibilité.
Tout d’abord, nous aurons besoin d’une fonction supplémentaire pour calculer notre rem valeurs basées sur une entrée de pixel.
Noter: Cela ne fonctionnera pas si vous changez de base rem la peine.
@function px-to-rem($px) {
$rems: math.div($px, 16px) * 1rem;
@return $rems;
}
Maintenant, nous pouvons mettre à jour notre fonction fluide sur la sortie rem valeurs même si vous obtenez des pixels en entrée. Ceci est la version mise à jour :
@function fluid($min-size, $max-size, $min-breakpoint, $max-breakpoint, $unit: vw) {
$slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint);
$slope-to-unit: $slope * 100;
$intercept-rem: px-to-rem($min-size - $slope * $min-breakpoint);
$min-size-rem: px-to-rem($min-size);
$max-size-rem: px-to-rem($max-size);
@return clamp(#{$min-size-rem}, #{$slope-to-unit}#{$unit} + #{$intercept-rem}, #{$max-size-rem});
}
Nous pouvons maintenant utiliser l’entrée suivante :
font-size: #{fluid(16px, 32px, 320px, 960px)}
Cela se traduira par ce qui suit :
font-size: clamp(1rem, 2.5vw + 0.5rem, 2rem);
À première vue, cela semble parfait, mais surtout parce que j’utilise des valeurs très simples. Par exemple, en serrant à une valeur maximale de 31px au lieu de 32pxnotre rem les valeurs ne seront pas aussi arrondies et notre sortie sera un peu brouillonne.
Saisir:
font-size: #{fluid(16px, 31px, 320px, 960px)}
Production:
font-size: clamp(1rem, 2.34375vw + 0.53125rem, 1.9375rem);
Si vous êtes comme moi et que vous trouvez cela un peu confus, nous pourrions arrondir un peu nos valeurs pour augmenter la lisibilité et économiser quelques octets dans notre fichier CSS final. De plus, cela peut devenir un peu fastidieux si nous devons toujours ajouter la fenêtre d’affichage, alors pourquoi ne pas ajouter des valeurs par défaut dans notre fonction ?
Arrondir nos valeurs et ajouter quelques valeurs par défaut
Commençons par ajouter une fonction d’arrondi à notre fichier Sass. Cela prendra n’importe quelle entrée et l’arrondira à un nombre spécifié de décimales :
@function round($number, $decimals: 0) {
$n: 1;
@if $decimals > 0 {
@for $i from 1 through $decimals {
$n: $n * 10;
}
}
@return math.div(math.round($number * $n), $n);
}
Nous pouvons maintenant mettre à jour nos valeurs de sortie avec des nombres arrondis. Veuillez mettre à jour la fonction en conséquence. Je suggérerais de définir au moins deux décimales pour les valeurs de sortie afin d’obtenir les résultats les plus cohérents :
@function fluid($min-size, $max-size, $min-breakpoint, $max-breakpoint, $unit: vw) {
$slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint);
$slope-to-unit: round($slope * 100, 2);
$intercept-rem: round(px-to-rem($min-size - $slope * $min-breakpoint), 2);
$min-size-rem: round(px-to-rem($min-size), 2);
$max-size-rem: round(px-to-rem($max-size), 2);
@return clamp(#{$min-size-rem}, #{$slope-to-unit}#{$unit} + #{$intercept-rem}, #{$max-size-rem});
}Maintenant, le même exemple que précédemment nous donnera un résultat beaucoup plus propre.
Saisir:
font-size: #{fluid(16px, 31px, 320px, 960px)};
Production:
font-size: clamp(1rem, 2.34vw + 0.53rem, 1.94rem);
Ajout d’un point d’arrêt par défaut
Si vous n’avez pas envie de vous répéter, vous pouvez toujours définir un point d’arrêt par défaut pour votre fonction. Essayez de mettre à jour la fonction comme ceci :
$default-min-bp: 320px;
$default-max-bp: 960px;
@function fluid($min-size, $max-size, $min-breakpoint: $default-min-bp, $max-breakpoint: $default-max-bp, $unit: vw) {
// ...
}
Maintenant, nous n’avons pas besoin de répéter ces points de vue tout le temps. Nous pouvons toujours ajouter un point d’arrêt personnalisé, mais une simple entrée comme :
font-size: #{fluid(16px, 31px)};
Il en résultera toujours :
font-size: clamp(1rem, 2.34vw + 0.53rem, 1.94rem);
Voici la fonction complète :
@use 'sass:math';
$default-min-bp: 320px;
$default-max-bp: 960px;
@function round($number, $decimals: 0) {
$n: 1;
@if $decimals > 0 {
@for $i from 1 through $decimals {
$n: $n * 10;
}
}
@return math.div(math.round($number * $n), $n);
}
@function px-to-rem($px) {
$rems: math.div($px, 16px) * 1rem;
@return $rems;
}
@function fluid($min-size, $max-size, $min-breakpoint: $default-min-bp, $max-breakpoint: $default-max-bp, $unit: vw) {
$slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint);
$slope-to-unit: round($slope * 100, 2);
$intercept-rem: round(px-to-rem($min-size - $slope * $min-breakpoint), 2);
$min-size-rem: round(px-to-rem($min-size), 2);
$max-size-rem: round(px-to-rem($max-size), 2);
@return clamp(#{$min-size-rem}, #{$slope-to-unit}#{$unit} + #{$intercept-rem}, #{$max-size-rem});
}
Une note finale : Soyez un soutien-gorge heureux pour toutes les porteuses
Si vous avez suivi ce petit tutoriel et que vous avez été surpris, vous voudrez peut-être ajouter ceci clamp() méthode pour tout, mais il y a une remarque importante en matière d’accessibilité.
Noter: quand vous utilisez vw unités ou limiter la taille du texte avec clamp()il est possible qu’un utilisateur ne puisse pas redimensionner le texte à 200 % de sa taille d’origine.
Si cela se produit, il s’agit d’un échec WCAG. Comme Adrian Bece l’a mentionné, ce n’est pas infaillible à 100 %. Adrian Roselli en a écrit quelques exemples, qui pourraient vous intéresser.
Nous pouvons utiliser cette méthode aujourd’hui en raison de l’excellent support du navigateur. Étant intelligent à utiliser, je suis sûr que cela peut être un bel ajout à votre prochain projet ou comme une mise à niveau d’un précédent.
(vf, yk, il)
