Properti CSS rasio aspek baru yang didukung di Chromium, Safari Technology Preview, dan Firefox Nightly

Properti CSS baru yang membantu menjaga spasi dalam tata letak responsif.

Una Kravets

Catatan: Ringkasan: Mempertahankan rasio lebar tinggi yang konsisten, yang disebut rasio aspek, sangat penting dalam desain web yang responsif dan untuk mencegah pergeseran tata letak kumulatif. Sekarang, ada cara yang lebih mudah untuk melakukannya dengan peluncuran properti aspect-ratio baru di Chromium 88, Firefox 87, dan Pratinjau Teknologi Safari 118.

Rasio aspek

Dukungan Browser

• 88
• 88
• 89
• 15 tahun

Sumber

Rasio aspek biasanya dinyatakan sebagai dua bilangan bulat dan tanda titik dua dalam dimensi: width:height, atau x:y. Rasio aspek yang paling umum untuk fotografi adalah 4:3 dan 3:2, sedangkan video, dan kamera konsumen yang lebih baru, cenderung memiliki rasio aspek 16:9.

Dua gambar dengan rasio aspek yang sama. Satu berukuran 634 x 951 piksel sementara yang lain berukuran 200 x 300 piksel. Keduanya memiliki rasio aspek 2:3.

Dengan munculnya desain responsif, menjaga rasio aspek menjadi semakin penting developer web, terutama karena dimensi gambar berbeda dan ukuran elemen berubah berdasarkan spasi.

Beberapa contoh saat mempertahankan rasio aspek menjadi penting adalah:

• Membuat iframe responsif, dengan panjang 100% dari lebar induk, dan tingginya harus tetap rasio area pandang tertentu
• Membuat penampung placeholder intrinsik untuk gambar, video, dan sematan untuk mencegah tata letak ulang saat item dimuat dan menggunakan ruang
• Menciptakan ruang yang seragam dan responsif untuk visualisasi data interaktif atau animasi SVG
• Membuat ruang yang seragam dan responsif untuk komponen multi-elemen seperti kartu atau tanggal kalender
• Menciptakan ruang yang seragam dan responsif untuk berbagai gambar dari berbagai dimensi (dapat digunakan bersama object-fit)

Pas di objek

Dengan menentukan rasio aspek, kami dapat menentukan ukuran media dalam konteks responsif. {i>Tool<i} lain dalam bucket adalah properti object-fit, yang memungkinkan pengguna mendeskripsikan cara suatu objek (seperti gambar) dalam satu blok harus mengisi blok itu:

Menampilkan berbagai nilai object-fit. Lihat demo di Codepen.

Nilai initial dan fill menyesuaikan kembali gambar untuk mengisi ruang. Dalam contoh kita, ini menyebabkan gambar menjadi dipersempit dan buram, saat piksel menyesuaikan kembali. Tidak ideal. object-fit: cover penggunaan dimensi terkecil gambar untuk mengisi ruang dan memangkas gambar agar sesuai dengannya berdasarkan dimensi kustom. Fitur "memperbesar" pada batas terendahnya. object-fit: contain memastikan bahwa seluruh gambar selalu terlihat, sehingga kebalikan dari cover, yang mengambil ukuran batas terbesar (pada contoh di atas, ini adalah lebar), dan mengubah ukuran gambar untuk mempertahankan rasio aspek intrinsiknya sembari menyesuaikan dengan ruang tersebut. Kasus object-fit: none menampilkan gambar yang dipangkas di bagian tengahnya (posisi objek default) pada ukuran alaminya.

object-fit: cover cenderung berfungsi di sebagian besar situasi untuk memastikan antarmuka seragam yang bagus saat menangani dengan gambar dari berbagai dimensi, namun, Anda kehilangan informasi dengan cara ini (gambar dipangkas pada tepi terpanjangnya).

Jika detail ini penting (misalnya, saat menangani tata letak datar produk kecantikan), memangkas konten yang penting tidak dapat diterima. Jadi skenario yang ideal adalah gambaran responsif dari berbagai ukuran sesuai dengan ruang UI tanpa pemangkasan.

Metode lama: mempertahankan rasio aspek dengan padding-top

Menggunakan padding-top untuk menetapkan rasio aspek 1:1 pada gambar pratinjau postingan dalam carousel.

Untuk membuatnya lebih responsif, kita dapat menggunakan rasio aspek. Hal ini memungkinkan kita untuk menetapkan ukuran rasio tertentu dan buat media lainnya berdasarkan pada masing-masing sumbu (tinggi atau lebar).

Solusi lintas browser yang saat ini diterima dengan baik untuk mempertahankan rasio aspek berdasarkan dikenal sebagai "Padding-Top Hack". Solusi ini memerlukan container induk dan container turunan yang benar-benar ditempatkan. Kemudian kita akan menghitung rasio aspek sebagai persentase yang harus ditetapkan sebagai padding-top. Contoh:

• Rasio aspek 1:1 = 1 / 1 = 1 = padding-top: 100%
• Rasio aspek 4:3 = 3 / 4 = 0,75 = padding-top: 75%
• Rasio aspek 3:2 = 2 / 3 = 0,66666 = padding-top: 66.67%
• Rasio aspek 16:9 = 9 / 16 = 0,5625 = padding-top: 56.25%

Setelah mengidentifikasi nilai rasio aspek, kita dapat menerapkannya ke penampung induk. Perhatikan contoh berikut:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

Selanjutnya, kita dapat menulis CSS berikut:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Mempertahankan rasio aspek dengan aspect-ratio

Menggunakan aspect-ratio untuk menetapkan rasio aspek 1:1 pada gambar pratinjau postingan dalam carousel.

Sayangnya, menghitung nilai padding-top ini tidak terlalu intuitif, dan memerlukan beberapa overhead dan positioning tambahan. Dengan CSS aspect-ratio intrinsik yang baru , bahasa untuk mempertahankan aspek rasio ini menjadi jauh lebih jelas.

Dengan markup yang sama, kita dapat mengganti: padding-top: 56.25% dengan aspect-ratio: 16 / 9, setelan aspect-ratio dengan rasio width / height yang ditentukan.

Menggunakan padding-top

.container {
  width: 100%;
  padding-top: 56.25%;
}

Menggunakan rasio aspek

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Menggunakan aspect-ratio, bukan padding-top, jauh lebih jelas, dan tidak merombak padding properti untuk melakukan sesuatu di luar cakupan biasanya.

Properti baru ini juga menambahkan kemampuan untuk menetapkan rasio aspek ke auto, dengan "mengganti elemen dengan rasio aspek intrinsik, menggunakan aspek tersebut rasio; jika tidak, kotak tersebut tidak memiliki rasio aspek yang diinginkan." Jika auto dan <ratio> adalah ditentukan bersama-sama, rasio aspek yang disarankan adalah rasio width yang ditentukan dibagi height, merupakan elemen yang diganti dengan rasio aspek intrinsik, di mana rasio aspek tersebut digunakan.

Contoh: konsistensi dalam petak

Ini bekerja dengan sangat baik dengan mekanisme tata letak CSS seperti CSS Grid dan Flexbox. Pertimbangkan daftar dengan anak-anak yang ingin Anda pertahankan rasio aspek 1:1, seperti petak ikon sponsor:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

Gambar dalam petak dengan elemen induknya pada berbagai dimensi rasio aspek. Lihat demo di Codepen.

Contoh: mencegah pergeseran tata letak

Fitur hebat lainnya dari aspect-ratio adalah kemampuannya dapat membuat ruang placeholder untuk mencegah Pergeseran Tata Letak Kumulatif dan memberikan Data Web yang lebih baik. Dalam misalnya, memuat aset dari API seperti Unsplash akan membuat pergeseran tata letak ketika media selesai dimuat.

Video pergeseran tata letak kumulatif yang terjadi saat tidak ada rasio aspek yang ditetapkan pada aset yang dimuat. Video ini direkam dengan jaringan 3G yang diemulasi.

Di sisi lain, penggunaan aspect-ratio akan membuat placeholder untuk mencegah pergeseran tata letak ini:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Video dengan rasio aspek yang ditetapkan disetel pada aset yang dimuat. Video ini direkam dengan jaringan 3G yang diemulasi. Lihat demo di Codepen.

Tips bonus: atribut gambar untuk rasio aspek

Cara lain untuk menetapkan rasio aspek gambar adalah melalui atribut gambar. Jika Anda sudah mengetahui dimensi gambar sebelumnya, praktik terbaik adalah menyetel dimensi ini sebagai width dan height.

Untuk contoh kami di atas, jika dimensinya diketahui 800 x 600 piksel, markup gambar akan terlihat seperti ini: <img src="image.jpg" alt="..." width="800" height="600">. Jika gambar yang dikirim memiliki aspek yang sama tapi tidak harus dengan nilai piksel yang sama persis, kita masih bisa menggunakan nilai atribut untuk menetapkan rasio, dikombinasikan dengan gaya width: 100% sehingga bahwa gambar tersebut memenuhi ruang yang tepat. Semuanya akan terlihat seperti:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
}

Pada akhirnya, efeknya sama dengan menyetel aspect-ratio pada gambar melalui CSS, dan pergeseran tata letak kumulatif dapat dihindari (lihat demo di Pena kode).

Kesimpulan

Dengan properti CSS aspect-ratio yang baru, diluncurkan di beberapa browser modern, menjaga di penampung media dan tata letak Anda akan menjadi sedikit lebih mudah.

Foto oleh Amy Shamblen dan Lionel Gustave melalui Unsplash.