Függelék - Feltételes megjegyzések

Ez a cikk a www.quirksmode.org honlap „Conditional comments” című cikkének magyar fordítása.

A feltételes megjegyzések csak az Internet Explorernél, Windowson működnek, és ezért tökéletesen alkalmasak arra, hogy bizonyos utasításokat csak az Internet Explorer részére állítsunk elő. Az Explorer 5 óta léteznek, és különbséget tudunk velük tenni az 5.0, 5.5, 6.0 és 7.0 verziók között.

A feltételes megjegyzések a következő módon működnek:

<!--[if IE 6]>
Ezt csak az IE 6 hajtja végre
<![endif]-->

1. Az alapstruktúrájuk ugyanaz, mint a HTML megjegyzéseknek (<!-- -->). Ezért minden más böngésző megjegyzésnek fogja nézni őket, és teljesen figyelmen kívül hagyja.
2. A windowsos Internet Explorer viszont programozva van, hogy felismerje a speciális <!--[if IE]> szintaxist, kiértékeli a feltételt és feldolgozza a közte lévő tartalmat, mintha rendes tartalom volna.
3. Mivel a feltételes megjegyzések a HTML megjegyzések szintaxisát használják, ezért csak HTML fájlokban használhatók, stíluslapokban nem. Jobban tetszene, ha a speciális stílusrészeket lehetne használni a stíluslapokban, de ez nem lehetséges. Egy egész Explorernek szánt <link> elemet is feltételes megjegyzések közé tehetünk viszont, ami így egy csak Internet Explorernek szánt stíluslapra hivatkozik.

Példa

Alább használtam néhány feltételes megjegyzést, amik attól függően generálnak tartalmat Internet Explorerrel nézve, hogy milyen verzióval nézzük ezt a lapot.

Figyelem: Ha több Explorer verziót használ egy számítógépen*, akkor ezen a számítógépen úgy fognak viselkedni a feltételes megjegyzések, mintha csak a legmagasabb verziószámú Explorer lenne felinstallálva.

* Megjegyzés: Ha ezt az installert használjuk, akkor megoldódik ez a probléma.

Teszt

Alább néhány feltételes megjegyzés van, ami az Ön által használt Internet Explorer verziószámát fedi fel. Ha nem lát semmilyen verziószámot, akkor ezt az oldalt nem Internet Explorerrel nézi.

A kód

Íme a kód, amit használtam:

<p>
<!--[if IE]>
A feltételes megjegyzés szerint ez a böngésző Internet Explorer<br>
<![endif]-->
<!--[if IE 5]>
A feltételes megjegyzés szerint ez a böngésző Internet Explorer 5<br>
<![endif]-->
<!--[if IE 5.0]>
A feltételes megjegyzés szerint ez a böngésző Internet Explorer 5.0<br>
<![endif]-->
<!--[if IE 5.5]>
A feltételes megjegyzés szerint ez a böngésző Internet Explorer 5.5<br>
<![endif]-->
<!--[if IE 6]>
A feltételes megjegyzés szerint ez a böngésző Internet Explorer 6<br>
<![endif]-->
<!--[if IE 7]>
A feltételes megjegyzés szerint ez a böngésző Internet Explorer 7<br>
<![endif]-->
<!--[if gte IE 5]>
A feltételes megjegyzés szerint ez a böngésző Internet Explorer 5 vagy újabb<br>
<![endif]-->
<!--[if lt IE 6]>
A feltételes megjegyzés szerint ez a böngésző Internet Explorer 6-nál kisebb verziószámú<br>
<![endif]-->
<!--[if lte IE 5.5]>
A feltételes megjegyzés szerint ez a böngésző Internet Explorer 5.5 vagy régebbi<br>
<![endif]-->
<!--[if gt IE 6]>
A feltételes megjegyzés szerint ez a böngésző Internet Explorer 6-nál újabb Explorer<br>
<![endif]-->
</p>

Figyeljük meg a speciális szintaxist:

• gt: nagyobb verziószámú mint...
• lte: kisebb vagy azonos verziószámú mint...

CSS hack?

A feltételes megjegyzések CSS hack-nek minősülnek? Ha szigorúan vesszük igen, mert bizonyos böngészőknek speciális stílusrészleteket tudnak küldeni. Habár nem egy böngészőben lévő hibán alapulnak hogy megoldjanak egy másik hibát, ahogy minden igazi CSS hack. Azonkívül nemcsak a stílusokat tudjuk velük manipulálni, habár legtöbbször erre használjuk őket.

Mivel a feltételes megjegyzések nem egy böngésző hibáján alapulnak, hanem egy előre eltervezett funkción, ezért biztonsággal használhatjuk őket. Persze más böngészők is felismerhetnek feltételes megjegyzéseket a jövőben (eddig még más böngésző ezt nem tette), de még ebben az esetben sem fognak reagálni a speciális <!--[if IE]> szintaxisra.

Viszont a cikk szerzője alig használ feltételes megjegyzéseket. Először megnézi, tud-e más megoldást találni egy CSS problémára Internet Explorer alatt, ha nem, akkor viszont ajánlott használni őket.

A comment elem

Az Internet Explorer (a Windows és a Mac verzió is) támogatja a nem szabványos <comment> elemet.

<p>Ez <comment>nem</comment> Internet Explorer.</p>

Azonban ezt nem érdemes használni, mert nem szabványos.

Ez a cikk a www.quirksmode.org honlap „Conditional comments” című cikkének magyar fordítása volt.

Az (X)HTML Strict és az (X)HTML Transitional dokumentumtípus közti különbségek

Az alábbi címkék lettek eltávolítva, ezeket már nem használhatjuk:

applet, basefont, center, dir, font, iframe, isindex, menu, noframes, s, strike, u.

Az alábbi attribútumok lettek eltávolítva, ezeket már nem használhatjuk:

• alink tilos a body címkén belül.
• background tilos a body címkén belül.
• bgcolor tilos a body, table, td, th, tr címkéken belül.
• border tilos az img, object címkéken belül, de használható a table címkén belül.
• clear tilos a br címkén belül.
• language tilos a script címkén belül.
• link tilos a body címkén belül.
• name tilos a form, img címkéken belül, de használható az a, button, input, map, meta, object, param, select, textarea címkéken belül.
• noshade tilos a hr címkén belül.
• nowrap tilos a td, th címkéken belül.
• start tilos az ol címkén belül.
• target tilos az a, area, base, form, link címkéken belül.
• text tilos a body címkén belül.
• type tilos a li, ol, ul címkéken belül, de használható az a, button, input, link, object, param, script, style címkéken belül.
• value tilos a li címkén belül, de használható a button, input, option, param címkéken belül.
• vlink tilos a body címkén belül.

Kiemelendő, hogy az a címkén belül nem használható a target attribútum, tehát hivatkozást nem tudunk új ablakban vagy lapon megnyitni, csak ha a felhasználó is így akarja. Azonban vannak olyan esetek, amikor muszáj új ablakba nyitni egy hivatkozást, ekkor egyszerűen használjuk a Transitional dokumentumtípust.

Végül nagyon fontos, hogy a body, blockquote, form, noscript elemeknek csak blokk szintű elem lehet a gyermeke. Tehát ezeken az elemeken belül nem írhatunk azonnal szöveget, vagy képet, hanem például a p vagy a div címkével kell kezdenünk.

Karakterkódolás

Amikor HTML oldalt vagy stíluslapot írunk, akkor sima szöveges fájlt készítünk, ami nem más, mint karakterek (betűk, számok, egyéb karakterek) sorozata. Munkánk eredményét később szeretnénk lementeni, azaz elraktározni a számítógépen ahhoz, hogy később megnyithassuk.

A számítógép azonban nem úgy fogja megjegyezni a beírt szöveget, ahogyan mi látjuk, mert a számítógép minden adatot 0 és 1 számok sorozataként jegyez meg (mert kettes számrendszerben működik). Ezért szükség van egy olyan szabályrendszerre, ami megmondja, hogy

• A beírt karaktereket hogyan kell egy számsorozattá alakítani, hogy tárolható legyen a számítógépen.
• Egy tárolt számsorozatot hogyan kell visszaalakítani látható karakterekké.

Erre valók a különböző karaktertáblák. Ezek olyan táblázatok, ahol két oszlop van, az első oszlopban áll egy számsorozat, a második oszlopban pedig a számsorozathoz tartozó karakter. Amikor elmentünk vagy megnyitunk egy szöveges fájlt, akkor a számítógép egy ilyen táblázatot használ a megfelelő karakterhez tartozó számsorozat megkereséséhez, és viszont.

Sokféle karakterkódolási szabvány létezik, pl. az ASCII karakterkódolási szabvány karaktertáblájának egy részlete itt látható: (Ezt használja a számítógép a szöveg elmentésére, majd megnyitására.)

Bináris	Jel
0110 0001	a
0110 0010	b
0110 0011	c
0110 0100	d
0110 0101	e
0110 0110	f

Pl. ha leírjuk a „baba” szót, és elmentjük a merevlemezre, akkor a következő számsorozatot fogja a gép tárolni:

01100010011000010110001001100001

Azaz minden betűhöz kikeresi a hozzá tartozó számot. Majd ha meg akarjuk nyitni az elmentett „baba” szót tartalmazó fájlt, akkor minden számhoz kikeresi a hozzá tartozó betűt.

Miért van többféle karakterkódolási szabvány? Azért, mert sokféle nyelv létezik, és ezért sokféle betű is van. Az ASCII kódolás csak 256-féle különböző karakter képes kezelni, mert 8-jegyű kettes számrendszerbeli számokat használ a tároláshoz. Ez elég lenne az angol nyelvhez, de a magyarhoz már kevés, mert nem férnek bele ékezetes betűink, nem beszélve a kínai karakterekről.

Ha viszont több karaktert akarunk bevenni, akkor már nem 8-jegyű, hanem mondjuk 16-jegyű számokkal tudjuk csak tárolni a karaktereket, és ehhez nagyobb tárterület szükséges. Ezért van olyan sokféle kódolás, mert mindenki a karaktereknek a lehető legszűkebb részhalmazát akarja csak belvenni (pl. minden ország a saját nyelvét), mert így foglalnak a legkevesebb helyet a szövegek. Azonban ha mindenki más kódolást használ, abból elég nagy kavarodás fog származni. Pl. ha én írok egy magyar szöveget, és elmentem olyan kódolással, ami támogatja az ékezetes magyar betűket, és ezt a szöveget később megnyitja egy angol, aki viszont olyan kódolást használ, amiben nincsenek benne a magyar betűk, akkor a szöveg egy része elvész számára!

Ezért találták ki az UTF-8 nevű karakterkódolási szabványt, amiben az összes nyelv összes karaktere benne van. Így ha mindenki mindent UTF-8-ban írna, akkor nem lenne kavarodás a kódolásokból. Hátránya, hogy kicsivel többet foglalnak el az eltárolt szövegek, de ez manapság nem lehet probléma, hiszen a tárolókapacitás és a sávszélesség is könnyedén elbírja.

Átlátszóság a CSS segítségével

A CSS 3 bevezeti az opacity tulajdonságot, aminek értékként egy 0 és 1 közti számot kell megadni. Minél kisebb számot adunk meg, annál átlátszóbb lesz az adott elem háttere.

Az opacity tulajdonságot már most is felismeri néhány böngésző, ezért már használhatjuk. Az Internet Explorer nem ismeri fel, viszont felismeri a filter: alpha(opacity=70) meghatározást, itt egy 0 és 100 közti számot kell megadnunk. Az Internet Explorer kedvéért még vagy a szélességet, vagy a magasságot be kell állítani arra az elemre, amelyre alkalmazni szeretnénk az átlátszóságot!

Szöveg hátterének átlátszóvá tétele.

Képek átlátszóságának állítása.