40 liens privés
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;
}