Nieuw in Chrome 118

Adriana Jara

Dit is wat u moet weten:

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.

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

Twee links, de eerste luidt 'Ik ben lichtroze!' de tweede luidt 'Anders roze', beide links zijn eigenlijk lichtroze, onder de links staat de tekst 'bronnenvolgordeverklaring'.

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

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

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

Twee links, de eerste luidt ''Ik'' ben lichtroze!'' de tweede luidt 'Anders roze', de tweede link is donkerder roze, onder de link staat de tekst 'dichtstbijzijnde voorouder'-stijl en er staat een groen vinkje naast.

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

Zonder @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;
}
Met @scoop
<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.

weergave van de bovenstaande html, met de woorden in bereik naast de eerste en derde div en het woord uitgesloten naast de tweede en vierde div.

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

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.

Ook kunt u de deelvensters aan de linkerkant van het Bronnenpaneel nu 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.

Voor en na mooi afdrukken en syntaxisaccentuering van het scripttype voor speculatieregels.

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

En meer!

Natuurlijk is er nog veel meer.

Verder lezen

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

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!