Was ist neu seit CSS3 im Jahr 2015?

Die Auswirkungen von CSS3 waren unbestreitbar. Eine Fülle von Funktionen - Gradienten, Animationen, abgerundete Ecken, Boxschatten, Transformationen - revolutionierte CSS -Entwicklung. Die weit verbreitete Einführung von CSS3 (und dem damit verbundenen "HTML5" -Moniker) führte zu einer Flut von Lernressourcen. Viele Entwickler haben ihre CSS -Fähigkeiten seitdem nicht wesentlich aktualisiert. Dieser Artikel überbrückt diese Lücke.

Scott Vandeheys "modernes CSS auf den Punkt gebracht" hebt diese Lernkurve hervor. Er stellt den abnehmenden Bedarf an Präprozessoren (einschließlich Autoprefixer und Polyfills für zukünftige Merkmale) und die kontextspezifische Relevanz von CSS-in-Js (hauptsächlich nützlich innerhalb von JavaScript-Heavy-Projekten). Er betont, wie wichtig es ist, benutzerdefinierte Eigenschaften, Flexbox und Gitter zu beherrschen.

Wenn wir darauf aufbauen, werden wir seit ungefähr 2015 wichtige CSS -Fortschritte untersuchen:

Post-CSS3-Verbesserungen

Layoutrevolution: Flexbox und Gitter

Flexbox und Grid sind für moderne CSS von grundlegender Bedeutung. Die Stromversorgung von Grid wird durch Subgrid- und Mauerwerkslayouts verstärkt (obwohl sich die Zuverlässigkeit des Browsers immer noch entwickelt).

 .Card {
  Anzeige: Grid;
  Grid-Template-Säulen: 150px 1fr;
  Lücke: 1Rem;
}
.Card .nav {
  Anzeige: Flex;
  Lücke: 0,5Rem;
}

CSS -benutzerdefinierte Eigenschaften: Design -Token und Themen

Benutzerdefinierte Eigenschaften sind entscheidend für die Verwaltung von Design -Token, die Gewährleistung der Konsistenz und die Vereinfachung der Wartung. Die Implementierung des Dark -Modus ist ein Paradebeispiel. Ganze Websites können hauptsächlich mit benutzerdefinierten Eigenschaften gestaltet werden, indem sie Frameworks wie Rückenwind -CSS (ein beliebter, wenn auch spaltender Ansatz) ergänzen.

 html {
  -BGColor: #70F1D9;
  -Basis: Klemme (1,833Rem, 2VW 1Rem, 3REM);
  -FONT-SIZE-LRG: Klemme (1,375REM, 2VW 1REM, 2,25REM);
}

html.dark {
  -BGColor: #2D283E;
}

Präferenzabfragen: Benutzerorientiertes Design

Präferenzabfragen, Erweiterung herkömmlicher Medienabfragen, Erkennung von Benutzerpräferenzen (z. B. prefers-reduced-motion , prefers-color-scheme ). Dies ermöglicht mehr zugängliche und personalisierte Benutzererlebnisse.

 @media (bevorzugt-reduzierte Bewegung: reduzieren) {
  * {{
    Animationsdauer: 0,001s! Wichtig;
  }
}

@media (bevorzugt Farbscheme: dunkel) {
  :Wurzel {
    -BG: #222;
  }
}

Verbesserte Farbsyntax und neue Farbräume

Die Farbsyntax hat sich so weiterentwickelt, dass Alpha -Werte direkt innerhalb von Funktionen (z. B. rgb(0 0 255 / 0.5) ) einbezogen werden. Neue Farbräume color() , lab() , lch() , hwb() - - selbstverlängerte farbige Darstellungsfunktionen.

 .block {
  Hintergrund: HSL (0 33% 53% / 0,5);
  Hintergrund: RGB (255 0 0);
  Hintergrund: Farbe (Anzeige-P3 0,9176 0,2003 0,1386);
  Hintergrund: Labor (52,2345% 40,1645 59,9971 / .5);
  Hintergrund: HWB (194 0% 0% / .5);
}

Variable Schriftarten: Verbesserte Typografie

Variable Schriftarten bieten Leistungsverbesserungen und Designflexibilität im Vergleich zu herkömmlichen Web -Schriftarten. Während Farbschriften existieren, haben sie keine weit verbreitete Akzeptanz erhalten.

 Körper {
  Schriftfamilie: 'rekursiv', sans-serif;
  Schriftgewicht: 950;
  Schriften-Variations-Festlegung: 'Mono' 1, 'Casl' 1;
}

SVG -Integration über Pfade, Ausschneiden und Maskieren

CSS integriert sich jetzt nahtlos in SVG und ermöglicht formbasierte Clipping ( clip-path ), Maskierung ( mask ), Pfadanimation ( offset-path ) und Pfadmanipulation ( d Attribut).

 .ausgeschnitten {
  Clip-Pfad: Polygon (25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

CSS -Filter: Bild- und Elementmanipulation

CSS-Filter bieten umfangreiche Bildmanipulationsfunktionen ( filter ), Hintergrundmischung ( background-blend-mode ), Hintergrundfilterung ( backdrop-filter ) und Elementmischung ( mix-blend-mode ).

 .deaktivieren {
  Filter: Blur (1px) Graustufen (1);
}

Houdini: CSS mit JavaScript erweitern

Houdini bietet JavaScript-angetriebene CSS-Erweiterungen an, einschließlich der Lack-API, der Eigenschaften und der Werte-API, der Layout-API und der Animations-API. Während die Browserunterstützung unterschiedlich ist, sind seine Modularität und Benutzerfreundlichkeit vielversprechend.

 importieren "https://unpkg.com/extra.css/confetti.js";

Styling von Shadow DOM und Webkomponenten

Shadow DOM wirkt sich auf Styling -Webkomponenten aus und erfordert das Verständnis externer Styling -Techniken.

 My-component {
  -BG: LightGreen;
}

Die Zukunft von CSS

Während es entscheidend ist, aktuelle Merkmale aufzuholen, sind mehrere vielversprechende Fortschritte am Horizont: Containerfragen, Containereinheiten, unabhängige Transformationen, Verschachtelung, Kaskadenschichten, verbesserte Ansichtsfenstereinheiten, die :has() Selektor- und Scroll -Timelines.

Dieser Überblick bietet ein umfassendes Update zu CSS-Fortschritten seit der CSS3-Ära und bietet Entwicklern das Wissen, um moderne, effiziente und benutzerfreundliche Websites aufzubauen.

Das obige ist der detaillierte Inhalt vonWas ist neu seit CSS3 im Jahr 2015?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!