7 olulist CSS-i paigutusnõuannet

CSS-is on kõige raskem õigeks saada saidi paigutus. Siin on paar näpunäidet just sellega tegelemiseks. Mõned neist näpunäidetest ei ole just uued või raketiteadused, kuid loodetavasti päästavad need kellegi vaevast kuskile!

1. nõuanne: enne töö alustamist tühjendage polsterduse ja veerise vaikesätted.
Erinevatel brauseritel on erinevad vaikeveerised ja polsterduse suurused, nii et soovite alustada nii-öelda puhtalt lehelt. Kasutage seda käsku:

*
{
varu: 0;
polster: 0;
piir: 0;
}

kõigi veerise ja polsterduse vaikeseadete kustutamiseks. Pange tähele ka äärist, mille väärtuseks on määratud 0. Pange tähele, et kui teete seda, vabanete ka häirivatest lilladest ümmargustest klõpsatavatest piltidest, kuigi mõned inimesed väidavad, et lilla ääris on juurdepääsetavuse ja kasutatavuse jaoks vajalik. Kuid paljudele inimestele ei meeldi lillad äärisega ümmargused kujutised ja see on üks viis, kuidas saate neist ühe hoobiga lahti saada, ilma et peaksite seadistama img border=0 iga pildi jaoks (mis on igal juhul vastuolus rangete märgistusreeglitega).

2. nõuanne. Paigutuse tsentreerimiseks kasutage kogu sisu sisaldamiseks konteineri div
Deklareerige see järgmiselt:

#konteiner

{
marginaal: 0 auto;
laius: xxxpx;
}

Siin on paar punkti, mida tasub tähele panna. ÄRGE deklareerige laiust 100%. See hävitab kogu objekti, kuna peate lihtsalt deklareerima konteineris olevad alamelemendid ja seejärel NEED kasutades tsentreerima marginaal: 0 auto. See on VÄGA HALB, kuna see tähendab, et keskse paigutuse ühekordse deklareerimise asemel peate selle oma konteineri iga elemendi jaoks deklareerima mitmes kohas.

Vihje 3: töötage ülalt alla
Alustage sõna otseses mõttes oma CSS-i paigutuse kallal töötamist, alustades oma kujunduse kõige ülemistest elementidest, aga ka HTML-i "ülemistest" elementidest, nagu keha, ja ka põhikonteinerid.

Deklareerige oma CSS-käsud kõrgeimal võimalikul tasemel ja proovige midagi deklareerida ainult üks kord ja laske sellel kogu aeg kaskaadida. Alistage madalama taseme käsud ainult siis, kui see on hädavajalik. See hoiab ära paljusõnalise CSS-faili, mida on raske hooldada ja mõista. Näiteks kui teil on { veeris : 0 automaatne} sätted igas konteineris olevas alamdivisjonis – olete hädas.

4. nõuanne: dokumenteerige oma tegevus ja kasutage silumiseks Firebugi ja Firefoxi brauserit
Sa ei kirjuta oma CSS-koodi ainult enda jaoks, ühel päeval peab mõni vaene sodi selle siluma. Tehke oma CSS-failis arvukalt kommentaare, et selgitada, miks te asju konkreetsel viisil teete.

Sellega sobitades võite leida, et peate parandama kellegi teise CSS-i sagedamini, kui arvate (või isegi enda oma). Kasutage CSS-i silumiseks Firefoxi Firebugi lisandmoodulit. See on elupäästja, mis annab teile ülevaate sellest, kus teie disain võib katki minna ja miks.

Ainus probleem on see, et teie disain võib Firefoxis suurepäraselt töötada, kuid mitte IE5, IE6 või IE7 puhul. See viib meid järgmise näpunäide juurde.

5. nõuanne: otsustage, milliste brauserite jaoks kavatsete oma CSS-i luua, ja testige algusest peale
Mõned puristid nõuavad, et teie veebisait töötaks kõigi võimalike brauserite jaoks, teised panevad selle tööle ainult "peamiste" brauserite jaoks. Kuidas täpselt teada, milliseid brausereid kõige rohkem kasutatakse? Taas tulevad appi W3 koolid.

Järgmisel lehel näete, millised brauserid on kõige populaarsemad: http://www.w3schools.com/browsers/browsers_stats.asp. Sellelt lehelt näete, et IE5-taolist kasutab ainult umbes 1.1% brausereid. Teie otsustada, kas peate oma CSS-i selle brauseriga ühilduvaks ehitada või kavatsete lihtsalt testida oma ühilduvust näiteks IE6, IE7 ja Firefoxiga. Mida iganes teete, alustage oma CSS-i koostamist alustades ülalt ja testige iga brauseri seadeid. Pole midagi hullemat, kui luua Firefoxis täiuslik veebisait ja kohe pärast 1000-realise css-faili kodeerimist teada saada, et see on IE6-s katki. Pärast seda koodi silumine ja parandamine on õudusunenägu.

Vihje 6: siin on väike piinlik näpunäide CSS-i parandamiseks IE6-s või IE7-s
Oletame, et teie kujundus töötab Firefoxis suurepäraselt, kuid on IE6-s katki. Te ei saa kasutada Firebugi probleemi asukoha kindlakstegemiseks, kuna see TÖÖTAB Firefoxis. Teil pole luksust kasutada Firebugi IE6-s, seega kuidas siluda IE6 või IE7 stiilitabelit? Tihti avastasin, et aitab lisada {ääris: 1 pikslit täispunane} or {ääris: 1 pikslit täislilla} probleemsetele elementidele. Nii näete sageli, miks teatud elemendid olemasolevasse ruumi ei mahu. See on piinlik näpunäide, kuna see on nii primitiivne ja lihtne, kuid see töötab!

Vihje 7: mõistke ujuki
Elementide hõljumine on mõistmiseks hädavajalik, eriti seoses ujutatud elementide erinevates brauserites töötamisega!

Põhimõtteliselt ujutatakse selliseid elemente nagu divid vasakule või paremale (mitte kunagi üles ega alla, ainult küljele). Siin on paar asja, mida ujuvate elementide puhul arvesse võtta. Igal ujuval elemendil peab olema täpne laius. Kui kasutate 3- või 2-veerulise paigutuse loomiseks ujutatud dive, määrake laiused pigem protsentides kui fikseeritud laiustes ja kui kasutate protsente, veenduge, et protsendid ei moodustaks kokku 100 %, põhjustab see sageli kõige parempoolsema veeru langemise ülejäänutest allapoole, mis näitab selgelt, et proovite mahutada midagi olemasolevasse ruumi, mis on selle jaoks liiga lai. Kasutage pigem protsente, mis moodustavad veidi alla 100%, näiteks 25%, 49%, 24% vasakpoolse, keskmise ja parema veeru jaoks.

Ujuvaid elemente võib olla väga keeruline mõista ja tasub veeta aega headel saitidel, mis pakuvad konkreetseid juhiseid ja näpunäiteid, näiteks Positsioon on kõik kodulehel.

Järeldus
Need CSS-i paigutuse näpunäited säästavad loodetavasti veidi aega ja vaeva, kui peate järgmiseks esitamiseks paneeltega võitma tabelita kujunduse! See oli külalispostitus, mille kirjutas Christine Anderssen.