Fermer

septembre 26, 2022

Typographie fluide avec CSS Clamp()


Sommaire

Dans cet article, nous allons explorer une fonctionnalité CSS intéressante appelée serrer() qui permet à la taille de l’écran de dicter la taille de la police au lieu de plusieurs requêtes multimédias. Nous prendrons également en compte certains facteurs tels que la prise en charge du navigateur, les problèmes d’accessibilité et l’efficacité globale de la fonctionnalité.

Typographie réactive

La typographie réactive ajoute un tas de requêtes multimédias pour modifier la taille de la police à différentes tailles d’écran, l’approche la plus courante, fonctionne bien lorsque les exigences de l’interface utilisateur doivent prendre en charge les tailles d’écran standard. La lisibilité et la maintenabilité suscitent des inquiétudes à mesure que la base de code se développe.

Typographie fluide

Dans cette approche, nous essayons de définir dynamiquement la valeur de la taille de la police en fonction de la taille de l’écran à l’aide de CSS serrer()cela permettra une mise à l’échelle plus fluide du texte sur différents appareils.

Pince CSS()

serrer() prend 3 valeurs, une valeur minimale, une valeur préférée et une valeur maximale.

h1 {
  font-size: clamp([minFontSize], [preferredFontSize], [maxFontSize]);
}

Valeur minimum: la taille de police minimale à laquelle l’élément de texte peut être réduit quelle que soit la taille de l’écran.

Valeur préférée : la taille de police idéale que nous aimerions appliquer si possible en fonction de la taille de l’écran.

Valeur maximum: la taille de police maximale que l’élément de texte peut atteindre quelle que soit la taille de l’écran.

Les valeurs min et max sont généralement respectivement les tailles de police mobile et de bureau, pour cet exemple, nous dirons que notre taille de police min est de 24px et la taille de police max est de 40px pour une balise d’en-tête, les valeurs de pixel ne sont pas accessibles, nous allons donc les convertir en REM .

h1 { 
  font-size: clamp(1.5rem, [preferredFontSize], 2.5rem); 
}

La valeur préférée pourrait être basée sur la largeur de la fenêtre d’affichage comme 2vw, mais c’est un énorme problème d’accessibilité, les unités de fenêtre d’affichage ne permettent pas aux utilisateurs d’augmenter la taille du texte en effectuant un zoom avant ou arrière. En ajoutant une unité relative, nous pouvons nous assurer que la taille de la police s’ajuste toujours en fonction de la taille de l’écran agrandi.

h1 { 
  font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem); 
}

Calcul de la valeur préférée

3vw semble aléatoire et au mieux une valeur de supposition. Utilisons un peu de maths pour dériver une valeur préférée.

OUI j’ai dit mathématiques !

Visualisez les tailles de police min et max sous la forme de deux points sur les axes X et Y d’un graphique, nous devons trouver la pente et le point d’intersection des deux valeurs sur l’axe Y.

Nous examinerons la formule ci-dessous et ne demanderons jamais comment elle est dérivée… lmao !

slope = (maxFontSize - minFontSize) / (maxWidth - minWidth).
yAxisIntersection = -minWidth * slope + minFontSize.

Les références maxWidth et minWidth aux tailles d’écran sur lesquelles la valeur de taille de police préférée doit être basée.

Je suis allé de l’avant et j’ai créé une fonction SASS astucieuse appelée clampBuilder() qui peut effectuer ce calcul mathématique magique, n’hésitez pas à l’ajouter à vos mixins.

@function clampBuilder($minFontSize, $maxFontSize, $minWidth, $maxWidth) 
{
  $slope: (($maxFontSize - $minFontSize) / ($maxWidth - $minWidth));
  $yAxis: -$minWidth * $slope + $minFontSize;
  @return unquote(
    'clamp(' + $minFontSize + 'rem, (' + $yAxis + 'rem + ' + ($slope * 1000) + 'vw), ' + $maxFontSize + 'rem)'
  );
}

En utilisant cela, nous pouvons définir la taille de la police comme une valeur dynamique, dans cet exemple spécifique ci-dessous, la fonction générera une taille de police de pince (2rem, 1.0909rem + 3.8788vw, 4rem).

h1 {
  font-size: 1.5rem // fallback
  font-size: clampBuilder(1.5,2.5,360,1200);
}

Un exemple de travail avec serrer() appliqué à certains titres et paragraphes, allez-y et essayez de redimensionner !

Remarques et préoccupations

  • Prise en charge du navigateur pour serrer() est supérieur à 90 % – https://caniuse.com/?search=clamp().
  • Si l’utilisateur modifie la taille de la police racine ou a besoin de zoomer beaucoup, il peut toujours y avoir des problèmes d’accessibilité.
  • serrer() peut également être utilisé pour définir les dimensions du fluide.
  • Fonctionne mieux pour les éléments avec une grande différence dans les valeurs de taille de police minimale et maximale.






Source link

septembre 26, 2022