Neu in Chrome 118

Adriana Jara

Dazu sollten Sie Folgendes wissen:

Mein Name ist Adriana Jara. Sehen wir uns nun an, was es bei Chrome 118 für Entwickler Neues gibt.

CSS-Regel @scope.

Mit der At-Regel @scope können Entwickler Stilregeln auf einen bestimmten Geltungsbereich festlegen und Elemente entsprechend der Nähe zu dieser Geltungsbereich festlegen.

Mit @scope können Sie Stile basierend auf der Nähe überschreiben, was sich von den üblichen CSS-Stilen unterscheidet, die nur basierend auf 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>

wird der angewendete Stil der zuletzt deklarierte Stil sein.

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

Zwei Links, der erste lautet Ich bin Lightpink!&#39; Der zweite lautet „Anderes Rosa“, beide Links sind tatsächlich hellrosa, unter dem Linktext steht „Quellenreihenfolge-Deklarationsstil“.

Mit dem Bereich können Sie verschachtelte Elemente haben. Dabei wird der Stil für den nächstgelegenen Ancestor angewendet.

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

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

Zwei Links, der erste lautet „Ich bin Lightpink!“ Der zweite lautet „Anderes Rosa“, der zweite Link ist dunkelrosa unter dem Linktext „Next Ancestor“-Stil und daneben ein grünes Häkchen.

Mit dem Scope müssen Sie außerdem keine langen, komplizierten Kursnamen schreiben. Außerdem können Sie damit größere Projekte einfacher 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;
  }
}

Mithilfe des Umfangs können Sie eine Komponente auch gestalten, ohne bestimmte Elemente, die darin eingebettet sind, mit einem Stil zu versehen. Auf diese Weise können Sie „Löcher“ haben, bei denen der abgegrenzte Stil nicht gilt.

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

Darstellung des obigen HTML-Codes mit den betreffenden Wörtern 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 Medienabfragen, um Nutzererfahrungen bereitzustellen, die an die Präferenzen und Gerätebedingungen der Nutzer angepasst werden. Mit dieser Chrome-Version wird ein neuer Wert hinzugefügt, 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 ausgewählten Einstellungen anpassen, um die Transparenz im Betriebssystem zu reduzieren, z. B. mit der 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 prüfen, wie es 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 scripting verwiesen, die in dieser Version enthalten ist. Es wird in Version 120 verfügbar sein.

Verbesserungen im Quellenbereich in den Entwicklertools

In den Entwicklertools wurden im Bereich Quellen folgende Verbesserungen vorgenommen: Die Konsistenz wurde durch die Funktion Arbeitsbereich verbessert, insbesondere durch die Umbenennung von Quellen > Bereich Dateisystem zu Arbeitsbereich zusammen mit anderem UI-Text, dem Bereich Quellen > In Workspace können Sie auch Änderungen, die Sie in den Entwicklertools vornehmen, direkt mit Ihren Quelldateien synchronisieren.

Außerdem haben Sie jetzt die Möglichkeit, Bereiche auf der linken Seite des Bereichs Quellen per Drag-and-drop neu anzuordnen. Im Bereich Quellen können jetzt Inline-JavaScript-Code für die folgenden Skripttypen optimiert werden: module, importmap, speculationrules und die Syntax der Skripttypen importmap und speculationrules hervorheben, die beide JSON enthalten.

Vor und nach dem Pretty-Printing und Syntaxhervorhebung des Skripttyps für Spekulationsregeln.

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

…und vieles mehr

Natürlich gibt es noch viele weitere.

Weitere Informationen

Hier werden nur einige wichtige Punkte behandelt. Klicken Sie auf die Links unten, zusätzliche Änderungen in Chrome 118.

Abonnieren

Um immer auf dem Laufenden zu bleiben, abonniere die YouTube-Kanal für Chrome-Entwickler, Außerdem wirst du per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

Hallo, Adriana Jara, und sobald Chrome 119 veröffentlicht ist, erfährst du, was es Neues bei Chrome gibt.