Bár a cím nagyon technikainak hangzik, semmi elérhetetlen nem lesz ebben a rövid cikkben. Cserébe viszont úgy érezhetjük magunkat, mint egy igazi webdesigner, mert pár olyan alaptrükköt nézünk meg, amit a profik is nap mint nap használnak.
DOM
Az első a DOM-vizsgálat, ami lényegében a HTML kód böngészését jelenti. A DOM a Document Object Model rövidítése, és az oldalt felépítő elemek elrendezését tartalmazza. A DOM-ra úgy szokás tekinteni, mint egyfajta HTML-elemeket tartalmazó családfára. Az egymásba ágyazott elemek esetén a külső entitás a szülőobjektum, a belső pedig a gyermek. Természetesen a gyerekelemeknek is lehet gyerekük, ami a legkülsőnek így az unokája lesz, ami így rendelkezni fog egy nagyszülővel is, és így tovább. Ha egy szülőnek két gyereke is van, azok egymás testvérei. Unokatestvért nem szoktak megkülönböztetni, ahogy nagybácsit/nagynénit sem (a HTML-objektumoknak nincs nemük, nehéz is lenne). Nem csak a szakzsargonban használják a DOM-fa kifejezést, a DOM-ot tényleg szokás fa struktúraként megjeleníteni (családfát kis levélkékkel meg ágakkal nem igazán használnak, de semmi nem tilos).
Ha böngészni akarunk a DOM-ban, vagy csak kíváncsiak vagyunk egy-egy elem pontos HTML-kódjára, két módszer is a segítségünkre van ebben. Az egyik a
A másik, ha csak egy elem pontos kódjára vagyunk kíváncsiak, vagy érdekel, arra az elemre milyen CSS-formázások érvényesek. Ezt a Fejlesztői eszközök panelben tehetjük meg. Az
Ha böngészni akarunk a DOM-ban, vagy csak kíváncsiak vagyunk egy-egy elem pontos HTML-kódjára, két módszer is a segítségünkre van ebben. Az egyik a
Ctrl + U billentyűkombináció. Ez a forráskód-nézőke, amivel az oldal forráskódja (HTML, CSS és JavaScript, minden, ami a frontendhez tartozik) nézhető meg. Akármilyen oldalon működik, nem kell a sajátunknak lennie. Ennek segítségével más, érdekes elrendezésű vagy tetszetős kinézetű oldalak forráskódja is böngészhető, és... nos... ötleteket meríthetünk belőlük. Ez nem illegális, amíg nem valami olyanra vetünk szemet, amit szerzői jogok védenek, legfeljebb, ha egy jellegzetes kinézetet próbálunk másolni, mindenki tudni fogja, honnét vettük. Plusz így azonnal látszik, ha egy oldal pl. Wordpress alapú, mert a forráskódban ott van. (Már ha nem mondjuk meg ránézésre.)A másik, ha csak egy elem pontos kódjára vagyunk kíváncsiak, vagy érdekel, arra az elemre milyen CSS-formázások érvényesek. Ezt a Fejlesztői eszközök panelben tehetjük meg. Az
F12 billentyűre a legtöbb böngészőn bejön, de az eszköztárból is elérhető, illetve a kérdéses elemre jobb egérgombbal kattintva szintén. (Elem vizsgálata, Vizsgálat néven keressük a lenyíló menüben.) Tudunk lépegetni a DOM-fában, kijelölhetünk egy-egy elemet külön, annak vizsgálhatóak a tulajdonságai – nagyon sokrétű kis eszköz. Érdemes pár oldalon kipróbálni, többet lehet így tanulni a HTML-ről (és a CSS-ről is), mint csak a témában olvasgatva.
Kompatibilitási problémák
Egyes esetekben a DOM-ot böngészve érdekes észrevételeket tehetünk. Előfordulhat, hogy egy bizonyos elemnél a böngésző jelzi, hogy érvényes rá egy CSS-formázás, mégsem látjuk ennek jelét. Ilyenkor szokás más böngészőben is megnézni az oldalt, hátha ez okozta a gondot. De mégis, miért nem működik minden mindenhol?
Ennek oka a különféle böngészők felépítésében rejlik. A nagyobb nevek, mind saját böngészőmotort használnak. Ez a szoftver felelős a böngésző viselkedéséért, illetve a honlapok megfelelő megjelenítéséért. Ahogy két böngésző sem néz ki ugyanúgy, úgy a HTML és CSS kódokat sem feltétlenül ugyanúgy jelenítik meg. A CSS alapozásban volt róla szó, hogy vannak böngészőspecifikus alapbeállítások, de ez nem elég. A HTML és a CSS is egy folyamatosan változó szabványon alapul, ahogy újabb és újabb trükkökre van szükségük a webfejlesztőknek, úgy kell ezzel lépést tartaniuk a szabvány készítőinek - a böngészőknek pedig ezt kell követniük. Ennélfogva lehetséges, hogy egyes kísérleti funkciókat, amik nem részei még a szabványnak, de jó úton haladnak afelé, némely böngésző képes megjeleníteni, mások nem. Vagy másképp teszik. Emiatt okozhat gondot egy honlap betöltése egy régi böngészőn, mert azok az újabb technikákat nem támogatják. És emiatt hullik ki a haja minden webdesignernek.
Képzeljük el, hogy van egy szövegdobozunk, aminek be akarunk állítani egy csini kis árnyékot. Helyből felejtsük el, régi IE alatt nem működik. Jó, akkor szeretnénk, ha a háttér egy folytonos színátmenet lenne, mint ezen a blogon a bejegyzés címének kerete. Nem mintha ez működne, de ez még nem is olyan régi Chrome alatt is nehézséget okoz. Miért van ez? Nem olyan régóta a szabvány része, mint mondjuk az alapvető méretbeli beállítások.
Természetesen nem kell végleg letennünk a billentyűzetet, van megoldás. Az egyik a Blogger statisztikai mutatóinak böngészése: kicsi a valószínűsége, hogy a látogatóink túl régi böngészőt használnának. Ha mégis így van, és pár százalékos látogatottságunk van mondjuk IE 5 alól is, írjunk ki egy bejegyzést arról, hogy frissítsenek. Nem csak a megjelenés miatt, a régi böngészők komoly biztonsági kockázatot jelentenek (ismertek, emiatt könnyen kiaknázhatóak a hibáik), és bár ritkán áll le tőlük a gépünk, nagyon könnyen zombivá változtathatják. (A zombi-hálózatokat olyan gépek alkotják, amiket ilyen biztonsági hibák mentén feltörtek, és például spamelésre, automatikus reklámkattintásra vagy jelszófeltörésekre használják. Lényegében kihasználják, hogy te fizetsz az Internetért és az áramért, ők csak lenyúlják a gép számítási kapacitását.) Ma már elvárható bármely alacsony kategóriás géptől is, hogy a legújabb böngészők simán fussanak rajta, de ha a látogatóink kizárólag Win '98-as operációs rendszert használók kicsiny csoportja, erősen meg kell gondolnunk a böngésző-kompatibilitást.
A probléma általában a nagyon új funkciókkal van, amik nem minden böngészőn működnek, vagy nem mindenhol ugyanúgy. Az egyes böngészőmotorokhoz léteznek, úgynevezett, prefixált (előtaggal ellátott) tulajdonságok, amelyek az adott tulajdonság böngészőspecifikus változatai. Amíg az adott CSS-tulajdonság nem a hivatalos szabvány része, ez egyfajta "kipróbálási lehetőséget" nyújt a fejlesztőknek, majd a hivatalos verzió már prefixumok nélkül használható. Mármint egy ideális világban, ahol mindenki frissíti a böngészőjét és a legújabb verziókat használja. Mivel ez a legtöbb esetben nem igaz, a fejlesztők egy ideje kénytelenek mind a prefixált, mind a sima alakot használni, ebből jönnek ki az ilyen szörnyűségek, mint
Ennek oka a különféle böngészők felépítésében rejlik. A nagyobb nevek, mind saját böngészőmotort használnak. Ez a szoftver felelős a böngésző viselkedéséért, illetve a honlapok megfelelő megjelenítéséért. Ahogy két böngésző sem néz ki ugyanúgy, úgy a HTML és CSS kódokat sem feltétlenül ugyanúgy jelenítik meg. A CSS alapozásban volt róla szó, hogy vannak böngészőspecifikus alapbeállítások, de ez nem elég. A HTML és a CSS is egy folyamatosan változó szabványon alapul, ahogy újabb és újabb trükkökre van szükségük a webfejlesztőknek, úgy kell ezzel lépést tartaniuk a szabvány készítőinek - a böngészőknek pedig ezt kell követniük. Ennélfogva lehetséges, hogy egyes kísérleti funkciókat, amik nem részei még a szabványnak, de jó úton haladnak afelé, némely böngésző képes megjeleníteni, mások nem. Vagy másképp teszik. Emiatt okozhat gondot egy honlap betöltése egy régi böngészőn, mert azok az újabb technikákat nem támogatják. És emiatt hullik ki a haja minden webdesignernek.
Képzeljük el, hogy van egy szövegdobozunk, aminek be akarunk állítani egy csini kis árnyékot. Helyből felejtsük el, régi IE alatt nem működik. Jó, akkor szeretnénk, ha a háttér egy folytonos színátmenet lenne, mint ezen a blogon a bejegyzés címének kerete. Nem mintha ez működne, de ez még nem is olyan régi Chrome alatt is nehézséget okoz. Miért van ez? Nem olyan régóta a szabvány része, mint mondjuk az alapvető méretbeli beállítások.
Természetesen nem kell végleg letennünk a billentyűzetet, van megoldás. Az egyik a Blogger statisztikai mutatóinak böngészése: kicsi a valószínűsége, hogy a látogatóink túl régi böngészőt használnának. Ha mégis így van, és pár százalékos látogatottságunk van mondjuk IE 5 alól is, írjunk ki egy bejegyzést arról, hogy frissítsenek. Nem csak a megjelenés miatt, a régi böngészők komoly biztonsági kockázatot jelentenek (ismertek, emiatt könnyen kiaknázhatóak a hibáik), és bár ritkán áll le tőlük a gépünk, nagyon könnyen zombivá változtathatják. (A zombi-hálózatokat olyan gépek alkotják, amiket ilyen biztonsági hibák mentén feltörtek, és például spamelésre, automatikus reklámkattintásra vagy jelszófeltörésekre használják. Lényegében kihasználják, hogy te fizetsz az Internetért és az áramért, ők csak lenyúlják a gép számítási kapacitását.) Ma már elvárható bármely alacsony kategóriás géptől is, hogy a legújabb böngészők simán fussanak rajta, de ha a látogatóink kizárólag Win '98-as operációs rendszert használók kicsiny csoportja, erősen meg kell gondolnunk a böngésző-kompatibilitást.
A probléma általában a nagyon új funkciókkal van, amik nem minden böngészőn működnek, vagy nem mindenhol ugyanúgy. Az egyes böngészőmotorokhoz léteznek, úgynevezett, prefixált (előtaggal ellátott) tulajdonságok, amelyek az adott tulajdonság böngészőspecifikus változatai. Amíg az adott CSS-tulajdonság nem a hivatalos szabvány része, ez egyfajta "kipróbálási lehetőséget" nyújt a fejlesztőknek, majd a hivatalos verzió már prefixumok nélkül használható. Mármint egy ideális világban, ahol mindenki frissíti a böngészőjét és a legújabb verziókat használja. Mivel ez a legtöbb esetben nem igaz, a fejlesztők egy ideje kénytelenek mind a prefixált, mind a sima alakot használni, ebből jönnek ki az ilyen szörnyűségek, mint
background: #1e5799;
background: -moz-linear-gradient(top,
#1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background: -webkit-linear-gradient(top,
#1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
background: linear-gradient(to bottom,
#1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
Más kérdés, hogy ez önmagában is ronda, de igazából a modern böngészők esetében elég lenne a negyedik sort használni, és a régi böngészők kedvéért az elsőt, biztonsági tartaléknak. Mégis mindenki agyonprefixál, csak a biztonság kedvéért. Néha nem szükséges, például ha a kérdéses tulajdonság elég régóta támogatott. Én, ha lehet, igyekszem az egyszerűségre törekedni, és csak akkor használom a prefixumokat, ha egyes böngészők legújabb kiadásai még nem támogatják a natív tulajdonságot.
A másik kérdés az újabb HTML-elemek (főleg a HTML5 kapcsán bejött újabb entitások) használata. Itt nincs prefixált tag, ha valamit a régi böngésző nem támogat, így jártunk. A helyzet némi böngészőspecifikus szkripttel megoldható, a Blogger automatikusan kezeli ezt, majd csak akkor kerül elő, ha saját oldalt írunk.
A másik kérdés az újabb HTML-elemek (főleg a HTML5 kapcsán bejött újabb entitások) használata. Itt nincs prefixált tag, ha valamit a régi böngésző nem támogat, így jártunk. A helyzet némi böngészőspecifikus szkripttel megoldható, a Blogger automatikusan kezeli ezt, majd csak akkor kerül elő, ha saját oldalt írunk.
Megjegyzések
Megjegyzés küldése