CSS Tips_Pertukaran Pengalaman

Terjemahan: onestab [2004.03.09]
Teks asal: mezzoblue CSS Crib Sheet

Apabila menggunakan CSS untuk membina tapak web, anda mesti menghadapi pelbagai reka letak masalah, dan mungkin berakhir dengan keletihan. Tujuan artikel ini adalah untuk memudahkan proses reka bentuk anda dan memberi anda rujukan pantas apabila anda tersekat.

Jika anda mempunyai sesuatu untuk ditambahkan, sila siarkan ulasan anda di sini

Artikel ini tersedia dalam bahasa lain: Perancis, Jerman, Sepanyol dan Hungary. Terjemahan lain dialu-alukan.

Apabila ragu-ragu, sahkan dahulu
Semasa menyahpepijat, mengesahkan kod anda dahulu selalunya boleh menjimatkan banyak masalah. XHTML/CSS yang cacat boleh menyebabkan banyak ralat susun atur.
Tulis dan uji kod CSS anda dalam penyemak imbas paling maju sebelum mengujinya dalam penyemak imbas lain, bukan sebaliknya.
Jika anda menulis dan menguji dalam penyemak imbas yang rosak, kod anda perlu bergantung pada paparan buruk penyemak imbas yang rosak itu, kemudian mengujinya dalam penyemak imbas yang mematuhi piawaian, lihat Anda akan kecewa apabila keputusan muncul "dimatikan". Sebaliknya, anda harus menggilap kod anda dahulu dan kemudian cuba menyesuaikannya dengan penyemak imbas peringkat rendah. Dengan cara ini kod anda mematuhi piawaian dari awal dan anda tidak perlu risau tentang menyokong penyemak imbas lain. Sudah tentu, penyemak imbas yang mematuhi piawaian semasa sudah pasti Mozilla, Safari atau Opera.
Pastikan kesan yang anda inginkan benar-benar wujud
Banyak sambungan CSS khusus penyemak imbas tidak wujud dalam piawaian rasmi. Jika anda menentukan gaya untuk penapis atau bar skrol, anda menggunakan kod peribadi yang tidak akan mempunyai kesan dalam mana-mana pelayar selain IE. Jika pengesah memberitahu anda bahawa kod itu tidak ditentukan, kemungkinan besar anda menggunakan gaya peribadi dan tidak mengharapkan hasil yang konsisten merentas penyemak imbas.
Jika anda mesti menggunakan objek terapung dalam reka letak anda, jangan lupa untuk menggunakan atribut yang jelas apabila sesuai.
Elemen terapung kelihatan mudah tetapi sukar dikawal dan ia sukar dikawal. Jika anda mendapati terapung melangkaui sempadan bekas atau tidak kelihatan seperti yang anda jangkakan, pastikan jangkaan anda betul. Berkenaan isu ini, sila lihat Tutorial Eric Meyer
Penggabungan margin: Anda boleh menggunakan pelapik atau jidar untuk mengelakkannya.
Anda mungkin terharu dengan ruang putih tambahan (atau tidak diingini). Jika anda menggunakan margin, penggabungan margin mungkin menjadi punca masalah. Andy Budd Penjelasan ini boleh membantu anda memahami. Saya ingin menambah beberapa maklumat tambahan pada struktur PJblog. Jika anda menggunakan Flash, sila semak sama ada margin ditetapkan dalam fail Xml
Elakkan menggunakan padding/sempadan dan lebar tetap pada elemen yang sama pada masa yang sama.
Model blok IE5 yang salah adalah puncanya dan menjadikan keadaan tidak kemas. Walaupun terdapat pemulihan, adalah lebih baik untuk memintas masalah ini dan menentukan pelapik untuk elemen induk apabila lebar elemen anak ditetapkan.
Elakkan kelipan kandungan gaya yang tidak ditentukan di bawah IE.
Jika anda menggunakan @import untuk memasukkan helaian gaya luaran, lambat laun anda akan mendapati bahawa IE mempunyai masalah "kerlipan". Teks HTML yang tidak diformat muncul sebentar sebelum gaya CSS digunakan. Ini boleh dielakkan
Jangan harapkan lebar min berguna dalam IE.
IE tidak menyokongnya, tetapi ia menganggap lebar sebagai lebar min, jadi melalui beberapa teknik penapisan IE, perkara yang sama boleh dicapai pada perlawanan akhir kesan. Ini sangat mengecewakan Saya tidak dapat menyedari Kulit ini sekarang
Apabila anda terdesak, cuba kurangkan lebarnya
Kerana ralat pembulatan , kadangkala 50 % tambah 50% sama dengan 100.1%, memecahkan reka letak dalam sesetengah penyemak imbas. Cuba kurangkan 50% kepada 49% atau 49.9%. Selain itu, jika anda menggunakan jidar, ingat untuk menambah lebarnya Jika bingkai 500px ditambah dengan jidar 1px, maka ia akan menjadi 502px.
Adakah paparan tidak normal dalam IE?
Ia mungkin pepijat Peekaboo, terutamanya apabila tetikus melepasi hiperpautan, ia akan dipaparkan seperti biasa.Lihat Position is Everything untuk kaedah pembaikan.
Jika sauh digunakan, berhati-hati terutamanya apabila menggunakan gaya hiperpautan.
Jika anda menggunakan sauh tradisional () dalam kod anda, anda akan melihat :hover dan :aktif Kelas pseudo juga akan bertindak ke atasnya. Untuk mengelakkan ini, anda boleh menggunakan id, atau menggunakan sintaks yang kurang dikenali: :link:hover, :link:active
Ingat "LoVe/HAte" (Love/ Benci) Peraturan Pautan
Tentukan kelas pseudo hiperpautan dalam susunan berikut: Pautan, Dilawati, Tuding, Aktif. Sebarang pesanan lain tidak sesuai. Jika :fokus digunakan, pesanan itu hendaklah LVHFA ("Penanganan Lord Vader Dahulu Anakin", dicadangkan oleh Matt Haughey).
Ingat sempadan "BERMASALAH".
Susunan jidar, jidar dan pelapik ringkasan ialah: mengikut arah jam bermula dari atas, iaitu Atas, Kanan, Bawah, Kiri. Contohnya, margin: 0 1px 3px 5px bermaksud jidar atas ialah sifar, jidar kanan ialah 1px dan seterusnya.
Nyatakan unit untuk nilai bukan sifar.
Apabila menentukan fon, jidar atau saiz dengan CSS, anda mesti menentukan unit yang akan digunakan (satu-satunya pengecualian ialah ketinggian garisan, yang anehnya tidak memerlukan unit). Sesetengah penyemak imbas mengendalikan unit yang tidak ditentukan dengan buruk. Sifar ialah sifar, sama ada px atau em. Semua nilai bukan sifar lain mesti mempunyai unit yang dinyatakan dengan jelas. Contohnya: lapik: 0 2px 0 1em;
Uji saiz fon yang berbeza.
Penyemak imbas lanjutan seperti Mozilla dan Opera membenarkan anda menukar saiz fon tanpa mengira unit fon yang anda gunakan. Saiz fon lalai sesetengah pengguna pasti berbeza daripada saiz fon anda, jadi lakukan yang terbaik untuk menampungnya.
Gunakan gaya terbenam semasa menguji dan tukar kepada input luaran semasa menerbitkan.
Membenamkan helaian gaya dalam kod sumber HTML anda boleh menghapuskan banyak ralat yang disebabkan oleh caching semasa ujian, terutamanya pada sesetengah penyemak imbas Mac. Tetapi sebelum menerbitkan, pastikan anda ingat untuk mengalihkan helaian gaya ke fail luaran dan memperkenalkannya dengan @import atau .
Menambah sempadan yang jelas membantu penyahpepijatan reka letak.
Peraturan global seperti div {border: solid 1px #f00;} boleh mengesan isu reka letak buat sementara waktu untuk anda. Menambah sempadan pada elemen tertentu boleh membantu anda mencari masalah pertindihan atau ruang kosong yang sukar ditemui. Kaedah ini sangat praktikal, semua orang mesti mencubanya
Jangan gunakan petikan tunggal dalam laluan imej.
Apabila menetapkan imej latar belakang, berpegang pada petikan berganda. Walaupun ia mungkin kelihatan tidak perlu, jika anda tidak melakukan ini, IE5/Mac akan tercekik. Ini nampaknya yang paling mudah untuk diabaikan
Jangan "mengambil ruang" untuk helaian gaya masa hadapan (seperti peranti pegang tangan atau helaian gaya cetakan).
Mac IE5 tidak berminat dengan helaian gaya kosong, yang akan meningkatkan masa memuatkan halaman. Adalah disyorkan agar terdapat sekurang-kurangnya satu peraturan (walaupun ulasan) dalam helaian gaya untuk mengelakkan MacIE daripada tercekik.

Terdapat juga beberapa cadangan yang, walaupun tidak khusus untuk ciri tertentu, perlu diberi perhatian semasa proses pembangunan:

Susun fail CSS anda dengan baik
Ulas CSS dengan betul dalam blok, kumpulkan pemilih CSS serupa, bangunkan tabiat penamaan yang konsisten dan format ruang kosong (untuk pertimbangan merentas platform, adalah disyorkan untuk menggunakan aksara ruang putih dan bukannya tab.) dan susunan yang sesuai.
Namakan kelas dan ID berdasarkan kefungsian (bukan penampilan)
Katakan anda mencipta kelas .smallblue dan kemudiannya merancang untuk menukar saiz teks kepada merah, ini nama kelas tidak lagi bermakna. Sebaliknya, anda boleh menggunakan lebih banyak nama deskriptif seperti .hak cipta dan .pullquote.
Pemilih Gabungan
Memastikan CSS pendek adalah sangat penting untuk mengurangkan masa muat turun. Sila cuba kurangkan lebihan dengan mengumpulkan pemilih , menggunakan warisan dan menggunakan trengkas .
Pertimbangkan kebolehaksesan apabila menggunakan teknik penggantian imej
Kami telah menemui FIR tradisional dalam pembaca skrin, serta penyemak imbas yang mematikan paparan imej Sesuatu akan salah. Terdapat penyelesaian lain untuk ini, yang harus digunakan dengan berhati-hati mengikut situasi tertentu.