Comment utiliser plusieurs sélecteurs parent

Internet regorge de inspiration de conception Web et des outils pour aider vos projets Web, ce qui est utile car la conception pour le Web peut devenir délicate. Rendre la vie aussi simple que possible est la clé.

Les parents multiples rendent les feuilles de style beaucoup plus concises, ce qui est toujours agréable. Cela réduit la taille des fichiers et la maintenance, c'est donc quelque chose qui nous intéresse vraiment. Voici trois façons d'utiliser plusieurs sélecteurs parents.

01. Préprocesseurs

sélecteurs de parents multiples



comment dessiner un design de tshirt
Utilisez Sass

Actuellement, la solution la plus évidente consiste à utiliser la fonctionnalité d'imbrication intégrée d'un préprocesseur pour répertorier nos parents multiples, puis à y imbriquer notre enfant. Cela se compile toujours en CSS relativement verbeux, mais c'est agréable et laconique dans notre source.

raccourci pour retourner la toile dans Photoshop

02.: correspond ()

sélecteurs de parents multiples

Utilisez un pseudo-sélecteur

Il y a un pseudo-sélecteur dans Selectors Level 4 qui fournit cela de manière native. : matches (ou: any, dans des spécifications plus anciennes) vous permet d'écrire des sélecteurs beaucoup plus laconiques, que le navigateur étend en interne.

03. cssnext

sélecteurs de parents multiples

Transpiler avec cssnext

Pour faire fonctionner: matches (), il faut un peu de travail supplémentaire. Il est en fait appelé: any () dans les anciennes spécifications et nécessite un préfixe du fournisseur. À cette fin, je recommande d'utiliser cssnext pour transpiler la nouvelle syntaxe vers un meilleur support.

Mots : Harry Roberts

comment faire des vidéos de typographie cinétique

Harry Roberts est un architecte frontend consultant, écrivain et conférencier. Cet article a été initialement publié dans le numéro 276 de magazine net

Aimait ça? Lisez-les!