Nieuw in Chrome 118

Adriana Jara

Dit is wat u moet weten:

• Declareer specifieke stijlen binnen een component met de @scope css-regel .
• Er is een nieuwe mediafunctie: prefers-reduced-transparency .

• DevTools heeft verbeteringen in het Bronnenpaneel .

• En er is nog veel meer .

Ik ben Adriana Jara. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 118.

CSS @scope regel.

Met de @scope at-regel kunnen ontwikkelaars stijlregels beperken tot een bepaalde scoping root, en stijlelementen aanpassen aan de nabijheid van die scoping root.

Met @scope kun je stijlen overschrijven op basis van nabijheid, wat anders is dan de gebruikelijke CSS-stijlen die alleen worden toegepast op basis van bronvolgorde en specificiteit. In het volgende voorbeeld zijn er twee thema's.

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

zonder reikwijdte is de toegepaste stijl de laatst aangegeven stijl.

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

Met scope kun je geneste elementen hebben en de stijl die van toepassing is, is die voor de dichtstbijzijnde voorouder.

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

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

Scope bespaart u ook het schrijven van lange, ingewikkelde klassennamen, en maakt het gemakkelijk om grotere projecten te beheren en naamconflicten te voorkomen.

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

Met scope kun je een component ook stylen zonder bepaalde dingen die erin zijn genest te stylen. In zekere zin kun je 'gaten' hebben waar de scoped-stijl niet van toepassing is.

Net als in het volgende voorbeeld kunnen we stijl op de tekst toepassen en besturingselementen uitsluiten, of omgekeerd.

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

Bekijk het artikel Beperk het bereik van uw selectors met de CSS @scope at-regel voor meer informatie.

prefers-reduced-transparency

We gebruiken mediaquery's om gebruikerservaringen te bieden die zich aanpassen aan de voorkeuren van de gebruiker en de apparaatomstandigheden. Deze Chrome-versie voegt een nieuwe waarde toe die kan worden gebruikt om de gebruikerservaring aan te passen: prefers-reduced-transparency .

Een nieuwe waarde die u kunt testen met mediaquery's is prefers-reduced-transparency , waarmee ontwikkelaars webinhoud kunnen aanpassen aan door de gebruiker geselecteerde voorkeur voor verminderde transparantie in het besturingssysteem, zoals de instelling 'Verminder transparantie' op macOS. Geldige opties zijn reduce of no-preference .

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

En u kunt controleren hoe het eruit ziet met DevTools:

Voor meer informatie kunt u de documentatie met voorkeur voor verminderde transparantie bekijken.

Correctie: een eerdere versie van dit artikel verwees naar een nieuwe scripting in deze release. Het zal feitelijk in versie 120 zijn.

Verbeteringen in het Bronnenpaneel in DevTools

DevTools heeft de volgende verbeteringen in het paneel Bronnen : de werkruimtefunctie verbeterde de consistentie, met name door het hernoemen van het deelvenster Bronnen > Bestandssysteem naar Werkruimte, samen met andere UI-tekst. Met Bronnen > Werkruimte kunt u ook wijzigingen die u in DevTools aanbrengt, rechtstreeks synchroniseren met uw bronbestanden.

Je kunt nu ook de deelvensters aan de linkerkant van het Bronnenpaneel opnieuw rangschikken door te slepen en neer te zetten, en het Bronnenpaneel kan nu inline JavaScript mooi afdrukken binnen de volgende scripttypen: module , importmap , speculationrules en markeer de syntaxis van importmap en speculationrules scripttypen, die beide JSON bevatten.

Bekijk Wat er nieuw is in DevTools voor meer informatie over Chrome 118 DevTools-updates.

En meer!

Natuurlijk is er nog veel meer.

• De WebUSB API is nu beschikbaar voor servicemedewerkers die zijn geregistreerd door browserextensies, waardoor ontwikkelaars de API kunnen gebruiken bij het reageren op extensiegebeurtenissen.

• Om ontwikkelaars te helpen de wrijving in de betalingsverzoekstromen te verminderen, hebben we de vereiste voor gebruikersactivatie in Payment Request en Secure Payment Confirmation verwijderd.

• De releasecyclus van Chrome wordt korter , stabiele versies zullen elke drie weken worden uitgebracht, te beginnen met Chrome 119 die over drie weken beschikbaar zal zijn.

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 118.

• Wat is er nieuw in Chrome DevTools (118)
• Beëindigingen en verwijderingen van Chrome 118
• ChromeStatus.com-updates voor Chrome 118
• Wijzigingslijst voor Chromium-bronrepository's
• Chrome-releasekalender

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Yo soy Adriana Jara, en zodra Chrome 119 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!

Adriana Jara

Dit is wat u moet weten:

• Declareer specifieke stijlen binnen een component met de @scope css-regel .
• Er is een nieuwe mediafunctie: prefers-reduced-transparency .

• DevTools heeft verbeteringen in het Bronnenpaneel .

• En er is nog veel meer .

Ik ben Adriana Jara. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 118.

CSS @scope regel.

Met de @scope at-regel kunnen ontwikkelaars stijlregels beperken tot een bepaalde scoping root, en stijlelementen aanpassen aan de nabijheid van die scoping root.

Met @scope kun je stijlen overschrijven op basis van nabijheid, wat anders is dan de gebruikelijke CSS-stijlen die alleen worden toegepast op basis van bronvolgorde en specificiteit. In het volgende voorbeeld zijn er twee thema's.

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

zonder reikwijdte is de toegepaste stijl de laatst aangegeven stijl.

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

Met scope kun je geneste elementen hebben en de stijl die van toepassing is, is die voor de dichtstbijzijnde voorouder.

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

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

Scope bespaart u ook het schrijven van lange, ingewikkelde klassennamen, en maakt het gemakkelijk om grotere projecten te beheren en naamconflicten te voorkomen.

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

Met scope kun je een component ook stylen zonder bepaalde dingen die erin zijn genest te stylen. In zekere zin kun je 'gaten' hebben waar de scoped-stijl niet van toepassing is.

Net als in het volgende voorbeeld kunnen we stijl op de tekst toepassen en besturingselementen uitsluiten, of omgekeerd.

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

Bekijk het artikel Beperk het bereik van uw selectors met de CSS @scope at-regel voor meer informatie.

prefers-reduced-transparency

We gebruiken mediaquery's om gebruikerservaringen te bieden die zich aanpassen aan de voorkeuren van de gebruiker en de apparaatomstandigheden. Deze Chrome-versie voegt een nieuwe waarde toe die kan worden gebruikt om de gebruikerservaring aan te passen: prefers-reduced-transparency .

Een nieuwe waarde die u kunt testen met mediaquery's is prefers-reduced-transparency , waarmee ontwikkelaars webinhoud kunnen aanpassen aan door de gebruiker geselecteerde voorkeur voor verminderde transparantie in het besturingssysteem, zoals de instelling 'Verminder transparantie' op macOS. Geldige opties zijn reduce of no-preference .

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

En u kunt controleren hoe het eruit ziet met DevTools:

Voor meer informatie kunt u de documentatie met voorkeur voor verminderde transparantie bekijken.

Correctie: een eerdere versie van dit artikel verwees naar een nieuwe scripting in deze release. Het zal feitelijk in versie 120 zijn.

Verbeteringen in het Bronnenpaneel in DevTools

DevTools heeft de volgende verbeteringen in het paneel Bronnen : de werkruimtefunctie verbeterde de consistentie, met name door het hernoemen van het deelvenster Bronnen > Bestandssysteem naar Werkruimte, samen met andere UI-tekst. Met Bronnen > Werkruimte kunt u ook wijzigingen die u in DevTools aanbrengt, rechtstreeks synchroniseren met uw bronbestanden.

Je kunt nu ook de deelvensters aan de linkerkant van het Bronnenpaneel opnieuw rangschikken door te slepen en neer te zetten, en het Bronnenpaneel kan nu inline JavaScript mooi afdrukken binnen de volgende scripttypen: module , importmap , speculationrules en markeer de syntaxis van importmap en speculationrules scripttypen, die beide JSON bevatten.

Bekijk Wat er nieuw is in DevTools voor meer informatie over Chrome 118 DevTools-updates.

En meer!

Natuurlijk is er nog veel meer.

• De WebUSB API is nu beschikbaar voor servicemedewerkers die zijn geregistreerd door browserextensies, waardoor ontwikkelaars de API kunnen gebruiken bij het reageren op extensiegebeurtenissen.

• Om ontwikkelaars te helpen de wrijving in de betalingsverzoekstromen te verminderen, hebben we de vereiste voor gebruikersactivatie in Payment Request en Secure Payment Confirmation verwijderd.

• De releasecyclus van Chrome wordt korter , stabiele versies zullen elke drie weken worden uitgebracht, te beginnen met Chrome 119 die over drie weken beschikbaar zal zijn.

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Bekijk de onderstaande links voor aanvullende wijzigingen in Chrome 118.

• Wat is er nieuw in Chrome DevTools (118)
• Beëindigingen en verwijderingen van Chrome 118
• ChromeStatus.com-updates voor Chrome 118
• Wijzigingslijst voor Chromium-bronrepository's
• Chrome-releasekalender

Abonneren

Als u op de hoogte wilt blijven, abonneert u zich op het YouTube-kanaal van Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Yo soy Adriana Jara, en zodra Chrome 119 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!