Fermer

octobre 17, 2022

Typographie fluide facile avec pince () Utilisation des fonctions Sass


Nous pouvons utiliser le clamp() méthode aujourd’hui en raison de la grande prise en charge du navigateur. Dans cet article, Brecht De Ruyte explique comment cela peut être un bel ajout à votre projet à venir ou comme une mise à niveau d’un précédent.

La typographie fluide devient de plus en plus populaire, surtout depuis la clamp() fonction mathématique est disponible dans tous les navigateurs à feuilles persistantes. Mais si nous sommes honnêtes, c’est encore beaucoup de mathématiques pour y parvenir. Vous pouvez utiliser des outils tels que utopia.fyi, qui sont fantastiques. Mais dans les grands projets, cela peut devenir désordonné 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 qu’il y en a beaucoup d’autres parmi vous comme ça, alors au lieu d’ajouter un clamp() fonction à l’intérieur de notre code, nous pouvons peut-être rendre cela un peu plus lisible avec Sass.

Pourquoi devrions-nous utiliser la typographie fluide ?

Habituellement, lors de la conception pour différentes tailles d’écran, nous utilisons des requêtes multimédias pour déterminer la taille de la police de nos éléments typographiques. Bien que cela donne généralement suffisamment de contrôle pour les appareils plus conventionnels, cela ne couvre pas toutes les tailles d’écran.

En utilisant la typographie fluide, nous pouvons rendre l’échelle de la typographie plus logique entre toutes sortes d’appareils différents.

Ceci est maintenant possible dans tous les navigateurs à feuilles persistantes en raison de la clamp() fonction en CSS. Il est parfait pour le travail et réduit notre écriture de requêtes multimédias, nous permettant ainsi d’économiser un peu de taille de fichier en cours de route.

Comment cela fonctionne-t-il exactement clamp() Travail de fonction 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 borne minimale, valeur préféréeet une borne 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 voulez une explication plus approfondie des mathématiques, je vous suggère de lire ce post d’Adrian Bece « Typographie fluide moderne utilisant CSS Clamp ”.

Cependant, il y a un petit problème. Quand tu lis ces clamp fonctions à l’intérieur de votre CSS, il est toujours difficile de voir exactement ce qui se passe. Imaginez simplement 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 fonction Sass simple ?

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 le voulons redimensionnez-le à notre plus grande taille de police jusqu’à ce que le 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 (ou 1rem) et une taille de police maximale de 32px (ou 2rem), nous avons déjà les deux parties de notre fonction clamp :

clamp(1rem, [?], 2rem)
Plus après saut! Continuez à lire ci-dessous ↓

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 approfondie des mathématiques derrière cela.

En bref, l’équation est la suivante :

(taille de police maximale – taille de police minimale) / (point d’arrêt maximal – point d’arrêt minimal)

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 interception 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 typographie 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 en ce qui concerne la typographie fluide, ce qui en fait 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 un design, et il ne semble pas naturel de passer nos fenêtres comme rems. Alors, mettons à 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 celles-ci 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 évaluer.

@function px-to-rem($px) {
    $rems: math.div($px, 16px) * 1rem;
    @return $rems;
}

Maintenant, nous pouvons mettre à jour notre fonction fluide en sortie rem valeurs même s’il reçoit 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 c’est surtout parce que j’utilise des valeurs très simples. Par exemple, lors du serrage à une valeur maximale de 31px à la place de 32pxnotre rem les valeurs ne seront pas aussi arrondies et notre sortie deviendra un peu désordonnée.

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 également, 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écifique 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. Mettez à jour la fonction en conséquence. Je suggérerais de définir au moins deux décimales pour les valeurs de sortie pour 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 fenêtres tout le temps. Nous pouvons toujours ajouter un point d’arrêt personnalisé mais une simple entrée telle que :

font-size: #{fluid(16px, 31px)};

Entraînera-t-il 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 heureux serre-tête pour tous les utilisateurs

Si vous avez suivi ce petit tutoriel et que vous en avez été étonné, vous voudrez peut-être ajouter ceci clamp() méthode pour tout, mais il y a une remarque importante en matière d’accessibilité.

Noter: Lorsque vous utilisez vw unités ou limiter la taille du texte peut obtenir avec clamp()il est possible qu’un utilisateur ne puisse pas redimensionner le texte à 200 % de sa taille d’origine.

Si cela se produit, c’est un échec WCAG. Comme Adrian Bece l’a mentionné, ce n’est pas infaillible à 100 %. Adrian Roselli a écrit quelques exemples à ce sujetce qui pourrait vous intéresser.

Nous pouvons utiliser cette méthode aujourd’hui en raison de l’excellente prise en charge des navigateurs. En étant intelligent sur l’utilisation, je suis sûr que cela peut être un bel ajout à votre projet à venir ou comme une mise à niveau d’un précédent.

Éditorial fracassant(vf, yk, il)






Source link