8 nieuwe functies voor webdesigners in Safari 10.1

Door: Raymon Mens - 11 reacties

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.

Reacties

11 reacties
  • Profielfoto
    erwin33

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

  • Profielfoto
    Shmoo

    Volgende OS update. Dit is de developers beta.

  • Profielfoto
    Raymon Mens

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

  • Profielfoto
    Edwin Martin

    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

    @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

    Mooi artikel, en mooie verbeteringen

  • Profielfoto
    xaddict

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

  • Profielfoto
    pruus

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

  • Profielfoto
    lordoftheflatbush

    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

    Zitten deze nieuwigheden ook al in de Safari Technology Preview?

  • Profielfoto
    Shmoo

    Lijkt mij wel, waarschijnlijk al wat langer..