CSS Tricks : Responsive avec du CSS Moderne

A force d'utiliser des librairies CSS comme Flexbox Grid , et j'en passe. Nous ne suivons plus les nouveautés de CSS.

Pourtant grâce aux nouvelles propriétés CSS il devient possible de se passer de ces librairies parfois lourdes.

Dans cette série d'articles, nous allons vous présenter des propriétés CSS souvent inconnues par la plupart des développeurs Web et pourtant extrêmement utiles !

⚠️ Nous vous conseillons d'ouvrir les Codepens dans un nouvel onglet pour facilement tester les propriétés !

Min & Max

Min

La propriété min(expression [, expression]) permet d'obtenir la plus petite valeur dans une liste.

Nous voulons implémenter un container sur notre site, anciennement nous définissons une taille à notre container à chaque breakpoint. Avec la propriété min il suffit de définir la taille souhaitée et la taille maximum.

Dans notre cas, notre container doit faire 90% de la largeur de l'écran mais ne doit jamais dépasser 100px.

🎁 La propriété margin-inline: auto permet de remplacer margin-left: auto; margin-right auto;

Max

Contrairement à min, la propriété max(expression [, expression]) permet d'obtenir la plus grande valeur dans une liste.

Dans notre cas, on souhaite avoir le padding de notre blockquote relatif à la hauteur de l'écran mais ne doit jamais être plus petit que 2rem.

Clamp

La propriété clamp(MIN, VAL, MAX) permet de définir une valeur minimale, une valeur maximale et une valeur idéale.

• Si VAL est plus petit que MIN, MIN est retourné
• Si VAL est plus grand que MAX, MAX est retourné
• Sinon VAL est retourné

Dans notre cas, on souhaite avoir un titre classique sur mobile mais très large en desktop.