Neu in Chrome 118

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Ich bin Adriana Jara. Sehen wir uns an, was in Chrome 118 für Entwickler neu ist.

CSS-Regel @scope.

Mit der At-rule @scope können Entwickler Stilregeln auf ein bestimmtes Wurzelelement anwenden und Elemente entsprechend der Nähe zu diesem Wurzelelement stylen.

Mit @scope können Sie Stile basierend auf der Nähe überschreiben. Das unterscheidet sich von den üblichen CSS-Stilen, die nur anhand der Quellreihenfolge und der 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 Bereich wird der zuletzt deklarierte Stil angewendet.

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 tatsächlich hellrosa. Unter den Links steht der Text „Quellenreihenfolge – Erklärungsstil“.

Mit dem Gültigkeitsbereich können Sie verschachtelte Elemente haben und der Stil, der angewendet wird, ist der des nächsten übergeordneten Elements.

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 Rosa“. Der zweite Link ist dunkelrosa, hat unter dem Linktext den Stil des übergeordneten Elements und ein grünes Häkchen daneben.

Außerdem sparen Sie sich lange, komplizierte Klassennamen und können größere Projekte leichter verwalten und Namenskonflikte vermeiden.

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 Attribut „scope“ können Sie auch eine Komponente stylen, ohne bestimmte Elemente zu stylen, die darin verschachtelt sind. Auf diese Weise können Sie „Löcher“ haben, bei denen der abgegrenzte Stil nicht zutrifft.

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

Darstellung des obigen HTML-Codes mit den Wörtern im Geltungsbereich neben dem ersten und dritten div-Element und dem ausgeschlossenen 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 CSS @scope at-rule beschränken.

prefers-reduced-transparency Medienfunktion

Wir verwenden Media Queries, um die Nutzerfreundlichkeit an die Einstellungen und Gerätebedingungen der Nutzer anzupassen. Diese Chrome-Version enthält einen neuen Wert, mit dem sich die Nutzerfreundlichkeit anpassen lässt: prefers-reduced-transparency.

Ein neuer Wert, den Sie mit Media-Queries testen können, ist prefers-reduced-transparency. Damit können Entwickler Webinhalte an die vom Nutzer ausgewählte Einstellung für reduzierte Transparenz im Betriebssystem anpassen, 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;
  }
}

Mit den Entwicklertools können Sie sich das Ergebnis ansehen:

Weitere Informationen finden Sie in der Dokumentation zu prefers-reduced-transparency.

Korrektur: In einer früheren Version dieses Artikels wurde auf eine neue scripting-Medienfunktion in diesem Release verwiesen. Es wird in Version 120 verfügbar sein.

Verbesserungen am Bereich „Quellen“ in den Entwicklertools

In den Entwicklertools wurden im Bereich Quellen folgende Verbesserungen vorgenommen: Die Arbeitsbereichsfunktion wurde optimiert, insbesondere durch die Umbenennung des Bereichs Quellen > Dateisystem in Arbeitsbereich sowie anderer UI-Texte. Unter Quellen > Arbeitsbereich können Sie Änderungen, die Sie in den Entwicklertools vornehmen, direkt mit Ihren Quelldateien synchronisieren.

Außerdem können Sie die Bereiche auf der linken Seite des Bereichs Quellen jetzt per Drag-and-drop neu anordnen. Im Bereich Quellen kann jetzt Inline-JavaScript in den folgenden Scripttypen in einer ansprechenden Formatierung dargestellt werden: module, importmap und speculationrules. Außerdem wird die Syntax der Scripttypen importmap und speculationrules hervorgehoben, die beide JSON enthalten.

Vor und nach dem Formatieren und Syntax-Hervorheben des Scripts für Spekulationsregeln

Weitere Informationen zu den DevTools-Änderungen in Chrome 118 finden Sie unter Neu in den DevTools.

…und vieles mehr

Natürlich gibt es noch viel mehr.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 118.

Abonnieren

Wenn Sie auf dem Laufenden bleiben möchten, abonnieren Sie den YouTube-Kanal von Chrome Developers. Sie erhalten dann eine E-Mail-Benachrichtigung, sobald wir ein neues Video veröffentlichen.

Ich heiße Adriana Jara und sobald Chrome 119 veröffentlicht wird, erzähle ich Ihnen hier, was es Neues in Chrome gibt.