Mire jó a CSS?

Most nem arról lesz jó, hogy hurrá mi mindenre jó a CSS, hanem arról,
hogy mire érdemes használni és mire nem. Kis előzetes: a CSS alapú
“tördelés” az esetek jó részben nagyon rossz ötlet.

Ha nagyon általánosítani szeretnék (ami közismert szokásom jellemhibám) azt mondanám, hogy ha felmerül bennünk, hogy CSS vagy sem, akkor azt vizsgáljuk meg, hogy melyik modulárisabb.

Ha a kiemeléseket akarjuk mondjuk más betűtípussal kiemelni, akkor használhatjuk a FONT taget vagy CSS-t (ez utóbbinál ezentúl mindig, mint az előre definiált styluslapokra gondolok).
Ez a probléma nyilvánvalóan CSS-t kíván, az ok pedig egyszerű: nagyon
könnyen utólag átalakíthatjuk a kérdéses kiemelések kinézetét. Ugyanez
alapján az elv alapján javasolt a CSS menükre, felsorolásokra és más
hasonló állatfajtákra. A webes design elemeit nem művészek hanem
mérnökök tervezték és róluk (izé… rólunk) mindenki tudja hogy nem
szeretünk semmit kétszer csinálni, az optimális megoldás tehát
általában az amelyiknél ugyanazt nem kell kétszer leírni. Ha nem
használunk stíluslapokat sokszor a legalapvetőbb módosítások is
gigantikus munkával járnak. (vö: “replace all”)

Azonban amilyen
gyönyörűen moduláris a CSS szövegelemek tekintetében annyira nem az a
tördelés (azaz az oldal egészének kialakításának) esetében.
Természetesen használhatunk CSS-t ehhez ha minden módosításnál át
tudjuk gondolni, hogy az milyen hatásokkal jár az oldal egészére nézve.
Márpedig emberből vagyunk, így ez a nagyobb, összetettebb oldalak
esetében (szerveroldali szkriptek!) problémát szokott okozni. Ennek oka egyszerű: ha a CSS tördelésbe hiba kerül (böngésző kompatibilitás!) az egész oldal “szétesik”, míg táblázatok esetében csak a problémás résszel lesznek gondok. (Ez persze csak az esetek többségére vonatkozik… természetesen táblázatokkal is el lehet cseszni az egész oldalt)


Elég egy kis hiba és a CSS eltorzítja az egész oldalt [nagyban]

A
táblázatok ezen a téren azért alakítanak sokkal jobban, mert különálló
egységeket alkotnak.  A cellákon belüli rész mindig egy külön kis
világ. Emiatt sokkal kevesebb kompatibilitási probléma merülhet fel. És
itt nemcsak arra gondolok, hogy ahány böngésző annyi szokás, hanem arra
is, hogy lehet például egyszerűen “teljesképernyős” oldalakat tervezni.
Azaz nem olyanokat, amik ülnek a képernyő közepén (neadjisten annak bal
oldalán ld: index) hanem olyanokat amiknek a bal szélük a böngésző bal,
jobb szélük a böngésző jobb oldalán van, így a tartalomnak több hely
marad. (Ha ilyet csinálunk sose felejtsük el megnézni az oldalt nagyon
kicsi és nagyon nagy felbontásban!)

A különálló egységek előnye
a legjobban természetesen akkor jön elő, amikor dinamikus tartalomról
van szó, márpedig ez az elmúlt 5-6 évben már szinte magától értetődő.
Ebben az esetben nagyon könnyen, átláthatóan elkülöníthetőek az oldal
részei fejlesztés közbe ami nemcsak egyszerűbb munkához, hanem jobb
végeredményhez is vezet.

Természetesen mindenkinek magának
kell eldöntenie, hogy mikor milyen módszert használ, azonban az nagyon
nagy hiba, ha feltétlenül ragaszkodunk valamelyikhez. Mindig az alapján
mérlegeljünk hogy melyik a jobb az adott problémára. A munkánknak ebből
a szempontból nem kell egységesnek lennie.

Kapcsolódó bejegyzések

10 Hozzászólás - “Mire jó a CSS?”


  1. 1 Bártházi András

    Benedek, tisztellek, de azért ez így, ebben a formában… Egy nagy hülyeség volt. Amilyen CSS-t én kiadok a kezeim közül, ott sosincs nagyobb probléma az oldal szétesésével (ami van, az meg így is, úgy is lehet). És azért elég nagy portálok is voltak már a kezeim között. Esetleg lokálisan jelentkezhetnek problémák. A széteséses “probléma” simán kezelhetõ az overflow-val, a dinamikus szélesség is simán megoldható %-os méretek használatával. A cellákon belüli kis világ pont olyan, mint a div-eken belüli kis világ.

    Azt hiszem, azzal van gondod, hogy az id-kat és a class-okat nem alkalmazod elég pontosan, hogy az egyes részek minél jobban elkülönüljenek.

    Persze, ha beírod a CSS-be, hogy
    a { text-decoration: underline; }
    akkor bárhol elõjöhet egy aláhúzás probléma.

    De ha az írod, hogy
    #sidebar .box .header a { text-decoration: underline; }
    akkor azért sehogy sem fog ez rossz lenni máshol. A példa formázásra vonatkozott, de pont így mûködik a layout esetében is.

    Mondjuk pár példa a fix és rugalmas oldalkialakításra CSS-sel:

    http://glish.com/css/

    De azért rengeteg tovább is van.

  2. 2 Tóth Benedek

    Persze, hogy neked is igazad van, de én ennek ellenére úgy vélem, hogy a CSS alapvetõen nem praktikus tördelésre. Ellenpéldákkal és példákkal is lehet bõven dobálódzni.

    Elsõsorban az a megdönthetetlen ellenérvem a CSS-tördelés ellen, hogy táblázatokkal könnyebb, logikusabb és átláthatóbb. Ez pedig kevesebb hibához vezet. És ebben szerintem te is egyetértesz.

  3. 3 mefi

    Én sem értek egyet. Megmondom miért: egyrészt a Firefoxnak van egy olyan bakija, hogy huzamosabb ideig nem frissített oldalt szétrobbant, pl. eképpen. Másrészt a harc: a táblázat táblázatos adatokra, és nem oldalak dizájnolására szolgál, ezt naponta tízszer mondd el. Egyrészt mert szerencsétlen felolvasóprogramot használó látogatód azt fogja hallani, hogy “táblázat, két oszlop, három sor”, másrészt mert egy rácsos szerkezet -> korlátolt.

    Nem, a CSS, esetleg Javascripttel tunningolva, az való dizájnolásra, a táblázat pedig táblázatos adatok megjelenítésére.

  4. 4 Tóth Benedek

    Mefi: A monitor, mint eszköz rácsos szerkezet. Na de komolyra fordítva a szót: az oldalak 99,9% rácsos szerkezetû. Ez elég gyenge érv.

    A felolvasó program övön aluli ütés, de el kell fogadnom. Az azonban tény, hogy azért az ilyenekkel kompatibilis oldalakhoz nem elég a táblázatok elhagyása. Ha minden CSS-sel tervezett oldalnál figyelnének az ilyesmire elfogadnám érvként.

    Nem értem, hogy miért mondod azt, hogy nem való arra. A CSS szabályos divattá válása elõtt évekig nagyon jó oldalakat csináltunk táblázatokkal. És a mostani CSS-oldalakat is nagyon jól meg lehetne csinálni táblázatos tördeléssel.

  5. 5 Bártházi András

    1) könnyebb
    Nem tudom, lehet. Annak biztosan, aki így tanulta meg.

    2) logikusabb
    Semennyivel sem logikusabb. Miért lenne logikusabb azt mondani, hogy itt van két cella, egyikbe kerül a bal oszlop, másikba pedig a jobb, mint azt mondani, itt van két div, az egyikbe kerül a bal oszlop, a másikba pedig a jobb. A táblázatnál azt mondod, hogy itt vannak a cellái, tüntessük el a keretet. A diveknél azt mondod, hogy itt vannak ezek a divek, igazítsuk balra õket és adjunk nekik ilyen szélességet.

    3) átláthatóbb
    Egy div-es oldalfelépítés átláthatóbb, karbantarthatóbb, rugalmasabb. Átláthatóbb, mert kevesebb HTML kódot igényel (table/tr/td helyett div). Átláthatóbb, mert nem kell a colspan-okkal varázsolni, kitalálni, hogy melyik rész, vajon hova tartozik, s mi a szerepe. Az elõzõek miatt karbantarthatóbb. Rugalmasabb, mert CSS-bõl sokkal jobban befolyásolható a megjelenése (margók, keretek például táblázatnál nehezen), akár a sorrend is megváltoztatható (átrakom az oldalsávot a másik oldalra), akár az elhelyezkedése is lehet más (az oldalsávot egy kicsit feljebb húzom az oldalon).

    Ez nem hype, ez nem divat, hanem ez van. Az lehet, hogy régebben jól megvoltunk a táblázatos oldalakkal, de hát elektromos áram nélkül is milyen jól elvolt sokáig az emberiség.

  6. 6 mefi

    Nem, úgy látszik nem értetted mit akartam. Rácsos szerkezet, mert megadod, hogy mondjuk 2×2-es táblázat, és azon belül kell mozognod. Míg CSS-ben úgy variálsz, ahogy szeretnéd.

    Egyetértek, ez nem hype, ez nem divat, ez nem trend: ez módja, ezzel kell csinálni, haladni kell a korral. Nem mondom, én is rengeteg táblázatos oldalt készítettem már. Szép volt, jó volt, vége ,ennyi.

  7. 7 Tóth Benedek

    András: szerintem pont azért átláthatóbb, mert div helyett table/tr/td van. Ha egy divnek/táblázatnak formát is akarsz adni, az már egész más helyzet. (Itt már a font tag vs. CSS kérdéskörhöz érkeztünk ahol egyértelmûen a CSS a nyerõ.) Szerintem átláthatóbb, mert a hierarchia adott. Nagyon ritka eset amikor valami egyik oldalról átkerül a másikra…

    mefi: értem mit akarsz mondani, de a szituáció gond nélkül kezehetõ táblázatokkal is.

    “Ez nem hype, ez nem divat, hanem ez van.”
    Nem értek vele egyet. Szerintem igenis sok esetben errõl van szó. A CSS sok esetben nélkülözhetetlen (vagy legalábbis leegyszerûsíti a dolgokat) de a tördelés esetében ez nem így van. Azért használják mégis erre, mert …
    a, (szerintem) divat
    b, (szerintetek) ez a módja

    Szerintem a kettõ ugyanazt jelenti.

    Megértem, hogy a CSS “alapfilozófiája” a tartalom és a megjelenítés szétválasztása (vö: a már emlegetett felolvasó programok) és ezért kapott helyett benne a tördelés is. De én ezzel az alapfilozófiával nem (teljesen) értek egyet. (… de ez már egy másik mese)

    Nyugodtan el lehet engem maradinak/konzervatívnak könyvelni, de meglátásom szerint a technikák esetében ugyanúgy vannak divatirányzatok, mint a végeredmény tekintetében. És a div-es tördelés most ilyen.

  8. 8 Bártházi András

    Nem divat, értsd már meg. :) Képtelenség azt a rugalmasságot elérni táblázatokkal, amit divekkel el lehet.

    Táblázat:

    vö:

    Most szerinted tényleg a fenti az átláthatóbb? Nem beszélve arról, hogy mondjuk kiderül, a tartalom és az oldalsáv közé a megrendelõ szeretne betenni egy 10 pixeles eltartás. Belegányolsz az oldalba egy új cellát? Emiatt? Mikor CSS-bõl adsz egy margint az oldalsávnak és kész? Nem, cellának nem lehet margint adni…

    Na de nem is értem, hogy miért kell ezt egyáltalán magyaráznom? Higgyed el, hogy tisztább szárazabb érzés, UGYANÚGY, ahogy a formázásra áttekinthetõbb lesz, itt is.

  9. 9 Tóth Benedek

    Úgy látszik ebben már megegyezni nem fogunk. Nyilvánvalóan ennyire mások a “prioritásaink”…

    Tény, hogy divekkel sokkal több mindent meg lehet csinálni (és nekem is volt már olyan, hogy azt kellett használnom bizonyos részekhez) de ennek ellenére azt vallom, hogy ha van rá lehetõség táblázatokkal jobban meg lehet csinálni.

    (Lehet, hogy egy év múlva meg már azon fogunk vitatkozni, hogy XHTML+CSS vagy XML+XSL … mert azzal is megoldható ugyanez, sõt talán még “ideálisabb”)

  10. 10 tgr

    Nem annyira a CSS nem jó, inkább a böngészők (főleg az Explorer persze). Maga a CSS kiválóan alkalmas lenne rá (elvégre erre van kitalálva), és szövegblokkonként egy-egy div ezerszer átláthatóbb, mint három-négy egymásba ágyazott table/tr/td (az utóbbi kész borzalom még viszonylag egyszerű oldalaknál is). De a CSS-be ágyazott hekkek ugyanolyan borzalmasak, és az egyszerűen abszurd, hogy egy normális design kialakításához olyasmiket kelljen tudni, hogy melyik böngésző milyen egzotikus karaktersorozat hatására nézi tévedésből kommentnek az érvényes utasítást…

    Meg aztán hatalmas hiányosság, hogy CSS alatt nem lehet ugyanolyan magas oszlopokat csinálni. (Vagyis lehetni lehet, de az megintcsak nem megy Explorer alatt.) Meg hasábokat se tud (bár mondjuk azoknál a táblázat se segít).

    Szóval a CSS nagyon jó eszköz lenne, ha egy jó tündér egyszer csak szabványossá varázsolná az összes böngészőt. De a gyakorlatban azért csak kellennek mellette (nem helyette!) a táblázatok is.

Jelenleg nem lehet hozzászólni.