7 važnih savjeta za CSS izgled

Ono što je najteže u CSS-u ispraviti je izgled vaše stranice. Evo nekoliko savjeta koji se bave upravo time. Neki od ovih savjeta nisu baš novi, ili raketna znanost, ali nadamo se da će nekoga negdje poštedjeti muke!

Savjet 1 : Izbrišite zadane postavke ispuna i margina prije nego počnete raditi.
Različiti preglednici imaju različite zadane veličine margina i ispuna, tako da želite početi ispočetka, da tako kažem. Koristite ovu naredbu:

*
{
marža: 0;
popunjavanje: 0;
granica: 0;
}

da biste izbrisali sve zadane postavke margina i ispuna. Također obratite pažnju na obrub koji je postavljen na 0. Imajte na umu da ćete se, ako to učinite, također riješiti dosadnih ljubičastih obruba oko slika na koje se može kliknuti, iako neki ljudi tvrde da je ljubičasti obrub neophodan za pristupačnost i upotrebljivost. Ali mnogi ljudi ne vole okrugle slike s ljubičastim obrubom, a ovo je jedan od načina na koji ih se možete riješiti jednim potezom bez postavljanja img granica=0 za svaku sliku (što je u svakom slučaju protivno strogim pravilima označavanja).

2. savjet: da biste centrirali svoj izgled, upotrijebite div spremnik koji sadrži sav vaš sadržaj
Deklarirajte na sljedeći način:

#kontejner

{
margina: 0 auto;
širina: xxxpx;
}

Postoji nekoliko točaka koje treba uzeti u obzir. NEMOJTE proglasiti širinu 100%. Ovo pobjeđuje cijeli objekt jer ćete samo morati deklarirati podelemente unutar spremnika i zatim IH centrirati pomoću margina: 0 autom. Ovo je JAKO LOŠE jer znači da umjesto da jednom deklarirate središnji izgled, morat ćete ga deklarirati na više mjesta za svaki element unutar vašeg spremnika.

Savjet 3: Radite od vrha prema dolje
Doslovno počnite raditi na svom CSS izgledu počevši od vrha većine elemenata u vašem dizajnu, kao i od 'gornjih' elemenata u vašem HTML-u, kao što je tijelo, kao i vaši glavni spremnici.

Deklarirajte svoje CSS naredbe na najvišoj mogućoj razini i pokušajte deklarirati nešto samo jednom i pustite da se niza. Zaobiđite naredbe na nižoj razini samo kada je to nužno. To sprječava opširnu CSS datoteku koju je teško održavati i razumjeti. Na primjer, ako imate {margina: 0 auto} postavke na svakom poddivu unutar vašeg spremnika – u nevolji ste.

Savjet 4: Dokumentirajte što radite i koristite Firebug i Firefox preglednik za uklanjanje pogrešaka
Ne pišete svoj CSS kod samo za sebe, jednog dana će ga neki jadnik morati ispravljati. Unesite brojne komentare unutar vaše CSS datoteke kako biste objasnili zašto radite stvari na određeni način.

U skladu s ovim, mogli biste se naći u situaciji da morate popravljati tuđi CSS češće nego što mislite (ili čak svoj vlastiti, što se toga tiče). Upotrijebite dodatak Firebug za Firefox da otklonite pogreške u svom CSS-u. Ovo je spas s obzirom na to da vam daje uvid u to gdje bi vaš dizajn mogao biti pokvaren i zašto.

Jedini problem s ovim je taj što bi vaš dizajn mogao savršeno funkcionirati u Firefoxu, ali ne i u IE5, IE6 ili IE7. Ovo nas dovodi do sljedećeg savjeta.

Savjet 5: Odlučite za koje ćete preglednike izgraditi svoj CSS i testirajte ga od početka
Neki čistunci inzistiraju na tome da vaše web mjesto radi na svim mogućim preglednicima, drugi čine da radi samo na 'glavnim' preglednicima. Kako točno znati koji se preglednici najviše koriste? Ponovno W3 škole priskaču u pomoć.

Na sljedećoj stranici možete vidjeti koji su preglednici najpopularniji: http://www.w3schools.com/browsers/browsers_stats.asp. Na ovoj stranici možete vidjeti da nešto poput IE5 koristi samo oko 1.1% preglednika. Na vama je da li smatrate da se isplati izgraditi vaš CSS tako da bude kompatibilan s ovim preglednikom ili ćete samo testirati svoju kompatibilnost s IE6, IE7 i Firefoxom, na primjer. Što god radili, kada počnete graditi svoj CSS, počnite od vrha i testirajte svaku postavku u svakom od preglednika u hodu. Nema ništa gore od izrade savršene web stranice u Firefoxu, a zatim saznanja odmah nakon što ste kodirali css datoteku od 1000 redaka da je pokvarena u IE6. Otklanjanje pogrešaka i popravljanje koda naknadno je noćna mora.

Savjet 6: Evo neugodnog malog savjeta za popravljanje vašeg CSS-a u IE6 ili IE7
Recimo da vaš dizajn radi savršeno u Firefoxu, ali je pokvaren u IE6. Ne možete koristiti Firebug da odredite gdje bi mogao biti problem budući da RADI u Firefoxu. Nemate luksuz korištenja Firebuga u IE6, pa kako debugirati IE6 ili IE7 stylesheet? Često sam otkrivao da pomaže dodavanje {border: 1 px puna crvena} or {border: 1 px puna ljubičasta} na problematične elemente. Na taj način često možete vidjeti zašto se neki elementi ne uklapaju u raspoloživi prostor. To je neugodan mali savjet jer je tako primitivan i jednostavan, ali djeluje!

Savjet 7: Razumite lebdeće
Plutanje elemenata bitno je razumjeti, posebno u kontekstu rada vaših plutajućih elemenata u različitim preglednicima!

U osnovi elementi kao što su divovi lebde ulijevo ili udesno (nikada na vrh ili dno, samo bočno). Evo nekoliko stvari koje treba uzeti u obzir kod lebdećih elemenata. Svaki plutajući element mora imati eksplicitnu specificiranu širinu. Ako koristite plutajuće divove za izradu izgleda s 3 stupca ili 2 stupca, radije odredite širine u smislu postotaka umjesto fiksnih širina, a ako koristite postotke, pobrinite se da zbroj postotaka ne iznosi 100 %, to će često uzrokovati da krajnji desni stupac padne ispod ostatka, jasno pokazujući da pokušavate uklopiti nešto u dostupni prostor koji je preširok za to. Radije koristite postotke koji u zbroju iznose malo ispod 100%, kao što su 25%, 49%, 24% za lijevi stupac, srednji stupac i desni stupac.

Plutajući elementi mogu biti izuzetno složeni za razumijevanje i isplati se posvetiti neko vrijeme dobrim web-mjestima koja pružaju specifične smjernice i savjete, kao što je Položaj je sve web stranicu.

Zaključak
Nadamo se da bi vam ovi CSS savjeti za izgled trebali uštedjeti malo vremena i truda kada sljedeći put budete morali prevladati dizajn bez tablice na podnošenje! Ovo je bila gostujuća objava koju je napisala Christine Anderssen.