CSS 팁_경험 교환

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.수리 방법은 자리가 전부를 참고하세요.
앵커를 사용하는 경우 하이퍼링크 스타일을 적용할 때 특히 주의하세요.
코드에서 기존 앵커()를 사용하는 경우 :hover 및 :active 를 확인할 수 있습니다. 의사 클래스도 이에 따라 작동합니다. 이를 방지하려면 id를 사용하거나 잘 알려지지 않은 구문을 사용할 수 있습니다: :link:hover, :link:active
"LoVe/HAte"(Love/ 싫어함) 링크 규칙
링크, 방문, 호버, 활성 순서로 하이퍼링크 의사 클래스를 지정합니다. 다른 주문은 부적절합니다. :focus를 사용하는 경우 순서는 LVHFA(Matt Haughey가 제안한 "Lord Vader's Handle Formerly Anakin")여야 합니다.
'TrouBLED' 경계를 기억하세요.
Border, Margin, Padding의 약식 순서는 위에서부터 시계방향, 즉 Top, Right, Bottom, Left 입니다. 예를 들어 margin: 0 1px 3px 5px;은 위쪽 여백이 0이고 오른쪽 여백이 1px임을 의미합니다.
0이 아닌 값의 단위를 지정합니다.
CSS로 글꼴, 여백, 크기를 지정할 때 사용할 단위를 지정해야 합니다(유일한 예외는 line-height인데 이상하게도 단위가 필요하지 않습니다). 일부 브라우저는 지정되지 않은 단위를 제대로 처리하지 못합니다. px이든 em이든 0은 0입니다. 0이 아닌 다른 모든 값에는 명시적으로 지정된 단위가 있어야 합니다. 예: padding: 0 2px 0 1em;
다양한 글꼴 크기를 테스트하세요.
Mozilla 및 Opera와 같은 고급 브라우저에서는 사용하는 글꼴 단위에 관계없이 글꼴 크기를 변경할 수 있습니다. 일부 사용자의 기본 글꼴 크기는 귀하의 글꼴 크기와 다를 수 있으므로 이를 수용하도록 최선을 다하십시오.
테스트할 때는 삽입된 스타일을 사용하고 게시할 때는 외부 입력으로 변경하세요.
HTML 소스 코드에 스타일 시트를 삽입하면 특히 일부 Mac 브라우저에서 테스트 중 캐싱으로 인해 발생하는 많은 오류를 제거할 수 있습니다. 하지만 게시하기 전에 스타일 시트를 외부 파일로 이동하고 @import 또는 을 사용하여 소개하는 것을 잊지 마세요.
명확한 테두리를 추가하면 레이아웃 디버깅에 도움이 됩니다.
div {border: solid 1px #f00;}과 같은 전역 규칙은 일시적으로 레이아웃 문제를 감지할 수 있습니다. 특정 요소에 테두리를 추가하면 찾기 어려운 겹침이나 공백 문제를 찾는 데 도움이 될 수 있습니다. 이 방법은 매우 실용적이므로 누구나 시도해야 합니다.
이미지 경로에 작은따옴표를 사용하지 마세요.
배경 이미지를 설정할 때는 큰따옴표를 사용하세요. 불필요해 보일 수도 있지만 이렇게 하지 않으면 IE5/Mac이 질식하게 됩니다. 간과하기 가장 쉬운 것 같습니다
향후 스타일 시트(예: 휴대용 장치 또는 인쇄 스타일 시트)를 위해 "공간을 확보"하지 마십시오.
Mac IE5 tidak berminat dengan helaian gaya kosong, yang akan meningkatkan masa pemuatan 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
Komen CSS dalam blok dengan sewajarnya, 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 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.