1. Gunakan singkatan css
Menggunakan singkatan dapat membantu mengurangi ukuran file CSS Anda dan membuatnya lebih mudah dibaca. Untuk aturan utama singkatan CSS, silakan merujuk ke "Ringkasan Sintaks Singkatan CSS Umum", yang tidak akan dijelaskan di sini.
2. Definisikan satuannya dengan jelas kecuali nilainya 0
Lupa mendefinisikan satuan dimensi adalah kesalahan umum di kalangan pemula dalam CSS. Di HTML Anda cukup menulis lebar=100, tetapi di CSS Anda harus memberikan satuan pasti, misalnya: lebar: 100px lebar:100em. Hanya ada dua pengecualian jika unit tidak ditentukan: tinggi baris dan nilai 0. Selain itu, nilai lain harus mengikuti satuan. Hati-hati jangan sampai menambah spasi di antara nilai dan satuan.
3. Sensitivitas huruf besar/kecil
Saat menggunakan CSS di XHTML, nama elemen yang ditentukan dalam CSS peka huruf besar-kecil. Untuk menghindari kesalahan ini, saya sarankan menggunakan huruf kecil untuk semua nama definisi. Nilai class dan id juga peka huruf besar-kecil dalam HTML dan XHTML. Jika Anda harus menulis huruf besar-kecil, harap konfirmasikan dengan cermat bahwa definisi Anda dalam CSS konsisten dengan tag di XHTML.
4. Batalkan batasan elemen sebelum kelas dan id
Saat Anda menulis untuk mendefinisikan kelas atau id suatu elemen, Anda dapat menghilangkan kualifikasi elemen sebelumnya, karena ID tersebut unik di suatu halaman dan kelas tersebut dapat digunakan beberapa kali di halaman tersebut. Tidak masuk akal bagi Anda untuk mengkualifikasi suatu elemen. Misalnya:
div#content { /* deklarasi */ }
fieldset.details { /* deklarasi */ } |
dapat ditulis sebagai
#content { /* deklarasi */ }
.details { /* deklarasi */ } |
Ini menghemat beberapa byte.
5. Nilai bawaan
Biasanya nilai default padding adalah 0, dan nilai default warna latar adalah transparan. Namun nilai defaultnya mungkin berbeda di berbagai browser. Jika Anda takut konflik, Anda dapat menentukan nilai margin dan padding semua elemen menjadi 0 di awal style sheet, seperti ini:
* {
margin:0;
bantalan:0;
} |
6. Tidak perlu berulang kali mendefinisikan nilai yang dapat diwariskan
Dalam CSS, elemen anak secara otomatis mewarisi nilai atribut elemen induk, seperti warna, font, dll., yang telah ditentukan di elemen induk, dapat langsung diwarisi di elemen anak tanpa definisi berulang. Namun perlu diketahui bahwa browser mungkin menimpa definisi Anda dengan beberapa nilai default.
7. Prinsip pertama terkini
Jika ada beberapa definisi dari elemen yang sama, definisi terdekat (tingkat minimum) akan diprioritaskan. Misalnya, ada potongan kode ini
Update: Lorem ipsum dolor set
Dalam file CSS, Anda telah mendefinisikan elemen p dan pembaruan kelas
P {
margin:1em 0;
ukuran font:1em;
warna:#333;
}
.memperbarui {
berat font: tebal;
warna:#600;
} |
Dari kedua definisi ini, class=update akan digunakan karena class lebih dekat dari p. Anda dapat melihat "Menghitung kekhususan pemilih" W3C untuk mempelajari lebih lanjut.
8. Beberapa definisi kelas
Sebuah tag dapat mendefinisikan beberapa kelas secara bersamaan. Misalnya: Pertama kita mendefinisikan dua gaya, gaya pertama memiliki latar belakang #666; gaya kedua memiliki batas 10 px.
.satu{lebar:200px;latar belakang:#666;}
.two{batas:10px padat #F00;}
Dalam kode halaman, kita dapat menyebutnya seperti ini. Efek tampilan terakhir adalah div ini memiliki latar belakang #666 dan batas 10 piksel. Ya, hal ini mungkin dilakukan, Anda dapat mencobanya.
9. Gunakan pemilih turunan
Pemula CSS tidak tahu bahwa penggunaan sub-selektor adalah salah satu alasan yang mempengaruhi efisiensinya. Subselektor dapat membantu Anda menyimpan banyak definisi kelas. Mari kita lihat kode berikut:
〈id div=subnav〉
〈ul〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉Item 1〈/a〉〈/li〉
〈li class=subnavitemｓｌｍｃｔｔ〉 〈a href=# class=subnavitemｽｌｍｃｔｔ〉 Butir 1〈/a〉 〈/li〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉 Butir 1〈/a〉 〈/li〉
〈/ul〉
〈/div〉 |
Definisi CSS untuk kode ini adalah:
div#subnav ul { /* Beberapa gaya */ }
div#subnav ul li.subnavitem { /* Beberapa gaya */ }
div#subnav ul li.subnavitem a.subnavitem { /* Beberapa gaya */ }
div#subnav ul li.subnavitemselected { /* Beberapa gaya */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Beberapa gaya */ } |
Anda bisa mengganti kode di atas dengan cara berikut
〈ul id=subnav〉
〈li〉 〈a href=#〉 Butir 1〈/a〉 〈/li〉
〈li class=sel〉 〈a href=#〉 Butir 1〈/a〉 〈/li〉
〈li〉 〈a href=#〉 Butir 1〈/a〉 〈/li〉
〈/ul〉 |
Definisi gaya adalah:
#subnav { /* Beberapa gaya */ }
#subnav li { /* Beberapa gaya */ }
#subnav a { /* Beberapa gaya */ }
#subnav .sel { /* Beberapa gaya */ }
#subnav .sel a { /* Beberapa gaya */ } |
Gunakan subselektor untuk membuat kode dan CSS Anda lebih ringkas dan mudah dibaca.
10. Tidak perlu menambahkan tanda kutip pada jalur gambar latar belakang. Untuk menghemat byte, saya sarankan untuk tidak menambahkan tanda kutip pada jalur gambar latar belakang, karena tanda kutip tidak diperlukan. Misalnya:
| latar belakang:url(gambar/***.gif) #333; |
dapat ditulis sebagai
| latar belakang:url(gambar/***.gif) #333; |
Jika Anda menambahkan tanda kutip, ini akan menyebabkan beberapa kesalahan browser.
11. Pemilih grup
Ketika beberapa tipe elemen, kelas, atau id memiliki beberapa properti yang sama, Anda dapat menggunakan penyeleksi grup untuk menghindari definisi berulang beberapa kali. Ini dapat menghemat beberapa byte.
Misalnya: untuk menentukan font, warna dan margin semua judul, Anda dapat menulis:
h1,h2,h3,h4,h5,h6 {
keluarga font:Lucida Grande,Lucida,Arial,Helvetica,sans-serif;
warna:#333;
margin:1em 0;
} |
Jika ada elemen individual yang perlu menentukan gaya independen saat digunakan, Anda dapat menambahkan definisi baru atau menimpa definisi lama, misalnya:
h1 { ukuran font:2em }
h2 { ukuran font:1,6em; |
12. Tentukan gaya tautan dalam urutan yang benar
Saat Anda menggunakan CSS untuk menentukan beberapa gaya status suatu tautan, perhatikan urutan penulisannya. Urutan yang benar adalah: :link :visited :hover :aktif. Huruf pertama yang diekstraksi adalah LVHA, yang dapat Anda ingat sebagai LoVe HAte (suka membenci). Mengapa begitu didefinisikan? Anda dapat merujuk pada "Kekhususan Tautan" Eric Meyer.
Jika pengguna Anda perlu menggunakan kontrol keyboard dan perlu mengetahui fokus tautan saat ini, Anda juga dapat menentukan atribut :focus. Efek dari atribut :focus juga bergantung pada posisi di mana Anda menulis. Jika Anda ingin elemen fokus menampilkan efek :hover, tulis :focus sebelum :hover; Anda meletakkan :fokus Setelah :hover.
13. Pelampung bening
Masalah CSS yang sangat umum adalah ketika mengambang digunakan untuk penentuan posisi, lapisan di bawahnya ditutupi oleh lapisan mengambang, atau sub-lapisan yang bersarang di lapisan tersebut melebihi cakupan lapisan luar.
Solusi yang biasa dilakukan adalah menambahkan elemen tambahan di belakang lapisan mengambang, seperti div atau br, dan mendefinisikan gayanya dengan jelas: keduanya. Cara ini agak dibuat-buat, tapi untungnya ada cara yang baik untuk mengatasinya. Silakan merujuk ke artikel ini "Cara Menghapus Float Tanpa Markup Struktural" (Catatan: Situs ini akan menerjemahkan artikel ini sesegera mungkin).
Kedua cara di atas bisa mengatasi masalah floating overflow dengan sangat baik, namun bagaimana jika Anda benar-benar perlu menghapus layer atau objek yang ada di dalam layer tersebut? Cara sederhananya adalah dengan menggunakan atribut overflow. Metode ini pertama kali dipublikasikan di "Simple Clearing of Floats" dan telah dibahas secara luas di "Clearance" dan "Super simple clearing float".
Metode mana yang jelas di atas yang lebih cocok untuk Anda bergantung pada situasi spesifik dan tidak akan dibahas di sini. Selain itu, beberapa artikel bagus telah memperjelas tentang penerapan float. Disarankan agar Anda membaca: "Floatutorial", "Containing Floats" dan "Float Layouts"
14. Pemusatan horizontal
Ini adalah trik sederhana, tetapi patut untuk dikatakan lagi karena saya melihat begitu banyak pertanyaan pemula yang menanyakan hal ini: Bagaimana cara memusatkan CSS secara horizontal? Anda perlu menentukan lebar elemen, dan menentukan margin horizontal, jika tata letak Anda terdapat dalam lapisan (wadah), seperti ini:
belum diartikan
Anda dapat menentukannya agar terpusat secara horizontal seperti ini:
#membungkus {
lebar:760px; /* Ubah ke lebar lapisan Anda*/
margin:0 otomatis;
} |
Tapi IE5/Win tidak dapat menampilkan definisi ini dengan benar. Kami menggunakan trik yang sangat berguna untuk menyelesaikannya: gunakan atribut text-align. Seperti ini:
tubuh {
perataan teks:tengah;
}
#membungkus {
lebar:760px; /* Ubah ke lebar lapisan Anda*/
margin:0 otomatis;
perataan teks:kiri;
} |
Aturan text-align:center; badan pertama mendefinisikan bahwa semua elemen badan di IE5/Win berada di tengah (browser lain hanya memusatkan teks), dan text-align:left; kiri.
15. Impor dan sembunyikan CSS
Karena browser lama tidak mendukung CSS, pendekatan yang umum adalah menggunakan teknik @import untuk menyembunyikan CSS. Misalnya:
Namun, metode ini tidak berhasil untuk IE4, yang membuat saya pusing beberapa saat. Kemudian saya menulisnya seperti ini:
Dengan cara ini CSS bisa disembunyikan di IE4. Haha, juga menghemat 5 byte. Jika Anda ingin mengetahui penjelasan detail sintaks @import, Anda dapat melihat di sini "diagram filter css centricle"
16. Optimasi untuk IE
Terkadang, Anda perlu menetapkan beberapa aturan khusus untuk bug browser IE. Ada terlalu banyak peretasan CSS di sini. Saya hanya menggunakan dua di antaranya, terlepas dari apakah Microsoft lebih baik di versi beta IE7 yang akan datang. Dengan dukungan untuk CSS, kedua metode tersebut yang paling aman.
1. Metode anotasi
(a) Untuk menyembunyikan definisi CSS di IE, Anda dapat menggunakan pemilih anak:
html>tubuh p {
/* Isi definisi */
} |
(b) Cara penulisan berikut hanya dapat dipahami oleh browser IE (tersembunyi dari browser lain)
* html hal {
/* deklarasi */
} |
(c) Terkadang, Anda ingin IE/Win aktif tetapi IE/Mac disembunyikan, Anda dapat menggunakan trik garis miring terbalik:
/* */
* html hal {
deklarasi
}
/* */ |
2. Metode komentar bersyarat
Metode lain, yang menurut saya lebih teruji waktu daripada CSS Hacks, adalah dengan menggunakan atribut pribadi Microsoft komentar bersyarat (komentar bersyarat). Dengan menggunakan metode ini Anda dapat menentukan beberapa gaya secara terpisah untuk IE tanpa mempengaruhi definisi style sheet utama. Seperti ini:
belum diartikan
17. Keterampilan debugging: Seberapa besar lapisannya?
Saat men-debug kesalahan CSS, Anda harus seperti mesin tik dan menganalisis kode CSS baris demi baris. Saya biasanya menentukan warna latar belakang pada lapisan yang dimaksud sehingga jelas berapa banyak ruang yang digunakan lapisan tersebut. Beberapa orang menyarankan penggunaan border, yang secara umum mungkin dilakukan, namun masalahnya adalah terkadang border akan memperbesar ukuran elemen, dan border-top dan boeder-bottom akan merusak nilai margin vertikal, sehingga lebih aman menggunakan background.
Properti lain yang sering menimbulkan masalah adalah outline. Garis luar terlihat seperti boeder, namun tidak memengaruhi ukuran atau posisi elemen. Hanya sedikit browser yang mendukung atribut outline, satu-satunya yang saya tahu adalah Safari, OmniWeb, dan Opera.
18. Gaya penulisan kode CSS
Saat menulis kode CSS, setiap orang memiliki kebiasaan menulisnya masing-masing mengenai indentasi, jeda baris, dan spasi. Setelah berlatih terus-menerus, saya memutuskan untuk mengadopsi gaya penulisan berikut:
pemilih1,
pemilih2 {
properti:nilai;
} |
Saat menggunakan definisi gabungan, saya biasanya menulis setiap pemilih pada barisnya masing-masing sehingga lebih mudah ditemukan di file CSS. Tambahkan spasi di antara pemilih terakhir dan kurung kurawal {. Tulis juga setiap definisi pada barisnya masing-masing. Titik koma harus ditempatkan tepat setelah nilai atribut.
Saya terbiasa menambahkan titik koma setelah setiap nilai atribut. Meskipun aturan mengizinkan bahwa titik koma tidak perlu ditulis setelah nilai atribut terakhir, jika Anda ingin menambahkan gaya baru, sering kali Anda lupa menambahkan titik koma dan tanda titik koma. menyebabkan kesalahan, jadi Anda tetap menambahkannya.
Terakhir, kurung kurawal penutup } ditulis pada satu baris saja, dengan spasi dan baris baru untuk membantu keterbacaan.
