Neu in Chrome 118

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

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 Stil für Quellenbestellungen.

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

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 dunkler 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 Sie 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;
  }
}

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.

Darstellung des HTML-Codes oben, wobei die betreffenden Wörter neben dem ersten und dritten „div“-Element stehen und das Wort neben dem zweiten und vierten „div“-Element ausgeschlossen ist.

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

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

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.

Weitere Informationen

Dies sind nur einige der wichtigsten Punkte. Weitere Änderungen in Chrome 118 finden Sie unter den folgenden Links.

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.