Nieuw in Chrome 99

Pete LePage

Dit is wat u moet weten:

  • Het aftellen naar versie 100 van Chrome en Firefox duurt nog maar een paar weken.
  • Met CSS Cascade-lagen hebt u meer controle over uw CSS en voorkomt u stijlspecifieke conflicten.
  • Met de showPicker() methode 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 eens kijken wat er nieuw is voor ontwikkelaars in Chrome 99.

Chrome 100 en Firefox 100

Chrome 100 verschijnt eind maart (2022) en Firefox 100 verschijnt kort daarna, begin mei. Beide vormen een belangrijke mijlpaal wat betreft versienummers en gaan over naar drie cijfers. Maar als uw code twee cijfers verwacht, kan het nieuwe versienummer problemen opleveren.

Alle code die versienummers controleert of de tekenreeks van de gebruikersagent parseert, moet worden gecontroleerd om er zeker van te zijn dat er geen problemen optreden.

Chrome-vlaggenpagina die de nieuwe optie #force-major-version-to-100 benadrukt

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

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

Kijk voor meer informatie op Chrome en Firefox, die binnenkort versie 100 zullen bereiken .

CSS Cascade-lagen

Ondersteuning voor CSS Cascade Layers en de CSS @layer -regel is beschikbaar in Chrome 99. Deze bieden meer expliciete controle over je CSS-bestanden om stijlspecifieke conflicten 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 heeft de voorrang van een laag altijd voorrang op de specificiteit van een selector.

Illustratie van een projectdemo van het uitbreken van de gebruikersinterface

Als je een link in een .card of .post probeert te stylen, zul je merken dat de specifiekere selector wordt toegepast. Door de @layer -regel te gebruiken, kun je de stijl van elke link explicieter bepalen en ervoor zorgen dat de linkstijl in je kaart de linkstijl in je bericht overschrijft.

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

  .link {
    color: blue;
  }
}

Dit komt door de cascade-prioriteit. Gelaagde stijlen creëren nieuwe cascade-vlakken.

Cascadelagen met de CSS @layer -regel worden ondersteund in Chrome 99, Firefox 97 en Safari 15.4 Beta. Bekijk Cascadelagen komen binnenkort naar uw browser voor meer informatie.

showPicker() voor invoerelementen

Lange tijd moesten we onze toevlucht nemen tot aangepaste widgetbibliotheken of hacks om een ​​datumkiezer weer te geven. Er is een nieuwe showPicker() -methode in HTML InputElements . Dit is de standaardmethode om een ​​browserkiezer weer te geven, niet alleen voor date , maar ook voor time , color en andere <input> -elementen met kiezers.

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

Om het te gebruiken, roep je showPicker() aan op het <input> -element. In dit voorbeeld heb ik het in een try…catch -blok verpakt. Zo kan ik een fallback-optie bieden als de browser de API niet ondersteunt of de picker niet kan weergeven. Zo zorgen we ervoor dat gebruikers nog steeds een goede ervaring hebben.

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 voor datum, tijd, kleur en bestanden voor alle details en alle verschillende <input> -typen waarvoor u showPicker() kunt gebruiken.

En nog veel meer!

Er is natuurlijk nog veel meer.

De Canvas2D API is bijgewerkt en biedt nieuwe functionaliteit, waaronder:

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

Er is een nieuwe oorsprongsproef waarmee PWA's alternatieve kleuren in het web-appmanifest voor de donkere modus kunnen aanbieden.

En de API voor handschriftherkenning is nu beschikbaar.

Verder lezen

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

Abonneren

Om op de hoogte te blijven, kunt u zich abonneren op het YouTube-kanaal Chrome Developers . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en zodra Chrome 100 uitkomt, vertel ik je alles over de nieuwe functies in Chrome!