Safari 15: UI Baru, Warna Tema, dan… Cameo Trik CSS!

Ada video 33 menit (dan sumber daya) di apple.com yang membahas perubahan Safari yang akan datang yang kami lihat di keynote WWDC tahun ini dengan lebih detail. Lihat siapa yang punya cameo kecil di sana:

Mungkin hal yang paling terlihat di Safari 15 di iOS adalah bilah URL di bagian bawah ! Dave berspekulasi di pesta kecil Discord kami bahwa ini mungkin memperbaiki masalah aneh dengan barang 100vh di iOS. Tapi saya benar-benar tidak tahu, kita harus melihat kapan itu keluar dan kita bisa bermain dengannya. Saya kira harapannya adalah, agar kami melakukan hal-hal UI tetap-bawah kami sendiri, kami akan melakukan:

 .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 */ }

Di desktop, fitur visual yang paling mencolok mungkin adalah tag meta theme-color

Ini bahkan bukan hal baru khusus Apple. <meta> sama dengan yang digunakan aplikasi Android Chrome sejak 2014 , jadi Anda mungkin sudah menggunakannya di situs Anda sendiri. Selain itu, ia mendukung kueri media

 <meta name="theme-color" content="#ecd96f" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#0b3e05" media="(prefers-color-scheme: dark)">

Sangat menyenangkan melihat Safari mendapatkan aspect-ratio dan sistem warna mewah baru seperti lab() dan lch() juga. Tingkat atas await di JavaScript besar seperti itu membuat pola seperti impor bersyarat mudah.

Saya tidak berpikir semua ini akan memuaskan Alex . Kami tidak benar-benar mendapatkan mesin peramban alternatif di iOS atau peningkatan PWA yang signifikan (keduanya akan sangat bagus untuk dilihat). Tapi saya memuji semuanya—itu bagus. Meskipun menurut saya Google secara umum menganggap privasi lebih serius daripada apa yang harus dipercayai oleh obrolan internet umum, penting untuk membandingkan fitur yang baru dirilis masing-masing perusahaan. Jika Anda memaafkan sedikit pemetikan ceri, Google sedang mengerjakan FLoC , sebuah teknologi yang sangat khusus dirancang untuk membantu iklan bertarget. Apple sedang mengerjakan Private Relay , sebuah teknologi yang sangat khusus untuk membuat penjelajahan web tidak dapat dilacak.


Posting Safari 15: UI Baru, Warna Tema, dan… Cameo Trik CSS! muncul pertama kali di CSS-Tricks .

Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

June 12, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *