7 Petua Reka Letak CSS Penting

Perkara yang paling sukar dalam CSS untuk diperbetulkan ialah susun atur tapak anda. Berikut adalah beberapa petua untuk menangani perkara itu. Beberapa petua ini bukanlah sesuatu yang baru, atau sains roket, tetapi mudah-mudahan ia dapat menyelamatkan seseorang daripada sedikit gangguan di suatu tempat!

Petua 1 : Kosongkan tetapan padding dan margin lalai sebelum anda mula bekerja.
Penyemak imbas yang berbeza mempunyai jidar lalai dan saiz padding yang berbeza supaya anda mahu bermula dengan senarai yang bersih, boleh dikatakan. Gunakan arahan ini:

*
{
tepi: 0;
pembalut: 0;
sempadan: 0;
}

untuk mengosongkan semua tetapan margin dan padding lalai. Perhatikan juga sempadan, yang ditetapkan kepada 0. Sila ambil perhatian bahawa jika anda melakukan ini, anda juga akan menyingkirkan imej boleh klik bulat jidar ungu yang menjengkelkan, walaupun sesetengah orang berpendapat bahawa sempadan ungu adalah perlu untuk kebolehaksesan dan kebolehgunaan. Tetapi ramai orang tidak menyukai imej bulat sempadan ungu, dan ini adalah salah satu cara anda boleh menyingkirkannya dalam satu gerakan tanpa perlu menetapkan sempadan img=0 untuk setiap imej (yang bertentangan dengan peraturan markup yang ketat dalam apa jua keadaan).

Petua 2 : Untuk memusatkan reka letak anda, gunakan div bekas untuk mengandungi semua kandungan anda
Istiharkannya seperti berikut:

#bekas

{
margin: 0 diri;
lebar: xxxpx;
}

Terdapat beberapa perkara di sini untuk diambil perhatian. JANGAN mengisytiharkan lebar sebagai 100%. Ini mengalahkan keseluruhan objek kerana anda hanya perlu mengisytiharkan sub elemen dalam bekas dan kemudian memusatkan MEREKA menggunakan margin : 0 auto. Ini SANGAT BURUK kerana ini bermakna daripada mengisytiharkan susun atur pusat sekali, anda perlu mengisytiharkannya di beberapa tempat untuk setiap elemen dalam bekas anda.

Petua 3: Bekerja dari atas ke bawah
Mula bekerja pada susun atur CSS anda bermula daripada elemen paling atas dalam reka bentuk anda, serta elemen 'atas' dalam HTML anda, seperti badan, serta bekas utama anda.

Isytihar perintah CSS anda pada tahap tertinggi yang mungkin dan cuba dan isytiharkan sesuatu sekali sahaja dan biarkan ia mengalir sepanjang masa. Hanya mengatasi arahan pada tahap yang lebih rendah apabila sangat diperlukan. Ini menghalang fail CSS verbose yang sukar untuk dikekalkan dan difahami. Sebagai contoh, jika anda mempunyai { margin : 0 auto} tetapan pada setiap sub div dalam bekas anda – anda menghadapi masalah.

Petua 4 : Dokumenkan perkara yang anda lakukan dan gunakan Firebug dan pelayar Firefox untuk nyahpepijat
Anda tidak menulis kod CSS anda hanya untuk diri sendiri, suatu hari nanti sesetengah sod yang lemah perlu menyahpepijatnya. Buat banyak ulasan di dalam fail CSS anda untuk menerangkan sebab anda melakukan sesuatu dengan cara tertentu.

Selaras dengan ini, anda mungkin mendapati diri anda perlu membetulkan CSS orang lain lebih kerap daripada yang anda fikirkan (atau malah anda sendiri, dalam hal ini). Gunakan alat tambah Firebug untuk Firefox untuk menyahpepijat CSS anda. Ini adalah penyelamat nyawa berkaitan dengan memberi anda cerapan tentang tempat reka bentuk anda mungkin rosak dan sebabnya.

Satu-satunya masalah dengan ini ialah reka bentuk anda mungkin berfungsi dengan sempurna dalam Firefox, tetapi bukan dalam IE5, IE6 atau IE7. Ini membawa kita kepada petua seterusnya.

Petua 5 : Tentukan penyemak imbas yang anda akan bina CSS anda dan uji dari awal
Sesetengah pemurni berkeras untuk memastikan tapak web anda berfungsi untuk semua pelayar yang mungkin, yang lain hanya menjadikannya berfungsi untuk pelayar 'utama'. Bagaimanakah anda mengetahui dengan tepat pelayar mana yang paling banyak digunakan? Sekali lagi W3 Schools datang untuk menyelamatkan.

Pada halaman berikut, anda boleh melihat penyemak imbas yang paling popular: http://www.w3schools.com/browsers/browsers_stats.asp. Dari halaman ini anda boleh melihat bahawa sesuatu seperti IE5 hanya digunakan oleh kira-kira 1.1% pelayar. Terpulang kepada anda sama ada anda menganggap berbaloi untuk membina CSS anda agar serasi dengan penyemak imbas ini, atau sama ada anda hanya akan menguji keserasian anda dengan IE6, IE7 dan Firefox, sebagai contoh. Walau apa pun yang anda lakukan, apabila anda mula membina CSS anda, mulakan dari atas dan uji setiap tetapan dalam setiap penyemak imbas semasa anda pergi. Tidak ada yang lebih buruk daripada membina tapak web yang sempurna dalam Firefox, kemudian mengetahui sejurus selepas anda mengodkan fail css 1000 baris bahawa ia rosak dalam IE6. Untuk kemudian nyahpepijat dan membetulkan kod anda selepas fakta itu adalah mimpi ngeri.

Petua 6 : Berikut ialah petua kecil yang memalukan untuk membetulkan CSS anda dalam IE6 atau IE7
Katakan reka bentuk anda berfungsi dengan sempurna dalam Firefox, tetapi rosak dalam IE6. Anda tidak boleh menggunakan Firebug untuk menentukan di mana masalahnya mungkin kerana ia BERFUNGSI dalam Firefox. Anda tidak mempunyai kemewahan menggunakan Firebug dalam IE6, jadi bagaimana anda menyahpepijat lembaran gaya IE6 atau IE7? Saya sering mendapati bahawa ia membantu untuk menambah {sempadan : 1 px merah pepejal} or {sempadan : 1 px ungu padu} kepada unsur-unsur yang bermasalah. Dengan cara ini anda sering dapat melihat mengapa elemen tertentu tidak sesuai dengan ruang yang tersedia. Ia adalah petua kecil yang memalukan kerana ia sangat primitif dan mudah, tetapi ia berkesan!

Petua 7 : Fahami terapung
Pengapungan elemen adalah penting untuk difahami, terutamanya dalam konteks mendapatkan elemen terapung anda berfungsi dalam pelayar yang berbeza!

Pada asasnya elemen seperti div diapungkan ke kiri atau kanan (tidak sekali-kali ke atas atau bawah, hanya ke sisi). Berikut ialah beberapa perkara yang perlu diambil kira dengan unsur terapung. Setiap elemen terapung mesti mempunyai lebar eksplisit yang ditentukan. Jika anda menggunakan div terapung untuk membuat susun atur 3 lajur atau 2 lajur, sebaliknya tentukan lebar dari segi peratusan dan bukannya lebar tetap, dan jika anda menggunakan peratusan, pastikan peratusan tidak ditambah sehingga 100 %, ini selalunya akan menyebabkan lajur paling kanan jatuh di bawah yang lain, dengan jelas menunjukkan bahawa anda sedang cuba memasukkan sesuatu ke dalam ruang tersedia yang terlalu luas untuknya. Sebaliknya gunakan peratusan yang menambah sehingga sedikit di bawah 100%, seperti 25%, 49%, 24% untuk lajur kiri, lajur tengah dan lajur kanan.

Elemen terapung boleh menjadi sangat rumit untuk difahami dan ia berbaloi untuk meluangkan sedikit masa di tapak yang baik yang menyediakan garis panduan dan petua khusus, seperti Kedudukan adalah Segala-galanya laman web.

Kesimpulan
Petua CSS untuk susun atur ini diharapkan dapat menjimatkan sedikit masa dan usaha anda apabila anda perlu menewaskan reka bentuk tanpa meja seterusnya untuk diserahkan! Ini adalah siaran tetamu yang ditulis oleh Christine Anderssen.