Neu in Chrome 118

Adriana Jara
Adriana Jara

Dazu sollten Sie Folgendes wissen:

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 Umfangsstammbereich beschränken und Elemente entsprechend der Nähe dieses Stammstamms gestalten.

Mit @scope können Sie Stile basierend auf der Nähe überschreiben. Diese Stile unterscheiden sich von den üblichen CSS-Stilen, die nur anhand der Reihenfolge und Spezifität der Quelle 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 zuletzt deklarierte Stil.

Ohne @scope
.pink-theme a { color: hotpink; }
.lightpink-theme a { color: lightpink; }

Zwei Links, der erste lautet „Ich bin hellrosa!“, der zweite „Anderes Rosa“. Beide Links sind in Wirklichkeit hellrosa, unter dem Linktext steht der Erklärungsstil für Quellenreihenfolge.

Mit dem Bereich können Sie verschachtelte Elemente haben und der angewendete Stil ist der Stil für den nächstgelegenen Ancestor.

Mit @scope
@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

Zwei Links, der erste lautet „Ich bin Hellrosa!“, der zweite „Anderes Pink“, der zweite Link ist ein dunkleres Rosa, unter dem Linktext „Nächstes Ancestor-Stil“ und daneben ein grünes Häkchen.

Mit dem Umfang müssen Sie außerdem keine langen, komplizierten Kursnamen mehr schreiben. Außerdem können größere Projekte einfacher verwaltet und Namenskonflikte vermieden werden.

Ohne @scope
<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;
}
Mit @scope
<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 auch eine Komponente gestalten, ohne bestimmte Elemente, die darin verschachtelt sind, mit einem Stil zu versehen. So können Sie auch „Löcher“ haben, bei denen der auf einen Bereich reduzierte Stil nicht angewendet wird.

Wie im folgenden Beispiel könnten wir Stil auf den Text anwenden und Steuerelemente ausschließen oder umgekehrt.

Darstellung des HTML-Codes oben, wobei die Wörter im Geltungsbereich neben dem ersten und dritten div-Element stehen und das ausgeschlossene Wort neben dem zweiten und vierten div-Element.

<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.

Medienfunktion „prefers-reduced-transparency

Wir verwenden Medienabfragen, um Nutzererfahrungen zu bieten, die sich an die Präferenzen und Gerätebedingungen des Nutzers anpassen. Diese Chrome-Version bietet einen neuen Wert, der zur Anpassung der Nutzererfahrung verwendet werden kann: prefers-reduced-transparency.

Ein neuer Wert, der mit Medienabfragen getestet werden kann, ist prefers-reduced-transparency. Damit können Entwickler Webinhalte an die vom Nutzer ausgewä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 prefers-reduced-transparency.

Korrektur: In einer früheren Version dieses Artikels wurde auf eine neue Medienfunktion von scripting verwiesen, die in diesem Release enthalten ist. Tatsächlich wird es in Version 120 sein.

Verbesserungen im Bereich „Quellen“ in den Entwicklertools

DevTools hat die folgenden Verbesserungen im Bereich Quellen: Die Funktion workspace hat die Konsistenz verbessert. Vor allem wurde der Bereich Quellen > Dateisystem zusammen mit anderem UI-Text in Arbeitsbereich umbenannt. 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.

Vor und nach der Schlichtung und Syntaxhervorhebung des Skripttyps von Spekulationsregeln.

Weitere Informationen zu den Aktualisierungen der Entwicklertools für Chrome 118 finden Sie unter Neue Funktionen in den Entwicklertools.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Weitere Informationen

Hier sind nur einige der wichtigsten Punkte aufgeführt. Unter den folgenden Links findest du weitere Änderungen in Chrome 118.

Abonnieren

Abonnieren Sie den YouTube-Kanal für Chrome-Entwickler, um immer auf dem Laufenden zu bleiben. Wir benachrichtigen Sie dann per E-Mail, wenn wir ein neues Video veröffentlichen.

Hallo Adriana Jara.