Es gibt ein 33-minütiges Video (und Ressourcen) auf apple.com, das die bevorstehenden Safari-Änderungen, die wir dieses Jahr auf der WWDC-Keynote gesehen haben, im Detail behandelt. Schauen Sie mal, wer da einen kleinen Cameo-Auftritt hat.
Das vielleicht Auffälligste in Safari 15 auf iOS ist die URL-Leiste unten! Dave spekulierte in unserer kleinen Discord-Watchparty, dass dies wahrscheinlich die seltsamen Probleme mit 100vh-Sachen auf iOS beheben wird. Aber ich weiß es wirklich nicht, wir werden sehen müssen, wenn es herauskommt und wir damit herumspielen können. Ich *vermute*, dass die Erwartung ist, dass wir, um unsere eigenen Fixed-Bottom-UI-Sachen zu machen, Folgendes tun müssten:
.bottom-nav {
position: fixed; /* maybe sticky is better if part of overall page layout? */
bottom: 100vh; /* fallback? */
bottom: calc(100vh - env(safe-area-inset-bottom)); /* new thing */
}Auf dem Desktop ist das auffälligste visuelle Merkmal wahrscheinlich die theme-color Meta-Tags.
Das ist nicht einmal etwas ganz Neues, nur für Apple. Dies ist derselbe <meta>-Tag, den die Android-App von Chrome seit 2014 verwendet, sodass Sie ihn vielleicht schon auf Ihrer eigenen Website einsetzen. Die Neuerung ist, dass er media-Abfragen unterstützt.
<meta name="theme-color"
content="#ecd96f"
media="(prefers-color-scheme: light)">
<meta name="theme-color"
content="#0b3e05"
media="(prefers-color-scheme: dark)">Es ist großartig, dass Safari aspect-ratio und die neuen schicken Farbsysteme wie lab() und lch() bekommt. Top-Level await in JavaScript ist großartig, da es Muster wie bedingte Importe erleichtert.
Ich glaube nicht, dass all das Alex zufriedenstellen würde. Wir haben keine alternativen Browser-Engines auf iOS oder signifikante PWA-Verbesserungen erhalten (beides wäre wirklich toll zu sehen). Aber ich applaudiere dem Ganzen – es sind gute Dinge. Obwohl ich denke, dass Google den Datenschutz generell ernster nimmt, als das allgemeine Internetgeplauder glauben machen würde, ist es bemerkenswert, die neu veröffentlichten Features jedes Unternehmens zu vergleichen. Wenn Sie mir ein bisschen Rosinenpickerei verzeihen, arbeitet Google an FLoC, einer Technologie, die speziell darauf ausgelegt ist, gezielte Werbung zu unterstützen. Apple arbeitet an Private Relay, einer Technologie, die speziell dafür entwickelt wurde, das Surfen im Web untracebar zu machen.
Ich benutze die iOS 15 Beta seit ein paar Tagen und mir gefällt, wie Safari die Viewport-Höhe meistens handhabt. Solange die URL-Leiste im normalen Zustand ist, erstreckt sich der Viewport bis zum unteren Bildschirmrand (und geht über den sicheren Bereich bei Geräten mit einer Notch hinaus). Der Viewport schrumpft bis knapp über die URL-Leiste, wenn sie ausgeblendet wird.
Dieses Video erklärt es vielleicht besser, als ich es kann.
Letztes Weihnachten schenkte mir meine Frau ein neues Android-Handy mit einem 6-Zoll-Display. Darauf hatte Android 11 die Chrome-Suchleiste unten. Firefox für Android hat auch standardmäßig eine Suchleiste unten (obwohl dies geändert werden kann).
Ich vermute, es hat etwas mit größeren Bildschirmgrößen zu tun und dass der obere Teil des Bildschirms auf Handheld-Geräten nicht so gut erreichbar ist (insbesondere bei einhändiger Bedienung).
Wenn ich eine Design-Vorhersage machen müsste, würde ich sagen, wir sollten in Zukunft noch mehr Bewegung von Headern hin zu reichhaltigen Footern sehen.
Ja, ich habe das Gefühl, dass ein weiteres Muster, das Apple verwendet, die Karte von unten ist, was den Daumenreichweitenbereich verbessert.
Die URL-Leiste unten stört mich wirklich. Es scheint, als ob Apple glaubt, dass Safari die primäre App an sich ist, nicht ein Tor zu anderen Erfahrungen im Web.
Ich sehe keinen Grund, den zugänglichsten Teil des Bildschirms für die Interaktion mit der URL-Leiste zu reservieren, anstatt ihn für Websites verfügbar zu machen, um sie einfacher zu nutzen.
Obwohl die Notch auf ihren neuesten Modellen bereits mehr als 44 CSS-Pixel vom unteren Rand für interaktive Nutzung gekostet hat, beansprucht die neue URL-Leiste jetzt doppelt so viel und das immer, nicht nur, bis der Benutzer nach unten gescrollt hat.
Bin ich der Einzige, der denkt, dass dies die 100vh-Probleme eigentlich viel komplizierter macht? Ugh.
Das ist auch eine große Veränderung
Diese URL-Leiste auf Mobilgeräten ist absolut schlecht. Was bedeutet das?
Man muss alle alten Projekte für einen Browser anpassen! Dumm
Es gibt einige Fehler. Zum Beispiel verursachen Oberflächen mit festen oder absoluten Karten, dass die env() der Tab-Leiste unerklärlicherweise doppelt erscheint. -> https://codepen.io/paul3fa/pen/gOmBxxY Probieren Sie das auf Ihrem Handy im Debug-Modus, iOS 15
Wurde mehr Forschung betrieben, wie man mit der neuen Adressleiste umgeht?
Ich musste das gerade in einem meiner aktuellen Projekte beheben. Es scheint, dass die Verwendung von
bottom: env(safe-area-inset-bottom)auf Anhieb für mich funktionierte, ohne die Notwendigkeit voncalc.Wie bekomme ich das auf der unteren Adressleiste in Safari 15 angewendet?
Das sollte standardmäßig sein! Aber wenn nicht, 9to5Mac erklärt die Schritte, die Sie mit geöffneter Safari-App durchführen können.
Alternativ können Sie die Adress-/Suchleiste von iOS 15 auch ändern, indem Sie zur Einstellungen-App gehen > Safari > nach unten wischen und "Tab Bar" auswählen.
Ich hoffe, das hilft!
Hallo,
Wie kann ich den Trennstrich/Rand zwischen der Adressleiste und der Website deaktivieren? Der Trennstrich/Rand erscheint nur in iOS Safari. Einige Websites, z. B. t3n.de, haben ihn nicht.
Beste Grüße,
Florian
Safari 15 hat immer noch Probleme mit 3D-Transformationen, z.B.
transform: rotate3d(1, 0, 0, -60deg);
Oder
-webkit-transform: rotate3d(1, 0, 0, -60deg)
Es wird einfach nicht gerendert, während jeder andere Browser es kann.
Auch immer noch Probleme mit HTML5-Videotags. Irgendwie werden iOS-Beschränkungen auch für Desktops angewendet: "HTTP-Server, die Mediendateien für iOS hosten, müssen Byte-Range-Anfragen unterstützen."
Safari wird zum IE der Browser...