Cooldavee blogja

Érdekes és idegesítő történetek. Vagy nem.

A kiscsillag, a HTML és a CSS

Posted by cooldavee - 2008. szeptember 14. vasárnap

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? :-)

Reklámok

12 hozzászólás to “A kiscsillag, a HTML és a CSS”

  1. Encsé said

    Szerintem az IE8 elég jó lesz ilyenekben. És nem akarlak letörni, de ez a webdizájn/css világ még sokkal borzalmasabb, mint amit a bankokról valaha is össze fogsz tudni írni. Sz*ptam már vele pár évet, úgyhogy nekem elhiheted. Csak próbálj meg egyszer egy ún. “table-less” layoutot from scratch összerakni úgy, hogy működjön a legtöbb böngészőben…

  2. boci said

    Ööö, ez az én kommentem alapján született?

  3. cooldavee said

    Igen, ezt a blog bejegyzést a Te kommented inspirálta. :-) Miközben válaszoltam rá, rájöttem, hogy a kiscsillag feature messze nem tökéletes a régi formájában.

  4. UPi said

    És ehhez mit szólsz:

    HTML: (Ez lehet, hogy gányul jelenik majd meg, nem ismerem a wordpress-t nagyon.)

    Igen* Nem

    CSS:

    .kiscsillag { position: relative; }
    .magyarázat { display: none; }
    .kiscsillag:hover .magyarázat { display: block; position: absolute; bottom: 10px; }

  5. UPi said

    Tényleg szarul jelent meg. :D

    Szóval, ugyanez csak [] jelekkel:

    HTML:

    [span class=kiscsillag]Igen[sup]*[/sup] [span class=magyarázat]Nem[/span][/span]

  6. cooldavee said

    Nem rossz ez, de igazából a title tök jól megjelenik IE-vel is, és tulajdonképpen valami ilyesmire való, szóval azt én nem akarom leváltani. (Az igaz, hogy mivel attribútum, ezért nem lehet a rejtett szövegben bonyolultabb dolgokat művelni. Pl. nem tudok több bekezdést csinálni, de igazából ilyet nem is akarok.) A sup-ot viszont a te megoldásodban ki kell írnom minden egyes helyre, ami nem tetszik. Most már úgyis mindjárt kijön az IE 8, és az már elvileg ismerni fogja az :after-t, és akkor azzal se lesz gond. Ezt már féllábon is kibírom. ;-)

    Viszont egy kicsit játszottam a megoldásoddal. A legfontosabb változtatás, hogy nem kell kiírni minden helyre a csillagot. Ezenkívül egy kicsit tool tip-esebbé tettem, de ez már csak vizuális tuning.

    HTML:

    <span class="kiscsillag">Igen<span class="magyarazat">Nem</span></span>
    

    CSS:

    span.kiscsillag {
    	position: relative;
    	background-image: url(asterisk.jpg);
    	background-repeat:no-repeat;
    	background-position: top right;
    	padding-right: 20;
    }
    
    span.magyarazat { display: none; }
    
    span.kiscsillag:hover .magyarazat {
    	display: block;
    	position: absolute;
    	bottom: -30px;
    	left: 10px;
    	background: #f0f0f0;
    	border-color: black;
    	border-style: solid;
    	border-width: thin;
    	z-index:1;
    	padding: 3;
    }
    
    
  7. cooldavee said

    Ja egyébként source code WordPress specifikus beszúrásáról itt lehet olvasni:
    http://faq.wordpress.com/2007/09/03/how-do-i-post-source-code/

  8. A said

    Es akinek nincs egere, az hogy olvassa el a kifejtest, kiscsillag? Anal-retentiv faszveres ez, nulla usabilityvel. :P

  9. P said

    Mifolyikittgyöngyösön?

  10. cooldavee said

    Akinek nincs egere, az dögöljön meg. ;-)

    De viccet félretéve: a title attribute teljesen szabványos HTML cucc. Ráadásul az sem igaz, hogy helytelenül használom, hiszen pontosan erre való: segítő, tanácsadó információkat lehet vele ráaggatni HTML tag-ekre.

    This attribute offers advisory information about the element for which it is set.

    Values of the title attribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a “tool tip” (a short message that appears when the pointing device pauses over an object). Audio user agents may speak the title information in a similar context.

    http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.3

    Szóval az, hogy egérkével fölé megyünk, és megjelenik a tool tip, csak az egyik lehetséges megvalósítása a title-nek. Egyébként engem abszolút nem érdekel, hogy a különböző eszközök (pl. iPhone) hogyan kezelik a title attribute-ot. Oldják meg valahogy, ha egyszer HTML-t akarnak megjeleníteni. :-)

  11. UPi said

    Bocs, azt hiszem, félreértettem. Azt hittem, hogy anal retentive übergeek overengineering verseny van! Ennek szellemében az ultimate megoldás:

    * Fogod az összes kiscsillagot, és kiteszed az oldal aljára, lábjegyzetben, egy számozott listában. A hivatkozási helyre teszel egy superscript számot. Ezzel a 20 században rekedt braille olvasós stylesheetet kikapcsolós köcsögöket mind le is tudtad.

    * Írsz egy scriptet, ami kigyűjti az összes lábjegyzetet, bezúzza őket egy-egy divbe, és beállítja rájuk, hogy style.display=none

    * A hivatkozási helyekről kiszeded (szintén javascripttel) a superscript számokat, és a helyükre odavágsz egy onmouseover-t, ami láthatóvá teszi, és az egér vonatkozási pontjára mozgatja az oda vonatkozó elrejtett divet.

    * Ja és persze onmouseout.

    Ha pedig valaki úgy borzol, mint én, hogy CSS-e van, viszont a javascriptet letiltja, annal úgy kell, faszér’ kell ilyen paranoidnak lenni, kurvaanyámat már.

  12. cooldavee said

    Hát ez is egy megoldás. :-)

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés /  Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés /  Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés /  Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés /  Módosítás )

Kapcsolódás: %s

 
%d blogger ezt kedveli: