Nieuw in Chrome 106

Piet LePage
Adriana Jara

Dit is wat u moet weten:

  • Er zijn nieuwe Intl API's die u meer controle geven bij het opmaken van getallen.
  • Er is een origin-proefversie voor de Pop-up API om het gemakkelijk te maken om kritische inhoud aan de gebruiker te tonen.
  • We voegen een handvol CSS-functies toe om de interoperabiliteit te verbeteren.
  • En er is nog veel meer .

Ik ben Pete LePage en ik ben Adriana Jara . Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 106.

Nieuwe internationale API's

De Intl API's helpen inhoud in een gelokaliseerd formaat weer te geven.

Net als bij andere internationale API's verschuift hierdoor de last naar het systeem, zodat u geen complexe lokalisatiecode naar elke gebruiker hoeft te verzenden of te onderhouden.

De API weet waar het valutasymbool naartoe gaat, hoe datums en tijden moeten worden opgemaakt of een lijst moet worden samengesteld.

Chrome 106 voegt een hele reeks nieuwe functionaliteit voor getalnotaties toe.

const opts = {
  style: 'currency',
  currency: 'EUR'
};
const x = new Intl.NumberFormat('de-DE', opts);
const r = x.format(number);
// expected output: "123.456,79 €"

Wilt u een prijsklasse weergeven? formatRange heeft u gedekt.

Maak een nieuw object numberFormat , geef de style en andere opties op en geef aan hoeveel cijfers er moeten worden weergegeven.

Roep vervolgens formatRange() aan om de opgemaakte tekenreeks op te halen.

const opts = {
  style: "currency",
  currency: "EUR",
  maximumFractionDigits: 0,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.formatRange(2.9, 3.1);
// expected output: "~€3"

Wilt u een getal afronden op de dichtstbijzijnde stap van vijf, met een nauwkeurigheid van twee decimalen? Geen probleem.

Geef de minimumFractionDigits en roundingIncrement op en roep vervolgens format() aan.

const opts = {
  style: 'percent',
  minimumFractionDigits: 2,
  roundingIncrement: 5,
};
const nf = new Intl.NumberFormat("en-US", opts);
nf.format(0.428267);
// expected output: "42.85%"

Je kunt de browser zelfs vertellen om volgnullen op te nemen met trailingZeroDisplay , super handig voor prijzen.

const strip = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'stripIfInteger',
}).format(0.42);
// 42%

const auto = new Intl.NumberFormat('en-US', {
  style: 'percent',
  minimumFractionDigits: 2,
  trailingZeroDisplay: 'auto',
}).format(0.42);
// 42.00%

Bekijk de documenten over het internationale nummerformaat op MDN voor meer informatie.

De Pop-Up API maakt het bouwen van gebruikersinterfaces een stuk eenvoudiger, voor die momenten waarop u alleen informatie direct aan uw gebruiker wilt presenteren.

Het popup upattribuut brengt het element automatisch naar de bovenste laag van de site en biedt eenvoudige bedieningselementen om de zichtbaarheid te wijzigen. U hoeft zich geen zorgen meer te maken over positionering, het stapelen van elementen, focus of toetsenbordinteracties. Het beste van alles is dat er geen JavaScript voor nodig is.

Met alleen het volgende fragment zorgt de API ervoor dat het element bovenop alle andere inhoud wordt weergegeven, en wordt de gebruikersinvoer en het focusbeheer afgehandeld.

<div id="my-pop-up" popup>
Pop-up content!
</div>
<button  popuptoggletarget="my-pop-up">
Toggle Pop-up button
</button>

Standaard kunnen gebruikers de pop-up sluiten met gebaren zoals de ESC-toets of door op andere elementen te klikken.

En ontwikkelaars hebben volledige controle over de stijl, positionering en grootte van de bovenste laag, maar ook de flexibiliteit om het standaardgedrag aan te passen. Gebruik alleen CSS en HTML.

Bekijk het artikel van Jhey voor meer voorbeelden en API-opties.

Meld u aan voor de origin-proefperiode om uw gebruikers eenvoudig tijdige informatie te geven. Laat ons weten wat je denkt.

Nieuwe CSS-functies

Er zijn twee nieuwe CSS-functies die de interoperabiliteit verbeteren en hopelijk uw leven een beetje gemakkelijker maken.

Er is een nieuwe lengte-eenheid in de stad: ic sluit zich aan bij de partij. ic is vergelijkbaar met ch . Maar ic wordt specifiek gebruikt voor tekst geschreven in talen die ideogrammen gebruiken. In feite meet het de lengte op basis van de breedte of hoogte van dit teken [ergens wijzen] wat water betekent.

Het is een eenheid die is ontworpen om de grootte van tekst te bepalen, waardoor u de breedte kunt beperken om de leesbaarheid te verbeteren, en het geeft voorspelbare controle, ongeacht de tekstgrootte.

Als u bijvoorbeeld de max-width van een container instelt, bijvoorbeeld 10ic, weet u dat de container maximaal 10 glyphs over de volledige breedte zal bevatten, ongeacht de lettergrootte. Bekijk het in het volgende voorbeeld:

CSS Grid-ondersteuning voor interpolatie voor grid-template-columns en grid-template-rows komt eraan, het was gepland voor 106, maar is vertraagd en wordt gelanceerd in Chrome 107. Je kunt het nog steeds uitproberen in Chrome Beta. Hier is de code van Bramus als voorbeeld:

En meer!

Natuurlijk is er nog veel meer.

  • We starten fase vijf van het plan voor de reductie van user-agents.
  • Ondersteuning voor HTTP2 Push en het persistente quotatype worden beëindigd.
  • En de CSS-eigenschap hyphenate-character is nu zonder voorvoegsel beschikbaar.

Verder lezen

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

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