Samen met iOS 10.3 en macOS 10.12.4 wordt Apple’s browser Safari bijgewerkt naar versie 10.1. Deze bevat een aantal nieuwe opties die interessant zijn voor webdesigners. Op enkele vlakken loopt Apple vooruit op Chrome en Firefox, terwijl er ook inhaalslagen zijn.

Safari 10.1 is net als iOS 10.13 en macOS 10.12.4 in betafase. De browser wordt tegelijk met iOS 10.13 en macOS 10.12.4 uitgebracht, maar alvast experimenteren kan geen kwaad. Een overzicht:

HTML: Validatie van formulieren en downloads Apple heeft werk gemaakt van de validatie van formulieren. Het wordt mogelijk om een type informatie in een invulveld af te dwingen en een waarschuwing te weergeven wanneer het niet correct is ingevuld. Chrome en Firefox ondersteunen deze validatie al langer.

Een veld dat een valide e-mailadres moet bevatten, kan vooraf gedefinieerd worden. Bij het invullen van een ongeldig e-maildres volgt een waarschuwing. Een voorbeeld met alle mogelijkheden is hier te vinden.

Klik/tap voor groter. Een andere inhaalslag is de ondersteuning voor de download-parameter bij links. Zoals de naam al doet vermoeden, maakt dit het mogelijk de browser na een klik een download te laten starten, zonder het bestand te openen.

Download

CSS: P3-kleuren, grid en verminderde animaties Safari ondersteunde al afbeeldingen met het brede P3-kleurenspectrum die de schermen van de meest recente iMac, MacBook en iPhone 7 kunnen weergeven. Nu wordt het ook mogelijk om P3-kleuren in CSS te gebruiken door een p3-parameter aan de kleur toe te voegen. Bijvoorbeeld:

em { color: color(p3 50 250 100); } Uiteraard zullen gebruikers onder P3-scherm deze kleur niet goed kunnen weergeven. Je kunt media-queries gebruiken om P3-kleuren alleen op compatibele schermen te laten zien:

@media (color-gamut: p3) De andere toevoeging aan de CSS-kant is ondersteuning voor de grid-module die de komende maanden in alle belangrijke browsers zal worden geïntegreerd. Deze nieuwigheid maakt het mogelijk om inhoud op websites met een eenvoudig of complex en responsive raster te organiseren. Naast Safari 10.1, moet het in de volgende versie van Firefox en Chrome beschikbaar zijn.

main { display: grid; grid: "h h h" "a b c" "f f f"; grid-template-columns: auto 1fr 20%; } article { grid-position: b; min-width: 12em; } nav { grid-position: a; / auto min-width / } aside { grid-position: c; min-width: 12em; } Klik/tap voor groter. Safari 10.1 gaat ook beter om toegankelijkheid. Een nieuwe media-query laat webdevelopers ook op websites beweging verminderen. De browser kijkt hierbij naar de algemene instelling van het systeem.

@media (prefers-reduced-motion) { .background {animation: none;} } API: Fetch en joystick De Fetch API haalt externe content op. Deze vervangt het oude XMLHttpRequest (waar AJAX zijn naam aan ontleent) dat eerder werd gebruikt en geeft ontwikkelaars meer mogelijkheden. Zodra Safari 10.1 zal worden uitgebracht, zal deze API beschikbaar zijn in alle belangrijker browsers. Apple liep hiermee behoorlijk achter.

Apple verbetert ondersteuning voor de IndexedDB API en is een van de laatste browsermakers die versie 2.0 ondersteunt en de integratie was voorheen erg buggy. IndexedDB is een methode voor lokale opslag van gegevens in de browser.

Voor online games brengt Safari 10.1 ondersteuning voor een nieuwe Gamepad API die het mogelijk maakt om een joystick te gebruiken in de browser. Dit is nog een experimentele functie en dient via het Ontwikkel-menu ingeschakeld te worden.

Klik/tap voor groter.