Safari 27 und iOS 27: Was sich für Ihre Website ändert

Ein Teil Ihrer Besucher erreicht Ihre Seite über Safari, und deren Anteil sehen Sie in Ihrer eigenen Analytics. Deshalb betrifft jede Safari-Version die Frage, ob eine neue CSS- oder HTML-Funktion bei echten Besuchern funktioniert. Der Beta-Beitrag des WebKit-Blogs nannte für Safari 27 eine lange Liste: gestaltbares select, transformationsbewusste Anker-Positionierung, Scroll-Verankerung, die Pseudoklasse :heading, revert-rule, das Schlüsselwort stretch und mehr.

So lang die Liste wirkt, Sie müssen nicht alles davon kennen. Die meisten Funktionen erleichtern die Arbeit derjenigen, die den Code der Seite schreiben; Besucher sehen sie nicht direkt und merken nur, dass Seiten seltener kaputtgehen. Fragen Sie sich als Inhaber, welcher Teil Ihrer Seite eine dieser Funktionen braucht. Die Antwort lautet meistens: Formulare und Bildbereiche.

Der WebKit-Blog schreibt, dass sich Dropdown-Listen mit appearance: base-select vollständig gestalten lassen. Eine Liste, in der man eine Stadt, eine Leistung oder eine Terminzeit wählt, kann also in den Farben und der Schrift Ihrer Marke gezeichnet werden. Der Blog hält außerdem fest, dass das Verhalten für Tastatur und Screenreader erhalten bleibt, was für die Barrierefreiheit ein ruhigerer Weg ist, als die Liste durch eine von Grund auf selbst geschriebene Komponente zu ersetzen.

Eine Pflicht ist das nicht. Wenn Ihre aktuelle Liste funktioniert, lassen Sie sie in Ruhe. Die neue Funktion ist vor allem für Listen mit eigenem Look sinnvoll, die bisher im Code nachgebaut wurden. Ob andere Browser diese Funktion auf dieselbe Weise unterstützen, steht nicht in unseren Quellen. Lassen Sie das Design deshalb so umsetzen, dass es dort, wo die Funktion fehlt, auf eine schlichte Liste zurückfällt.

Bei Bildern fällt vor allem der Wert auto für das Attribut sizes des img-Elements auf. Der WebKit-Blog beschreibt ihn so, dass der Browser die Bildgröße bei träge geladenen Bildern selbst berechnet, was die Last verringert, für jedes Bild von Hand einen sizes-Wert zu schreiben. Die Scroll-Verankerung, ebenfalls aus dem Blog, verhindert, dass die Stelle, an der Sie lesen, verrutscht, wenn oberhalb später Inhalt nachgeladen wird.

Die folgende Liste sammelt die Punkte, die beim Testen Ihrer Seite oder bei Rückfragen an Ihren Entwickler helfen. Wie sich Bildänderungen auf die Geschwindigkeit auswirken, können Sie vorher und nachher mit dem Website-Geschwindigkeitstest von rabbitclip messen.

• Gestaltbare Dropdown-Liste: Formularfelder, die zur Marke passen
• Der Wert auto für sizes bei img: Der Browser berechnet die Größe träge geladener Bilder
• Scroll-Verankerung: Die Seite springt nicht, wenn oberhalb Inhalt nachgeladen wird
• Das model-Element: 3D-Inhalte auf iOS, iPadOS und macOS
• Ergänzungen auf Entwicklerebene wie die Static-Routing-API für Service Worker, ReadableStream.from() und maxAge in der Cookie Store API

Unter Berufung auf den WebKit-Blog berichtet 9to5Mac, dass Safari 27 einen lokalen MCP-Server enthält. Wenn die Fernsteuerung in den Entwicklereinstellungen eingeschaltet ist, können Coding-Agenten das Browserfenster nutzen. MCP ist ein Kommunikationsprotokoll, über das sich KI-Agenten mit Werkzeugen verbinden; hier ist das Werkzeug Safari selbst.

Für Website-Inhaber heißt das unmittelbar: Ein Agent kann auch Ihre Seite besuchen, und wenn ein Entwickler dies zum Testen auf seinem eigenen Rechner eingeschaltet hat, tut er es mit einem echten Browser. Ihr Entwickler könnte damit Ihre Formulare automatisch ausprobieren; das ist eine Möglichkeit, keine Schlussfolgerung der Quellen. Dieselbe Quelle erwähnt außerdem ein Paketierwerkzeug für Safari-Web-Erweiterungen, das weder einen Mac noch Xcode braucht.

Der erste Fehler ist, eine neue Funktion auf die Live-Seite zu bringen, sobald man die Nachricht gelesen hat. Dass eine Funktion in Safari 27 läuft, heißt nicht, dass sie bei jedem Besucher läuft; manche Geräte bleiben bei älteren Versionen. Der zweite ist, eine funktionierende Dropdown-Liste nur deshalb zu ersetzen, weil es eine neue gibt, und dabei das mobile Formular zu beschädigen.

Der dritte ist, nur am Desktop zu testen. Die Darstellung auf dem iPhone, das Verhalten von Tastatur und Screenreader sowie die Touch-Ziele müssen gesondert ausprobiert werden.

• Eine neue Funktion ungetestet live schalten
• Eine funktionierende Komponente nur ersetzen, weil es eine neue gibt
• Nur im Desktop-Browser testen
• Nicht bedenken, was dort passiert, wo die Funktion nicht unterstützt wird

Wenn Ihre Seite kein individuell gestaltetes Formularfeld, keine 3D-Inhalte und kein kompliziertes Seitenlayout hat, müssen Sie wegen Safari 27 nichts tun. Bei einer kleinen Visitenkartenseite besteht der richtige Schritt darin, die Seite einmal auf einem iPhone zu öffnen und Formular und Bilder mit bloßem Auge zu prüfen.

Auch das model-Element für 3D-Inhalte auszuprobieren ist nicht für jeden sinnvoll. Wenn eine 3D-Ansicht Ihres Produkts den Verkauf nicht unterstützt, bringt die Funktion nur Wartungsaufwand. Schauen Sie zuerst, was der Besucher tun möchte, und wählen Sie dann die Funktion.