Darbas su CSS kartais gali būti lyg iššūkis. Naršyklės kartas nuo karto keičia kodo interpretavimą (na, na? Ar žinote kuri naršyklė tai mėgsta daryti? Na pagalvokite. Taip! Internet Explorer...), todėl neretai rašydami kodą atsitrenkiame į sieną — kodas parašytas lyg ir gerai, o rodo visiškai ne taip, kaip norima. Nors CSS yra nepaprastai naudinga ir galinga kalba, dažnai ji gali būti panaudota neteisingai, kas, beje, sukels jums košmarą...

1. Ignoruojamas naršyklių suderinamumas

Tai turbūt pati pagrindinė problema kuriant web tinklapius, kadangi svetainė turi būti atvaizduojama vienodai visiems, ir nesvarbu, kokią naršyklę lankytojai naudoja. Bandydami tai įgyvendinti kartais tiesiog rauntės plaukus nuo galvos.

Svetainių kūrėjams yra lengva paruošti visą svetainės maketą pagal jų mėgstamiausias naršykles ir nesirūpinti, kaip svetainė atrodys kitose naršyklėse. Kai vis dėl to atsižvelgiama į kitas naršykles, iškyla įvairių problemų — nuo paprasčiausios atvaizdavimo mistikos iki visiško paradokso. O kartais tiesiog nėra galimybės pamatyti, kaip atrodys svetainė su tam tikra naršykle, kadangi pastarosios neįmanoma įdiegti jūsų operacinėje sistemoje ir pan. Tokiai problemai spręsti geriausias metodas yra apsilankyti BrowserShots svetainėje, kurioje galėsite įvesti svetainės adresą ir pažymėti norimas naršykles (detalesnį browsershots svetainės aprašymą rasite E-grafika.lt skyrelyje „Nuorodos“).

2. Neatsižvelgiama į mažesnes ekrano rezoliucijas

Daugelis tikrų dizainerių ir web svetainių kūrėjų naudoja didelius vaizduoklius, tuo tarpu lankytojai besilankantys svetainėje greičiausiai tokių neturi. Svetainių dizainai, kurie nepalaiko mažesnių rezoliucijų (tarkime, 800x600 ar bent 1024x768), lankytojams gali tapti visiškai negražus, neproporcingi ir nepatogūs. Taigi atsižvelgdami į mažesnes rezoliucijas užtikrinate, kad visi svetainės lankytojai ras reikiamą informaciją ir liks patenkinti.

3. Nepasinaudojama CSS karkasais

Negalima tvirtai teigti, kad CSS karkasų nenaudojimas yra klaida. Ne, taip nėra. Tačiau jeigu jūs kuriate CSS maketą visiškai nuo nulio, galite paklausti savęs kodėl? Yra nemažai neblogų CSS karkasų tokių kaip BluePrint arba 960 CSS Framework. Tokie karkasai sukurti tam, kad jūs galėtumėte sukurti kokybiškus ir daugelį naršyklių palaikančius web dizainus. Jeigu nekuriate ko nors visiškai radikalaus, unikalaus, galbūt vertėtų pamąstyti apie karkaso panaudojimą? Visgi kam išradinėti dviratį, taip? Kita vertus, yra ir tokių atvejų, kai karkasai netinka. Pavyzdžiui, jaučiate, kad kurdami savo mini karkasą (jei tik taip galima pavadinti) įgausite naujų žinių, patirties, arba manote, kad be svetimo karkaso galėsite lengviau daryti pakeitimus ateityje. Tačiau kartais karkasų atmesti tikrai nereikėtų.

4. Nebandoma panaudoti bendrinių klasių

Gerai, pavadinimas gali atrodyti kiek miglotas, tačiau greit suprasite, ką aš turiu omenyje. Štai keletas bendrinių klasių pavadinimų:

.clear { clear: both; }
.left { float: left; }
.right { float: right; }

o HTML faile galite kokiems nors DIV blokams priskirti bendrinę klasę.

<div id="blokas" class="right"></div> 
<div id="dar_vienas_blokas" class="right"></div>
<div id="blokas_trecias" class="right"></div>

Nors buvo galima visiems blokams priskirti float: right savybę atskirai, bendrinių klasių naudojimas yra paprastesnis ir optimalesnis.

5. Nevalidus HTML kodas

Lažinuosi, kad nežinojote, jog nevalidus HTML kodas gali paveikti CSS, taip? Na, iš tikrųjų gali. Pirmiausia, jūs negalite validuoti CSS kodo, jei HTML kodas yra nevalidus. Antra, yra daug atvejų, kai HTML, o ne CSS gali sukelti problemų. Neparašyta bloko pabaigos žymė ten, ne taip parašytas CSS klasės pavadinimas HTML kode... Gali būti bet kas. Tad įsitikinkite, kad HTML kodas yra taisyklingas ir validus, o tik tada pereikite prie CSS tikrinimo.

6. Nevalidus CSS kodas

Idėja paprasta: jeigu CSS kodas atitinka W3 standartus (yra validus/taisyklingas), yra mažesnė tikimybė, kad svetainė bus nesuderinama su kai kuriomis naršyklėmis. Paprasčiau ir būti negali.

7. „Griozdiškų“ fono paveikslėlių naudojimas

Pradedantieji dažnai nesupranta, kad dideli paveiksliukai neišgelbės. Įsivaizduokite, kad koks nors žmogus sugalvojo uždėti 3,000x5,000px dydžio fono paveikslėlį manydamas, kad jo „užteks“ visoms, net ir didžiausioms, rezoliucijoms. Jeigu tame paveikslėlyje kartojasi tas pats elementas, tai kur kas optimaliau būtų palikti tik vieną fono elementą ir jį automatiškai kartoti su šiek tiek CSS magijos. Tad didelį paveikslėlį, kuris galbūt „sveria“ 1 MB, būtų galima pakeisti keliasdešimt kilobaitų sveriančiu paveiksliuku.

Jeigu naudojamas didelis fono paveiksliukas, pralaimima dėl dviejų priežasčių:

• išnaudojama daug duomenų srauto;
• lankytojas verčiamas ilgiau laukti, kol užsikraus svetainė.

Žinoma, kartais didesnių paveikslių neišvengiama, tačiau jeigu galima be jų apsieiti, taip ir darykite. Neiškeiskite svetainės lankytojo komforto į savo neoptimalius sumanymus.

8. CSS naudojimas viskam

Kai žmonės išmoksta kokią nors technologiją ar atlikimo metodą, jie bando tai integruoti visur, kartais net ten, kur tai yra nenaudinga.

Pavyzdžiui, kartais yra kur kas paprasčiau sudėlioti informaciją į lentelę, negu į CSS pagrįstais DIV blokais ir pan. Turėtume įsiminti, kad naudojame tokias technologijas kaip CSS norėdami paspartinti darbą. Kai tai pradeda vilkinti darbą, galbūt žengiame ne ta kryptimi arba tiesiog persistengiame.

9. Tiesioginis CSS naudojimas

Jeigu kuriate svetainės dizainą, beveik visais atvejais norite, kad CSS ir HTML būtų atskirti vienas nuo kito. Kai nusprendžiate ką nors pakeisti, jums nereikia raustis po HTML makalynę ir ieškoti tos žymės, kurioje sudėtas CSS aprašas.

Taigi vietoj tokio kodo rašymo:

<a href="nuoroda" style="color: green; text-decoration: none;">Nuoroda</a>

beveik visada turėtumėte rašyti taip:

<a href="nuoroda" class="klase_kurioje_aprasytas_nuorodos_stilius">Nuoroda</a>

Naudokite tiesioginius CSS aprašus, jei tikrai žinote, jog ateityje nereikės nieko keisti.

10. Panaudojama per daug CSS failų

Ar teko kada nors matyti dizainą, kuris turi 10-12 skirtingų CSS failų? Tai tikras košmaras tiems, kurie teiksis redaguoti tokį dizainą.

Be to, naršyklė apdoros svetainės kodą tuo greičiau, kuo mažiau bus CSS failų. Taip pat sutaupysite ir laiko žmogui, kuris redaguos dizainą.

Žinoma, yra ir išimčių. Tarkime, kad svetainės dizainą sudaro papildomi elemnentai, kurie yra kurti ne jūsų, tad nenorite sugrūsti visko į vieną vietą. Tačiau nesugalvokite kurti atskirų CSS failų dizaino viršui, šoniniam, pagrindiniam blokams, apačiai ir pan. Tai būtų tiesiog absurdas!

Apie straipsnį

Originalaus straipsnio autorius Glen Stansberry. Straipsnį išvertė bei savo išminties ir patirties pridėjo Edmundas Kondrašovas.

Straipsnio šaltinis: http://net.tutsplus.com/articles/web-roundups/are-you-making-these-10-css-mistakes/.