Simplified Fluid Typography | CSS-Tricks

Pour des tailles de fontes fluides en CSS, en PUR CSS je veux dire, ben c'est un peu la mémerde... l'unité vw te fout des variations extrêmes.

Ici, on propose des solutions pour avoir une taille de fonte fluide entre deux extrêmes.

C'est pas con...

Dans un autre épisode il proposait un truc du genre:


font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

Ici, il montre d'autres solutions à base de min/max:


 font-size: min(max(16px, 4vw), 22px);

voire le très expérimental clamp() que je ne connaissais pas, et pour cause, il ne fonctionne que sous chrome 79+:


 font-size: clamp(16px, 4vw, 22px);

Playing Sounds with CSS

Rigolo: on peut jouer un son en rusant avec css via le display:none / display:block sur un embed; c'est très sale, ça sert à rien, mais ça fonctionne...

<style>
  embed { display: none; }
  button:active + embed { display: block; }
</style>
<button>Play Sound</button>
<embed data-src="http://www.warriordudimanche.net/path-to-audio-file.mp3" />

Patterns for Practical CSS Custom Properties Use | CSS-Tricks

Un article très intéressant sur l'utilisation des variables en css. Je note ici quelques aspects qui ont attiré mon attention.

Définir des valeurs par défaut

var() permet de spécifier des valeurs si la variable css n'en a pas, par exemple:


.message {
  background-color: var(--student-background, #fff);
  color: var(--student-color, #000);
  font-family: var(--student-font, "Times New Roman", serif);
  margin-bottom: 10px;
  padding: 10px;
}

Ainsi, on peut adapter finement le contenu des variables en fonction de sélecteurs un peu custom tout en gardant un aspect par défaut:


[data-student-theme="rachel"] {
  --student-background: rgb(43, 25, 61);
  --student-color: rgb(252, 249, 249);
  --student-font: Arial, sans-serif;
}

Ce qui permet par exemple d'avoir un style à fort contraste pour un profil particulier sans redéfinir toutes les balises, simplement en affectant de nouvelles valeurs aux variables.

Définir des valeurs spécifiques à une classe

On peut également, dans le même esprit, définir les valeurs au sein d'une classe toujours dans l'idée d'éviter une réécriture et de rendre la feuille de style plus lisible et claire.

les variables inline

Un autre truc auquel je n'aurais pas pensé, c'est de redéfinir les variables css inline ! (attention, idée de génie, je trouve):

1- on définit la classe grid avec une variable par défaut.


.grid {
  --columns: auto-fit;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}
  1. on change la valeur de cette variable de façon ponctuelle et contextuelle via l'attribut style de la balise:

<div class="grid" style="--columns: 3;">
  ...
</div>

c'est juste beau

Fil RSS des articles