Kueri Kontainer dan Tipografi

Kembali pada tahun 2013 ketika saya memulai karir saya, ada beberapa masalah besar dengan CSS:

1. Kami harus mengandalkan Sass untuk mendapatkan variabel yang membuat semuanya jauh lebih rumit dari yang diperlukan (membangun lingkungan dan sejenisnya).
2. Kami harus mengandalkan serangkaian kompleks display:floats dan ada banyak buku dan alat serta posting blog yang didedikasikan untuk membuat peretasan rumit ini dapat dipahami.
3. Kami hanya (hanya!) memiliki kueri media sehingga kami dapat menyesuaikan tata letak kami dengan ukuran jendela browser, tetapi kami tidak dapat menyesuaikan komponen ke wadah tempat Anda meletakkannya yang kemungkinan besar ingin Anda lakukan setidaknya 50% waktu.

Tentu, ada segala macam gangguan lain seperti ketidakkonsistenan browser dan apa yang tidak, tetapi ini adalah masalah utama yang menyebabkan gangguan sehari-hari dan keluhan dengan CSS. Mereka memperlambat kami dan menambahkan waktu dan kerumitan yang tidak perlu pada pekerjaan kami.

Tapi sekarang, di tahun 2023, lihat:

1. Kami memiliki properti khusus! Saya telah menulis CSS biasa selama bertahun-tahun sekarang dan saya sangat senang tanpa menambahkan hal lain ke proses pembuatan saya hanya untuk mendapatkan variabel di Sass.
2. Kotak CSS ada! Dan bahkan lebih baik lagi, subgrid didukung dengan baik di browser!
3. Dan yang tak kalah pentingnya, kueri kontainer!

Inilah mengapa saya menjadi sangat kesal ketika orang-orang membicarakan CSS. Lihat saja berapa banyak itu tumbuh! Kekuatan kosmik CSS yang tak terbatas pada tahun 2023!

Item terakhir itu—kueri kontainer—Akhirnya telah dicentang dari daftar ember CSS saya yang liar bagi saya karena hanya beberapa tahun yang lalu orang membicarakannya seolah-olah itu adalah alkimia atau mobil yang bisa mengemudi sendiri; masa depan yang mustahil yang harus kita tinggalkan untuk diimpikan. Tapi sekarang? Ini dia, tersedia di setiap browser utama.

Jadi saya telah memikirkan tentang daftar keinginan ini dan dampak kueri penampung seperti apa yang akan terjadi pada saya sebagai desainer dan pengembang karena setiap perubahan besar dalam CSS mengharuskan kami menyesuaikan cara kami bekerja, cara berpikir kami tentang situs web.

Lalu, apa yang dimungkinkan oleh kueri kontainer?

Untuk menjawab pertanyaan itu kita harus mulai dari awal. Kembali pada tahun 2013, desainer web kami hanya dapat mendeteksi lebar jendela browser. Ini sangat bermasalah dalam hal tipografi; katakanlah Anda memiliki tajuk seperti ini …

<h2>This is a heading</h2>

…sebagian besar waktu Anda ingin tajuk ini memiliki ukuran font 22px dan tinggi garis 23px. Hal yang baik untuk dilakukan pengembang adalah memulai dengan gaya layar yang lebih kecil terlebih dahulu dan kemudian membangun gaya desktop Anda seperti ini:

h2 
font-size: 18px;
line-height: 20px;
@media screen and (min-width: 700px) 
h2 
font-size: 22px;
line-height: 23px;

(Idealnya kita tidak boleh menggunakan piksel sama sekali, tapi kita berpegang teguh pada itu di sini demi kesederhanaan.)

Bagus, keren. Kami memiliki gaya tipe kami untuk tajuk kami. Itu sepuluh baris CSS untuk satu judul dan dua kueri media. Di banyak situs web dan aplikasi yang telah saya kerjakan, setidaknya ada 3 kueri media terpisah untuk setiap heading h1 ke h6. Jadi ini dapat dengan mudah menghasilkan ratusan baris CSS hanya untuk gaya tipografi Anda.

Yang memperburuk keadaan adalah ini: bayangkan seorang desainer di tim kami sekarang telah memberi kami maket di mana konten yang sama harus ada di sidebar atau di kartu atau dalam situasi lain di mana segala sesuatunya lebih kecil atau lebih besar. Yah, sial, gaya kueri media kami di sana tidak akan memotongnya sekarang. H2 itu akan terlihat terlalu besar dan tersendat di sidebar. Jadi pilihan apa yang kita miliki?

Peretasan seperti ini, pasti…

.sidebar h2   
.sidebar-heading   

…atau, mungkin lebih buruk lagi…

<h3>A heading that should be a h2.</h3>

…apa pun itu, kami harus menggunakan semacam peretasan karena kami tidak punya pilihan selain mengikat ukuran font dan tinggi garis dengan ukuran jendela browser. Sekeren mereka, hanya itu yang diizinkan oleh kueri media.

Apa yang selalu kami butuhkan adalah skala judul berdasarkan wadah tempat Anda memasukkannya. Jika Anda memasukkan h2 atau paragraf ke dalam wadah yang terlalu lebar atau terlalu pendek, maka kami memerlukan gaya tipografi untuk menyesuaikannya. Ini terutama berlaku untuk line-height Properti CSS yang selalu menjadi mimpi buruk karena kami tidak dapat membuat hubungan ini berhasil.

Lihat basis kode apa pun di aplikasi apa pun dan cari line-height. Anda pasti akan melihat ratusan peretasan kecil di mana orang menyesuaikannya berulang kali:

line-height...
line-height...
line-height...
line-height...
line-height...
line-height...
line-height...

Orang-orang hanya mencoba membuat teks berfungsi dalam wadah apa pun yang mereka lemparkan judul atau a <p> masuk dan hal termudah untuk dilakukan adalah menambahkan kelas pada induknya dan menyelesaikannya.

Ini karena dalam tipografi, ukuran font, tinggi garis, dan ukuran (lebar teks) semuanya dihubungkan bersama. Jika Anda mengubah salah satu variabel ini, Anda mungkin harus mengubah yang lain sebagai tanggapan.

Oke, jadi di sinilah kueri kontainer masuk; sekarang di tahun 2023 kita tidak lagi harus membuat retasan seperti di atas karena kita akhirnya dapat membuat hubungan tipografi yang tepat: antara teks dan wadah tempat Anda memasukkannya. Mari kita buat contoh untuk menjelaskan bagaimana kueri wadah dapat membantu kita.

Untuk memulai, mari kita tulis HTML yang bagus:

<div class="container large">
<h2>Yosemite National Park</h2>
</div>
<div class="container">
<h2>Yosemite National Park</h2>
</div>

Jadi di sini kita memiliki dua pilihan, konten kita di area tubuh utama dan konten sidebar yang bisa kita gaya seperti itu…

body 
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
.large 
grid-column-start: 1;
grid-column-end: 4;

Hebat – kami sekarang memiliki dua wadah yang terlihat seperti ini:

Lihat Kueri Pen Container + Tipografi oleh Robin Rendle (@robinrendle) di CodePen.

Lihatlah sidebar; ada yang tidak beres karena tinggi garis kita salah dan ukuran font terlalu besar. Sesuatu harus dilakukan tentang ini! Menyeramkan!

Untuk mulai menggunakan kueri penampung, pertama-tama kita perlu memberi tahu penampung untuk memasang sabuk pengaman dan memperhatikan, kita akan mulai memperhatikan ukurannya mulai sekarang:

.container 
container-type: inline-size;

Di otak bodoh saya, ini “mengaktifkan” kueri wadah tetapi ini juga melakukan banyak hal lain yang belum ingin saya selami. Jangan khawatir tentang itu untuk saat ini, pada dasarnya berarti kita sekarang dapat melakukan sesuatu seperti ini dengan CSS kita:

@container (max-width: 480px) 
h2 
color: red;

@container (min-width: 480px) 
h2 
color: blue;

Perhatikan baik-baik! Itu bukan kueri media di sana, memeriksa untuk melihat apakah lebar jendela browser memiliki ukuran tertentu. Itu di sana ada kueri kontainer; jika elemen induk dari kita h2 kurang dari 480px akan berubah menjadi merah atau jika lebih dari 480px maka akan berubah menjadi biru.

Ini tampak seperti keajaiban mutlak bagi saya, seseorang yang dengan senang hati mengingat perbaikan yang jelas di masa lalu, tetapi ini benar-benar berfungsi di browser hari ini:

Lihat Pen Container Queries + Typography 3 oleh Robin Rendle (@robinrendle) di CodePen.

Sekarang dengan @containerkita dapat mulai menyesuaikan gaya tipe kita dengan cara apa pun yang kita suka—dan kita akan membahasnya—namun menurut saya semua wadah ini sebenarnya lebih kuat saat Anda mulai menggunakannya unit kueri kontainer seperti ini:

h2 
font-size: 50cqw;

Apa apa? Ini terlihat seperti sihir luar angkasa yang jahat.

1cqw di sini sama dengan 1% dari lebar elemen induk kita dan artinya adalah kita akhirnya dapat membuat tipografi kita sebanding dengan ukuran wadahnya tetapi dengan cara yang jauh lebih rapi. Ini luar biasa! Ada banyak nilai lain yang bisa kita gunakan juga:

cqw, cqh, cqi, cqb, cqmin, cqmax

Saya tidak akan membahasnya karena saya masih membungkus kepala saya dengan semua hal yang rendah hati cqw unit terbuka.

Anyway, mari kita kembali ke contoh kita dengan area konten utama dan sidebar. Bagaimana unit-unit ini membantu kita di sana? Nah, kita dapat mengatur ukuran font dan tinggi garis paragraf kita untuk meluas dan menyusut tergantung pada ukuran wadah seperti ini:

p 
font-size: clamp(1rem, 2.5cqw, 2rem);
line-height: clamp(1.35rem, 3.5cqw, 1.9rem);

Apakah Anda mendengar malaikat bernyanyi atau hanya saya? Berikut adalah contoh cepat yang menunjukkan tajuk dan teks isi menyesuaikan dengan lebar induk…

(Anda mungkin perlu membuka ini di layar yang lebih besar untuk melihat efek penuhnya.)

Lihat Pen Container Queries + Typography 3 oleh Robin Rendle (@robinrendle) di CodePen.

Kode di atas mungkin terlihat aneh jika Anda tidak terbiasa dengan hal ini, tetapi yang kami lakukan adalah menyetel ukuran font min remmaka kami menggunakan nilai tengah dari clamp() berfungsi untuk memberi tahu browser tentang ukuran ideal kita cqw, lalu akhirnya ukuran font maksimum. Itu berarti teks kita tidak akan pernah menjadi terlalu besar atau terlalu kecil dan jika dev melempar paragraf itu ke sidebar atau kartu atau sesuatu maka teks kita akan selalu terlihat bagus.

Berikut adalah contoh ratusan baris peretasan CSS yang dapat dikurangi dengan kueri kontainer:

h1 
font-size: clamp(...);
line-height: clamp(...);
h2 
font-size: clamp(...);
line-height: clamp(...);
h3 
font-size: clamp(...);
line-height: clamp(...);
h4 
font-size: clamp(...);
line-height: clamp(...);
h5 
font-size: clamp(...);
line-height: clamp(...);
h6 
font-size: clamp(...);
line-height: clamp(...);
p 
font-size: clamp(...);
line-height: clamp(...);

(Catatan tambahan: ini hanyalah sebuah contoh jadi saya telah menghapus nilainya, tetapi saya juga tidak tahu seberapa buruk kinerjanya. Jangan ragu untuk meneriaki saya di sini dan saya akan menambahkan catatan nanti.)

Hal ini indah bagi saya, pujian yang sempurna untuk bahasa CSS. Kueri kontainer membuat peretasan tipografi selama beberapa dekade menjadi tidak relevan sehingga ini terasa seperti akhir dari sebuah era bagi saya. Saya yakin ada sepuluh ribu masalah lain dengan CSS yang tidak saya sadari dan ratusan fitur luar biasa akan hadir dalam waktu dekat, tetapi sekarang daftar keranjang CSS saya sudah lengkap.

Saya merasa kita membutuhkan nama untuk era ini, ketika CSS mulai menjadi sangat bagus. Ada titik potong yang jelas di suatu tempat di Masa Sebelumnya dan periode yang kita jalani sekarang, The Great CSS-ing. Mungkin itu dimulai dengan flexbox, atau ketika CSS Grid diluncurkan, mungkin saat itulah segalanya mulai sangat cepat. Tapi tipografi bukan lagi serangkaian peretasan keren dan sebagai gantinya sekarang menjadi warga negara yang sepenuhnya matang di browser pada tahun 2023. Kami tipografi web akhirnya dapat membuat hubungan yang selalu kami butuhkan: ukuran font, tinggi garis, ukuran.

Omelanku yang tak ada habisnya telah berakhir.