A kiscsillag, a HTML és a CSS

Játszottam egy kicsit a CSS-sel. Leginkább a blockquote-ot megjelenését szerettem volna kicsit megváltoztatni, akartam iniciálékat is, de a legbüszkébb a kiscsillag feature-re vagyok. :-)

A kiscsillagos szöveg intencionálisan egy szöveg, ami meg van csillagozva, és van egy rejtett szöveg mögötte. Pont mint a bankok hirdetésében a megcsillagozott apróbetűs rész, ahol általában ki szokott derülni, hogy mégsem olyan fasza az a hitel, ahogy hirdetik. Az én esetemben a rejtett szöveg általában pont ellentétes jelentésű. Ezt a fajta kiscsillagos használatot Andrásnak köszönhetjük. :-)

Az implementációt tekintve eredetileg egy link volt, aminek nem töltöttem ki a href attribute-ját, csak a title attribute-ját. Ez utóbbinak az értéke általában tool tip formájában jelenik meg, ha az ember fölé viszi az egeret. Szóval ilyen a HTML:

<a title="nem">igen<sup>*</sup></a>

És így nézett ki az eredmény:

igen^*

Ezzel viszont több gond is volt.

1. A szöveg kiscsillagos mivolta már akkor elveszett, amikor beírtam a HTML-t; ez pedig nem túl intencionális.
2. A kiscsillagos szöveg igazából nem link kéne, hogy legyen.
3. Úgy jelent meg a képernyőn (nem meglepő módon), mint egy link.
4. A superscriptes csillagot minden egyes helyre be kellett írnom.

Szerencsére mindegyik probléma orvosolható. A kiscsillagosságot meg lehet őrizni a class attribútum segítségével. Miután rájöttem, hogy a title egyáltalán nem link (a) specifikus attribútum, használhattam helyette span-t; így már többé nem link volt az implementáció, és ezért nem is úgy jelent meg a képernyőn, mint egy link. A CSS-beli :after pseudo-element segítségével pedig megoldható, hogy a superscriptes csillag automatikusan kerüljön a szöveg végére. Arról nem is beszélve, hogy CSS-sel felturbózva a dolgot még több vizuális élményben lehet részünk. :-)

Ezek a pseudo-element-ek tökéletesen működnek Firefox 3.0.1-gyel és természetesen Opera 9.52-vel is. Gondolom már mindenki kitalálta, hogy melyik böngésző nem támogatja ezt a feature-t. Így van: Internet Explorer 7.0. Igaz, hogy a :before és :after pseudo-element-ek a CSS 2 szabvány részei, és az is igaz, hogy a CSS 2 1998-ban jött ki, dehát ne legyünk telhetetlenek. Mindenesetre a Microsoft azt ígéri, hogy az Internet Explorer 8.0 már teljes mértékben támogatni fogja a CSS 2.1-et is. Hiszem, ha látom.

De visszatérve kiscsillagra, a szép megoldás így néz ki. A HTML:

<span class="kiscsillag" title="nem">igen</span>

És a hozzá tartozó CSS:

.kiscsillag {
	color:#303030;
	font-style:italic;
	font-weight:normal;
	text-decoration:none;
}

.kiscsillag:after {
	content:"*";
	vertical-align:top;
	font-size:smaller;
	color:orangered;
	font-weight:bold;
}

.kiscsillag:hover {
	color:#808080;
	text-decoration:line-through;
}

És az előbbi HTML eredménye a képernyőn ez lesz:

igen

Ugye szép? :-)