8 nieuwe functies voor webdesigners in Safari 10.1

Raymon op 26 januari 2017 11 reacties Laatste door Shmoo

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.

<input type="email" />
valid

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.

<a href="sample.pdf" download="sample.pdf">Download</a>

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;     }
grid-001

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.

schermafbeelding-2017-01-26-om-15-20-45

Klik/tap voor groter.

Raymon is vaste redacteur bij OMT, maar noemt zich liever redactieninja. Ook te volgen op Twitter en wekelijks te horen in de TechSnacks Podcast. Lees meer artikelen van Raymon.

En nu?

11 reacties

Profielfoto

erwin33 op 26 januari 2017

10.0 nog steeds hier. Hoe wordt de nieuwe Safari browser geüpdate? In de app store?

Profielfoto

Shmoo op 26 januari 2017

Volgende OS update. Dit is de developers beta.

Profielfoto

Raymon [moderator] op 26 januari 2017

Ik heb getracht te verduidelijken dat het om de browser in de betaversies gaat.

Profielfoto

Edwin Martin op 26 januari 2017

De andere toevoeging aan de CSS-kant is ondersteuning voor de grid-tag die de komende maanden in alle belangrijke browsers zal worden geïntegreerd.

Er is geen grid-tag. Je kunt wel spreken over een grid CSS-property of -declaration.

Profielfoto

Gans op 26 januari 2017

@Raymond wat is dat toch met jou en het woord ‘weergeven’? Denk je echt dat je het zo goed gebruikt? Ken je meer mensen die het zo gebruiken? Haal je een grap met ons uit? Ik ben oprecht benieuwd uit taalkundig oogpunt…

Profielfoto

html-junky op 26 januari 2017

Mooi artikel, en mooie verbeteringen

Profielfoto

xaddict op 26 januari 2017

Ajax ontleent zijn naam niet aan Xmlhttprequest. Het werd ervoor gebruikt ja maar Ajax staat voor asynchronous JavaScript and xml.

Profielfoto

pruus op 26 januari 2017

Net de public 10.12.4 aan het installeren, public beta. Ben benieuwd.

Profielfoto

lordoftheflatbush op 26 januari 2017

Safari loopt bij mij steeds slechter. Telegraaf video’s doen het niet. Bepaalde websites blijven steeds hangen terwijl deze in Chrome of Firefox wel werken. Ook wordt Safari steeds trager. Tijd voor een update.

Profielfoto

koen op 27 januari 2017

Zitten deze nieuwigheden ook al in de Safari Technology Preview?

Profielfoto

Shmoo op 27 januari 2017

Lijkt mij wel, waarschijnlijk al wat langer..

 


Je kunt alleen reageren met een gratis OMT account.
Heb je geen OMT account? Registreer je dan nu gratis!

Inloggen

 

of Wachtwoord resetten?