Apa! Penting #4: Transisi video dan tampilan, kueri media yang diberi nama, cara kerja browser, dan banyak lagi – Beragampengetahuan

Chrome, Safari, dan Firefox belum meluncurkan fitur baru dalam beberapa minggu terakhir, namun jangan khawatir, karena yang memimpin edisi Yang Penting ini adalah beberapa pendidik terbaik di industri pengembangan web, dan sejujurnya, mereka memiliki beberapa pembunuh isi.

Gunakan transisi tampilan untuk mempertahankan status video di halaman berbeda

Chris Coyier mendemonstrasikan cara menggunakan transisi tampilan CSS untuk mempertahankan status video di halaman berbeda. Dia menunjukkan bahwa untuk transisi tampilan halaman yang sama hal ini cukup mudah dilakukan, namun untuk transisi tampilan halaman ganda Anda perlu memanfaatkan JavaScript pageswap Acara digunakan untuk menyimpan informasi tentang status video sessionStorage sebagai string JSON (juga berfungsi untuk audio dan iframe) dan kemudian menggunakan informasi tersebut untuk memulihkan status pagereveal. ya ada satu Ini Audionya sedikit terputus-putus karena secara teknis kami berpura-pura, tapi masih cukup rapi.

Selain itu, saya yakin Anda sudah mengetahuinya, CodePen, yang didirikan oleh Chris, telah mengumumkan versi beta pribadi CodePen 2.0 yang dapat Anda minta untuk bergabung. Salah satu manfaat CodePen 2.0 adalah Anda dapat membuat proyek sebenarnya dengan banyak file, yang berarti Anda dapat membuat transisi tampilan di CodePen. Dingin!

Cara “memberi nama” kueri media

Kevin Powell menunjukkan kepada kita cara “memberi nama” kueri media menggunakan kaskade CSS. Teknologi ini tidak sebaik @custom-media (Atau bahkan kueri bergaya container, seperti yang disarankan oleh salah satu pemberi komentar) Namun hingga semua browser web mendukung kueri ini, trik Kevin cukup kreatif.

Adam Argyle mengingatkan kita minggu lalu @custom-media Ini sedang diuji coba di Firefox Nightly (belum ada kabar tentang kueri bergaya container), tetapi jika Anda mempercepat lapisan cascading CSS, Anda dapat memanfaatkan tip Kevin untuk sementara.

Penyetelan ulang Vale CSS

Saya suka reset CSS yang bagus. Tidak peduli seberapa banyak saya membaca, saya selalu menemukan sesuatu yang hebat dan menambahkannya ke pengaturan ulang saya sendiri. Saya mencuri reset CSS Vale svg:not([fill]) { fill: currentColor; }tapi apa yang bisa Anda peroleh darinya lebih dari itu!

Cara kerja peramban

Jika Anda pernah bertanya-tanya bagaimana sebenarnya browser web bekerja—bagaimana mereka mendapatkan alamat IP, membuat permintaan HTTP, mengurai HTML, membuat pohon DOM, merender tata letak, dan menggambar—maka How Browsers Work karya Dmytro Krasun yang baru-baru ini dirilis adalah bacaan interaktif yang sangat menarik. Ini memang membuat Anda bertanya-tanya tentang hambatan dalam bahasa pengembangan web dan mengapa fitur HTML, CSS, dan JavaScript tertentu seperti itu.

Cara kerja tata letak CSS

Selain itu, Polypane menjelaskan dasar-dasar tata letak CSS, termasuk model kotak, garis dan garis dasar, skema pemosisian, konteks penumpukan, tata letak kisi, dan Flexbox. Jika Anda baru mengenal CSS, saya rasa penjelasan ini akan sangat membantu Anda memahaminya. Jika Anda seorang veteran (seperti saya), menurut saya penting untuk memahami bagaimana konsep dasar ini diterapkan pada fitur CSS yang lebih baru, terutama karena CSS berkembang secara eksponensial akhir-akhir ini.

CSS Masonry (Mungkin) Akan Hadir

Berbicara tentang tata letak, Jen Simmons menjelaskan kapan kami dapat menggunakannya display: grid-lanesjuga dikenal sebagai Masonry CSS. Meskipun belum didukung di browser web apa pun, Firefox, Safari, dan Chrome/Edge mendukungnya semua Cobalah dan segalanya akan berubah dengan cepat. Bagaimanapun, Jen menyediakan beberapa polyfill!

Jika Anda ingin selangkah lebih maju, biarkan Sunkanmi Fafowora memandu Anda display: grid-lanes.

Animasi tema menggunakan sintaks warna relatif

Jika Anda terobsesi dengan sistem desain dan organisasi, dan cenderung menganggap ilustrasi dan animasi sebagai bentuk seni yang mengesankan namun berantakan, maka artikel Andy Clarke tentang animasi bertema menggunakan sintaks warna relatif CSS akan sangat membantu Anda menjembatani kesenjangan antara seni dan logika. Jika variabel CSS adalah pilihan Anda, artikel ini cocok untuk Anda.

Pola vs. Halaman (dan segala sesuatu di antaranya)

Modal? Jumlah halaman? Kotak lampu? dialog? Keterangan alat? Memahami berbagai jenis overlay dan mengetahui kapan harus menggunakan masing-masing overlay masih bisa membingungkan, terutama karena fitur CSS baru seperti popup dan penelepon minat, meskipun sangat berguna, membuat segalanya semakin membingungkan. Singkatnya, Ryan Neufeld memperjelas seluruh hubungan modal ke halaman dan bahkan menyediakan kerangka kerja untuk memutuskan jenis overlay yang akan digunakan.

Chrome Canary sedang menguji coba dukungan zoom teks

Tahukah Anda kapan harus menangani teks yang bertambah atau berkurang pada tingkat sistem operasi? Cemerlang…Jika Anda seorang pengembang web, mungkin tidak. Lagi pula, fitur ini tidak berfungsi di Internet! Namun, Josh Tumath memberi tahu kami bahwa Chrome Canary sedang bereksperimen dengan tag meta yang akan membuat browser web mematuhi pengaturan sistem operasi ini. Jika Anda penasaran, itu dia <meta name="text-scale" content="scale">tapi Josh lebih detail dan layak dibaca.

Sampai jumpa lain waktu!