Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chrome 99

Pete LePage

Dit is wat u moet weten:

Het aftellen naar versie 100 van Chrome en Firefox is nog maar een paar weken verwijderd.
CSS-cascadelagen geven u meer controle over uw CSS en helpen stijl-specificiteitsconflicten te voorkomen.
Met de methode showPicker() kunt u programmatisch een browserkiezer weergeven voor <input> -elementen zoals date , color en datalist .
En er is nog veel meer .

Ik ben Pete LePage . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 99.

Chroom 100 en Firefox 100

Chrome 100 wordt eind maart (2022) verzonden en Firefox 100 wordt kort daarna begin mei verzonden. Beide zijn een belangrijke mijlpaal in het versienummer en gaan over naar drie cijfers. Maar als uw code twee cijfers verwacht, kan het nieuwe versienummer problemen voor u veroorzaken.

Elke code die versienummers controleert of de user-agentstring parseert, moet worden gecontroleerd om er zeker van te zijn dat er geen problemen optreden.

Chrome markeert de pagina met de nieuwe optie #force-major-version-to-100

In Chrome verandert de vlag #force-major-version-to-100 het huidige versienummer in 100.

En in het menu Instellingen van Firefox Nightly kunt u de optie "Firefox 100 User-Agent String" inschakelen. Het is een goed idee om uw site te testen, zodat u zeker weet dat alles naar verwachting werkt.

Bekijk binnenkort Chrome en Firefox om de hoofdversie 100 te bereiken voor volledige details.

CSS-cascadelagen

Ondersteuning voor CSS Cascade Layers en de CSS @layer -regel komt in Chrome 99. Ze bieden explicietere controle over uw CSS-bestanden om stijlspecificiteitsconflicten te voorkomen. Dit is vooral handig voor grote codebases, ontwerpsystemen en bij het beheren van stijlen van derden in applicaties.

Ze introduceren een nieuwe laag in de CSS- cascade . Bij gelaagde stijlen is de prioriteit van een laag altijd belangrijker dan de specificiteit van een selector.

Illustratie uit een projectdemo van de uitbraak van de gebruikersinterface

Als u een link probeert op te maken in een .card , zult u binnen een .post merken dat de meer specifieke selector zal worden toegepast. Door de @layer -regel te gebruiken, kunt u explicieter zijn over de stijlspecificiteit van elke stijl en ervoor zorgen dat de linkstijl op uw kaart de linkstijl in uw bericht overschrijft.

@layer base {
  a {
    font-weight: 800;
    color: red;
  }

  .link {
    color: blue;
  }
}

Dit komt door de cascadevoorrang. Gelaagde stijlen creëren nieuwe cascadevlakken.

Cascadelagen die de CSS @layer -regel gebruiken, worden ondersteund in Chrome 99, Firefox 97 en Safari 15.4 Bèta. Bekijk Cascade-lagen die naar uw browser komen voor meer informatie.

showPicker() voor invoerelementen

Lange tijd hebben we onze toevlucht moeten nemen tot aangepaste widgetbibliotheken of hacks om een datumkiezer weer te geven. Er is een nieuwe showPicker() -methode op HTML InputElements . Het is de canonieke manier om een browserkiezer weer te geven, niet alleen voor date , maar ook time , color en andere <input> -elementen met pickers.

Schermafbeeldingen van browserkiezers — Browserdatumkiezers in Chrome desktop, Chrome mobile, Safari desktop, Safari mobile en Firefox desktop (juli 2021).

Om het te gebruiken, roep showPicker() op het <input> element aan. In dit voorbeeld heb ik het in een try…catch blok gewikkeld. Hierdoor kan ik terugvallen als de browser de API niet ondersteunt of de kiezer niet kan weergeven. Zo zorgen we ervoor dat gebruikers nog steeds een goede ervaring krijgen.

const button = document.querySelector("button");
const dateInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    dateInput.showPicker();
    // A date picker is shown.
  } catch (error) {
    // Use an external library when this fails.
  }
});

Bekijk Een browserkiezer tonen voor datum, tijd, kleur en bestanden voor volledige details en alle verschillende <input> -typen waarvoor je showPicker() kunt gebruiken.

En meer!

Natuurlijk is er nog veel meer.

De Canvas2D API is bijgewerkt en heeft nieuwe functionaliteit toegevoegd, waaronder:

Twee nieuwe evenementen voor ContextLost en ContextRestored
Een willReadFrequently optie
Meer ondersteuning voor CSS-tekstmodifiers
En meer.

Er is een nieuwe origin-proefversie waarmee PWA's alternatieve kleuren kunnen bieden in het webapp-manifest voor de donkere modus .

En de API voor handschriftherkenning is nu geland.

Verder lezen

Dit behandelt slechts enkele van de belangrijkste hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 99.

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 Pete LePage, en zodra Chrome 100 uitkomt, ben ik hier om je te vertellen wat er nieuw is in Chrome!