Ne laissez pas les requêtes de conteneur

CSS Container Query a toujours été l'une des fonctionnalités que les développeurs exigent fortement l'amélioration. C'est une vue générale que si nous avons des requêtes de conteneurs, nous n'avons pas besoin d'écrire autant de requêtes médiatiques mondiales en fonction de la taille de la page. Parce que ce que nous voulons vraiment contrôler, c'est un conteneur plus local, et maintenant nous ne pouvons le mettre en œuvre qu'à l'aide de requêtes multimédias, simplement parce que c'est le meilleur outil de CSS. Je suis totalement d'accord avec cela.

Mais il y a aussi une vue qui apparaît de temps en temps: "Les développeurs pensent que des requêtes de conteneurs sont nécessaires, mais elles ne le sont pas." Je ne suis pas d'accord avec cette déclaration. Si la requête en conteneur est disponible, nous pouvons évidemment faire beaucoup de choses utiles avec, dont la plus importante est d'écrire un nettoyage plus facile, plus facile à porter, plus facile à comprendre le code. Il semble que ce soit un consensus pour construire des UIS basés sur des composants aujourd'hui, ce qui rend la demande de requêtes en conteneurs encore plus évidente.

Il existe actuellement des méthodes JavaScript modernes qui peuvent nous aider à utiliser les requêtes de conteneurs aujourd'hui - mais cela ne signifie pas que cette technologie doit rester dans le domaine JavaScript. Cela a plus de sens dans CSS.

Voici quelques-unes de mes réflexions sur ce sujet à la fin de 2019:

• Les «composants réactifs de Philip Walton: les solutions pour résoudre les problèmes de requête de conteneur» montrent un bon moyen d'utiliser ResizeObserver de JavaScript pour résoudre le problème actuel. Il fonctionne bien et fonctionne n'importe où. Le site Web de démonstration est le meilleur car il met en évidence les besoins des composants réactifs (bien qu'il existe d'autres cas d'utilisation documentés). Philip dit même que les solutions CSS pures seraient plus idéales.
• Il y a environ un an, le nidification du CSS a provoqué un engouement. Les discussions semblent montrer que la nidification est réalisable. En tant que défenseur de longue date de la nidification rationnelle des Sass, je suis d'accord avec cela. Cela me fait me demander si la syntaxe de la requête de conteneurs peut profiter de quelque chose de similaire. Peut-être que la portée des requêtes imbriquées est limitée au sélecteur parent? Ou utilisez-vous un ampère et préfixe pour représenter les instructions multimédias, comme le fait la spécification actuelle avec les sélecteurs descendants?
• D'autres syntaxes proposées impliquent généralement l'utilisation d'une sorte de côlon, comme .container:media(max-width: 400px) { } . J'aime ça aussi. Les sélecteurs de côtes simples (pseudo-sélecteurs) sont philosophiques "sélectionnant des éléments dans ces conditions" - par exemple :hover ,: :nth-child , etc. - la portée des médias a donc un sens.
• Je ne pense pas que la syntaxe soit le plus grand obstacle à cette fonctionnalité; Il s'agit de ses performances de mise en œuvre. Pour autant que je sache en dernier, c'est encore plus un problème de performance, cela perturbe l'ensemble du processus de rendu du fonctionnement du navigateur. Cela semble être un énorme obstacle. Mais je ne veux toujours pas l'oublier. Il y a beaucoup d'innovations sur Internet, et ce n'est pas parce qu'il n'est pas clair comment y parvenir aujourd'hui que demain, personne ne trouvera une voie à suivre viable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!