Cascading Style Sheets: Pengertian, Sejarah, Fungsi, dan Cara Kerjanya
 |
| Cascading Style Sheet (CSS) |
Pengertian Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS) adalah aturan guna mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS merupakan bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.
Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.
Baca Juga: Pengertian Hyperlink, Fungsi, Jenis, dan Cara Membuatnya
Tujuan utama CSS untuk membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Keunggulan bahasa CSS ini adalah konsistensi yang lebih besar dalam desain opsi pemformatan lainnya, kode ringan, dan waktu pengunduhan lebih cepat.
Sejarah CSS Cascading Style Sheet (CSS)
Tahun 1994 Hakon Wium Lie bekerja di CERN yang merupakan sebuah perusahaan di mana tempat lahirnya Web dan Web mulai digunakan sebagai platform untuk penerbitan elektronik. Namun, satu bagian penting dari platform web yaitu adalah tidak ada cara untuk menata dokumen seperti tidak adanya cara untuk menggambarkan tata letak seperti surat kabar di halaman Web.
Setelah mengerjakan presentasi surat kabar yang dipersonalisasi di MIT Media Laboratory, Hakon melihat kebutuhan akan bahasa style sheet untuk Web. Style sheet di browser bukanlah ide yang sama sekali baru. Pemisahan struktur dokumen dari tata letak dokumen telah menjadi tujuan HTML sejak awal tahun 1990.
Tim Berners-Lee menulis browser/editor NeXT-nya sedemikian rupa sehingga Tim Berners-Lee dapat menentukan gaya dengan lembar gaya sederhana. Namun, Tim Berners-Lee tidak mempublikasikan sintaks untuk lembar gaya, mengingat itu adalah masalah bagi setiap browser untuk memutuskan cara terbaik untuk menampilkan halaman kepada penggunanya.
Secara resmi, CSS diusulkan pada tahun 1994 sebagai bahasa penataan web untuk memecahkan beberapa masalah Html 4. Ada bahasa penataan lain yang diusulkan saat itu, seperti style page untuk HTML dan JSSS tetapi CSS tidak menyertakan properti di CSS2. Seiring berjalannya waktu, CSS level 2 dikembangkan oleh W3C dan diterbitkan sebagai rekomendasi pada Mei 1998.
Kemudian setelah CSS2 dikembangkan, persiapan peluncuran CSS3 dimulai pada tahun 1998 tetapi di tahun tersebut masih belum selesai. Beberapa bagian masih dikembangkan dan beberapa komponen berfungsi di beberapa browser. CSS3 baru diterbitkan pada bulan Juni 1999. CSS3 dibagi menjadi beberapa dokumen terpisah yang disebut “modul”. Setiap modul menambahkan kemampuan baru atau memperluas fitur yang ditentukan dalam CSS 2.
Fungsi Cascading Style Sheet (CSS)
CSS dapat berfungsi untuk mempercepat pemuatan halaman situs karena pengodeannya sederhana. Selain itu, terdapat beberapa fungsi CSS yang memang berhubungan langsung dengan proses penyederhanaan kerja HTML di antaranya,
1. Memuat halaman situs dengan cepat, peran CSS dalam menyederhanakan kerja HTML membuat proses pengodean akan lebih singkat sehingga hal ini berpengaruh pada penerapan dokumen dan proses pemanggilannya. Proses pembukaan halaman web dan pengunduhan dokumen dari situs akan berjalan lebih cepat daripada adanya atribut tag HTML di setiap dokumen.
2. Desain diproses dengan cepat, penggunaan CSS untuk mengerjakan desain halaman web memang terbukti mempercepat proses pembangunan sebuah halaman web. Hal ini dikarenakan pembagian kerja antara HTML yang berperan membangun struktur web dan CSS dengan perannya terfokus pada desain web. Adanya CSS function dapat memungkinkan pengembang menerapkan satu dokumen dapat muncul di berbagai halaman web tanpa penyalinan kode berulang.
3. Adaptif terhadap berbagai perangkat, fungsi CSS yang ini telah disinggung sebelumnya yaitu membuat konten halaman menjadi adaptif atau kompatibel terhadap berbagai perangkat atau browser dengan ukuran dan versi berbeda. CSS memungkinkan sebuah dokumen dibuka dalam perangkat terbaru dan versi lamanya, begitu pula berlaku pada versi browser yang dipakai pengguna.
Cara Kerja Cascading Style Sheet (CSS)
CSS bekerja saat sebuah browser menampilkan dokumen, sebabnya pada waktu itu browser harus menggabungkan konten dokumen dengan gaya informasi atau gaya presentasi dalam halaman sebuah situs. Untuk membangun sebuah halaman situs dan membuat presentasinya semenarik mungkin, CSS memiliki beberapa langkah cara kerja yang bisa digambarkan sebagai berikut di antaranya,
1. Load HTML, dalam tahap ini browser memuat HTML dari jaringan
2. Parse HTML, pada tahap ini terjadi penguraian HTML untuk membuat document object model (DOM) dan memuat CSS. DOM bertindak untuk mewakili dokumen dalam memori komputer. DOM memiliki struktur seperti pohon dan mencakup elemen, atribut, potongan teks dalam bahasa markup yang menjadi simpulnya atau struktur pohon DOM. DOM dapat membantu pengembang untuk mendesain, men-debug, dan memelihara CSS karena DOM adalah tempat di mana CSS dan konten dokumen bertemu.
3. Load CSS, peramban atau browser kemudian memuat sebagian besar sumber daya yang akan ditautkan oleh dokumen HTML, seperti gambar atau video sematan. Dalam hal ini kemudian CSS dimuat dan ditautkan.
4. Parse CSS, sama halnya HTML, CSS juga kemudian diurai dengan mengurutkan aturan yang berbeda berdasarkan jenis pemilihnya ke dalam bucket yang berbeda seperti elemen, kelas, ID, dan sebagainya. Penyeleksian ini nantinya menentukan aturan mana yang harus diterapkan ke simpul-simpul DOM.
5. Render tree, penyeleksian dalam setiap elemen CSS yang akan diterapkan ke simpul DOM sesuai kebutuhannya tadi disebut render tree. Render tree ini diletakkan dalam struktur yang seharusnya muncul setelah aturan dan penyesuaian simpul dan elemen telah diterapkan.
6. Display, setelah penyesuaian tadi berjalan dan aturan dijalankan maka CSS dan DOM akan membentuk tampilan visual sebuah halaman situs yang tertampil di layar.
Dari berbagai sumber
Post a Comment