CSS2 Selectorok :: ie-css2selector.htc 0.1.3

Cél

A cél a CSS2-ben definiált selectorok megértetése IE-vel (IE5.0, IE5.5, IE6.0). Tehát NEM foglalkozik a tulajdonságok helyes értékeivel.

A hivatkozások a http://www.w3.org/TR/CSS2/-n elérhető specifikációra utalnak.

Támogatás

Támogatottak:

• csoportosítás 5.2.1
• univerzális szelektor 5.3
• típus-szelektorok 5.4
• leszármazott szelektorok 5.5
• gyermek-szelektorok 5.6
• szomszédos testvér-szelektorok 5.7
• attribútum szelektorok 5.8
• attribútumok és attribútum értékek egyezésének számítása (defined, equal, includes, dashmatch) 5.8.1
• osztály szelektorok 5.8.3
• ID szelektorok 5.9
• v0.2 - :first-child látszólagos osztály 5.11.1
• v0.? - a nyelv látszólagos osztály: :lang 5.11.4
• v0.? - :first-letter látszólagos elem 5.12.2
• v0.? - :before és :after látszólagos elemek 5.12.3
• közök figyelembe vétele 4.1.1
• megjegyzések 4.1.9
• v0.? - !important 6.4.2
• egyediség figyelembe vétele (algoritmus) 6.4.3
• az @import utasítás 6.3 (korlát XmlHttp miatt csak azonos domain)

Nem támogatottak:

• belső stíluslapok <STYLE type="text/css"> : csak a külsőket tudjuk beolvasni
• @ szabályok 7.2.1 : egy @media-tól kezdve nem értelmezi a stíluslapot
• alapértelmezett attribútum-értékek a DTD-kben 5.8.2 : nem érhetőek el....
• látszólagos elemek és látszólagos osztályok 5.10-12 : némelyek támogatottak, de a dinamikusak nem lesznek támogatva

Bug (0.1.3)

• background-image URL
• IE5.0: RegExp("(?:)") probléma
• IE5.0: RegExp("", "g").exec() probléma
• IE5.0: a nem ismert szelektorokat nem hagyja figyelmen kívül, hanem rosszul képzi pl. HTML[lang=hu] {} -> HTMLlanghu {}

Demó

Példa CSS: css/demo.css

5.2.1 csoportosítás

HTML > BODY DL B, HTML > BODY DL STRONG { color: blue; }

b, strong

5.3 univerzális szelektor

DT[title="5.3"] + DD + DD * { color: red; }

span, em, strong

5.4 típus-szelektorok

HTML > BODY DL VAR { color: navy; }

var

5.5 leszármazott szelektorok

HTML > BODY *[title="5.5"] + DD + DD * { color: maroon; }

span, em, strong

5.6 gyermek-szelektorok

HTML > BODY > DL > DT[title="5.6"] + DD + DD > Q { color: olive; }

span, em, strong, q

5.7 szomszédos testvér-szelektorok

HTML > BODY > DL > DT[title="5.7"] + DD + DD > SPAN + EM { color: yellow; font-weight: bold; }

span, em, strong, q

5.8 attribútum szelektorok

*[title="5.8"] + DD + DD > Q[title="era"] { color: green; }

span, em, strong, q[title="era"]

5.8.1 attribútumok és attribútum értékek egyezésének számítása (defined, equal, includes, dashmatch)

*[title="5.8.1"] + DD + DD *[lang] { font-weight: bold;}
*[title="5.8.1"] + DD + DD *[lang|=en] { color: purple; }
*[title="5.8.1"] + DD + DD *[lang|=en][class~=mari][class~=en][name="mal-lal"] { color: teal; }
*[title="5.8.1"] + DD + DD *[title|="strong"] { font-weight: normal; }

span[lang="hu"], em[lang="en-us" class="en mari jozsi" name="mal-lal"], strong[title="strong"], q[lang="en"]

5.8.3 osztály szelektorok

*[title="5.8.3"] + DD + DD > .elso { background: green; }
*[title="5.8.3"] + DD + DD > .elso.masodik { background: maroon; color: white; }
*[title="5.8.3"] + DD + DD > .elso.masodik.harmadik { background: white; color: red; }

span[class="elso"], em[class="elso masodik"], strong[class="elso masodik harmadik"]

5.9 ID szelektorok

HTML > BODY > DL > DD#id59 > B { color: fuchsia; }
HTML > BODY > DL > #id59 > STRONG { background: fuchsia; }

b, strong

4.1.1 közök figyelembe vétele

*[title = "4.1.1"] + DD + DD > SPAN[ lang = hu ]{ background: teal; }

span[lang="hu"], span

4.1.9 megjegyzések

*[title="4.1.9"] + DD + DD > *{ color: teal; /* XxX */ font-weight /**/: bold; /* */ text-transform /*LKL*/:/*Z*/ uppercase /* Y*/; }

span, em

6.4.3 egyediség figyelembe vétele (algoritmus)

HTML > BODY #id643 > B { color: yellow; } /* 103 */
HTML > BODY *[title="6.4.3"] + DD + DD[id=id643] > B { color: red; } /* 26 */

b

6.3 az @import utasítás

/* maga ez a példa: import.css > demo.css */

Használat

BODY {
   	behavior: url(js/ie-css2selector.htc);
  	-ie-css2selector-id : [id]; /* opcionális beállítás: csak ennak az ID-nek az utolsó importját olvassa be */
   	-ie-css2selector-ie5hide : true; /* opcionlis beállítás: IE5.0-ban elrejti az eredeti CSS-ket; lásd BUG */
}

Forrás

js/ie-css2selector.htc

További vegyes példák:

HTML > HEAD + BODY DIV P>SPAN+B
P[title] 
SPAN[title="title"]
SPAN[class~=class2][class~=class1]
LI[title~= "macika"][name~="zaza"]
LI[title|= "macika"]
DIV P + SPAN 
BODY > #x34y
DIV > UL > LI.elso
DIV > UL > LI.elso.masodik
DIV > UL > LI.elso.masodik.harmadik

x34y