Chrom 133 Goodies

Die Arbeit des Chrome -Teams muss aufregend sein! Wenn Sie bei der neuesten Browser-Version aus erster Hand sind und coole Demos machen, um neue Funktionen zu zeigen, muss sich großartig anfühlen. Natürlich beneide ich es überhaupt nicht! (Sie fragen warum?)

Zurück zu dem Punkt, haben Sie die Freisetzungsnotizen von Chrome 133 gesehen? Es ist derzeit in Beta, aber das Chrome -Team hat eine Reihe großartiger neuer Artikel und beeindruckende Demos veröffentlicht, die schwer zu ignorieren sind. Ich beschloss, sie zusammenzustellen.

attr() weit verbreitete Funktionen!

Wir konnten seit einiger Zeit HTML -Attribute in CSS verwenden, aber es ist auf content Attribute und Parse -Saiten beschränkt.

<h1 data-color="orange">Some text</h1>

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

Bramus zeigt, wie es in Chrome 133 für jedes CSS -Attribut verwendet wird, einschließlich benutzerdefinierter Attribute. Zum Beispiel können wir den Wert des Attributs erhalten und es für das Attribut color des Elements verwenden:

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

Dies ist natürlich ein einfaches Beispiel. Aber es zeigt, dass es hier drei Komponenten gibt:

1. Eigenschaften (Datenfarbe)
2. Typ (Typ ())
3. Arbitrage Value (https://www.php.cn/link/93ac0c50dd620dc7b88e5Fe05c70e15bffff)

Attribute werden von uns selbst definiert. Es ist sehr bequem, Wildcards in Tags einfügen zu können und sie für Stileinstellungen zu verwenden. type() ist eine neue Funktion, die CSS hilft, die Art des verarbeiteten Werts zu identifizieren. Wenn wir numerische Werte verwenden, können wir eine prägnantere Schreibmethode verwenden. Angenommen, wir verwenden Attribute, um die Schriftgröße eines Elements festzulegen:

<div data-size="20">Some text</div>

Jetzt können wir das Attribut font-size (Einheit in PX) festlegen:

h1 {
  font-size: attr(data-size px, 16);
}

Arbitrage -Werte sind optional und können je nach Anwendungsfall nicht erforderlich sind.

Scrolling -Status in Containerabfrage!

Das ist erstaunlich! Wenn Sie jemals eine Möglichkeit haben wollten, das klebrige Element zu stylen, wenn es sich in einem "klebrigen" Zustand befindet, wissen Sie, wie cool es ist, eine solche Funktion zu haben. Adam Argyle verwendet das klassische Muster der alphabetischen Liste und wendet Stile auf den Buchstabentitel an, wenn es an die Spitze des Ansichtsfensters eingefügt wird. Gleiches gilt für das Scrollen von Schnappelementen und Scrollen -Containerelementen.

Mit anderen Worten, wenn die Elemente "Stick", "Snap" und "Scrollable" sind, können wir sie stylen.

Ein kleines Beispiel, das Sie im Chrombrowser öffnen müssen:

Die Gesamtidee (ich weiß jetzt nur so viel) ist, dass wir einen Container registrieren ... einen Container, den wir abfragen können. Wir setzen einen container-type für den Container, der den von uns verwendeten Scroll -Typ ist. In diesem Fall verwenden wir eine klebrige Positionierung, bei der das Element oben auf der Seite "einfügen".

<h1 data-color="orange">Some text</h1>

Der Container kann sich nicht selbst abfragen, daher muss er im Grunde ein Wrapper für die Elemente sein, die wir einfügen möchten. Das Menü ist etwas Besonderes, da wir das <nav></nav> -Element haben, das normalerweise mit einer ungeordneten Linkliste besiedelt ist. Unser <nav></nav> kann also als Container für unsere Abfrage verwendet werden, da wir die ungeordnete Liste tatsächlich oben auf der Seite einfügen.

h1::before {
  content: ' (Color: ' attr(data-color) ') ';
}

wir können die klebrige Logik direkt auf <nav></nav> setzen, da sie tatsächlich den eingefügten Inhalt enthält:

h1 {
  color: attr(data-color type(<color>), https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff)
}</color>

Wenn wir eine klebrige Fußzeile anstelle eines Menüs verwenden, können wir stuck: bottom verwenden. Aber der Punkt ist, dass wir, sobald das <nav></nav> -Element nach oben geklebt ist, Stile im Block @container wie folgt darauf anwenden können:

<div data-size="20">Some text</div>

andere Selektoren darin scheinen auch zu funktionieren. Wenn die Navigation beispielsweise klebrig ist, können wir den Link im Menü ändern:

h1 {
  font-size: attr(data-size px, 16);
}

Also ja. Wie gesagt, Teil des Chrome -Entwicklungsteams zu sein, muss es cool sein, mit diesen Funktionen zu beginnen. Vielen Dank an Bramus und Adam, dass Sie uns weiterhin neue Funktionen vorgestellt haben und die große Anstrengung, eine so großartige Demo zu machen.

Das obige ist der detaillierte Inhalt vonChrom 133 Goodies. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!