7 Mahalagang Mga Tip sa Layout ng CSS

Ang pinakamahirap na bagay sa CSS na gawing tama ay ang layout ng iyong site. Narito ang ilang mga tip na nakikitungo lamang dito. Ang ilan sa mga tip na ito ay hindi eksakto bago, o rocket science, ngunit sana ay makapagligtas sila ng kaunting abala sa isang lugar!

Tip 1 : I-clear ang default na padding at mga setting ng margin bago ka magsimulang magtrabaho.
Ang iba't ibang mga browser ay may iba't ibang mga default na margin at laki ng padding kaya gusto mong magsimula sa isang malinis na slate, kumbaga. Gamitin ang command na ito:

*
{
gilid: 0;
padding: 0;
hangganan: 0;
}

para i-clear ang lahat ng default na setting ng margin at padding. Tandaan din ang hangganan, na nakatakda sa 0. Pakitandaan na kung gagawin mo ito, aalisin mo rin ang mga pesky purple na border round click-able na mga larawan, bagama't ang ilang mga tao ay nangangatuwiran na ang purple na hangganan ay kinakailangan para sa accessibility at usability. Ngunit maraming mga tao ang hindi gusto ang mga purple na border round na mga larawan, at ito ay isang paraan para maalis mo ito sa isang iglap nang hindi kinakailangang itakda img border=0 para sa bawat larawan (na labag sa mahigpit na mga panuntunan sa markup sa anumang kaso).

Tip 2 : Para isentro ang iyong layout, gumamit ng container div para maglaman ng lahat ng content mo
Ipahayag ito tulad ng sumusunod:

#lalagyan

{
margin: 0 sarili;
lapad: xxxpx;
}

Mayroong ilang mga punto dito na dapat tandaan. HUWAG ideklara ang lapad na 100%. Tinatalo nito ang buong object dahil kailangan mo lang ideklara ang mga sub elements sa loob ng container at pagkatapos ay isentro ang mga ito gamit margin: 0 auto. NAPAKAMASAMA ito dahil nangangahulugan ito na sa halip na ideklara ang gitnang layout nang isang beses, kakailanganin mong ideklara ito sa maraming lugar para sa bawat elemento sa loob ng iyong lalagyan.

Tip 3: Magtrabaho mula sa itaas pababa
Literal na simulan ang paggawa sa iyong CSS layout simula sa pinakanangungunang mga elemento sa iyong disenyo, pati na rin ang mga 'nangungunang' elemento sa iyong HTML, gaya ng katawan, pati na rin ang iyong mga pangunahing lalagyan.

Ipahayag ang iyong mga CSS command sa pinakamataas na antas na posible at subukan at ipahayag ang isang bagay nang isang beses lamang at hayaan itong mag-cascade. I-override lang ang mga command sa mas mababang antas kapag mahigpit na kinakailangan. Pinipigilan nito ang isang verbose CSS file na mahirap mapanatili at maunawaan. Halimbawa, kung mayroon ka { margin : 0 auto} mga setting sa bawat sub div sa loob ng iyong container – nagkakaproblema ka.

Tip 4 : Idokumento kung ano ang iyong ginagawa at gamitin ang Firebug at ang Firefox browser para mag-debug
Hindi mo isinusulat ang iyong CSS code para lamang sa iyong sarili, balang araw kakailanganin itong i-debug ng ilang mahihirap na sod. Gumawa ng maraming komento sa loob ng iyong CSS file upang ipaliwanag kung bakit mo ginagawa ang mga bagay sa isang partikular na paraan.

Sa pamamagitan nito, maaari mong makita ang iyong sarili na kailangang ayusin ang CSS ng ibang tao nang mas madalas kaysa sa iyong iniisip (o kahit na sa iyo, sa bagay na iyon). Gamitin ang add-on ng Firebug para sa Firefox upang i-debug ang iyong CSS. Isa itong life-saver patungkol sa pagbibigay sa iyo ng insight sa eksakto kung saan maaaring sira ang iyong disenyo at kung bakit.

Ang tanging problema dito ay ang iyong disenyo ay maaaring gumana nang perpekto sa Firefox, ngunit hindi sa IE5, IE6 o IE7. Dinadala tayo nito sa susunod na tip.

Tip 5 : Magpasya kung aling mga browser ang bubuuin mo ng iyong CSS at susubukan mula sa simula
Ang ilang mga purista ay nagpipilit na tiyaking gumagana ang iyong website para sa lahat ng posibleng mga browser, ang iba ay ginagawa lamang itong gumagana para sa mga 'pangunahing' browser. Paano mo malalaman kung aling mga browser ang pinakamaraming ginagamit? Muli na namang sumagip ang W3 Schools.

Sa sumusunod na pahina, makikita mo kung aling mga browser ang pinakasikat: http://www.w3schools.com/browsers/browsers_stats.asp. Mula sa pahinang ito makikita mo na ang isang bagay tulad ng IE5 ay ginagamit lamang ng humigit-kumulang 1.1% ng mga browser. Nasa sa iyo kung isasaalang-alang mo na sulit na buuin ang iyong CSS upang maging tugma sa browser na ito, o kung susubukan mo lang ang iyong pagiging tugma sa IE6, IE7 at Firefox, halimbawa. Anuman ang iyong gawin, kapag sinimulan mong buuin ang iyong CSS, magsimula sa itaas, at subukan ang bawat isa at bawat setting sa bawat isa sa mga browser habang nagpapatuloy ka. Wala nang mas masahol pa kaysa sa pagbuo ng isang perpektong website sa Firefox, pagkatapos ay alamin pagkatapos mong ma-code ang isang 1000 line css file na ito ay nasira sa IE6. Upang pagkatapos ay i-debug at ayusin ang iyong code pagkatapos ng katotohanan ay isang bangungot.

Tip 6 : Narito ang isang nakakahiyang maliit na tip para sa pag-aayos ng iyong CSS sa IE6 o IE7
Sabihin nating gumagana nang perpekto ang iyong disenyo sa Firefox, ngunit sira sa IE6. Hindi mo maaaring gamitin ang Firebug upang matukoy kung saan ang problema dahil GUMAGANA ito sa Firefox. Wala kang karangyaan sa paggamit ng Firebug sa IE6, kaya paano mo i-debug ang isang IE6 o IE7 stylesheet? Madalas kong nalaman na nakakatulong itong magdagdag {border : 1 px solid red} or {border : 1 px solid purple} sa mga elementong may problema. Sa ganitong paraan madalas mong makikita kung bakit hindi magkasya ang ilang partikular na elemento sa espasyong magagamit. Ito ay isang nakakahiyang maliit na tip dahil ito ay napaka-primitive at simple, ngunit ito ay gumagana!

Tip 7 : Unawain ang mga float
Ang paglutang ng mga elemento ay mahalaga upang maunawaan, lalo na sa konteksto ng pagpapagana ng iyong mga floated na elemento sa iba't ibang browser!

Karaniwang ang mga elemento tulad ng mga div ay pinalutang sa kaliwa o kanan (hindi kailanman sa itaas o sa ibaba, patagilid lamang). Narito ang ilang bagay na dapat isaalang-alang sa mga lumulutang na elemento. Ang bawat lumutang na elemento ay dapat may tinukoy na tahasang lapad. Kung gumagamit ka ng mga floated div upang lumikha ng 3 column o 2 column na layout, sa halip ay tukuyin ang mga lapad sa mga tuntunin ng mga porsyento sa halip na mga nakapirming lapad, at kung gumagamit ka ng mga porsyento, siguraduhin na ang mga porsyento ay hindi nagdaragdag ng hanggang 100 %, ito ay kadalasang magiging dahilan upang ang pinakakamang column ay bumaba sa ibaba ng iba, na malinaw na nagpapahiwatig na sinusubukan mong magkasya ang isang bagay sa available na espasyo na masyadong malawak para dito. Sa halip, gumamit ng mga porsyento na bahagyang mas mababa sa 100%, gaya ng 25%, 49%, 24% para sa kaliwang column, gitnang column at kanang column.

Ang mga lumulutang na elemento ay maaaring maging lubhang kumplikado upang maunawaan at sulit na gumugol ng ilang oras sa magagandang site na nagbibigay ng mga partikular na alituntunin at tip, tulad ng Posisyon ay Lahat website.

Konklusyon
Ang mga tip sa CSS na ito para sa layout ay sana ay makatipid sa iyo ng ilang oras at pagsisikap kapag kailangan mong i-panel-beat ang isang disenyo na hindi gaanong mesa sa pagsusumite! Ito ay isang guest post na isinulat ni Christine Anderssen.