Mitai apie CSS

Pirmas mitas: neįmanoma profesionaliai kurti tinklalapių, jų elementų išdėstymui ir atvaizdavimui naudojant tik CSS

Kai konferencijos.lt www-projektai konferencijoje radau šią beapeliacinę išvadą[atnaujinta: deja, nuorodą į konf.lt www-projektai skelbtą originalų laišką teko išimti, nes jo nebeliko… Esmė buvo, kad CSS dar netinkamas praktiškam naudojimui], ištiko lengvas šokas. Šokas ne tiek dėl pačio teiginio, bet dėl jo datos. Toks pareiškimas būtų netoli tiesos kokiais 2000-aisiais, bet 2004-ųjų pabaigoje…

Šiek tiek neprofesionalų chronologijos:

  • Niekam nežinomas ir apleistas lamerių žurnalas wired.com šią technologiją įdarbina 2002-ųjų spalio mėnesį.
  • 2003-iųjų vasarį tų nemokšų pėdomis seka espn.com. Tokio kvailo žingsnio pasekmės: puslapio svoris vidutiniškai sumažėja 50KB; dauginame iš 40 000 000 (keturiasdešimt milijonų) puslapių peržiūrų per dieną (sic!), gauname 2TB (dviejų terabaitų) dienos tinklo srauto ekonomiją. 730 terabaitų per metus. Nerimta, oi nerimta.
  • Tų pačių metų kovą klystkeliais nueina FastCompany, liepą — Inc.com
  • Toliau tik spėk skaičiuoti: AT&T, AMI, Chevrolet, ir t.t. ir t.t. ir t.t. ir t.t.

Gerai, atidedu ironiją į šalį — tiesa yra tokia, kad 2003-ieji buvo savotiško lūžio metai, ir web profesionalumo supratimas pasaulyje tapo priešingas tam, ką teigia mitas. WWW ne ta vieta, kur galima užmigti <font> apsikabinus…

Ar žiūrėjote Rammstein svetainės kodą? Ar pastebėjote, kad microsoft.com naudoja validų HTML (kas galėjo pagalvoti!), o MSN paieška išsiverčia be lentelių?

Nevardinsiu čia visko po vieną, be to tai jau padarė kiti. Keletas svetainių, kur galima nueiti, pasižiūrėti, išmokti:

O Lietuvoje nudžiugino atsinaujinęs www.takas.lt. Jei prieš metus su trupučiu portalas galėjo pretenduoti į nugalėtojus baisiausio kodo konkurse, tai dabar tai sektinas pavyzdys.

Antras mitas: CSS yra nelankstus

Tokią mintį aptikau kriause.com, (žr. aštuntą idėją). Nors pati idėja puiki — Nuolat naudoti interneto kūrimo standartus (XHTML/CSS) — ir su ja sutinku beveik be išlygų (nubraukčiau, ar bent į skliaustelius paimčiau X-ą), bet viena dalis skamba keistai:

Šios idėjos minusas, kad CSS (stilius) turi ribotas vizualinės dalies keitimo galimybes. Žinoma gražų dizainą galima sukurti naudojant tik CSS galimybes (pavyzdžiai svetainėje CSS Vault), tačiau apie lankstumą lyginant su HTML galimybėmis galima pamiršti.

Originalioje Aleksandro Šiliajevo versijoje formuluotė dar eee… keistesnė: но про безграничную гибкость классического HTML можно забыть.
Atleisk jam, Zeldmanai, jis nežino ką kalba. Tokį pasakymą galiu paaiškinti arba klaida, arba tuo, kad žmogus kažką ne tą surūkė, arba elementariu nežinojimu (realiausia versija). Aleksandras pats rekomenduoja tinklalapį, kuris demonstruoja visiškai priešingą dalyką: CSS Zen Garden.

Pažiūrėkit patys, keletas dizainų: Zunflower, zengrounds, What Lies Beneath, Gecko’s Eye, Odyssey, Wiggles the Wonderworm, Dark Industrial. Visi jie sukurti keičiant tik CSS failą, HTML kodas yra visiškai vienodas. CSS nelankstus? Padarykit bet kurį iš jų su lentelėmis ir pjaustytais paveiksliukais, o paskui pažiūrėkit, kiek HTML reikės pakeisti perdarant į kitą — vat jums ir begalinis HTML lankstumas.

Trečias mitas: visi CSS dizainai vienodi, negražūs ir nuobodūs.

Manau, kad aukščiau yra pakankamai nuorodų įsitikinti, kad tai visiški kliedesiai. Ar ne?

Sveikame <body> — sveika dvasia. Pirma dalis.

Žvilgsnis į šių metų lietuviškų tinklalapių kodą priminė man istoriją apie tai, kaip romėnų arklio užpakalio plotis įtakojo JAV kosmines technologijas.

Konkrečiai kalbu apie <body> atributus.

Va tipiškas pavyzdys:

  1. <BODY bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

Atkreipę dėmesį į faktus, kad:

  1. dabar XXI amžius;
  2. teoriškai visi moka naudotis CSS;
  3. praktiškai visi naudoja CSS, net jei nemoka, taigi, vienoks ar kitoks CSS failas jau yra.

darome išvadą — viskas, kas parašyta už BODY HTML’e yra reikalinga kaip kiaulei balnas.

Normaliai čia tereikia <body>, idealiai — <body lang="lt"> (jei tekstas nelietuviškas — tada teksto kalbos kodas)(žr. Vlado komentarą).

Su bgcolor susitvarkyti lengva:

  1. body{
  2. background-color: #fff;
  3. color: #000; /* tiesiog tvarkingiau yra nurodyti abi spalvas -- ir fono ir teksto */
  4. ... /* kitos jūsų taisyklės skirtos <body> */
  5. }

Dabar grįžkim prie mūsų avinų, t.y. romėnų arklio užpakalio, kurio vaidmenį atlieka leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" atributai.

Ką jie daro dauguma (tikuosi) žino — jie panaikina tuos bjaurius tarpus, kuriuos palieka naršyklės tam atvejui, jei autorius netyčia nepasirūpino paraštėmis. Be gudriųjų programų rūpesčio tekstas būtų prilipęs prie kraštų — labai nepatogu skaityti. Kodėl gi aš burnoju prieš tokį naudingą dalyką?

Pirmiausia, ne visi tokį kodą naudojantys yra matę naršykles, kurioms jis skirtas — taigi, technologija gerokai pasenusi. Antra, šių atributų niekada nebuvo jokiame HTML standarte, nekalbant jau apie XHTML. Validatorius, aptikęs tokį niekalą pagrįstai keiksis there is no attribute "…".

leftmargin="0" topmargin="0" (ir rečiau pasitaikantys rightmargin="0" bottommargin="0") yra skirti Internet Explorer 3-čiai versijai. IE4+ puikiai supranta atitinkamą CSS ir gali išgyventi be tokių šiukšlių.

marginwidth="0" marginheight="0" skirti Netscape Navigator 4.x, kuris seniai yra gražus lavonėlis. Zeldmanaspasiuntė velniop dar prieš ketverius metus. Ir gerai padarė, nes NN4 turėjo stebėtinai kreivą CSS palaikymą (prieš porą metų kažkur mačiau siūlymą NN4.x uždrausti įstatymu :).

Lengvu rankos judesiu, t.y. dviem papildomomis CSS taisyklėmis išvalome mūsų <body>:

  1. body{
  2. background-color: #fff;
  3. color: #000;
  4. margin:0;/* viso gero, paraštės! */
  5. padding:0; /* Opera turi savo būdą atsisveikinti su paraštėm */
  6. ...
  7. }

Pastaba dėl NN4.x: margin: 0; šiai naršyklei negalioja, bet margin: -10px; turėtų suveikti. Ar jau sakiau, kad ši naršyklė turi kreivą CSS palaikymą?

Vat taip, greitai ir nebrangiai mūsų gražiajam <body> nusiurbti riebalai. Nežinau, kaip visokie leftmargin,topmargin etc. dar randa kelią į HTML kodą; ar juos sukiša naudojama programinė įranga, ar čia stebime copy-paste stebuklą, ar maniakai-nekrofilai (tuoj kolekciją surinksiu — viename poste buvo paminėta zoofilija, dabar, prašau — nekrofilija. Iš paieškos sistemų pradės būriais eiti visokie iškrypėliai, o aš juos išmokysiu tvarkingo HTML’o…) įrašo rankomis. Įpratimas — antras prigimimas, bet prastų įpročių reikia atsikratyti.

Su senobiniu kodu susitvarkėme, dabar pora žodžių apie modernias atmainas. Tai šen tai ten pasitaiko <body style="margin:0px 0px 0px 0px"> (o vienos lietuviškos TVS vizitinė kortelė yra <body style="margin:0 0 0 0">). Geriau, nei nestandartiniai atributai, bet neidealu.

Pirmiausia blogai inline CSS. Nors pats esu naudojęs style="...čia-kažkoks-CSS,-kurį-tingėjau-įrašyti-į-atskirą-failą..." bet kuo toliau, tuo labiau galvoju, kad style= atributo visai nereikėjo įtraukti į standartus, jis prieštarauja pačiai CSS esmei — atskirti turinį nuo atvaizdavimo. Taip, pro validatorių praslysti lengviau, bet košė yra košė…

Antra, rašyti "margin:0px 0px 0px 0px"> visai nebūtina, pakanka "margin: 0"> — jei nurodoma viena reikšmė, tai ji taikoma ir viršui, ir apačiai, ir abiems šonams. Be to, nuliniams dydžiams nereikia nurodyti vienetų.

Ir trečia — neatsižvelgta į Operą, kuri paraštėms naudoja ne margin, o padding.

Viskas, galit eiti valyti kodo ir laukti antros ir trečios dalies.