Introducing Style Queries

1. Késako ?

Les style queries permettent de styliser du contenu en fonction du style du conteneur. À l'origine, le système a été pensé pour tous les types de styles, mais ne fonctionne actuellement qu'avec des variables CSS. La syntaxe est la suivante :


                @container style(--theme: dark) {
    .section {
        background-color: #222;
    }

    .section__title,
    .section__desc {
        color: #fff;
    }
}

2. Démos !

Pour cet élément de carte météo, on a juste à modifier la variable --weather pour changer l'affichage de l'icône ou du texte, et tout ça en pur CSS !

Additionnellement, cette fonctionnalité CSS peut servir à créer des thèmes indépendants, il suffit juste de créer plusieurs fichiers CSS indépendants, pour chaque thème.

Thème : classic

Thème : gradient

Thème : retro

Thème : clear

3. Avantages et invonvénients

Cette fonctionnalité permet de facilement créer un héritage CSS (si un élément possède une bordure rouge, alors certains de ses enfants pourraient l'avoir). Elle permet d'isoler le CSS et de réduire le nombre de classes tout en fournissant davantage de stabilité.

En revanche, cette fonctionnalité CSS n'est encore pas supporté par la plupart des navigateurs. Il faut généralement utiliser des flags pour en profiter. (voir la référence caniuse)

4. Les petits plus

Les choses à savoir concernant la conception de cette application !

Le JS présent ne sert qu'à changer des classes CSS ou définir des Web Components (la carte météo ou les boutons stylisés très jolis), tout le reste c'est du CSS pur et brut !

En CSS, j'ai juste mit une transition-duration: 300ms sur TOUT, et c'est intéressant l'effet que ça donne, avec les délais et tout. Je pense que ça doit venir du fait que ce soit une fonctionnalité expérimentale, et que les styles queries s'appliquent les unes à la suite des autres plutôt qu'instantanément.

Merci pour tout M. Calou, on vous aime ♥