Die gestrige Keynote auf der Apple WWDC zeigte zwei neue Betriebssysteme. Das neue MacOS wird El Capitan nach einer Felsformation in Yosemite genannt (die von den meisten Kommentatoren genommen wurde, um darauf hinzuweisen, dass Apple sein nächstes Betriebssystem als eine kleinere, nicht als große Version sieht). MacOS El Capitan und iOS 9 sind jetzt für Apple-Entwickler verfügbar, werden im nächsten Monat zur öffentlichen Betaversion veröffentlicht und werden im Herbst live gehen.

Versteckt unter den überwältigenden Ankündigungen über die Bezahlung von Apple in zwei Ländern (Kanada und Großbritannien) und Apples Streaming-Musikdienst gab es eine Reihe von Hinweisen, wie Apple das Web und die Rolle von Safari in den nächsten Jahren entwickelt ...

1) Scroll-Fangen

Eine der größten Ankündigungen für Webdesigner ist die Implementierung von CSS-Scroll-Snapping. Scroll-Fangen - was derzeit mit JavaScript erreicht wird - ist eine Methode, mit der die Beschleunigung eines Scrolls angepasst wird, sodass der Scroll an einer vordefinierten Position einrastet. Wenn Sie schon einmal auf einer einzelnen Seitenwebsite gescrollt haben, die im Gegensatz zu einer beliebigen Anzahl von Pixeln zum nächsten Bereich verschoben wurde, haben Sie das Scrollen von Scrollern erlebt.

Apple geht davon aus, dass der Trend für einzelne Seiten weiter anhalten wird

Es ist ein Hinweis darauf, dass Apple erwartet, dass der Trend für einzelne Seiten mit Abschnitten, die das gesamte Ansichtsfenster ausfüllen, unvermindert fortgesetzt wird.

In Safari 9 werden folgende CSS -Scroll-Fangeigenschaften eingeführt: -webkit-scroll-snap-type, -webkit-scroll-snap-punkte-y, -webkit-scroll-snap-punkte-x, -webkit-scroll-snap-destination, und -webkit-scroll-snap-koordinate.

Da das Scrollen von Scrolls weitgehend als progressive Erweiterung betrachtet wird, könnte es in Zukunft sehr praktisch sein, diesen Effekt von JavaScript auf CSS umzustellen.

2) Fixierte Seiten

Safari 9 führt gepinnte Websites ein. Mit gepinnten Websites können Sie Ihre bevorzugten Websites im Browser für einen schnellen Zugriff geöffnet lassen, ohne eine Registerkarte geöffnet zu lassen. Um fixierte Websites in Safari 9 zu verwenden, ziehen Sie einfach eine geöffnete Registerkarte nach links, und in der Lesezeichenleiste wird ein kleines Symbol erstellt, mit dem Sie schnell auf die Seite zugreifen können.

Benutzer werden zweifellos erwarten, diese Funktion zu verwenden, so dass alle Websites vorbereitet werden müssen. Um fertig zu sein, müssen Sie nur ein Symbol erstellen: machen Sie es schwarz, mit einem transparenten Hintergrund, und speichern Sie es als SVG. Sie können dann wie folgt mit dem Symbol im Kopf Ihres HTML-Dokuments verknüpfen:

Wenn Sie das Symbol an Ihre Marke anpassen möchten, fügen Sie dieses Meta-Tag unmittelbar danach hinzu:

3) HTML5 Videoverbesserungen

Safari 9 bietet eine Reihe von Verbesserungen für HTML5-Video.

Airplay ermöglicht benutzerdefinierte Steuerelemente für HTML5-Medien. Mit JavaScript können Sie die Verfügbarkeit von Airplay erkennen und wenn möglich (z. B. in Safari 9) benutzerdefinierte Steuerelemente bereitstellen. Ideal für alle anderen, die Standardeinstellungen zu alt sind und die Markenkonsistenz brechen.

PiP (Picture in Picture) ist ein Videostil, der häufig im Fernsehen verwendet wird. Bei PiP wird ein Video in der Ecke des Bildschirms wiedergegeben, während andere Inhalte an anderer Stelle angezeigt werden. Das Durchsuchen des Kanalführers in einer Tivo-Box, während der aktuelle Kanal in der Ecke spielt, ist ein gutes Beispiel.

Safari 9, das PiP einführt, ist eine unglaubliche Innovation für alle, die Live-Events (wie die Keynote von Apple WWDC) live sehen möchten. Wie die meisten Technologien ist PiP jedoch anfällig für Missbrauch; In den nächsten 6 Monaten werden wahrscheinlich die ersten PiP-Anzeigen in der Ecke Ihres Browsers erscheinen. Glücklicherweise bietet Safari 9 auch die Möglichkeit, alle Audiodaten über alle Registerkarten hinweg mit einem kurzen Klick stummzuschalten.

4) Erzeuge Berührungsereignisse

Apples neue MacBooks verfügen über Force-Touch-Trackpads; Trackpads, die nicht nur tippen, sondern die Kraft, mit der Sie tippen. Safari 9 führt mehrere neue JavaScript-Ereignisse ein, die ironischerweise als Mausereignisse klassifiziert werden, um das Feature zu handhaben: webkitmouseforce wird gestartet, webkitmouseforcedown, webkitmouseforecup und webkitmouseforcechanged.

Force-Touch-Events sind zu diesem Zeitpunkt nur für die ergänzende Navigation sinnvoll, da es sich bei der Technologie nicht nur um Software, sondern auch um Hardware handelt. Wenn sie jedoch als progressive Erweiterung verwendet werden, eröffnen sie einige interessante Möglichkeiten, insbesondere im Bereich des Gaming und des experimentellen UI-Designs.

5) SFSafariViewController

Auf den ersten Blick scheint SFSafariViewController für App-Designer interessanter zu sein als Web-Designer. Damit können Apps Webinhalte in einer App anzeigen, indem sie das Rendering von Safari verwenden.

Entwickelt für die Optimierung von Szenarien wie das Öffnen einer nativen App und das Erstellen eines Kontos auf der Webseite eines Unternehmens, bevor Sie zu einer App zurückkehren, um sich mit dem Konto anzumelden, ist das wesentliche an SFSafariViewController, dass Web anstelle von systemeigen sein kann Grundpfeiler der Online-Systeme eines Unternehmens. Es ist eine kleine Software, die einen großen Schritt in Richtung einer engeren Integration von Native und Web macht.

6) ECMAScript 6

JavaScript ist der OOP-Sprache, die es wirklich sein sollte, einen Schritt näher gekommen

JavaScript-Entwickler werden begeistert sein zu erfahren, dass Safari 9 vollständige Unterstützung für Klassen, berechnete Eigenschaften, schwache Mengen, das Zahlenobjekt, Oktal- und Binärliterale, Symbolobjekte und Vorlagenliterale bietet. Diese Unterstützung bedeutet, dass JavaScript der OOP-Sprache, die es eigentlich sein sollte, einen Schritt näher gekommen ist.

7) CSS Filter

Die CSS-Eigenschaft des Hintergrundfilters wurde in Safari 9 hinzugefügt. Unschärfe, Helligkeit, Kontrast, Schlagschatten, Graustufen, Farbtonrotation, Invertierung, Deckkraft, Sättigung und Sepia- Filter sind verfügbar.

8) Aktualisierungen des Entwicklermodus

Der Responsive Design-Modus wurde in Safari 9 eingeführt, um eine schnelle Umschaltung von Layouts auf verschiedene Ansichtsfenster zu ermöglichen. Alle Apple-Geräte sind als Voreinstellungen enthalten, aber es ist eher ein nützliches Präsentationstool für Kundenmeetings als ein Entwicklungstool, da Best Practices Inhalte bevorzugen, im Gegensatz zu Ansichtsfenstern und Haltepunkten. Es ist wichtig zu beachten, dass der Responsive Design-Modus nur das Ansichtsfenster verändert und nicht verschiedene Geräte simuliert. Es kann als ein schneller Test nützlich sein, wenn neue Apple-Geräte gestartet werden, bevor Gerätesimulatoren aufholen.

Der Web Inspector wurde neu gestaltet. Zusammen mit einigen UI-Optimierungen zur Verbesserung des UX wird der Frame-Rendering und die Leistung stärker betont.

9) Unpräfixiertes CSS

Einige Updates sind willkommener als andere. Eine der willkommenen, aber weniger wahrscheinlich zu bemerken, ist das Ablegen von Browser-Präfixen für mehr als 45 CSS-Eigenschaften. Während es mit den älteren Browsern, die immer noch verwendet werden, wenig tut, je früher Browser Präfixe fallen lassen, desto eher werden wir uns endgültig von ihnen verabschieden.

Die wichtigsten Präfix-frei sind die Flex- Eigenschaften, die Übergangseigenschaften , die Transformationseigenschaften und die Animationseigenschaften .