Quel CSS devez-vous absolument savoir en 2022?

CSS se développe rapidement, avec des fonctions de plus en plus puissantes, et la courbe d'apprentissage est plus raide. Cet article explorera quelle connaissance CSS est absolument nécessaire dans le développement frontal d'aujourd'hui.

Sacha Greif a publiquement demandé si CSS était trop grand. Ces dernières années, les navigateurs ont ajouté de nombreuses nouvelles fonctionnalités - requête de conteneur, syntaxe des couleurs relatives, couche en cascade, propriétés logiques, portée de la requête médiatique, transformation indépendante,: sélecteur (), etc. À l'avenir, le commutateur CSS, la nidification, le mélange de couleurs, l'animation de liaison défilent, le style de portée, etc. peuvent également apparaître. Cela apporte sans aucun doute de nouveaux défis d'apprentissage aux ingénieurs frontaux débutants et supérieurs.

Il est devenu un passé pour saisir pleinement toutes les propriétés CSS et comment elles fonctionnent. Alors, quelle connaissance CSS est absolument nécessaire?

Vincas Stonys et Chris ont essayé de répertorier respectivement les listes connexes. Si vous devez répertorier les cinq propriétés et sélecteurs CSS les plus importants, ma liste est la suivante:

writing-mode Attributs

Les attributs

writing-mode sont cruciaux, surtout en ce qui concerne l'apprentissage. Il vous aide à maîtriser les principes de la conception inclusive et à créer la bonne mise en page quelle que soit la langue de l'utilisateur. La compréhension writing-mode vous guidera pour comprendre les propriétés et les valeurs logiques, puis pour comprendre le flux de documents, et penser à partir de directions logiques telles que les blocs, les lines, les démarrages et les fins plutôt que les directions physiques.

display Attributs

Sans connaissance des attributs solides, il est difficile d'écrire un excellent code CSS. Il s'agit à la fois d'une propriété et d'un cadre pour créer des dispositions. Sans cela, il n'y a pas de grille Flexbox ou CSS, il est donc essentiel pour comprendre ces fonctionnalités importantes. display

De plus, l'attribut

et l'attribut display se complètent. Une fois que writing-mode vous donne une idée du flux de documents et de la direction logique, l'attribut writing-mode est exactement ce dont vous avez besoin. Vous pouvez l'utiliser pour modifier le flux normal d'un élément (par exemple, modifier l'élément de bloc en un élément en ligne) ou démarrer la disposition (par exemple, créer un contexte de mise en page flexible). display

, margin et padding Propriétés border

Ces trois propriétés font partie du modèle de boîte et sont utilisées pour contrôler l'espacement et les styles, et tous nécessitent une compréhension des unités de longueur CSS. Comprendre la fonctionnalité de ces propriétés et comment elles affectent la taille calculée des éléments améliorent considérablement votre contrôle de style et élimineront les problèmes CSS courants où les tailles des éléments ne correspondent pas aux attentes.

et ::before pseudo-éléments ::after

et ::before sont deux pseudo-éléments qui sont généralement apprises ensemble. Ils peuvent être utilisés pour créer une variété d'effets d'interface utilisateur, même des illustrations uniques complètes, montrant la puissance du CSS. ::after

Query @media

Les requêtes sont la clé pour créer des dispositions réactives flexibles et différents contextes de visualisation. À mesure que les requêtes de conteneurs mûrissent, il peut être remplacé, mais pour le moment, les requêtes @media sont une excellente introduction à l'apprentissage réactif. @media

De plus, la requête @media vous donne une compréhension préliminaire des caractéristiques conditionnelles du CSS. Que ce soit sur la base du type de périphérique (par exemple, écran ou imprimé) ou des conditions de la fenêtre de navigateur (par exemple, largeur & gt; = 768px), la syntaxe @media est très utile pour créer des dispositions optimisées pour différentes conditions. La requête @media est également liée à l'accessibilité car elle peut appliquer des styles en fonction des préférences de l'utilisateur (par exemple, prefers-reduced-motion).

d'autres attributs et sélecteurs qui méritent d'être mentionnés

Bien sûr, il existe de nombreuses autres propriétés et sélecteurs CSS importants, tels que:

• calc()
• has()
• color
• font
• overflow
• position (particulièrement important)
• z-index

L'apprentissage CSS est plus important que les listes d'attributs par cœur. C'est un processus étape par étape, et les cinq propriétés et sélecteurs que j'ai choisis peuvent vous aider à jeter une bonne base et à vous préparer à un apprentissage plus profond du CSS.

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!