Une présentation de la fonction CSS clamp

L'utilisation de clamp pour de la typographie fluide dans un contexte de design responsive n'est pas sans causer quelques problèmes d'accessibilité : le zoom peut être perturbé. L'auteur explore quelques pistes pour remédier à cela

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Un pas-à-pas de construction de menu de navigation en utilisant les possibilités des media queries

Un article complet (bien qu'ancien, 2016) sur la performance web : site statique, choix du format d'image (et utilisation de la balise picture pour le responsive), animations svg, web fonts avec quelques astuces, lazy loading (avec une astuce pour Apache), css critique, cache, etc. (via https://stephaniewalter.design/fr/blog/semaine-pixels-5-aout-2016/ )

Tout est dans le titre

Une utilisation de l'interpolation linéaire pour du design responsive

Tout est dans le titre

Intéressant : l'utilisation de l'élément picture dans un contexte https implique que le contenu (les images) soient aussi servies en https sous peine de blocage. Ce n'est pas le cas de l'élément img si j'ai bien compris

Tout est dans le titre

L'auteur présente des équivalences entre ce que l'on peut faire en HTML et en CSS pour les images "responsives"

Tout est dans le titre

L'évolution du design responsive... passionnant

Un vieux problème quasiment résolu ^^

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

TLDR :

img {
  max-width: 100%;
}
img[width] {
  width: auto; /* Defer to max-width */
}
img[width][height] {
  height: auto; /* Preserve aspect ratio */
}

/* Let SVG scale without boundaries */
img[src$=".svg"] {
  width: 100%;
  height: auto;
  max-width: none;
}