Dukungan peramban Salah satu fitur utama alat CSS adalah alat ini dinilai mampu memberikan dukungan sempurna untuk browser Kelas A. Peringkat dukungan browser adalah murni peringkat Yahoo!, dan Anda dapat melihat deskripsi lengkapnya di situs webnya, yang pada dasarnya menjelaskan bagaimana CSS berperilaku baik di browser yang ada di pasaran saat ini. Dalam tabel online ini, browser dibagi menjadi tiga tingkat dukungan browser (A, C, dan X). Level A adalah level dukungan tertinggi. Dengan memanfaatkan kekuatan standar web modern, perpustakaan YUI menemukan bahwa pengalaman Kelas A memberikan fungsionalitas tingkat lanjut dan ketelitian visual. Kategori dukungan dan file terkait memberi Anda gambaran di mana CSS didukung, namun harus tersedia di setiap browser (dengan kemungkinan penurunan versi). CSS yang dapat digunakan kembali Pustaka YUI mencakup tiga area atau fitur CSS, meliputi pemformatan, pengenalan font, dan tata letak berbasis grid (kolom dan baris). Istilah-istilah ini digunakan di situs web untuk menggambarkan tiga elemen berikut: Kisi Halaman: Memungkinkan Anda menyematkan kisi satu hingga empat kolom dalam kapasitas templat yang Anda gunakan. Kisi Halaman: buildgridsgrids.css Tata letak halaman kisi Tata letak berbasis grid adalah kekuatan pendorong di balik hampir semua desain situs atau tata letak halaman. Di masa lalu, hal ini sering dilakukan melalui tabel HTML, namun CSS memberikan kekuatan dan fleksibilitas yang luar biasa untuk tata letak halaman. Page Grid menyediakan kode untuk membuat halaman dengan kolom dan baris sesuai kebutuhan Anda. Pada tingkat paling dasar dari kisi halaman, ia menyediakan tujuh templat halaman Web, enam di antaranya menentukan detail konten utama/tata letak bilah alat; templat ketujuh mendefinisikan tata letak tanpa bilah alat, dan konten utama memenuhi seluruh lebar halaman. Nama-nama template tersebut adalah sebagai berikut: yui-t1: Berisi toolbar dengan lebar 160px di sebelah kiri dan area utama dengan lebar 570px. Daftar A <html><kepala> Tata letak diberikan ke seluruh halaman - tag div utama ditetapkan ke kelas yui-t2. Ini menunjukkan bahwa template kedua digunakan.
Font: Menyediakan standarisasi dan kontrol tipografi lintas browser. Secara umum, ini menyediakan font dan tinggi garis yang konsisten sekaligus mendukung sepenuhnya penyesuaian font oleh pengguna (di dalam browser).
Reset: Memberikan standarisasi lintas browser untuk penetapan default pada elemen HTML. Ini juga menghapus ekspresi default umum di browser, seperti penggunaan huruf tebal untuk elemen yang ditekankan, untuk membantu memastikan bahwa semua definisi font disengaja dan elemen selalu digunakan untuk makna semantiknya, bukan ekspresi visual biasa.
Setelah diinstal, setiap elemen unduhan perpustakaan YUI tersedia di direktori/file berikut di server web:
Font: buildfontsfonts.css
Setel ulang: buat eset eset.css
Anda dapat menginstal direktori dasar ini di server web Anda sendiri atau menempatkannya di dalam situs Anda sehingga Anda dapat mereferensikannya sesuai kebutuhan. Fitur penting CSS (selain gratis) adalah ia diuji dan di-debug secara menyeluruh sebelum dirilis. Mari kita lihat lebih dekat cara kerja alat CSS.
yui-t2: Berisi toolbar dengan lebar 180px di sebelah kiri dan area utama dengan lebar 550px.
yui-t3: Berisi toolbar dengan lebar 300px di sebelah kiri dan area utama dengan lebar 430px.
yui-t4: Berisi toolbar dengan lebar 180px di sebelah kanan dan area utama dengan lebar 550px.
yui-t5: Berisi toolbar dengan lebar 240px di sebelah kanan dan area utama dengan lebar 490px.
yui-t6: Berisi toolbar dengan lebar 300px di sebelah kanan dan area utama dengan lebar 430px.
yui-t7: Berisi area utama dengan lebar 750px dan tanpa toolbar.
Anda dapat menggabungkan (atau mengedit, jika Anda cukup berani) templat ini sesuai tujuan Anda. Listing A menggunakan tata letak pertama untuk menata halaman (catatan: alat CSS dipasang di direktori default server web).
<title>Contoh Alat CSS Yahoo 1</title>
<link rel="stylesheet" type="text/css" href="build/grids/grids.css">
</kepala>
<tubuh>
<div id="doc" class="yui-t2">
<div id="hd">Tajuk Halaman</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">Area Utama</div>
</div><div class="yui-b">Kolom Kiri</div>
</div>
<div id="ft">Footer Halaman</div>
</div></tubuh></html>
Beberapa catatan di halaman HTML:
Halaman ini dibagi menjadi area header, body dan footer. Header diberi pengenal hd, body diberi BD, dan footer diberi ft.
Bagian utama halaman dibagi menjadi area kiri (jika template mendukungnya) dan area utama. Keduanya diberi kelas yui-b, namun area utama ditambahkan dengan atribut pengidentifikasi yui-main dalam tag divnya.