Heim > Artikel > Web-Frontend > Die neuesten CSS-Eigenschaften und APIs für Webdesign im Jahr 2020

Die neuesten CSS-Eigenschaften und APIs für Webdesign im Jahr 2020

WBOYnach vorne: 2023-09-08 14:53:011078Durchsuche

Um Entwicklern dabei zu helfen, ihre Websites mithilfe einer Mischung aus JavaScript und CSS anzupassen, haben wir neue CSS-Eigenschaften entwickelt, die jetzt gängige Browser unterstützen. Einige davon sind unten aufgeführt –

focus-within

Es wurde entwickelt, um die Fokuszugänglichkeit innerhalb eines Elements zu lösen

scroll-snap

Dies ermöglicht natives Scrollen und Verlangsamung

@media(prefers-*)

Hilft beim Anpassen Die Benutzeroberfläche und UX der Seite basieren auf den Gerätepräferenzen des Benutzers und ermöglichen so ein höheres Maß an Personalisierung

* Kann Helligkeit darstellen, Farbe, Farbschema und Kontrast erzwingen, Bewegung reduzieren und Transparenz reduzieren

Position: Sticky

Um die Benutzeroberfläche im Ansichtsfenster zu belassen.

Logikeigenschaften mit Standardlayout

ermöglichen uns dynamische Richtungsabstände innerhalb und um Elemente herum.

Gap-Eigenschaft

Diese Eigenschaft ist jetzt in Flexbox verfügbar. Gap legt fest, dass der Container einen Abstand hat, anstatt jedem untergeordneten Element einen eigenen Abstand zu geben.

Backfrop-Filter

wird verwendet, um die Rückseite von Elementen bequem zu gestalten.

CSS Houdini API

Eine Low-Level-API, die es Entwicklern ermöglicht, Browsern mitzuteilen, wie benutzerdefiniertes CSS gelesen und verstanden werden soll. Entwickler haben jetzt einen benutzerfreundlicheren Zugriff auf das CSS-Objektmodell. In diesen Bereich fallen die Layout-API, die Paint-API, die Parser-API, die Properties & Values-API, das AnimationWorklet, das Typed OM und die Font Metrics API.

Seitenverhältnis

Medienabmessungen beibehalten

Größe

Höhe und Breite in einer Eigenschaft festlegen

min(), max() und clamp()

Einschränkungen für jede CSS-Eigenschaft festlegen

Anzeige: außen innen

Syntax mit doppeltem Wert, um Elemente besser anzupassen

list-style-type

Benutzerdefinierte Stile zu Listen hinzufügen

CSS-Module

Wir können jetzt mithilfe von JavaScript bestimmte Module aus lokalen oder Remote-Dateien anfordern

CSS-Zonen

Bereich mit Inhalt auffüllen

CSS-Subgrid

hilft uns beim Erstellen von Mikrolayouts mithilfe von Mikrolayouts im CSS-Raster.

Beispiel

Das folgende Beispiel zeigt einige dieser Eigenschaften –

Live-Demonstration

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 2%;
   text-align: center;
}
:is(header, main, footer) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:matches(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html>

Ausgabe

Dies führt zu den folgenden Ergebnissen –

2020 年网页设计最新 CSS 属性和 API

Das obige ist der detaillierte Inhalt vonDie neuesten CSS-Eigenschaften und APIs für Webdesign im Jahr 2020. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css Filter 对象 ux ui

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Beherrschen Sie die Flex-Layout-Fähigkeiten von CSS3 und erstellen Sie ganz einfach eine moderne Weboberfläche.Nächster Artikel：Beherrschen Sie die Flex-Layout-Fähigkeiten von CSS3 und erstellen Sie ganz einfach eine moderne Weboberfläche.

In Verbindung stehende Artikel

Mehr sehen