Welches CSS müssen Sie im Jahr 2022 unbedingt wissen?

cs In diesem Artikel wird untersucht, welches CSS-Wissen in der heutigen Front-End-Entwicklung absolut notwendig ist.

Sacha Greif hat öffentlich in Frage gestellt, ob CSS zu groß ist. In den letzten Jahren haben Browser viele neue Funktionen hinzugefügt - Containerabfrage, relative Farbsyntax, Kaskadenschicht, logische Eigenschaften, Abfragebereich in Medien, unabhängige Transformation ,: Has () Selektor usw. In Zukunft erscheinen möglicherweise auch CSS -Schalten, Verschachtelung, Farbmischung, Scroll -Link -Animation, Scope -Style usw. möglicherweise. Dies bringt zweifellos sowohl Anfängern als auch Senioren-Front-End-Ingenieuren neue Lernherausforderungen.

Es ist zu einer Vergangenheitsform geworden, alle CSS -Eigenschaften und ihre Funktionsweise vollständig zu erfassen. Welches CSS -Wissen ist also absolut notwendig?

Vincas Stonys und Chris versuchten, verwandte Listen aufzulisten. Wenn Sie die fünf wichtigsten CSS -Eigenschaften und -Sektoren auflisten müssen, lautet meine Liste wie folgt:

writing-mode Attribute

writing-mode Attribute sind entscheidend, insbesondere wenn es um das Lernen geht. Es hilft Ihnen, die Prinzipien des integrativen Designs zu beherrschen und das richtige Layout unabhängig von der Sprache des Benutzers zu erstellen. Wenn Sie writing-mode verstehen, können Sie logische Eigenschaften und Werte verstehen und dann den Dokumentfluss verstehen und aus logischen Richtungen wie Blöcken, Einschüssen, Starts und Enden und nicht aus physischen Richtungen nachdenken.

display Attribute

Ohne solide Attributwissen ist es schwierig, einen hervorragenden CSS -Code zu schreiben. Es ist sowohl eine Eigenschaft als auch ein Framework zum Erstellen von Layouts. Ohne sie gibt es kein Flexbox- oder CSS -Netz, daher ist es der Schlüssel zum Verständnis dieser wichtigen Merkmale. display

ergänzen sich das Attribut

und das display -attribut. Sobald writing-mode eine Vorstellung vom Dokumentfluss und der logischen Richtung gibt, ist das Attribut writing-mode genau das, was Sie brauchen. Sie können es verwenden, um den normalen Fluss eines Elements zu ändern (z. B. das Blockelement in ein Inline -Element) oder das Layout starten (z. B. einen flexiblen Layout -Kontext erstellen). display

, margin und padding Eigenschaften border

Diese drei Eigenschaften sind Teil des Boxmodells und werden verwendet, um den Abstand und die Styles zu steuern. Alle erfordern das Verständnis der CSS -Längeneinheiten. Das Verständnis der Funktionalität dieser Eigenschaften und der Auswirkungen auf die berechnete Größe der Elemente verbessert Ihre Stilregelung erheblich und beseitigt gemeinsame CSS -Probleme, bei denen Elementgrößen nicht mit den Erwartungen übereinstimmen.

und ::before pseudo-Elemente ::after

und ::before sind zwei Pseudoelemente, die normalerweise zusammen gelernt werden. Sie können verwendet werden, um eine Vielzahl von UI -Effekten zu erzeugen, sogar eine vollständige Illustrationen mit einzelnen Diven, die die Kraft von CSS zeigen. ::after

Abfrage @media

Abfragen sind der Schlüssel zum Erstellen flexibler Responsive -Layouts und unterschiedlicher Betrachtungskontexte. Wenn Containerfragen reifen, kann es ersetzt werden, aber im Moment sind @media Abfragen eine hervorragende Einführung in das Lernen reaktionsschnelles Design. @media

Zusätzlich gibt die @media -Anfrage ein vorläufiges Verständnis der bedingten Eigenschaften von CSS. Unabhängig davon, ob auf dem Gerätetyp (z. B. Bildschirm oder Druck) oder Browser -Ansichtsfenster (z. B. Breite & GT; = 768px) basiert, ist die @media -Syntax sehr nützlich, um Layouts zu erstellen, die für verschiedene Bedingungen optimiert sind. Die Abfrage @media hängt auch mit der Zugänglichkeit zusammen, da sie Stile gemäß den Einstellungen des Benutzers anwenden kann (z. B. prefers-reduced-motion).

Andere Attribute und Selektoren erwähnen sich

Natürlich gibt es viele andere wichtige CSS -Eigenschaften und -Sektors, wie z. B.

• calc()
• has()
• color
• font
• overflow
• position (besonders wichtig)
• z-index

CSS lernen, ist wichtiger als Rote -Attributlisten. Es ist ein Schritt-für-Schritt-Prozess, und die fünf Eigenschaften und Selektoren, die ich ausgewählt habe, können Ihnen helfen, ein gutes Fundament zu legen und Sie auf ein tieferes Lernen von CSS vorzubereiten.

Das obige ist der detaillierte Inhalt vonWelches CSS müssen Sie im Jahr 2022 unbedingt wissen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!