Petua CSS_CSS/HTML

Apabila menggunakan CSS untuk membina laman web, anda mesti menghadapi pelbagai masalah susun atur, dan anda mungkin terharu akhirnya. Tujuan artikel ini adalah untuk memudahkan proses reka bentuk anda dan memberi anda rujukan pantas apabila anda tersekat.

Apabila ragu-ragu, sahkan dahulu
Apabila nyahpepijat, pengesahan 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, dan kemudian mengujinya dalam penyemak imbas yang mematuhi piawaian dan melihat bahawa paparan menghasilkan "luar biasa" Kadangkala, anda akan sangat kecewa. 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 tidak ditakrifkan, kemungkinan besar anda menggunakan gaya peribadi, yang akan menyukarkan untuk mencapai hasil yang konsisten dalam penyemak imbas yang berbeza.

Jika anda mesti menggunakan objek terapung dalam reka letak anda, jangan lupa untuk menggunakan atribut yang jelas tepat pada masanya.
Objek terapung mungkin kelihatan mudah, tetapi ia sukar, dan tidak selalu seperti yang anda mahukan. 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: pelapik atau jidar boleh digunakan untuk mengelakkannya.
Anda mungkin terharu dengan ruang putih tambahan (atau tidak diingini). Jika anda menggunakan margin, penggabungan margin mungkin menjadi punca masalah. Penjelasan Andy Budd mungkin membantu.

Elakkan menggunakan padding/sempadan dan lebar tetap pada elemen yang sama pada masa yang sama.
Model blok IE5 adalah salah dan ia merosakkan perkara. Terdapat penyelesaian untuk ini, tetapi lebih baik untuk menyelesaikan 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 hanya bergantung pada @import untuk memasukkan helaian gaya luaran, lambat laun anda akan mendapati IE mengalami 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, kesan akhir yang sama boleh dicapai.

Gunakan penapis CSS sebagai pilihan terakhir Teknik dan penapis CSS membolehkan anda menggunakan (atau tidak menggunakan) elemen tertentu secara terpilih. Di mana mungkin, anda harus mencari penyelesaian silang penyemak imbas standard untuk mencapai kesan yang anda inginkan daripada menggunakan penapis pada setiap masa. Anggap ia sebagai alat menyelamatkan nyawa apabila anda terdesak. Satu tan petua penapisan CSS boleh didapati di sini. [Anotasi: Jangan kelirukan penapis di sini dengan penapis dalam IE. Memandangkan setiap penyemak imbas mempunyai tahap sokongan yang berbeza untuk piawaian CSS, orang ramai telah menemui banyak teknik untuk menyekat helaian gaya atau peraturan yang tidak boleh ditafsir atau disalahtafsirkan oleh penyemak imbas. Ini dipanggil penapis atau helah CSS. ]

Jika sauh digunakan, berhati-hati terutamanya apabila menggunakan gaya hiperpautan.
Jika anda menggunakan sauh tradisional () dalam kod anda, anda akan perasan bahawa kelas pseudo :hover dan :active juga berfungsi dengannya. Untuk mengelakkan ini, anda boleh menggunakan id, atau menggunakan sintaks yang kurang dikenali: :link:hover, :link:active

Ingat Peraturan pautan "LoVe/HAte" (cinta/benci)
Tentukan kelas pseudo hiperpautan dalam susunan berikut: Pautan, Dilawati, Tuding, Actve. Sebarang pesanan lain tidak sesuai. Jika :focus digunakan, susunannya hendaklah LVHFA ("Penanganan Lord Vader Dahulu Anakin", cadang Matt Haughey).

Ingat sempadan "BERMASALAH" .
Singkatkan susunan jidar, jidar dan pelapik ialah: mengikut arah jam bermula dari atas, iaitu Atas, Kanan, Bawah, Kiri. Contohnya, jidar: 0 1px 3px 5px bermakna 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 menyatakan unit yang digunakan. Sesetengah penyemak imbas mengendalikan unit yang tidak ditentukan dengan buruk. Sifar adalah sifar, sama ada px atau em atau apa sahaja, ia tidak memerlukan unit. Contohnya: padding: 0 2px 0 1em;

Uji saiz fon yang berbeza.
Penyemak imbas lanjutan seperti Mozilla dan Opera membenarkan penskalaan fon tanpa mengira unit yang anda gunakan.Sesetengah pengguna pasti akan mempunyai saiz fon lalai yang berbeza daripada anda, lakukan yang terbaik untuk menampung mereka.

Gunakan ujian terbenam dan tukar kepada input semasa menerbitkan.
Membenamkan helaian gaya dalam kod sumber HTML anda boleh menghapuskan banyak ralat caching semasa menguji, 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 berguna untuk penyahpepijatan reka letak.
Peraturan global seperti div {border: solid 1px #f00;} boleh menangkap isu reka letak buat sementara waktu untuk anda. Menambah sempadan pada elemen tertentu boleh membantu anda mencari isu jalinan atau ruang kosong yang sukar ditemui.

Jangan gunakan petikan tunggal untuk laluan imej.
Apabila menetapkan imej latar belakang, berpegang pada petikan berganda. Walaupun ia mungkin kelihatan berlebihan, jika anda tidak melakukan ini, IE5/Mac akan tercekik.

Jangan tinggalkan "ruang kosong" 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.
Perlu juga dinyatakan bahawa walaupun ia tidak khusus untuk fungsi tertentu, terdapat beberapa teori yang perlu diberi perhatian semasa proses pembangunan:

Susun fail CSS anda dengan baik
Ulas CSS dengan sewajarnya dalam blok, kumpulkan pemilih CSS yang serupa ke dalam kumpulan, 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 rupa)
Andaikan anda mencipta kelas .smallblue dan kemudian merancang untuk menjadikan teks lebih besar dan warna merah, kelas ini Namakan tidak mempunyai apa-apa makna lagi. Sebaliknya, anda boleh menggunakan lebih banyak nama deskriptif seperti .hak cipta dan .pullquote.

Menggabungkan pemilih
Memastikan CSS pendek adalah penting untuk mengurangkan masa muat turun. Cuba kumpulkan pemilih, memanfaatkan warisan dan gunakan trengkas untuk mengurangkan lebihan.

Pertimbangkan pertalian apabila menggunakan teknologi penggantian imej
Telah didapati bahawa FIR tradisional akan menyebabkan masalah dalam pembaca skrin dan penyemak imbas yang mematikan paparan imej. Terdapat penyelesaian lain untuk masalah ini, yang harus digunakan dengan berhati-hati berdasarkan situasi tertentu.