Cara kerja penataan gaya

Topik ini menjelaskan cara browser mengubah berkas HTML dan CSS menjadi halaman yang tampak di layar, mulai dari penguraian dokumen menjadi DOM dan CSSOM, urutan tahap pipeline render, hingga konsep computed style. Bagian akhir memberikan pandangan pertama terhadap panel DevTools. Pemahaman alur ini menjadi dasar ketika hasil gaya di layar tidak sesuai dengan yang ditulis.

Penguraian HTML menjadi DOM#

Sebelum satu piksel pun digambar, browser menguraikan (parse) berkas HTML menjadi struktur data bernama DOM, singkatan dari Document Object Model. DOM berbentuk pohon berisi simpul (node) yang mewakili setiap elemen dan teks dalam dokumen. Elemen html menjadi akar pohon, cabangnya berisi head dan body, dan setiap elemen anak menggantung di bawah induknya sesuai urutan penulisannya. Struktur ini yang sesungguhnya digunakan browser, bukan teks mentah berkas HTML.

Pohon DOM juga menjadi sasaran setiap selector CSS. Ketika sebuah aturan menyebut h1, browser mencari simpul elemen h1 pada pohon tersebut, bukan mencari teksnya di berkas. Karena itu, perubahan struktur HTML langsung memengaruhi hasil penataan gaya. Elemen yang tersarang lebih dalam mewarisi konteks dari induknya, dan hubungan antar elemen menjadi dasar penunjukan sasaran yang lebih presisi.

Penguraian CSS menjadi CSSOM#

Berkas CSS mengalami penguraian yang serupa, tetapi hasilnya bernama CSSOM, singkatan dari CSS Object Model. CSSOM memuat seluruh aturan gaya dalam bentuk pohon yang siap dicocokkan dengan DOM. Selama penguraian, aturan yang tidak sah dilewati, misalnya deklarasi dengan properti yang tidak dikenal, sehingga satu kesalahan ketik tidak menggagalkan seluruh berkas. Perilaku ini menjelaskan mengapa kesalahan kecil pada CSS sering tidak menimbulkan pesan error sama sekali.

DOM dan CSSOM dibangun oleh dua pengurai yang berbeda, tetapi keduanya selesai sebelum tahap berikutnya dimulai. DOM menyimpan struktur, sedangkan CSSOM menyimpan aturan penyajian. Kecepatan penguraian CSS umumnya tinggi karena berkasnya kecil, tetapi prinsip penundaan perenderan ini berlaku sama pada semua ukuran berkas. Keduanya bertemu pada pipeline render yang dibahas pada bagian berikutnya.

Pipeline render#

DOM dan CSSOM bertemu pada pipeline render, yaitu rangkaian tahap yang dijalankan browser untuk mengubah dokumen menjadi piksel di layar. Proses menggambar ini disebut rendering atau perenderan. Diagram berikut memuat alur lengkapnya dari berkas sumber hingga tampilan.

Tahap pertama adalah perhitungan gaya (style computation). Browser mencocokkan setiap aturan CSSOM dengan setiap simpul DOM, lalu menghitung nilai akhir semua properti untuk setiap elemen. Tahap layout menentukan geometri setiap elemen berupa posisi dan ukurannya. Tahap paint menggambar isi setiap elemen menjadi piksel pada lapisan, dan tahap composite menggabungkan lapisan-lapisan itu menjadi gambar utuh yang ditampilkan.

Tidak semua perubahan mengulang seluruh pipeline. Perubahan warna biasanya berhenti pada paint, sedangkan perubahan ukuran memaksa layout dihitung ulang, sebuah proses yang dikenal sebagai reflow. Pemahaman ini berguna ketika halaman terasa lambat, sebab biaya setiap tahap berbeda, dan layout termasuk tahap yang berat karena memengaruhi posisi banyak elemen lain.

Computed style#

Hasil tahap perhitungan gaya disebut computed style, yaitu nilai akhir setiap properti untuk satu elemen setelah seluruh aturan, pewarisan, dan nilai bawaan browser dipertimbangkan. Nilai relatif diubah menjadi nilai mutlak pada tahap ini. Contoh berikut memuat dua deklarasi pada kelas kartu:

/* Elemen induk kartu menggunakan font-size 16px */
.kartu {
  font-size: 1.25em;
  border-width: 2px;
}

Apabila elemen induknya menggunakan font-size: 16px, computed style untuk font-size pada kartu menjadi 20px karena 1.25em dikalikan dengan ukuran induk. Nilai border-width tetap 2px karena piksel tidak relatif terhadap elemen lain. Tahap layout selanjutnya hanya bekerja dengan nilai mutlak hasil perhitungan ini, sehingga tidak ada lagi satuan relatif yang tersisa. Nilai akhir semacam inilah yang ditampilkan pada tab Computed di DevTools, dan tab itu menjadi tempat tercepat untuk melihat hasil nyata dari deklarasi yang ditulis.

Pandangan pertama DevTools#

DevTools adalah kumpulan alat pemeriksaan yang tersedia pada setiap browser modern. Alat ini dibuka dengan klik kanan pada halaman lalu memilih menu Inspect atau Periksa, atau dengan menekan tombol F12. Panel Elements menampilkan pohon DOM halaman yang sedang dibuka. Aturan gaya untuk elemen yang dipilih ditampilkan pada panel Styles yang berada di sebelah panel Elements. Panel Styles mengurutkan aturan sesuai urutan penerapannya, menampilkan nilai yang dicoret karena kalah dari aturan lain, serta menyertakan nilai bawaan browser pada bagian bawah.

Cara paling cepat memahami panel ini adalah mencobanya pada halaman nyata. Buka halaman apa pun, pilih satu elemen pada panel Elements, lalu amati daftar aturan pada panel Styles. Ubah satu nilai, misalnya ukuran huruf, dan layar akan merespons seketika. Perubahan semacam ini hanya hidup pada sesi tersebut dan hilang ketika halaman dimuat ulang, sehingga eksperimen bebas dilakukan tanpa risiko merusak berkas.

Ringkasan#

• Browser menguraikan HTML menjadi DOM dan CSS menjadi CSSOM sebelum perenderan pertama dimulai.
• Pipeline render tersusun atas perhitungan gaya, layout, paint, dan composite.
• Computed style adalah nilai akhir setiap properti setelah seluruh aturan, pewarisan, dan nilai bawaan dipertimbangkan.
• Panel Elements dan Styles pada DevTools memperlihatkan DOM beserta aturan gaya yang berlaku pada elemen terpilih.

Referensi#

• Populating the page: how browsers work — MDN — Penjelasan resmi alur browser dari penerimaan dokumen hingga render.
• Document Object Model (DOM) — MDN — Gambaran umum DOM sebagai representasi dokumen.
• View and change CSS — Chrome DevTools — Panduan resmi penggunaan panel Elements, Styles, dan Computed.