I gårdagens keynote på Apple WWDC presenterades två nya operativsystem. Den nya MacOS heter El Capitan efter en rockformation i Yosemite (som har tagits av de flesta kommentatorer för att ange att Apple ser sitt nästa OS som en mindre, snarare än större versionen). MacOS El Capitan och iOS 9 är nu tillgängliga för Apples utvecklare, kommer att släppas till allmän beta nästa månad och kommer att leva under hösten.

Dold bland de underväldiga meddelandena om att Apple betalade ut till en hel del länder (Kanada och Storbritannien) och Apples strömmande musik service var ett antal ledtrådar om hur Apple ser på webben och Safaris roll, som utvecklas under de närmaste åren ...

1) Rulla snapping

Ett av de största meddelandena för webbdesigners är implementeringen av CSS scroll snapping. Scroll snapping - som för närvarande uppnås med JavaScript - är en metod för att justera lättnaden på en bläddring så att bläddringen snubblar till en fördefinierad position. Om du någonsin har bläddrat en enda sida som slängde till nästa avsnitt, i motsats till ett godtyckligt antal pixlar, har du upplevt att du bläddrar i rullning.

Apple förväntar sig att trenden för ensidiga sidor ... ska fortsätta

Det är en indikation på att Apple förväntar sig trenden för ensidiga sidor, med sektioner som fyller hela visningsporten, för att fortsätta vara oförmögna.

Safari 9 introducerar följande CSS-bläddringsegenskaper: -webkit-scroll-snap-typ, -webkit-scroll-snap-points-y, -webkit-scroll-snap-points-x, -webkit-scroll-snap-destination, och -webkit-scroll-snap-koordinat.

Eftersom snäppflikning i stor utsträckning betraktas som en progressiv förbättring kan det snart vara praktiskt att byta denna effekt från JavaScript till CSS.

2) Fastställda platser

Safari 9 introducerar fasta webbplatser. Pinned-webbplatser är ett sätt att hålla dina favoritwebbplatser öppna i webbläsaren för snabb åtkomst, utan att verkligen lämna en flik öppen. För att använda fasta platser i Safari 9 drar du bara en öppen flik till vänster och en liten ikon kommer att skapas i bokmärkesfältet så att du snabbt kan komma åt sidan.

Användare kommer utan tvekan att förvänta sig att använda den här funktionen, så alla webbplatser måste vara förberedda. För att vara redo är allt du behöver göra att skapa en ikon: gör den solid svart, med en transparent bakgrund och spara den som en SVG. Du kan sedan länka till ikonen i huvudet på ditt HTML-dokument, som så:

Om du vill färga ikonen för att matcha ditt varumärke, lägg till det här metataggen direkt efter det:

3) HTML5-videoförbättringar

Safari 9 introducerar ett par förbättringar för HTML5-video.

Airplay tillåter anpassade kontroller för HTML5-media. Med hjälp av JavaScript kan du upptäcka Airplay-tillgänglighet och där det är möjligt (dvs. i Safari 9) leverera anpassade kontroller. Perfekt för alla som är trött på standard kontroller bryter varumärkeskonsistensen.

PiP (Picture in Picture) är en videoformat som används i stor utsträckning på TV. PiP innebär att spela en video i hörnet av skärmen medan annat innehåll ses på annat håll; bläddrar kanalguiden i en Tivo-låda medan den aktuella kanalen spelar i hörnet, är ett bra exempel.

Safari 9 introducerar PiP är en otrolig innovation för alla som gillar att se livehändelser (som Apple WWDC-keynote) medan de faktiskt arbetar. Men som de flesta tekniker är PiP öppen för missbruk. du kommer sannolikt att se de första PiP-annonserna som dyker upp i hörnet av din webbläsare under de närmaste 6 månaderna. Lyckligtvis innehåller Safari 9 också möjligheten att stänga av all ljud över alla flikar med ett snabbt tryck.

4) Tvinga touch-händelser

Apples nya MacBooks-funktion har kraftpekare; trackpads som upptäcker inte bara kranar, men kraften som du trycker på. Safari 9 introducerar flera nya JavaScript-händelser - ironiskt nog klassificeras som mushändelser - för att hantera funktionen: webkitmouseforcewillbegin, webkitmouseforcedown, webkitmouseforceup och webkitmouseforcechanged.

Force touch-händelser är endast troliga att vara användbara för kompletterande navigering vid denna tidpunkt eftersom tekniken inte bara är programvara, men också hårdvara, begränsad. Men om de används som en progressiv förbättring öppnar de några intressanta möjligheter, särskilt när det gäller spel och experimentell UI-design.

5) SFSafariViewController

Vid första anblicken verkar SFSafariViewController vara av mer intresse för appdesigners än webbdesigners. Det tillåter att appar visar webbinnehåll i en app med Safari-rendering.

Konstruerad för att effektivisera scenarier som att öppna en inbyggd app och sedan skapa ett konto på företagets webbsida innan den återgår till en app för att logga in med kontot är den viktiga saken med SFSafariViewController som tillåter web, snarare än inhemsk, att vara keystone i ett företags onlinesystem. Det är en liten bit av programvara som gnistor ett mycket stort steg mot närmare integration av inbyggd och webben.

6) ECMAScript 6

JavaScript är ett steg närmare att bli det OOP-språk som det verkligen borde vara

JavaScript-utvecklare kommer att vara glada att lära sig att Safari 9 innehåller fullt stöd för klasser, beräknade egenskaper, svag uppsättning, talobjekt, oktal och binär bokstav, symbolobjekt och mallstavlar. Det här stödet betyder att JavaScript är ett steg närmare att bli det OOP-språk som det verkligen borde vara nu.

7) CSS-filter

Bakgrundsfiltrets CSS-egenskap har lagts till i Safari 9. oskärpa, ljusstyrka, kontrast, droppskugga, gråskala, färgton, inverter, opacitet, mättnad och sepiafilter är alla tillgängliga.

8) Utvecklarlägesuppdateringar

Responsivt designläge har introducerats i Safari 9 som ett sätt att snabbt skicka layouter över olika visningsportar. Alla Apple-enheter ingår som förinställningar, men det är mer ett användbart presentationsverktyg för klientmöten än ett dev-verktyg eftersom bästa praxis gynnar innehåll, i motsats till visning, brytpunkter. Det är viktigt att notera att det responsiva designläget bara ändrar visningsporten, det simulerar inte olika enheter. Det kan vara användbart som ett snabbtest när nya Apple-enheter lanseras innan enhetssimulatorer hämtar.

Webinspektören har omformats. Tillsammans med vissa UI-tweaks för att förbättra UX, läggs större vikt vid ramframställning och prestanda.

9) Unprefixed CSS

Vissa uppdateringar är mer välkomna än andra. En av de mest välkomna, men mindre sannolika att märka, är att släppa webbläsarprefix för över 45 CSS-egenskaper. Även om det inte på kort sikt gör det med gamla webbläsare som fortfarande används, släpper de tidigare webbläsarna prefix, ju tidigare säger vi adjö till dem för gott.

Det viktigaste att gå utan prefix är flexegenskaperna , övergångsegenskaperna , transformationsegenskaperna och animeringsegenskaperna .