Apple telah merilis pembaruan OS. Dikemas dengan itu adalah versi terbaru dari Safari, 16.

Diharapkan akan dirilis sebelum macOS 13 bulan depan, Safari 16 dikemas dengan pembaruan, menjadikannya salah satu browser paling mumpuni yang tersedia.

Untuk desainer web, signifikansinya adalah momentum maju dalam teknologi web yang memungkinkan pekerjaan desain lebih bebas dan lebih sedikit peretasan untuk mencapai tata letak yang kompleks. Sedikit demi sedikit, rekomendasi CSS diimplementasikan hingga penggunaan JavaScript untuk tata letak dengan cepat menjadi tidak perlu dan tidak disukai.

Beberapa di antaranya diumumkan pada bulan Juni di Safari 16 beta. Tapi banyak yang telah ditambahkan dalam beberapa bulan terakhir. Jadi, inilah yang baru di Safari 16 hari ini.

Kueri Kontainer CSS

Tambahan paling menarik untuk Safari 16 adalah CSS Container Query.

Sulit untuk mengecilkan betapa larisnya fitur ini; jika Anda membayangkan tombol edit di Twitter yang memberi Anda kripto setiap kali Anda mengoreksi kesalahan ketik, Anda akan semakin dekat dengan seberapa populer fitur ini.

Hingga saat ini, kueri media telah mendeteksi seluruh area pandang. Jadi, jika Anda memiliki elemen seperti kartu, misalnya, yang perlu diubah pada area pandang yang lebih kecil, Anda perlu menghitung ruang yang tersedia dan menyesuaikan desain elemen tersebut. Sayangnya, ini sering tidak sinkron dengan kasus tepi yang menyebabkan lebih dari beberapa sakit kepala untuk pengembang front-end.

Kueri media sangat membatasi metode tata letak modern seperti Grid yang membungkus elemen secara otomatis karena tidak ada cara untuk mendeteksi bagaimana elemen ditata.

Kueri Kontainer menyelesaikan ini dengan memungkinkan Anda untuk menentukan gaya berdasarkan ukuran elemen yang mengandung sebenarnya; jika sebuah div memiliki lebar 300px, konten dapat memiliki satu desain, dan jika lebarnya 400px, mereka dapat memiliki desain yang berbeda—semua tanpa mempedulikan ukuran keseluruhan viewport.

Ini sangat dekat dengan prinsip-prinsip OOP (Pemrograman Berorientasi Objek) dan hampir mengangkat CSS ke bahasa pemrograman yang sebenarnya. (Yang kita butuhkan hanyalah logika kondisional, dan kita ada di sana.)

Versi terbaru Chrome, Edge, dan sekarang Safari (termasuk seluler) mendukung CSS Grid. Bahkan mengabaikan penurunan cepat Twitter, ini jauh lebih menarik daripada tombol edit mana pun.

Subgrid CSS

Berbicara tentang Grid, jika Anda telah membangun sebuah situs dengannya (dan jika Anda belum melakukannya, dari mana saja Anda?), Anda akan tahu bahwa elemen yang cocok dalam struktur HTML yang kompleks sering kali menghasilkan grid bersarang. Mencocokkan kisi-kisi tersebut membutuhkan manajemen yang cermat, variabel CSS, atau keduanya. Dengan Subgrid CSS, kisi dapat mewarisi definisi kisi dari kisi yang ditentukan lebih tinggi dalam hierarki.

CSS Subgrid telah didukung oleh Firefox untuk sementara waktu tetapi belum menjadi bagian dari Chrome atau Edge. Sampai ada dukungan yang lebih luas, itu bukan solusi praktis, dan menggunakan fallback meniadakan manfaat apa pun dari penggunaan Subgrid. Namun, pengenalannya di Safari pasti akan menyambut adopsi yang cepat oleh Google dan Microsoft dan memajukan web secara signifikan.

CSS Subgrid kemungkinan akan menjadi solusi praktis dalam waktu 18 bulan.

Dukungan AVIF

AVIF adalah format gambar yang sangat ringkas yang bahkan mengalahkan WebP dalam banyak hal. Bahkan memungkinkan untuk urutan, membuat apa yang pada dasarnya adalah GIF animasi tetapi lebih kecil, dan untuk bitmap.

AVIF sudah didukung oleh Chrome, dengan dukungan sebagian di Firefox. Safari sekarang bergabung dengan mereka.

Dukungan AVIF adalah salah satu tambahan yang lebih berharga untuk Safari 16 karena Anda mungkin sudah menyajikan gambar yang berbeda di dalam elemen gambar. Jika demikian, pengguna Safari 16 Anda akan mulai menerima muatan yang lebih kecil secara otomatis, mempercepat situs Anda dan meningkatkan UX dan SEO.

Animasi yang Ditingkatkan

Safari 16 memperkenalkan beberapa peningkatan signifikan dalam animasi, tetapi salah satu yang menarik perhatian adalah Anda sekarang dapat menganimasikan CSS Grid.

Ya, biarkan itu meresap. Gabungkan Kueri Penampung dan animasi. Kemungkinan untuk status hover pada elemen menggiurkan.

Safari 16 juga mendukung CSS Offset Path — awalnya dikenal sebagai CSS Motion Path — yang memungkinkan Anda menganimasikan elemen di sepanjang jalur yang ditentukan. Ini memungkinkan jenis efek animasi yang sebelumnya membutuhkan JavaScript (atau Flash!) untuk diselesaikan.

Chrome, Edge, dan Firefox semuanya mendukung CSS Offset Path; penambahan Safari berarti sekarang solusi praktis yang dapat digunakan di alam liar.

Ekstensi Inspektur Web

Diumumkan sebagai bagian dari rilis beta, Ekstensi Inspektur Web memungkinkan pengembang web membuat ekstensi untuk Safari, seperti yang mereka lakukan untuk Chrome.

Ekstensi Inspektur Web — atau Ekstensi Safari seperti yang ditakdirkan untuk diketahui — dapat dibuat dalam HTML, CSS, dan JS, sehingga kurva pembelajarannya dangkal. Ini adalah rute yang baik ke dalam pengembangan aplikasi untuk desainer web.

Karena teknologi yang mendasarinya sama dengan ekstensi browser lainnya, siapa pun yang telah membuat ekstensi Chrome, Edge, atau Firefox akan dapat mem-portingnya ke Safari 16+ dengan relatif mudah. Akibatnya, harus ada perluasan cepat dari ekstensi yang tersedia.

Peningkatan Aksesibilitas

Aksesibilitas adalah kunci untuk web yang efektif dan inklusif. Jadilah seperti Bosch: semua orang penting, atau tidak ada yang diperhitungkan.

Saat menguji desain untuk aksesibilitas, emulator tidak memotongnya. Dalam pengalaman saya, Safari memiliki beberapa pengaturan aksesibilitas yang paling andal, terutama dalam hal Media Queries seperti preferensi-pengurangan-gerakan.

Keuntungan lebih lanjut di bidang ini berarti bahwa Safari terus menjadi alat penting untuk pengujian QA.

Reset yang Dikurangi

Akhirnya, saya ingin mengangkat tangan untuk merayakan pengurangan jumlah pengaturan tampilan CSS non-standar.

Selama bertahun-tahun kami telah mengawali lembar gaya kami dengan pengaturan ulang yang rumit seperti Normalisasi, yang dirancang untuk membatalkan semua asumsi yang dibuat oleh pengembang browser tentang desain dan preferensi UI dari para insinyur mereka.

Safari 16 dilaporkan telah “Menghapus sebagian besar nilai tampilan CSS non-standar.” Seberapa efektif ini dan seberapa besar kita dapat mengandalkannya mengingat browser lain di pasar masih harus dilihat. Namun, seperti banyak perubahan Safari 16, ini merupakan langkah menuju browser yang ada di pihak pengembang alih-alih hambatan untuk diatasi.

By AKDSEO