Dazu sollten Sie Folgendes wissen:
- Sie können bestimmte Stile innerhalb einer Komponente mit der CSS-Regel
@scope
deklarieren. - Es gibt eine neue Medienfunktion:
prefers-reduced-transparency
. Für Entwicklertools wurden im Bereich Quellen Verbesserungen vorgenommen.
Und es gibt viele weitere.
Mein Name ist Adriana Jara. Jetzt sehen wir uns an, was es für Entwickler Neues bei Chrome 118 gibt.
CSS-Regel @scope
.
Mit der @scope
-at-Regel können Entwickler Stilregeln auf einen bestimmten Umfang festlegenden Stamm festlegen und Elemente entsprechend ihrer Nähe zu dieser Hierarchie gestalten.
Mit @scope
können Sie Stile basierend auf der Nähe überschreiben, die sich von den üblichen CSS-Stilen unterscheidet, die nur aufgrund von Quellreihenfolge und Spezifität angewendet werden. Im folgenden Beispiel gibt es zwei Themen.
<div class="lightpink-theme">
<a href="#">I'm lightpink!</a>
<div class="pink-theme">
<a href="#">Different pink!</a>
</div>
</div>
ohne Umfang ist der angewendete Stil der letzte deklariert.
.pink-theme a { color: hotpink; } .lightpink-theme a { color: lightpink; }
Mit dem Bereich können Sie verschachtelte Elemente haben und es wird der Stil für den nächsten Ancestor angewendet.
@scope (.pink-theme) { a { color: hotpink; } } @scope (.lightpink-theme){ a { color: lightpink; } }
Mit dem Umfang müssen Sie außerdem keine langen, komplizierten Kursnamen mehr schreiben. Außerdem können Sie größere Projekte einfacher verwalten und Namenskonflikte vermeiden.
<div class="first-container"> <h1 class="first-container__main-title"> I'm the main title</h1> </div> <div class="second-container"> <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1> </div>
.first-container__main-title { color: grey; } .second-container__main-title { color: mediumturquoise; }
<div class="first-container"> <h1 class="main-title"> I'm the main title</h1> </div> <div class="second-container"> <h1 class="main-title"> I'm the main title, but somewhere else</h1> </div>
@scope(.first-container){ .main-title { color: grey; } } @scope(.second-container){ .main-title { color: mediumturquoise; } }
Mit dem Umfang können Sie eine Komponente auch gestalten, ohne bestimmte Elemente, die darin eingebettet sind, mit einem Stil zu versehen. Es gibt also Lücken, in denen der auf einen Bereich reduzierte Stil nicht angewendet wird.
Wie im folgenden Beispiel könnten wir den Text mit Stilen versehen und Steuerelemente ausschließen oder umgekehrt.
<div class="component">
<div class="purple">
<h1>Drink water</h1>
<p class="purple">hydration is important</p>
</div>
<div class="click-here">
<p>not in scope</p>
<button>click here</button>
</div>
<div class="purple">
<h1 class="purple">Exercise</h1>
<p class="purple">move it move it</p>
</div>
<div class="link-here">
<p>Excluded from scope</p>
<a href="#"> link here </a>
</div>
</div>
@scope (.component) to (.click-here, .link-here) {
div {
color: purple;
text-align: center;
font-family: sans-serif;
}
}
Weitere Informationen finden Sie im Artikel Reichweite von Selektoren mit der CSS-@scope at-rule beschränken.
prefers-reduced-transparency
-Medienfunktion
Wir verwenden Medienabfragen, um Nutzern ein Erlebnis zu bieten, das sich an die Präferenzen und Gerätebedingungen des Nutzers anpasst. Diese Chrome-Version bietet einen neuen Wert, der zur Anpassung der Nutzererfahrung verwendet werden kann: prefers-reduced-transparency
.
Ein neuer Wert, den Sie mit Medienabfragen testen können, ist prefers-reduced-transparency
. Damit können Entwickler Webinhalte an die vom Nutzer gewählten Einstellungen anpassen, um die Transparenz im Betriebssystem zu reduzieren, z. B. die Einstellung „Transparenz reduzieren“ unter macOS. Gültige Optionen sind reduce
und no-preference
.
.translucent {
opacity: 0.4;
}
@media (prefers-reduced-transparency) {
.translucent {
opacity: 0.8;
}
}
Und mit den Entwicklertools können Sie prüfen, wie das aussieht:
Weitere Informationen finden Sie in der Dokumentation zu prefers-Reduced-transparency.
Korrektur: In einer früheren Version dieses Artikels wurde auf eine neue Medienfunktion von scripting
verwiesen, die in dieser Version enthalten ist. Tatsächlich wird es Version 120 sein.
Verbesserungen im Bereich „Quellen“ in den Entwicklertools
In den Entwicklertools wurden die folgenden Verbesserungen im Bereich Quellen vorgenommen: Die Funktion Arbeitsbereich verbesserte die Konsistenz, insbesondere durch Umbenennung des Bereichs Quellen > Dateisystem in Arbeitsbereich und weiterer UI-Text. Unter Quellen > Arbeitsbereich kannst du Änderungen, die du in den Entwicklertools vornimmst, auch direkt mit deinen Quelldateien synchronisieren.
Außerdem können Sie jetzt Bereiche auf der linken Seite des Bereichs Quellen per Drag-and-drop neu anordnen. Im Bereich Quellen kann jetzt Inline-JavaScript in den folgenden Skripttypen optimiert werden: module
, importmap
, speculationrules
und die Syntax der Skripttypen importmap
und speculationrules
hervorheben, die beide JSON enthalten.
Unter Neu in den Entwicklertools finden Sie weitere Updates zu den Updates für die Chrome 118-Entwicklertools.
…und vieles mehr
Natürlich gibt es noch viel mehr.
Die WebUSB API ist jetzt für Service Workers verfügbar, die über Browsererweiterungen registriert wurden. So können Entwickler die API bei der Reaktion auf Erweiterungsereignisse verwenden.
Wir möchten Entwicklern helfen, reibungslose Abläufe bei Zahlungsanfragen zu optimieren. Aus diesem Grund entfällt in
Payment Request
undSecure Payment Confirmation
die Anforderung zur Nutzeraktivierung.Der Releasezyklus von Chrome wird kürzer. Alle drei Wochen werden stabile Versionen veröffentlicht, beginnend mit Chrome 119, das in drei Wochen verfügbar sein wird.
Weitere Informationen
Dies sind nur einige der wichtigsten Punkte. Weitere Änderungen in Chrome 118 finden Sie unter den folgenden Links.
- Neu in den Chrome-Entwicklertools (118)
- Einstellung und Entfernung von Chrome 118
- ChromeStatus.com-Updates für Chrome 118
- Änderungsliste des Chromium-Quell-Repositorys
- Release-Kalender für Chrome
Abo
Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal für Chrome-Entwickler. Wir benachrichtigen Sie per E-Mail, wenn wir ein neues Video veröffentlichen.
Hallo Adriana Jara, und sobald Chrome 119 veröffentlicht wird, informiere ich Sie über die Neuheiten in Chrome.