#j'ai_rien_compris

C’est excellent !
▻http://emails.hteumeuleu.fr/wp-content/uploads/2016/02/the-fab-four.html

Mais du coup, la question : finalement ça peut s’utiliser dans un site normal aussi cette technique : ça fait un peu comme une Element Query, mais qui n’aurait qu’un seul breakpoint possible, non ? Du coup pour les cas où ça suffit d’avoir juste deux versions (petit/grand écran), alors on peut utiliser cette technique à la place de certaines media queries ! (Et c’est possiblement mieux puisque ça utilise la taille de l’élément parent, pas du périphérique complet : element query quoi.)

#element_queries

Tout à fait !

#j'ai_rien_compris

#web_design #css

@fil ça se base sur la priorité des valeurs entre width, min-width et max-width. Suivant lequel est le plus grand ou plus petit, ce n’est pas le même qui va être réellement appliqué. Ça calcule une valeur de width qui est volontairement énorme mais soit positive (genre 38400) soit négative (-9600), du coup ce n’est jamais width qui est appliqué mais forcément soit min-width, soit max-width.

Mais sinon tu peux juste te contenter de l’appliquer, ça marche ! :D

Ça te permet de créer deux versions de taille (seulement deux, contrairement aux media queries où tu peux définir autant de variantes que tu veux) pour des blocs, mais suivant la taille du parent, et non pas suivant la taille du périphérique complet ! Donc c’est beaucoup plus précis (et ça marche en email du coup).

Sinon les « element queries » sont une des propositions d’amélioration de CSS en pourparlers par le groupe de travail Responsive :
▻http://ricg.io

@baroug