De keynote van gisteren op de Apple WWDC bevatte twee nieuwe OS's. De nieuwe MacOS heet El Capitan na een rotsformatie in Yosemite (die door de meeste commentatoren is genomen om aan te geven dat Apple zijn volgende OS als een minder belangrijke, in plaats van een major, versie ziet). MacOS El Capitan en iOS 9 zijn nu beschikbaar voor Apple-ontwikkelaars, worden volgende maand vrijgegeven voor publieke bèta en gaan in de herfst live.

Verborgen tussen de teleurstellende aankondigingen over Apple dat de uitbetaling aan een hele twee landen (Canada en het VK) en de streaming-muziekdienst van Apple een aantal aanknopingspunten biedt voor de manier waarop Apple het web ziet, en de rol van Safari, evolueert in de komende jaren ...

1) Scrollen doorklikken

Een van de grootste aankondigingen voor webontwerpers is de implementatie van CSS-schuifknippen. Scrolsnapping - die momenteel wordt bereikt met JavaScript - is een methode om de versnelling op een schuif aan te passen, zodat de schuif naar een vooraf gedefinieerde positie springt. Als u ooit een site met een enkele pagina hebt gescrolld die naar de volgende sectie is geschoven, in tegenstelling tot een willekeurig aantal pixels, heeft u scrolknapping ervaren.

Apple verwacht dat de trend voor sites met één pagina ... zal worden voortgezet

Het is een aanwijzing dat Apple verwacht dat de trend voor sites met één pagina, met secties die de hele viewport vullen, onverminderd doorgaat.

Safari 9 introduceert de volgende CSS-eigenschappen voor scrolknapping : -webkit-scroll-snap-type, -webkit-scroll-snap-points-y, -webkit-scroll-snap-points-x, -webkit-scroll-snap-destination, en -webkit-scroll-snap-coördinaat.

Omdat scrolpen grotendeels als een progressieve verbetering wordt beschouwd, kan het binnenkort praktisch zijn om dit effect van JavaScript naar CSS te schakelen.

2) Vastgezette sites

Safari 9 introduceert vastgezette sites. Vastgezette sites is een manier om uw favoriete websites open te houden in de browser voor snelle toegang, zonder een tabblad open te laten. Als u vastgezette sites in Safari 9 wilt gebruiken, sleept u een geopend tabblad naar links en wordt er een klein pictogram gemaakt in de bladwijzerbalk, zodat u snel toegang hebt tot de pagina.

Gebruikers zullen ongetwijfeld verwachten deze functie te gebruiken, dus alle sites moeten worden voorbereid. Om gereed te zijn, hoeft u alleen maar een pictogram te maken: maak het effen zwart, met een transparante achtergrond en sla het op als een SVG. U kunt dan koppelen aan het pictogram in de kop van uw HTML-document, zoals het volgende:

Als u het pictogram wilt kleuren zodat het overeenkomt met uw merk, voegt u deze metatag onmiddellijk toe nadat het is:

3) HTML5-videoverbeteringen

Safari 9 introduceert een aantal verbeteringen voor HTML5-video.

Airplay maakt aangepaste besturingselementen voor HTML5-media mogelijk. Met behulp van JavaScript kun je Airplay-beschikbaarheid detecteren en waar mogelijk (bijv. In Safari 9) aangepaste besturingselementen leveren. Ideaal voor iedereen die de standaardbesturing moe is, waardoor de merkconsistentie wordt verbroken.

PiP (Picture-in-Picture) is een videostijl die veel wordt gebruikt op tv. PiP omvat het afspelen van een video in de hoek van het scherm terwijl andere inhoud elders wordt bekeken; bladeren door de kanaalgids op een Tivo-box terwijl het huidige kanaal in de hoek wordt afgespeeld, is een goed voorbeeld.

Safari 9 introduceert PiP is een ongelooflijke innovatie voor iedereen die graag live-evenementen bekijkt (zoals de Apple WWDC-keynote) terwijl hij daadwerkelijk aan het werk is. Echter, zoals de meeste technologieën staat PiP open voor misbruik; je ziet waarschijnlijk de eerste PiP-advertenties verschijnen in de hoek van je browser in de komende 6 maanden. Gelukkig bevat Safari 9 ook de optie om alle audio op alle tabbladen met een snelle klik te dempen.

4) Forceer aanraakgebeurtenissen

De nieuwe MacBooks van Apple zijn voorzien van trackpads met force touch; trackpads die niet alleen tikken detecteren, maar ook de kracht waarmee u tikt. Safari 9 introduceert verschillende nieuwe JavaScript-gebeurtenissen - ironisch geklasseerd als muisgebeurtenissen - om de functie af te handelen: webkitmouseforcewillbegin, webkitmouseforcedown, webkitmouseforceup en webkitmouseforcechanged.

Geforceerde aanraakgebeurtenissen zijn op dit moment waarschijnlijk alleen nuttig voor aanvullende navigatie, omdat de technologie niet alleen maar ook software, maar ook hardware is. Als ze echter als een progressieve verbetering worden gebruikt, openen ze enkele interessante mogelijkheden, vooral op het gebied van gaming en experimenteel UI-ontwerp.

5) SFSafariViewController

Op het eerste gezicht lijkt SFSafariViewController interessanter voor app-ontwerpers dan webontwerpers. Hiermee kunnen apps webinhoud weergeven in een app met de weergave van Safari.

Ontworpen voor het stroomlijnen van scenario's zoals het openen van een native app, het maken van een account op de webpagina van een bedrijf en voordat u terugkeert naar een app om u aan te melden bij het account, is het belangrijkste aan SFSafariViewController dat internet, in plaats van native, de hoeksteen van de online systemen van een bedrijf. Het is een klein stukje software dat een zeer grote stap voorwaarts maakt naar een betere integratie van native en web.

6) ECMAScript 6

JavaScript is een stap dichter bij het worden van de OOP-taal die het eigenlijk zou moeten zijn

JavaScript-ontwikkelaars zullen enthousiast zijn om te horen dat Safari 9 volledige ondersteuning biedt voor klassen, berekende eigenschappen, zwakke instellingen, het aantalobjecten, octale en binaire literals, symboolobjecten en standaardlettergebruik. Deze ondersteuning betekent dat JavaScript een stap dichter bij de OOP-taal komt die het nu eigenlijk zou moeten zijn.

7) CSS-filters

De CSS-eigenschap voor achtergrondfilter is toegevoegd aan Safari 9. vervaging, helderheid, contrast, slagschaduw, grijswaarden, tintrotatie, omkeren, dekking, verzadiging en sepia- filters zijn allemaal beschikbaar.

8) Updates van de ontwikkelaarsmodus

Responsieve ontwerpmodus is geïntroduceerd in Safari 9 als een manier om snel van lay-out over verschillende viewports te schakelen. Alle Apple-apparaten worden als presets meegeleverd, maar het is meer een handig presentatietool voor klantvergaderingen dan een hulpmiddel voor ontwikkelaars, aangezien best practices de voorkeur geven aan inhoud, in plaats van viewport, breekpunten. Het is belangrijk op te merken dat een responsieve ontwerpmodus alleen de viewport verandert, het simuleert geen verschillende apparaten. Het kan nuttig zijn als een snelle test als er nieuwe Apple-apparaten worden gelanceerd, voordat apparaatsimulators inhalen.

De webinspecteur is opnieuw ontworpen. Samen met enkele UI-tweaks om de UX te verbeteren, is er meer nadruk op frame rendering en prestaties.

9) Ongefixeerde CSS

Sommige updates zijn meer welkom dan andere. Een van de meest welkome, maar minder waarschijnlijk te worden opgemerkt, is het wegvallen van browser-voorvoegsels voor meer dan 45 CSS-eigenschappen. Hoewel het op korte termijn weinig doet met oudere browsers die nog in gebruik zijn, laten snellere browsers voorvoegsels zien, des te eerder nemen we ze voor altijd vaarwel.

De meest significante voorvoegsels zijn de flexibele eigenschappen, de overgangseigenschappen , de transformatie- eigenschappen en de animatie- eigenschappen.