spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Peter Payter Gašparík 4.10.2012
Hodnoť článok:
7 0

CSS Flexible Box Layout Module

Poznáte to. Vždy, keď sa snažíte pomocou CSS spraviť, aby boli blokové elementy vedľa seba horizontálne, tak to je vždy obtiažne. Alebo susedné blokové elementy s rovnakou výškou, tak to je skoro nemožné. Preto by som chcel dnes rozobrať jeden sľubný počin W3C.

CSS Flexible Box Layout Module (alebo v skratke "flexbox") je pracovný návrh W3C, ktorý by mal riešiť problém momentálne obtiažneho umiestňovania blokových elementov. Zatiaľ podlieha stále mnohým zmenám a je určený iba pre experimentálne používanie. Poďme sa teda pozrieť, čo dokáže a ako sa s ním pracuje.

Vlastnosť Display

Aby sme dali vedieť rodičovskému elementu o tom, ako sa má správať, musíme zmeniť hodnotu vlastnosti display. Momentálne pozná 16 hodnôt (inline, block, inline-block...) a s flexboxom je ich teraz 17, takže bude to vyzerať jednoducho:

#flexbox{
    display: box;
}

Treba ale spomenúť, že toto je bez vendor prefixu. Reálne prehliadače túto vlastnosť nepoznajú, takže aby to fungovalo, malo by to s vendor prefixami vyzerať nasledovne:

#flexbox{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
}

Pozn: V ďalších príkladoch už ale vendor prefixy nebudem písať, poradím ale nástroj Prefixr, ktorý pomáha doplňovať práve tieto vendor prefixy

Ďalšie vlastnosti

Pomocou display: box; sme prehliadaču povedali (ak to teda pochopil), že sa má daný element vykreslovať ako flexbox. Teraz, keď už máme toto hotové, môžeme si povedať o ďalších vlastnostiach, ktoré flexbox ponúka:

Pozn: Ešte existujú vlastnosti box-flex-group a box-flex-group, ale tieto nemá ešte žiaden prehliadač implementované a v podstate ani nič užitočné nedokážu.

#box-flex [späť ↑]

Hodnoty: <integer>

Vlastnosť box-flex je kľúčová. Používa sa pre udávanie rozmerov elementov. Táto vlastnosť v podstate inicializuje elementy pod rodičovským elementom s display: box, takže je potrebné ju vždy nastaviť.

Nad touto vlastnosťou je najlepšie rozmýšlať ako nad pomermi rozmerov daných elementov. Každá hodnota väčšia ako 0 udáva, že rozmer má byť flexibilný a veľkosť je relatívna k tejto hodnote optoti hodnotám v ostatných elementoch. Pokiaľ je teda hodnota jedného elementu 2 a druhého 1, tak prvý element bude mať rozmer 2-krát väčší ako ten druhý. Pokiaľ je hodnota 0, môžete rozmer nastaviť fixný, teda napr. width: 100px. Funkčne to ale nie je stále dotiahnuté a dajú sa spozorovať isté rozdiely medzi vykreslením vo Firefox a Chrome.

#flexbox .item.box1{
    box-flex: 1;
}
#flexbox .item.box2{
    box-flex: 2;
}
#flexbox .item.box3{
    box-flex: 0;
    width: 100px;
}



Ukážka

#box-orient [späť ↑]

Hodnoty: horizonstal, vertical

Vlastnosť box-orient umožnuje nastaviť, ako majú byť elementy usporiadané. Môžu byť buď horizontálne alebo vertikálne.

#flexbox{
    box-orient: vertical;
}



Ukážka

#box-pack [späť ↑]

Hodnoty: start, end, center, justify

Slúži na horizontálne zarovananie elementov. Hodnoty sú samovysvetľujúce, treba ale dodať, že zobrazenie naprieč prehliadačmi môže byť rôzne.

#flexbox{
    box-pack: center;
}



Ukážka

#box-align [späť ↑]

Hodnoty: start, end, center, baseline, stretch

Touto vlastnosťou sa dá nastaviť vertikálne zarovnanie elementov. Len si spomeňte, ako sa klasickými spôsobmi dá dosiahnuť vertikálne zarovnanie? Žiadna jednoduchá finta ma nenapadá a práve tu je to konečne vyriešené! Môžete dokonca nastaviť hodnotu na stretch, ktorá roztiahne elementy na výšku.

#flexbox{
    box-align: center;
}



Ukážka

#box-ordinal-group [späť ↑]

Hodnoty: <integer>

Vďaka tejto vlastnosti môžeme meniť poradie vykreslovaných elementov. Môže nadobúdať číselné hodnoty, podľa ktorých bude elementy zoraďovať vzostupne. Viacero elementov môže mať rovnaké poradie, preto to slovíčko "group". Tieto sa potom budú zoraďovať podľa poradia v dokumente. Je to skvelá vec, ak chcete mať napríklad reálne v HTML zapísaný najskôr element content-om a následne ľavé menu, a vďaka tomuto môžete vykresliť najprv menu vľavo a až za ním napravo content.

#flexbox .item.box1{
    box-ordinal-group: 3;
}
#flexbox .item.box2{
    box-ordinal-group: 1;
}

#flexbox .item.box3{
    box-ordinal-group: 1;
}
#flexbox .item.box4{
    box-ordinal-group: 4;
}
#flexbox .item.box5{
    box-ordinal-group: 2;
}



Ukážka

#box-direction [späť ↑]

Hodnoty: normal, reverse

Vlastnosť v podstate narozdiel od box-ordinal-group dokáže iba obrátiť poradie elementov.

#flexbox{
    box-direction: reverse;
}



Ukážka

Podpora v prehliadačoch

Zlou správou je, že aj keď je flexbox vo vývoji už od roku 2009, stále sa jeho podpora výrazne nepohla. Podporujú ho iba Firefox a Chrome (resp. webkit jadro), aj to za použitia vendor prefixov. Podpora je prisľúbená, ale zo strany IE10, no Opera stále žiaden náznak. Aktuálna podpora sa dá pozrieť na CanIUse.

Dobrou správou je, že existuje javascriptový nástroj flexie.js, ktorý simuluje podporu flexboxu aj v IE a Opere. Taktiež na stránke projektu môžete nájsť užitočné pieskovisko pre hranie sa s flexboxom ;)

Poznámka k Firefoxu

Vyzerá to tak, že zatiaľ najlepší prehliadač pre testovanie flexboxu je Chrome. Aj keď Firefox má značnú podporu flexboxu, je vykresľovanie stále veľmi zabugované.

Napríklad pri použití display: box sa tento element tvári ako inline-box, a teda nemá žiadnu šírku. Preto, ak chcete napr. zarovnať tento element na stred, musíte si dopomôcť nejakým wrapperom nad ním (v príkladoch to mám použité). Taktiež prepočítavanie pomeru šírok pri box-flex je rôzne. Treba si to otestovať, poskúšať, uvidíte sami, aké sú tam rozdiely.

Vývoj a zmena syntaxu

Aj keď v príkladoch používam display: box, je to prakticky už nesprávne. Možno sa pýtate, prečo to teda tak robím a učím vás starú syntax? Je to jednoducho preto, lebo nová ešte nie je implementovaná v prehliadačoch (zatiaľ iba webkit jadro). Ďalej vyššie spomínaný flexie.js novú syntax tiež nepozná, takže z tých príkladov by už nebolo vôbec nič. Aké zmeny teda nastali počas vývoja?

  • Pokiaľ si pogooglujete nejaké články o flexboxe, nájdete tam prevažne syntax, ktorú používam ja. Táto syntax je stará od roku 2009. Používa sa display: box a ostatné vlastnosti sa začínajú prefixom box-{*}.
  • Ak niekde uvidíte syntax display: flexbox, je to syntax z roku 2011.
  • Posledná syntax vyzerá display: flex a ostatné vlastnosti sa začínajú s prefixom flex-{*}.

Táto syntax sa ale môže stále meniť, takže ak sa chcete o to naozaj zaujímať, sledujte oficiálnu špecifikáciu.

Flexbox model demo na GitHub

Dovolil som si spraviť malé demo použítím flexboxu. Zdroják dá sa nájsť na GitHub tu. Ide o taký základný layout postavený na flexboxe. Chcel by som to časom vylaďovať postupnými zmenami v špecifikácii, podporou v nových prehliadačoch reflektovať tieto zmeny a raz pripraviť užitočný základ pre kódovanie layoutov využívajúcich flexbox. Takže ak má niekto chuť sa zapojiť, opraviť, poradiť ... kontaktujte ma ;) Tiež tam je možné stiahnuť zdrojáky aj k tým kratším ukážkam, ktoré som použil vyššie.

Na záver...

Neviem, ako vy, ale ja sa už neviem dočkať toho, keď sa svet zbaví všetkých floatingov, inline-blockov, clearfixov a všetko bude krásne a jednoduché s flexboxom. Žiadne prepočítavanie pixelov, obchádzanie marginov, ale len krásny sématický, prehľadný kód, pri pohľade na ktorý sa vyčarí úsmev na tvári... áno utópia, ale snáď raz možno... :)

Iné zdroje

Špecifikácia - http://www.w3.org/TR/css3-flexbox/
Flexie.js - http://flexiejs.com/
Pieskovisko na hranie - http://flexiejs.com/playground/?random
Článok na SmashingMagazine - http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/
Článok o zmenách na CSS-Tricks - http://css-tricks.com/old-flexbox-and-new-flexbox/
Tutoriál o CSS3 na Lynda.com - http://www.lynda.com/CSS3-tutorials/first-look/73288-2.html

Peter Payter Gašparík Peter Payter Gašparík

Som freelancer na plný uväzok ;)


Hodnoť článok:
7 0

23 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Michal Obeda 5.10.2012 22:57:53
@František "yderf" Haško - nie, Chamurappi nemusel prejsť na nič iné, len proste neuznáva slepé nasledovanie všetkého nového len preto, že to používajú všetci.
Nepripadá ti situácia okolo HTML5 rovnaká, ako pred veľa rokmi fanatické presadzovanie XHTML? Vtedy som bol out, lebo som nepoužíval XHTML. Všetci ma presviedčali, že je to lepšie, lebo ak ho použijem, tak to nebudem musieť o rok prerábať. Nepoužil som ho a weby som prerábal až keď som ich redizajnoval. Stále žiadna podobnosť?

To s tým Read it later, to by bolo vážne super... akurát to má jednu chybu - nemohli by zahodiť podporu "starého" html, pretože by stále bolo veľa stránok v ňom písaných. Takže by museli zdokonalovať aj zobrazovanie týchto stránok. A ak by nedajbože niekto použil tie krásne, nové html5 tagy nesprávne, tak by to article view moc nefungovalo. Čiže sme tam, kde sme boli.

Podľa môjho názoru klienta nemá zaujímať, či je to v html5, alebo ultra-hyper-xhtml10. Jeho má zaujímať, či je tá stránka pekná, funkčná, prístupná, použiteľná a či sa ľuďom bude páčiť. Väčšina ľudí to html5 ani neocení.

Neviem, ako ma posunie dopredu použitie nejakého HTML5 (jeho naučenie je tak primitívna vec, že nemusím robiť 50 projektov, aby ma to niekam posunulo), keď ešte nie je poriadne podporované.
Neposunulo by ťa viac vpred, keby si si urobil vlastné tagy a k tomu taký menší javascript, ktorý by ich "sfunkčnil"? Tak by si sa naučil najviac.
0 0 František "yderf" Haško 5.10.2012 22:29:06
@Michal Obeda sorry, no "slepo nasledovat", skutocne? :) Chamurappi asi musel prejst na nieco ine, ked po tom, co ludia zacali pouzivat html5 sa vykaslali na to, ze ci je XHTML document ten, ktory je posielany s text/html mime typom...

Google to samozrejme dokaze v pohode. Pre jednoduchy dovod - je to Google. Ale zober si taky Pocket - predtym sa to volalo Read it later. Je to vecicka na ukladanie si odkazov a offline pozeranie clankov. A vramci toho offline rezimu ma take nieco, ze article view. O co jednoduchsie by bolo, keby stranky mali presne povedane, ze co je "clanok" na stranke a co je nepodstatne pre hlavny obsah? A co keby som si chcel takyto program napisat ja sam? To teraz potrebujem mat vypocetnu silu Googlu pripadne ich skoro dokonale postupy?

A o klientov, ok, mozno to prehanam. Samozrejme, ja som skor zvyknuty robit na sablonach, nie priamo na strankach pre jednotlivych klientov, kde clovek spravi stranku a viac sa nestara. Takze jasne, ty to prerabat nebudes musiet, nechas to rozhodnutie na klientoch. Imho, hype a buzz-words a vsetko - ok, mozno niekedy to nedava uplne zmysel. Ale tak co uz, taky je trh.

A asi kus to pride ako cudny argument (myslene ironicky), no ludia, co robia na HTML5, ho asi nerobia preto, aby boli slepo nasledovani (heh, este stale mi to pride smiesne), ale aby nejako html posunuli dopredu, zlepsili. Mne sa zda, ze zlepsenie semantiky je dobra vec.
0 0 Michal Obeda 5.10.2012 18:58:12
@František "yderf" Haško - až také jednoznačné to nie je. IE8 je súčasťou Win7, takže tých ľudí, ktorý môžu mať tento, alebo starší prehliadač, je dosť.

A prosím, tie prehypované html5 "kecy" (no offence), že to o rok nebudem musieť prerábať si nechaj na klientov, nie na mňa. Povedz mi, čo by som na webe, ktorý neobsahuje tagy ako article, nav, aside, footer, musel po roku prerábať? Div prestane fungovať? Budem za to penalizovaný? Bude môj web rýchlejší, lepší, zrozumiteľnejší?

Google dokáže veľmi dobre "pochopiť" význam obsahu už aj teraz (pretože musí, aby mohol dobre vyhľadávať obsah). Myslíš, že o rok si povedia - ok, máme tu sémantické tagy, tak od dnešného dňa sa prestávame snažiť o zlepšenie indexácie zastaralých nie-html5 webov a budeme sa venovať iba tým, čo sú v html5?

Ak ťa problematika skutočne zaujíma a nechceš iba slepo nasledovať to, čo sa všade tvrdí a robiť to iba preto, že to robia všetci, tak si môžeš niečo o tom prečítať: http://webylon.info/K.42
1 0 Miloš 5.10.2012 16:40:30
Peter Payter Gašparík: Nikdy som to nepotreboval. Možno som mal len šťastie. Zatiaľ som vždy robil s "overeným" floatom a rovnakú výšku som zadával priamo vlastnosťou height. Takže veľmi ma to neoslovilo. Ale je to pre mňa novinka. Doteraz som o tom nevedel.
0 0 Peter Payter Gašparík 5.10.2012 16:14:58
kokso samí elitári tu :D ale aj tak by bolo lepšie keby sme už nekopali do zdochnutého koňa a keď už diskutovali tak v rámci témy, čo si teda myslíte o flexboxe?
0 0 Miloš 5.10.2012 15:22:26
František "yderf" Haško:
Moja reakcia je dole a nad tým je to na čo reagujem.
0 0 František "yderf" Haško 5.10.2012 15:06:07
@shaggy co ti na tom nebude fungovat? :) ludi, co maju ie8 a starsi a v nom vypnuty javascript je 0,00nikto...

v com je to lepsie: ked to spravis teraz v tomto, tak nebudes musiet riesit o rok, ked sa to bude pouzivat v dostatocnej mnozine novych stranok, ze hlavne vyhladavacie sluzby a dalsie pluginy atd. to zacnu pouzivat v hodnej miere. A dalsia vec, najviac prehliadacov mozno uz za rok nebude z desktopov ale z mobilov - a mobilne prehliadace sa vyvijaju rychlejsie. Takze to je podla mna tak, ze co preco by som to tam nedal, ked nie je prakticky ziadny problem s tym teraz to pouzivat...ale ved kludne, kazdy nech si robi ako vidi rozumne...vzhladom na tuto diskusiu, niekto to moze vidiet, ze tabulky su najrozumnejsie :-) nehovorim, ze medzi div-ami a html5 elementami je taky vyznamny rozdiel ako medzi divami a tabulkami, ale zase preco nepouzivat nieco, co je potencionalne lepsie?

@Miloš pocuj, nejako odlis to, na co reagujes a co pises ty, lebo ja som z toho kus poplateny, ze co je co ;)
0 0 Miloš 5.10.2012 14:57:55
Peter Payter Gašparík:
-aj ten jeden je dosť, potom sú tam ešte schované <tbody>, <thead>, <tfoot>, ktoré ti to vo firebugu zneprehladnia. A keď máš tabulku vo viacero riadkoch, pridáš tam zopár colspan, potom ešte len začne skutočná sranda...
-áno, toto sa nedá spraviť s floatingom, to je nevýhoda, no s flexboxom sa to už dá
-ja lebo som musel, bola to katastrofa, radšej nikdy viac, debugovať niečo také alebo spraviť to validné bola nočná mora
-tabulka má význam na vypisovanie usporiadaných dát do riadkov a stĺpcov, to, že to

- tie tagy majú tiež svoj účel, už som popísal aký a pridávajú na prehľadnosti
- float right pri tabuľke z DIVov, hotová katastrofa pre prehľadnosť, preto treba použiť tabuľku a nie flexbox, ktorý je na tom s podporou ako píšeš dosť biedne
0 0 Michal Obeda 5.10.2012 14:54:02
@Miloš - presne, takéto štýlovanie používam aj ja a je to najsprávnejší spôsob + predchádzaš chybám, kedy by neznalý klient vložil tabuľku bez tried a už by nevyzerala tak "dobre", ako by mala vyzerať.

@František "yderf" Haško - teraz riskujem to, že ma začne nenávidieť ešte viac ľudí, než predtým, ale... čo je na tom tvojom poslednom príklade "súčasné"? Teda okrem nepodpory v prehliadačoch? Vieš mi povedať, v čom je to lepšie, ako použiť "obyčajné" divy?
0 0 Miloš 5.10.2012 14:28:17
Peter Payter Gašparík:
A ak chceš vedieť prečo tabuľky, je to kvôli Tiny editoru (obdoba FCK). Keď to dobre naštýlujem, zákazník vloží tabuľku do HTML a nemusí nič nastavovať (žiadne classy a podobne) a bude pekne naštýlovaná.
0 0 Miloš 5.10.2012 14:26:22
Peter Payter Gašparík:
Odkedy sa DIVy štýlujú ľahšie? Dobrý programátor ti vyštýluje tabuľku tak, že medzi tagmi TABLE a /TABLE nie je jediný atribút CLASS. Prečo? Pretože pozná aj THEAD, TFOOT, TH a podobne. Bežne štýlujem tabuľky tak, že CLASS nemusím skoro vôbec použiť. S DIVmi by bolo kódu oveľa viac. Pre jednu firmu som robil tabuľky v DIVoch (TABLE bol zakázaný tag), teraz si tabuľky veselo kódujem a kódu mám menej. Ak myslíš, že s tabuľkami je kódu viac, tak si to skús a potom hovor.
0 1 Miloš 5.10.2012 14:18:27
Peter Payter Gašparík:
-Neprehľadný zdrojový kód
-Viac zbytočného kódu = viac priestoru na chyby
-Pevne daná štruktúra ktorá sa ťažko mení
-Ak je layout tvorený tabuľkou pri zobrazovaní sa čaká kým sa nahrá obsah všetkých buniek (aj obrázkov) kým sa tabuľka zobrazí

skús vyhodiť jeden stĺpec z tabulky pre nejakú podstránku (napr. sidebar nejaký) ak to máš blbo naincludované tak z toho zbesnieš ;)

Dovolím si nesúhlasiť:
- divy sú tiež neprehľadné, keď z nich robíš tabuľku
- viac kódu? to nie je pravda. Ak to chceš v divoch spraviť poriadne, tak aj TR je dobré nahradiť DIVom, TABLE samotné nahradíš DIVom tiež a kódu máš rovnako
- pri DIVoch je to so štruktúrou rovnaké
- zrejme robíš stránky primárne v IE, ten pri verzii 6 čaká na načítanie celej tabuľky, ako to robia novšie verzie neviem, ostatné prehliadače to tak nerobia

Ak si pri tabuľke spravíš zlý kód, tak vyhodenie stĺpca nie je sranda, ale to platí aj pri DIVoch. DIVy sú dokonca občas neprehľadnejšie, pretože tagy tabuľky hneď vidíš, kde sú a ktorý čo znamená (TABLE, TR, TD atď.), ale pri DIVoch sa musíš riadiť len podľa atribútu CLASS, takže kód určite prehľadnejší s nimi nie je.

No a prečo sa prestali používať tabuľky? Bolo to preto, lebo sa začalo používať CSS a programátori chceli vlastnosti elementov nastavovať výhradne v CSS. S tagmi tabuľky to bolo trochu obtiažnejšie, takže sa tabuľky prestali používať (prehliadače ich zobrazovali rôzne). Lenže dnes si v CSS vieš tabuľku nastaviť presne na pixel a to aj výhradne cez CSS. Lenže už sa zabudlo ako to vlastne bolo, takže ten kto kóduje v tabuľkách je za magora. Samozrejme nie je dobré tabuľky pchať všade do kódu. Kostra stránky lepšie vyzerá v DIVoch, ale pokiaľ chceš zobraziť tabuľku objednávok a podobne, tak načo pchať DIVy tam, kam nepatria?
0 0 František "yderf" Haško 5.10.2012 14:06:01
@Peter Širka tabulky sa pouzivali pre jednoduchu vec - boli najlahsi sposob ako spravit layout v dobe, ked css este neboli dostatocne podporovane. T.j. ked sa css stali dostatocne podporovane (priblizne ie6, samozrejme islo o zlozitost veci, co si chcel robit), tak bolo rozumne prejst od tabuliek prec, lebo si koderi uvedomili, ze nie je nutne tabulky robit. Teda nie, ze prestali byt moderne - prestali byt nutne.

No a preco su tabulky nespravne na layout - ako ti vsetci napisali, tabulka ma iny semanticky vyznam. Konkretne je to zobrazenie k (pomenovanych) udajov o m-tici (pomenovanych) zaznamov. Takze, "stlpce" stranky su prakticky pred touto definicou skoro neobhajitelne a vnorene tabulky su 100% neobhajitelne.
Robím weby už dosť dlho, ale toto vidím prvý krát. Ešte nepoužívam všetky nové vlastnosti kvôli IE 7, IE 8 a serie ma aj IE 9, lebo tam prakticky skoro nič nové nie je.
Tak este stastie, ze mas zajtra.sk :) No pre nove veci v HTML5 a CSS3 (prip. CSS4) by som odporucal nejake weby na to ucene si pozriet. Z mojich oblubenych: http://html5doctor.com/ , http://www.css3.info/

@Peter Payter Gašparík uplne najviac by si zabodoval, ze namiesto tabulky na rozlozenie stranok by si dal priklad sucasny sposob :)
<header></header>
<div>
<nav>Menu</nav>
<article>Content</article>
<aside>Doplnujuce info</aside>
</div>
<footer></footer>
0 1 Michal Obeda 5.10.2012 09:23:44
Musím absolútne súhlasiť s Jozkom Hruskom. Tabuľky do table, nie do divov.

@Peter Širka - áno, "ľudia" dávajú tabuľkové dáta do divov. A ty si ich správne pomenoval "ľudia", pretože to by seriózny kodér/programátor neurobil. Amatéri robia aj iné zvrhlosti, ale nemá zmysel sa nimi zaoberať.
ale to isté je aj pri DIVe, že sa z neho potláča význam
Blbosť. Div (narozdiel od tabuľky) nemá žiadny význam. Je to len placeholder, tag slúžiaci na ohraničenie bloku obsahu. Tabuľka má sémantický význam.
0 0 J 5.10.2012 08:39:33
tabulu z DIVov som fakt este nevidel :) ..je pravda ze to je blbost. Ako som pisal - treba pouzivat tagy na to, na co su urcene a to sa tyka vsetkych. Dnes nas uz IE az tak neobmedzuje ako kedysi.
0 0 Peter Širka 5.10.2012 08:30:39
@Peter Payter Gašparík ja som nepovedal, že treba robiť layout za každú cenu v tabuľke. Len som sa zamýšľal nad tým, že sa na tabuľky zabúda a snažil som sa opodstatnene argumentovať (aj príkladom) na tvoje argumenty.

@J "Uplne to potlacalo vyznam tagu a specifikaciu tabulky a tak to casto aj potom vypadalo." ale to isté je aj pri DIVe, že sa z neho potláča význam. Však dnes ľudia robia tabuľky z DIVov.... či si to ešte nevidel?
0 0 Peter Payter Gašparík 5.10.2012 08:17:46
@Peter Širka
-aj ten jeden je dosť, potom sú tam ešte schované <tbody>, <thead>, <tfoot>, ktoré ti to vo firebugu zneprehladnia. A keď máš tabulku vo viacero riadkoch, pridáš tam zopár colspan, potom ešte len začne skutočná sranda...
-áno, toto sa nedá spraviť s floatingom, to je nevýhoda, no s flexboxom sa to už dá
-ja lebo som musel, bola to katastrofa, radšej nikdy viac, debugovať niečo také alebo spraviť to validné bola nočná mora
-tabulka má význam na vypisovanie usporiadaných dát do riadkov a stĺpcov, to, že to vizuálne vyzerá podobne, neznamená, že to je to isté... proste nemiešaj hrušky s jablkami

alebo keď chceš, napíš článok "Prečo znovu používať tabuľkový layout" ako odpoveď na tento článok a diskusiu, možno sa niečo naučíme ;) no vidím iba jednu výhodu aj tá nie je žiadne terno
1 0 J 5.10.2012 08:12:29
@Peters: zbytocna diskusia. Tabulky treba pouzivat tam kde potrebujes tabulku, div tam kde treba akykolvek blok a napr. p tam kde treba odstavec. Layouty v tabulkach su uz (vdakabohu) historicka vec. Uplne to potlacalo vyznam tagu a specifikaciu tabulky a tak to casto aj potom vypadalo.
0 0 Peter Širka 5.10.2012 07:47:46
@Peter Payter Gašparík tak to si fakt zabil príklad... Tabuľka má o 2 TAGy viac a určite o 5 štýlov menej :-) ... na jednej strane ušetríš na druhej strane stratíš.

No chcel by som vidieť ako by si vymenil floating ... lebo pri right sa ti mení poradie prvkov (responsive design je výnimka), takže to čo opisuješ nie je pravda. To sa ti pri tabuľke nestane.

Ja som v tabuľkách začínal, pretože vtedy ešte existoval IE 5 a IE 6.

Ako urobíš pri floutujúcich DIVoch to čo popisuješ vyššie? Nijak a tabuľka je jediné riešenie, ktoré ti pôjde bez JavaScriptu na všetkých platformách (background a border v rovnakej výške vo všetkých stĺpcoch). Tabuľka má veľké opodstatnenie v HTML. Ja som ti chcel prehovoriť do duše, že aj TABLE má veľký význam a ak vie uľahčiť prácu za rovnakého výsledku, nie je po tom o čom diskutovať.
2 0 Peter Payter Gašparík 4.10.2012 22:40:44
@Peter Širka

jednoducho napr.
<table>
<tr>
<td>box 1</td>
<td>box 2</td>
<td>box 3</td>
</tr>
</table>

<div>
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
</div>

to fakt nie je rovnaké :) a to je iba základná ukážka, dobre vieš ako to vyzerá keď tam chceš doplniť štýly, keď tam chceš niečo zmeniť, keď hľadáš, že kde kua chýba ukončenie? No pri divkách si to určite ustrážiš ľahšie.

Ďalšia vec, máš to o dosť jednoduchšie preštýlovať CSSkom, dokonca aj poradie float:right/left, alebo float vypneš a máš tieto divká pod sebou (to sa dá využiť pri responsive design), pri tabulkách máš štýlovanie značne obmedzané. Proste ty by si mal mať možnosť docieliť to, aby si dáta vypísané v HTML mal možnosť zobraziť pomocou CSSka flexibilne, ako sa ti zachce, tabulky ti v tom bránia.

Ako nechce sa mi ťa presviedčať, veď kludne sa môžeš vrátiť k tabulkám, určite potom tie negatíva uvidíš jasnejšie :)
Zajtra.sk > Programovanie > CSS/HTML > CSS Flexible Box Layout Module


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama