Crossbrowser HTML5
Sziasztok, kérdésem az lenne, hogy ma milyen lehetőségek (js) állnak rendelkezésre a crossbrowser HTML5 megvalósítására.
Megtáltam a html5shiv-et ami a html tag-ek cseréjét kezelését oldaja meg. Ez jó is, de gondolom ez nem elég. Mi van a CSS-sel és egyéb html5 által nyújtott új lehetőségekkel?
Meg lehet mindent oldani js-tel? IE6 részemről felejtős, de a többi böngészőre jó lenne egy optimalizált kód.
Természetesen találtam egyéb js fájlokat, ami ezt tudja, vagy azt tudja... de olyat eddig nem amely(ek) minden problémát megoldana(k).
Nektek van valami bevált módszeretek, kiegészítő js fájlok melyeket használtok?
■ Megtáltam a html5shiv-et ami a html tag-ek cseréjét kezelését oldaja meg. Ez jó is, de gondolom ez nem elég. Mi van a CSS-sel és egyéb html5 által nyújtott új lehetőségekkel?
Meg lehet mindent oldani js-tel? IE6 részemről felejtős, de a többi böngészőre jó lenne egy optimalizált kód.
Természetesen találtam egyéb js fájlokat, ami ezt tudja, vagy azt tudja... de olyat eddig nem amely(ek) minden problémát megoldana(k).
Nektek van valami bevált módszeretek, kiegészítő js fájlok melyeket használtok?
Modernizr, HTML5 Boilerplate
Integrált megoldásnak, vagy csak ötletcsokornak ajánlom a HTML5 Boilerplate oldalt is http://html5boilerplate.com/
A modernizr én élesben nem
http://nettuts.s3.amazonaws.com/881_html5Forms/demo/demo.html
Megnéztem IE7-tól Operáig és nálam sajnos nem volt egységes sem a működés sem a megjelenés, de lehet, hogy nálam van a hiba.
A boilerplate-t nem ismerem egyáltalán, utánanézek, köszönöm!
Jobb lenne, ha először
A többi "új" tag (article, aside, figure, header, footer és társaik) gyakorlatilag a régiek átnevezése, és nem jár előnnyel a használatuk, mivel
1, az oldalad nem lesz szebb tőlük (mindegy, hogy milyen tag-re rakod a stílusokat),
2, az oldaladat nem fogják könnyebben megtalálni (a keresőket nem érdekli a címek és a meta elemek kivételével, hogy miben van a tartalom, beindexelik gondolkodás nélkül),
3, a világon rajtad kívül most már több mint hétmilliárd embert nem érdekel, hogy milyen kódot gyártasz.
Egyedüli haszna pár CSS3 stílusnak van, amivel megkönnyítheted a munkádat, de ezek túlnyomó többségét meg lehet oldani CSS2 vagy akár CSS1 stílusok kombinációjával, itt is érdemes utánajárni, hogy melyik böngésző mennyire támogatja. Igazán lemaradva az Internet Explorer verziók vannak, de természetesen ott is létezik jópár megoldás, amivel majdnem tökéletes eredményt el lehet érni.
Érdekes amit mondasz, de
Nálam az áttérés azt jelenti, hogy gyakorlatban is html5-ben írom meg a html kódot. Na de, ha ez nem mindenhol néz ki megfelelően, akkor meg minek. Fejben "gyakorlatozni" meg felesleges számomra, mert mire elérünk oda, hogy a böngészők nagy része megfelelően támogatja a html5-ot addigra elfelejtem, ha csak nem csinálok mégis egy konkrét html fájlt. De akkor meg kétszer dolgozom vele, amihez meg nincs igazán kedvem... persze valószínűleg ez rossz hozzáállás, de ez legyen az én problémám.
Arról se felejtkezzünk el,
HTML5
Van pár hasznos új elem, amiket nyújt, főleg az űrlapok esetén. Ezen kívül azoknak, akiket jó érzéssel tölt el, hogy
<div class="article">helyett azt írhatják, hogy<article>azok is megtalálják a számításaikat. Természetesen a HTML5 több mint pár új HTML elem. Kapcsolódik hozzá rengeteg új JavaScript API, amiket most nem szeretnék részletezni, mert a megjelenés szempontjából ezek nem lényegesek. A CSS3-at szintén nem venném ide, mert az független technológia.A HTML elemek megjelenése eddig sem volt egységes, és természetesen ezen a HTML5 se változtatott. Azaz sem az új elemek, se a régiek nem lettek közelebb megjelenésben a böngészők között, főleg azért sem, mert az elemek megjelenését semmilyen szabvány nem rögzíti.
A html5shim és html5shiv segít a régi Internet Explorerek esetén, hogy az elemeket lehessen CSS-sel formázni, de mást nem csinál. A html5 innershiv pedig a JavaScript-tel beszúrt HTML5 elemeken segít.
A HTML5 Boilerplate-en kívül nincs igazán jól használható bevált módszer, érdemes azt használni. Ha az új űrlapelemeket akarod használni, akkor érdemes a Modernizr-t és a szükséges elemekhez pedig polyfill-t bevetni.
A CSS3-ról pedig annyit, hogy mi használjuk, és régebbi böngészők esetén pedig graceful degradation elvén hasonlóan fog kinézni, de a teljes egyezés nem elsődleges szempont. Aki akarja kipróbálhatja, hogyan néz ki az Examiner.com különböző böngészőkben.
Köszönöm Gábornak is a
Habár Hidvégi Gábor meg van
Amivel gond van viszont, az az, hogy a HTML-ben vegyesen szerepelnek az adatok és a megjelenítésükhöz szükséges információk, azaz pontosan úgy működik, mint amikor egy php scriptben egyszerre van php kód és HTML. Ez már vagy tíz éve nem trendi, HTML fronton viszont még mindig ezt a felfogást erőltetik. Amennyiben külön lehetne választani a két réteget, azon nyomban nyilvánvalóvá válik sok-sok régi és új HTML elem fölösleges volta.
Off
Ez azért már nincs így. Semmi a megjelenésért szükséges elem nincs már benne a specifikációban. A régi elemeknek, amik maradtak, és a megjelenítést szabályozták, azok új jelentést kaptak.
Ilyen az
<i>, ami új jelentést kapott:vagy a
<b>, ami más stilisztikai különbözőséget hordoz, fontossági különbség nélkül.Hogy érthetőbb legyek, íme,
<div class="cikk_fejlec_szoveg">
<h2><a href="#">Bevezetés a Sphinx keresőmotor használatába</a></h2>
<p>A jól használható kereső gyakran a legfontosabb része a honlapnak; gyakran önmagában meghatározza annak sikerességét, avagy sikertelenségét. A szöveges keresések megtámogatására ideális eszköz lehet a <em>Sphinx</em>.</p>
<div class="cimkek_felirat">Címkék:</div>
<ul class="cimkek">
<li><a href="#" rel="tag">adatbázis</a></li>
<li><a href="#" rel="tag">keresés</a></li>
<li><a href="#" rel="tag">PHP</a></li>
<li><a href="#" rel="tag">Sphinx</a></li>
</ul>
<div class="clearboth"></div>
<div><a href="#">Tovább »</a></div>
</div>
</div>
<div class="cikk_kiegeszito">
<a href="#">_subi_</a>
<div>2011. jún. 6.</div>
<div><a href="#">5 hozzászólás</a></div>
</div>
<cim>Bevezetés a Sphinx keresőmotor használatába</cim>
<bevezeto>A jól használható kereső gyakran a legfontosabb része a honlapnak; gyakran önmagában meghatározza annak sikerességét, avagy sikertelenségét. A szöveges keresések megtámogatására ideális eszköz lehet a <em>Sphinx</em>.</bevezeto>
<szerzo url="/tagok/1234">_subi_</szerzo>
<modositas_datuma>2011. jún. 6.</modositas_datuma>
<cimkek>
<cimke url="/cimkek/adatbazis">adatbázis</cimke>
<cimke url="/cimkek/kereses">keresés</cimke>
<cimke url="/cimkek/php">PHP</cimke>
<cimke url="/cimkek/sphinx">Sphinx</cimke>
</cimkek>
<hozzaszolasok url="/cikkek/bevezetes_a_sphinx_keresomotor_hasznalataba.html#hozzaszolasok" szamossag="5">
</hozzaszolasok>
</cikk>
És ez csak egy egyszerű HTML kód volt, ha lenne dizájn, ötször ennyi div, span és társai, ami igazából lényegtelen, mert az adatok és az adatok közti összefüggések szempontjából nem hordoz információt. Ha beszélgetsz mondjuk egy barátoddal, nem azt mondod neki, hogy "egy újság fejlécében olvastam, hogy ..." : )
Mivel a HTML-ben nem kötelező struktúrálni, ezért megengedhető pl. a dizájn miatt, mint amit az első kódban direkt elrontottam, hogy a "cikk_kiegeszito" div nem a <div class="cikk_fejlec">-en belül van. Innentől kezdve lehet írni a mesterséges intelligenciát, ami felismeri, hogy a kettő összetartozik.
Ha külön lenne választva a megjelenés a tartalomtól, jóval egyszerűbb lenne például egy ilyen keresést elvégezni: "Poetro hozzászólásai node.js és adatbázis témában" vagy "minden magyarországi webbolt, ahol van 4GB DDR3 memóriamodul raktáron, ár < 12000 forint".