Nieuw in Chrome 112

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

CSS-ondersteuning voor nesten.

Een van onze favoriete CSS-preprocessorfuncties is nu in de taal ingebouwd: neststijlregels.

Vóór het nesten moest elke selector expliciet worden gedeclareerd, afzonderlijk van elkaar. Dit leidt tot herhaling, een grote hoeveelheid stylesheets en een verspreide schrijfervaring.

Voor 
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Na het nesten kunnen selectors worden voortgezet en kunnen gerelateerde stijlregels daarin worden gegroepeerd.

Na 
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Nesten helpt ontwikkelaars door de noodzaak om selectors te herhalen te verminderen en tegelijkertijd stijlregels voor gerelateerde elementen samen te plaatsen. Het kan er ook voor zorgen dat stijlen overeenkomen met de HTML die ze targeten.

Als de .nesting component in het voorbeeld uit het project is verwijderd, kunt u de hele groep verwijderen in plaats van bestanden te zoeken naar gerelateerde selectorinstanties.

Nesten kan helpen bij:

  • Organisatie.
  • Bestandsgrootte verkleinen.
  • Refactoring.

Bekijk dit artikel voor tips om het meeste uit CSS-nesten te halen en de ondersteuning voor nesten in devtools vind je hier .

Algoritme-update voor <dialog> initiële focus.

Het HTML-element <dialog> is de gestandaardiseerde manier om een ​​dialoogvenster of ander interactief onderdeel weer te geven, zoals een afwijsbare waarschuwing of een subvenster, dat boven alle andere inhoud op een webpagina moet worden weergegeven.

Dit HTML-element is de aanbevolen manier om dergelijke inhoud te maken, omdat de functies ervan zijn gebouwd om betere en consistente bruikbaarheid en toegankelijkheid te bieden.

Een van deze functies is het omgaan met welk element de focus krijgt wanneer het dialoogvenster wordt geopend. In deze versie is het algoritme dat dat element selecteert bijgewerkt.

Vanaf nu:

Bij de stappen voor focussering in het dialoogvenster wordt gekeken naar focusseerbare toetsenbordelementen in plaats van naar elk focusseerbaar element. Het <dialog> -element zelf krijgt focus als het autofocus-attribuut is ingesteld

Het <dialog> -element zelf krijgt focus als terugval in plaats van dat de focus wordt "gereset" naar het <body> -element.

Lees de documentatie voor meer details over het <dialog> element.

Handlers voor no-op-fetch van servicemedewerkers overslaan.

Vanaf Chrome 112 wordt de servicemedewerker gestart en wordt de verzending van de luisteraar vanaf het kritieke navigatiepad weggelaten als een user-agent vaststelt dat alle ophaallisteners van de servicemedewerker no-ops zijn.

Deze functie maakt de navigatie van die pagina's sneller.

Het hebben van de fetch-handler was een van de PWA-vereisten voor een web-app om installeerbaar te zijn. We vermoeden dat dit de reden kan zijn dat sommige sites in wezen een lege ophaalhandler hebben. Het starten van een servicemedewerker en het uitvoeren van een no-op-listener brengt echter alleen maar overhead met zich mee, zonder de voordelen die met de juiste servicemedewerker zouden kunnen worden geïmplementeerd, zoals caching of offline mogelijkheden. Chrome slaat ze nu dus over om de navigatie te verbeteren.

Als onderdeel van deze wijziging zal Chrome consolewaarschuwingen weergeven als alle ophaallisteners van de servicemedewerker geen bewerkingen uitvoeren, en ontwikkelaars aanmoedigen deze ophaallisteners te verwijderen.

Waarschuwingen in DevTools voor lege ophaalhandlers voor servicemedewerkers.

En meer!

Natuurlijk is er nog veel meer.

  • De setter voor document.domain is nu verouderd.
  • Er is een origin-proefversie voor de beëindiging van de X-Requested-With header in WebView
  • De recorder in devtools kan nu opnemen met pierce-selectors .

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 112.

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.

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

,

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

CSS-ondersteuning voor nesten.

Een van onze favoriete CSS-preprocessorfuncties is nu in de taal ingebouwd: neststijlregels.

Vóór het nesten moest elke selector expliciet worden gedeclareerd, afzonderlijk van elkaar. Dit leidt tot herhaling, een grote hoeveelheid stylesheets en een verspreide schrijfervaring.

Voor 
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Na het nesten kunnen selectors worden voortgezet en kunnen gerelateerde stijlregels daarin worden gegroepeerd.

Na 
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Nesten helpt ontwikkelaars door de noodzaak om selectors te herhalen te verminderen en tegelijkertijd stijlregels voor gerelateerde elementen samen te plaatsen. Het kan er ook voor zorgen dat stijlen overeenkomen met de HTML die ze targeten.

Als de .nesting component in het voorbeeld uit het project is verwijderd, kunt u de hele groep verwijderen in plaats van bestanden te zoeken naar gerelateerde selectorinstanties.

Nesten kan helpen bij:

  • Organisatie.
  • Bestandsgrootte verkleinen.
  • Refactoring.

Bekijk dit artikel voor tips om het meeste uit CSS-nesten te halen en de ondersteuning voor nesten in devtools vind je hier .

Algoritme-update voor <dialog> initiële focus.

Het HTML-element <dialog> is de gestandaardiseerde manier om een ​​dialoogvenster of ander interactief onderdeel weer te geven, zoals een afwijsbare waarschuwing of een subvenster, dat boven alle andere inhoud op een webpagina moet worden weergegeven.

Dit HTML-element is de aanbevolen manier om dergelijke inhoud te maken, omdat de functies ervan zijn gebouwd om betere en consistente bruikbaarheid en toegankelijkheid te bieden.

Een van deze functies is het omgaan met welk element de focus krijgt wanneer het dialoogvenster wordt geopend. In deze versie is het algoritme dat dat element selecteert bijgewerkt.

Vanaf nu:

Bij de stappen voor focussering in het dialoogvenster wordt gekeken naar focusseerbare toetsenbordelementen in plaats van naar elk focusseerbaar element. Het <dialog> -element zelf krijgt focus als het autofocus-attribuut is ingesteld

Het <dialog> -element zelf krijgt focus als terugval in plaats van dat de focus wordt "gereset" naar het <body> -element.

Lees de documentatie voor meer details over het <dialog> element.

Handlers voor no-op-fetch van servicemedewerkers overslaan.

Vanaf Chrome 112 wordt de servicemedewerker gestart en wordt de verzending van de luisteraar vanaf het kritieke navigatiepad weggelaten als een user-agent vaststelt dat alle ophaallisteners van de servicemedewerker no-ops zijn.

Deze functie maakt de navigatie van die pagina's sneller.

Het hebben van de fetch-handler was een van de PWA-vereisten voor een web-app om installeerbaar te zijn. We vermoeden dat dit de reden kan zijn dat sommige sites in wezen een lege ophaalhandler hebben. Het starten van een servicemedewerker en het uitvoeren van een no-op-listener brengt echter alleen maar overhead met zich mee, zonder de voordelen die met de juiste servicemedewerker zouden kunnen worden geïmplementeerd, zoals caching of offline mogelijkheden. Chrome slaat ze nu dus over om de navigatie te verbeteren.

Als onderdeel van deze wijziging zal Chrome consolewaarschuwingen weergeven als alle ophaallisteners van de servicemedewerker geen bewerkingen uitvoeren, en ontwikkelaars aanmoedigen deze ophaallisteners te verwijderen.

Waarschuwingen in DevTools voor lege ophaalhandlers voor servicemedewerkers.

En meer!

Natuurlijk is er nog veel meer.

  • De setter voor document.domain is nu verouderd.
  • Er is een origin-proefversie voor de beëindiging van de X-Requested-With header in WebView
  • De recorder in devtools kan nu opnemen met doorsteekselectors .

Verder lezen

Dit behandelt slechts enkele belangrijke hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 112.

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.

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