Pada kolom minggu lalu, saya membahas Jaringan Pengembang Yahoo!, dengan fokus pada fitur JavaScript (yang terpenting kalender) yang tersedia di Perpustakaan Antarmuka Pengguna Yahoo! Saya ingin menghabiskan lebih banyak waktu untuk meliput area lain dari perpustakaan YUI yang menyediakan alat CSS. Alat-alat ini memungkinkan Anda dengan mudah menggabungkan desain berbasis CSS dengan aplikasi web.
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 pengalaman Kelas A yang menghadirkan fungsionalitas tingkat lanjut dan ketelitian visual. Kategori dukungan dan file terkait memberi Anda gambaran tentang 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 satu hingga empat kisi kolom sesuai kapasitas templat yang Anda gunakan.
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:
Kisi Halaman : buildgridsgrids.css
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.
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.
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).
Daftar A
Tajuk Halaman
Area Utama
Kolom Kiri
Footer Halaman
Beberapa catatan di halaman HTML:
Tata letak diberikan ke seluruh halaman - tag div utama ditetapkan ke kelas yui-t2. Ini menunjukkan bahwa template kedua digunakan.
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, tetapi area utama ditambahkan dengan atribut pengidentifikasi yui-main dalam tag divnya.