CSS vs. Tabulu dizains

Gandrīz ik pēc 3-4 mēnešiem, kā nu sanāk, iegriežos kat.lv lapā, jo tur parasti katru gadalaiku ir jauns dizains vai vienkārši kādas pārmaiņas. Šoreiz mani piesaistīja viens raksts, kas skāra tēmu css vs. tabulu dizains.

Tiem, kas izstrādā webprojektus, tā ir tēma no sērijas – Intel vs. Amd vai Windows vs. Linux utt. Galvenokārt tāpēc, ka abiem paņēmieniem ir savi plusi un mīnusi. Skaidrs ir tikai viens, ka CSS ir nākotne un tabulu izmantošanu dizaina elementos ar laiku aizmirsīs.

Par plusiem es nerakstīšu, bet mīnusu ir pietiekoši daudz, lai pagaidām vēl atturētos no pilnīgas pārejas uz CSS stilu definētā dizaina. Kaut vai tāpēc, ka ne visi pārlūki tos korekti attēlo. Ja pieņem, ka tuvākajos gados kā dominējošais pārlūks būs Internet Explorer un būtisku uzlabojumu (neskaitot drošības ielāpus) tajā nebūs, tad jāveido lapas ņemot vērā šī pārlūka nianses un kļūdas.

Situācija nav tā pati spožākā. Mums ir dominējošais IE, kas ir apstājies savā attīstībā vēl uz pāris gadiem un ir Opera ar Mozillu. Pēdējie divi cītīgi cenšās labot kļūdas un radīt ideālu pārlūku, kas atbalsta, tos pašus nelaimīgos standartus, ko nevarētu teikt par IE.

Paredzot daža laba tuvredzību un googles lietošanas prasmes neesamību, atļāvos pameklēt pāris adresītes uzskatāmam piemēram par IE kļūdām ar kurām nāksies sadzīvot tuvākos gadus.

The weird and wonderful world of Internet Explorer
CSS Bugs and Workarounds
CSS Hints for Internet Explorer 5
Internet Explorer 5/5.5 bug sheet
Internet Explorer CSS Bug Workarounds
IE 6 CSS Bugs on This Website
Internet Explorer 6 CSS Bugs
Browser bugs
Browser bug swatting
PNG petition
Internet Explorer 5.5 (Windows) Bugs

Izstrādājot lapas dizainu, balstoties uz CSS stiliem, būs jāņem vērā visas šīs kļūdas. Bez tam CSS bāzētās lapas nestrādās uz veciem un mirušiem pārlūkiem. Vienīgi jāatcerās, ka pārlūks varbūt ir miris, bet lietotājs vēl ne.

Ja lapas dizainu zīmē mākslinieks un savā radošajā darbā viņu laicīgi neaptur, tad bilde, kas ir jāpārtaisa par dinamisku html dokumentu dažkārt ir uz robežas ar fantastiku. Lai gan pagaidām vēl neesmu saskāries ar dizainu kuru ar nelielām korekcijām nevarētu realizēt izmantojot css + tabulas, bet esmu saskāries jau ar vairākiem dizainiem kuros dažus elementus vienkārši nevar realizēt izmantojot tikai css bez tabulām.

Jā, protams, var mainīt dizainu, bet to var darīt ar savu privātprojektu, kurā tu pats zīmē visu un pats domā, ko varēsi realizēt un ko ne, bet tas neies cauri strādājot ar klientiem kuri grib šādu fišku un vēl tādu un, lai tā līnija būtu tieši tāda un ne par pikseli mazāka.

Joprojām apgūstu CSS, bet turpinu veidot dizainus balstoties uz veciem labiem tabulu hakiem. Lai gan ļoti ceru, ka pēc kāda laika nebūs jāņem vērā mirušie pārlūki un varēs nopietnāk pieķerties pie CSS hakiem. To arī jums novēlu.

P.S.
Starp citu, kā jums šķiet, kurš varētu būt pirmais Latvijas portāls (Delfi, Tvnet, Apollo), kas pārietu uz CSS bāzētu dizainu bez tabulām un kad tas varētu notikt?

50 thoughts on “CSS vs. Tabulu dizains

  1. darklow

    Par pirmo latvijas portaalu CSSaa runaajot. Shaubos ka tas vareetu notikt tuvaa naakotnee, tas ir diezgan mezhoniigs darbs, ne jau probleema buutu salikt – sapozicioneet esosho lapu CSSaa, bet gan izmainiiit visas taas daudzaas n-taas includes, nianses utt. un kas pa milziigu CSS failu beigaas buutu to gan es gribeetu redzeet :”)

    Atbildēt
  2. sarcasm

    Jap, taisniiba, ir dizaini, kurus nav iespeejams skaisti realizeet izmantojot tikai css un kaa izskataas, tad tuvaakajaa naakotnee (2-3 gadi) IE6 stagnaacijas deelj nekas daudz nemainiisies. Ja saitam nepiecieshams nodroshinaat izskatu, kas paredzeets dizainaa, ie5/ie6 un gecko, khtml baazeetiem browseriem, tad _lielaakoties_ tas ir iespeejams. Aizveesturieskie (nn4 utt) browseri saitu varees redzeet normaali melns uz balta.

    Atbildēt
  3. ManInBlack

    Jautajums tikai, cik daudz ir to, kas izmanto aizveesturiskos browserus un cik ilgi vini tos vel izmantos.. Tie, kam majas stav p120mhz/16mb ram un win95 ar ie4, jo nevar atlauties labaku pc, lielakoties nevar atlauties lietot ari netu. Tie, kas perk jaunus pc (puslidz) teelo krutos dzekus un liek xp/w2k/me ar ie5/ie6. Tie, kas lieto veljoprojam win98, gan jau ka ir uzmaukushi kadu jaunaku exploreri. Karoce mana genialaa filozofiskaa doma ir tada – tie, kas browsee netu regulari un grib redzet lapas tadas, kaadam taam jaizskatas, uzliks normalu browseri…

    Atbildēt
  4. cshorts

    nu citi saka , ka naakotne ir gjenereet katram browserim atsevishkju lapu ar XML un XSLT paliidziibu. 🙂
    Opera un Mozilla reaalitate ir taa ka lielaa un nopietnaa resursaa ziimeejot pie chartu man vinji neparaadaas pat kaa sviitrinja ( arii taapeec ka maskeeras par MSIE ). Netscape ~20%. Liidz ar to bizness attieciigi Mozilla un opera paveel nenjemt veeraa, bet rakstiit prieksh MISE un netscape.

    Atbildēt
  5. sarcasm

    cshorts, zem nosaukuma netscape tu liec tikai netscape 4.x vai arii netscape 6.x, 7x? Par naakotni katram browserim gjenereet atsevishkju lapu – tas izklausaas padumji, interesanti, kaa tiks detekteets kaada lapa kam jaagjeneree, turklaat lietotaajiem buutu jaabuut izveelei kaadu lapu vinji grib redzeet.

    Atbildēt
  6. Maris

    Viss jau ir forshi,bet vai shajos gudrajos komentaaros,nav iespeejams izteikties latviski. Nu kas tas par vaardu “browsee”?! Nu nav taada vaarda. Tas jau nekas,ka esat gudri kadaa jomaa. Var tachu normaali arii pateikt. Besii shie kretiiniskie zhargoni.

    Atbildēt
  7. huh

    Hmm… kaadam nav ienaacis praataa “uzspljaut” IE un taisiit lapas, kas normaali paraadaas ieksh Mozillas un Operas, bet pofig kaa ieksh IE…

    Atbildēt
  8. Knagis

    man rodas taads jautaajums – vai gadiijumaa lapa, kas buus taisiita tikai uz CSS ar mezhoniigaakajiem pozicioneetajiem diviem, spaniem utt., nerendereesies leenaak uz browsera nekaa parasta ar tabljiem?

    Atbildēt
  9. serdenis

    uzspļaut lapas apmeklētājiem (jeb IE) var tikai tīnis ar debīlu savu mājas lapu. lapas taisa nevis priekš taisītājiem bet priekš lietotājiem. pēc tā var atšķirt labu webdizaineri no sūdīga- vai ērti, vienkārši un korekti lapa ir lietojama apmeklētājam.

    Atbildēt
  10. coolynx

    Knagis: domaaju, ka nee, jo principaa tas viss tiek gjenereets klienta pusee peec buutiibas kaa parasts teksts. tabulu gadiijumaa, ja izmanto tabula ieksh tabulas, kas atrodas citaa tabulaa ieksh citas tabulas, paarluuks to visu saakumaa ielaadee atminjaa, lai peec tam uzziimeetu pashas tabulas un kaa nn4 gadiijumaa biezhi vien arii uzkaraas, jo nespeej sagremot tos liimenjus.
    ljoti interesanta lasaamviela ir atrodama vienaa no wired.com (viens no lielaakajiem portaaliem, kas paargaaja uz css dizainu) izstraadaataaju lapaam stopdesign.com. tur ir aprakstiits par dizaina tapshanu un ar to saistiitiem piedziivojumiem.

    Atbildēt
  11. Grrr

    Nujā.
    Pamēģināju es te kāreiz beztabulu CSS coolynxa iespaidā.
    Rezultāts? Uz firebirda rādās pareizi, uz IE6 – sūdaini.
    http://www.nox.lv/index2.html
    (CSS paņemts no w3.org piemēra)
    Būtu ļoti patīkami, ja varētu iztikt bez tiem mežonīgi daudzajiem TR/TD tagiem. Tas uzlabotu sourcekoda lasāmību, ka nemetās.

    Atbildēt
  12. coolynx

    Grrr: iesaku pagooglot par teemu “tableless design css” vai kaut kaa taa. haki ir vajadziigi, jo diemzheel, kaut vai tas augsheejais saraksts liecina par to, ka pat visu slavinaatais IE taisa jokus.
    te var atrast sho to palasiishanai pirms guleetieshanas

    Atbildēt
  13. ManInBlack

    huh: bet tu pavero tomer statistiku un redzesi, cik daudz cilvecini lieto IE. Ja taisamaa lapa ir tavs blogs, tad var necensties. Bet ja lapas pasutitajs pats ir laame un lieto IE? Kaa tu vinam ieskaidrosi, ka nevajag vienkarsi IE izmantot, un lapa izskatisies ok? Un galu galaa, jadomaa par visiem juzeriem…

    Atbildēt
  14. sarcasm

    Grr, iesaku uzlikt Doctype pareizu, tad ie6.0 vajadzeetu raadiit daudz maz ok, info: http://css-discuss.incutio.com/?page=RenderingMode

    Atbildēt
  15. Optron

    Nesapratu, kas visiem ir pret taam tabulaam?
    Mees tachu visi tik ljoti lietojam Optimizeetus browserus, kuri ir aatraaki, lielaaki, stipraaki (mani ieskaitot – Firebird) Un ja kaads kaut nedaudz ir kautko par mozillas rendereeshanas tehnikaam lasiijis, tad vinjsh zin, ka mozilla visus taapataas paarveersh par un ieliek pareizos izmeerus, taakaa kaapeec gan nepalikt pie tabulaam?
    Pie kam visas lapas, ko esmu redzeejis, ar CSS dizainu vai nu izskataas peec kakas, vai arii ir panaakamas arii ar tabulaam.

    Atbildēt
  16. mxnc

    optron – laikam maz būsi redzējis. kāpēc rakstīt garu, nepārskatāmu kodu, ja to var uzrakstīt īsāku, pārskatāmu? turklāt ar css iegūstot ātri un eleganti modificējamu dizainu un vēl daudzus jo daudzus plusus? paskaties kaut vai zengarden, lai redzētu css iespējas – visās variācijās tiek izmantots nemainīgs html fails – mainās tikai css fails – http://www.csszengarden.com/. turklāt tabulas domātas tabulāriem datiem. un tikai.
    coolynx: izkārtojums, nevis dizains, man domāt.

    Atbildēt
  17. Beaviz

    Pats galvenais- kadas ir CSS veidotas lapas priekshrocibas salidznijaumaa ar tabulveidigo lapu?
    Isaks kods ? – Par cik procentiem videji?
    Vienkarshak browserim renderet ja ir CSS?- Bet kaa ar sarezgitiem blokiem, layers utt?
    Nosauciet kadu vizualo editoru, kas gjeneretu CSS (vai dalju no taa)!
    So….? What is the point?

    Atbildēt
  18. Delf

    ir jamak izmantot tabulas, nevis pist visur iekshaa kur nevajag. kombianacija tabula + css dod labaakus rezultaats, nekaa katrs no tiem (css or table) atsevishki.
    stop spamming

    Atbildēt
  19. Girts Niedra

    Sorry offtopics, tachu vai kaadam nav zinaama programma ar kuru vareetu apskatiit (trackot) IE GET / POST requestus ar visiem parametriem? Teiksim, es spaidos pa kaadu lapu un taa programmele speej man paraadiit, kaadi izskataas manis nosuutiitie dati utt.

    Atbildēt
  20. mxnc

    beaviz – uz jebkuru no taviem jautājumiem atbildes var atrast vienkārši kaut kur pa’search’ojot un iedziļinoties šajā tēmā (kaut vai coolynx ielinkotajā rakstā uzklikšķinot uz attiecīgā linka). bet protams, vieglāk ir nemeklēt, neizglītoties un strādāt kā pašam vieglāk, nepadomājot ka ir arī citi veidi, un ne būt ne sliktāki, varbūt pat labāki 😉 .. + vizuālie editori? priekš kam? (runāju par cilvēkiem, kas lapu izstrāde ir maizes darbs)

    Atbildēt
  21. Neonz

    2 huh: nu maneejaa taada ir :), tagad vel norm bet kad pirmoreiz ieraudziiju kaa iexplore interpretee manu css gandriiz mati sirmi palika 😉 pat vel tagad fontus vinjsh raada lielaakus kaa jebkursh cits browseris
    2 Serdenis: nu personiigi es nejuutos kaa tiinis ar debilu maajaslapu

    Atbildēt
  22. noisex

    Nu tabulu layauti nekad nemirs -tie domines ari turpmaak – protams, piekritu, ka var visu uzmaukt stylesheetaa, bet nu tas ari bus cherez zzopu- un nah to vajaga -labak atveru dreamweaveri/layout view un salieku savejos griestos gifinjus photoshopaa, kaa man vajaga 🙂 -1) vieglaak 2) daudz atraak ..bet nu tas lai paliek katra pasha zinjaa, piekam neesmu vel saskaries ar tad problemu, ka neesmu spejis sagriest ieksh DW kadu no photoshopa skiceem -taa ir vienkarshi pieredze, kas nak ar laiku. Ja kads atsutis man photoshopa skici, kuru nespeshu realizet ieksh layouta -uzsaukshu alinju 😛

    Atbildēt
  23. Grrr

    Tabulu layouti ir bezjēdzīgi visam, atskaitot reāli tabulāros datus.
    Ja man nav jādefinē inclūde ar tabulu, es kā weba taisītājs uzskatu to tikai par plusu.

    Atbildēt
  24. K|NG

    Tabulas ilgaak laadeejas. kameer nolasa visu saturu tikmeer ar css jau ir ielasiiti dati un peec tam ta varbuut, ja kaada bremze noformeejums pievelkas klaat. bet ar css nemaz tik viegli nava, tad taads tur ir ne taads tad shitaads ir paaraak ne taads, ta Opera… nu taa vish i …

    Atbildēt
  25. drformat

    Pats HTML formaats ir debiils. Un savu vinjsh, godiigi sakot, ir nodziivojis. Ja paskataamies taalaakaa naakotnee, tad tas tagad ir tas pats, kas striideeties par to, kursh no kugjiem ir labaaks – airu vai buru.

    Atbildēt
  26. laacz

    Quoting coolynx: bet esmu saskāries jau ar vairākiem dizainiem kuros dažus elementus vienkārši nevar realizēt izmantojot tikai css bez tabulām.
    Piemērus, piemērus! 🙂 Un ieliec podaa kvestu — she teu dizains, kuru es nevaru iedoaaties ar css un aidaa, taisiet augshaa jamo ieksh css (tip konkurss).
    Ato shitaa sanaak tuksha meeles kulstiishana :0

    Atbildēt
  27. coolynx

    laacz: vienu piemeru jau ircaa devu. lai gan tas iipashi nepaliidzeetu, jo to nevar realizeet ne tikai uz jauniem paarluukiem, kur nu veel par veciem nn4… taa kaa jeegas no tiem piemeeriem nebuus nekaadas. tiekai lieki gaisu satracinaas.

    Atbildēt
  28. Janka

    pirms jūs, pārgudrie, te muti vaļā verat un stāstāt, ka ar css taisītu lapu nevar dabūt, lai ar visiem pārlūkiem redz puslīdz līdzīgi, papriekšu notestējiet (valideejiet) ar w3.org mašīnīti. vismaz man nav nācies piedzīvot, ka tai cauri izskrējuse lapa _baigi_ gļukotu.
    jā, protams, atšķirības ir, bet ne jau tādas, lai teiktu, ka ar tabulām jau gan viss ir kārtībā un tāpēc tās ir labākas

    Atbildēt
  29. Kaklz

    coolynx, tev gadījumā neliekas, ka tu esi pretrunā pats ar sevi? Kādu nedēļu atpakaļ tu te aktīvi propogandēji, ka redz IE 5, 6 ir jau vēsture, utt. bet tagad par CSS tu runā jau par to, ka atsevišķas lietas nevar realizēt uz NN 4.x .. nav mazliet dīvaini? Tad spļauj virsū tiem vecajiem un miers.

    Atbildēt
  30. coolynx

    Kaklz: nebuut nee. viena lieta ir mana paarlieciiba un pavisam cita ir dziives realitaate. es ar webu izstraadi pelnu naudu. webus izstraadaaju atbilstoshi klienta prasiibaam. klientam pie kaajas, kas notiek pasaulee, jo vinjsh lieto nn4. attieciigi lapai jaabuut izstraadaatai taa, lai, pirmkaart, klients to redzeetu. vai tieshaam tik gruuti to saprast?

    Atbildēt
  31. dromat

    to : Neonz
    Pagaidaam veel risinaajums nav ja neskaita Makromeedijas flashu, kursh paarlicinoshu popularitaati neguva, bet domaaju ka tas, kas saaks izspiest html no interneta buus kaut kas liidziigs, noteikti shameejaa uzkodeeshana notiks oo videes, noteikti tam buss jaabuut kompileejamai on-screen tehnologjijai nevis teksta tagu. Un tad arii pazudiis visas debiilaas probleemas ar dazhaadiem browseriem un nesuportu – tas vnk nav normaali kaa tagad ir html.
    Tikai tas notiks peec kaada laicinja (a laicinjsh vai cik aatri skrien :). Aaatru naavi html neviens veel neprognozee, kaut arii sevi vinjsh ir izsmeelis.

    Atbildēt
  32. Erons

    coolynx, ja tu tik ljoti lielies, ka izstradaa web lapas un esi baigais kings shaja zinja -mosh paradi kaut vai 1u lapu, ko esi uzcepis, jo kaa zinams pods.lv ari nav tevis taisits, bet gan gatavs opensource? Mosh poaradi savu portfeli?

    Atbildēt
  33. !ob

    CSS layout aizstaaviibai:
    1. protams IE ir un buus pamat brovseris un nevar atmesties ar fraazeem “man Mozilla raada”. atshkiriiba tikai rakstiit CSS vai tabulu hakus. Ir probleema ar IE5 bet to var paardziivot. Mirusho paarluuku lietotaajiem arii pashiem nav daudz atlicis.
    2. Dizaini kurus nevar “sagriezt”. Dizains ir kompromiss starp klienta vajadziibaam un dizainera ieceri, un tad starp ieceri un iespeeju to realizeet. Domaajams probleema ir dizaineros bez mazaakaas sajeegas par tehnisko pusi.
    3. te paviideeja doma par kombinaaciju table+css. cik noprotu doma ir veidot tabulu karkasus kuros piebiidiit ar css elementus. paarbaudiits, darbojaas ljoti apshaubaami.
    4. par ielaades aatrumu un rendereeshanu. atziistaties – juus vienkaarshi nezinat kaa browseris renderee tabulu. visi redesign’i uz css layout ir devushi nost vismaz 50% saita svara.
    p.s. darklow nesuudzies par juusu ieksheejo bardaku. css tvnet’am nebuutu milziigs. vismaz ne tik milziigs kaa esohsaa starta lapa.

    Atbildēt
  34. cu

    vairaakas personas atziimeeja, ka ar tabulaam taisiitaas lapas leenaak ielaadeejas jo jaaielaadee visu tabulu. Ar aatru datoru un leenu internetu taa ir, bet, ar leenu datoru un aatru internetu ir gluzhi otraadi – gan tabulas, gan css atnaak aatri, bet css rendereejas juutami leenaak kaa parastaas tabulas.
    Neko neesmu preciizi meeriijis un saliidzinajis, tikai taa – uz aci, un varbuut,
    jaunajaam mozillaam, kam css atbalsts ir asiniis, viss ir citaadaak, bet ar vecajiem IE, NN, Operu utt, kam tabulu rendereetaaji ir taisiiti, paartaisiiti, laboti, piesliipeeti un optimizeeti jau 10+ gadus, bet CSS atbalsts naacis klaat sameeraa nesen, tabulas rendereejas aatraak.
    Protams, uz jaunajiem datoriem css/tabulu aatruma atshkiriibas tikpat kaa nav, bet ar normaalu internetu arii css/tabulu aatruma atshkiriibas nav – visa lapa paraadaas tuuliit, ar visaam bildeem un reklaamaam

    Atbildēt

Atbildēt uz komentāru ManInBlack Atcelt atbildi

Tava e-pasta adrese netiks publicēta. Obligātie lauki ir atzīmēti kā *