C15: Fókuszba kerülés esetén a felhasználói interfész elem megjelenítésének megváltoztatása CSS segítségével
Alkalmazás
CSS, HTML és XHTML
Ez a technika az alábbiakra vonatkozik:
A felhasználói programra és a segítő technológia támogatására vonatkozó megjegyzések
A Windows alatt működő Internet Explorer 6.0 és korábbi verziói, a hivatkozások kivételével, egyetlen elem esetében sem támogatják a dinamikus pszeudo-osztályokat. Az Internet Explorer 7 a hivatkozások kivételével egyetlen elemhez sem támogatja a :focus stílusokat. Ugyanez vonatkozik az :active CSS pszeudo osztályokra, amelyek ugyanazt a célt szolgálják, mint az Internet Explorer (X)HTML hivatkozásait (<a> tag) használó :focus elem.
A Windows-al működő Firefox 1.5, Firefox 2.0 és SeaMonkey 1.1 támogatják a szöveg beviteli mezők, szövegmezők, rádiógombok, jelölőnégyzetek, kiválasztó elemek, elküld/törlés gombok, és gombok dinamikus pszeudo osztályait. A fókuszba kerülő rádiógombok vagy jelölőnégyzetek esetében azonban nem támogatják a szegélyek színének megváltoztatását.
A Windows-al működő Opera 9.02 támogatja a szöveg beviteli mezők, szövegmezők, rádiógombok, jelölőnégyzetek, kiválasztó elemek, elküld/törlés gombok dinamikus pszeudo osztályait, de ugyanezt nem támogatja a gombok esetében.
A Windows-al működő Firefox 2.0, Opera 9.02 és SeaMonkey 1.1 támogatják az űrlap címkékhez tartozó egymással szomszédos testvércsomópont szelektorokat. Az Internet Explorer 6.0 és korábbi verziói nem támogatják az űrlap címkékhez tartozó egymással szomszédos testvércsomópont szelektorokat.
Leírás
A technika célja annak bemutatása, hogyan fokozható a vizuális megjelenés a stíluslapok segítségével. Ez a művelet az interaktív elemek fókuszba kerülése, illetve kijelölése esetén megjelenő vizuális visszajelzés biztosítása érdekében fontos. A fókuszált elem kiemelése az elem interaktivitásáról vagy hatóköréről szolgáltathat információt.
Vizuális visszajelzés többféle módon is biztosítható. Ezt a műveletet rendszerint az elemre mutató egér vagy billentyűparancs aktiválja.
Példák
1. példa: Hivatkozás elemek
Az alábbi példában az egér és billentyűzet a hivatkozásra fókuszálnak. A CSS kód a hivatkozás fókuszba kerülésekor az elem háttérszínét állítja be.
Az alábbiakban az adott tartalom kerül szemléltetésre:
Példa kód:
<ul id="mainnav">
<li class="page_item">Home</li>
<li class="page_item"><a href="/services">Services</a></li>
<li class="page_item"><a href="/projects">Projects</a></li>
<li class="page_item"><a href="/demos">Demos</a></li>
<li class="page_item"><a href="/about-us">About us</a></li>
<li class="page_item"><a href="/contact-us">Contact us</a></li>
<li class="page_item"><a href="/links">Links</a></li>
</ul>
Az alábbiakban az a CSS kód látható, amely fókuszba kerülés esetén megváltoztatja az adott elem háttérszínét:
Példa kód:
#mainnav a:hover, #mainnav a:active, #mainnav a:focus {
background-color: #DCFFFF;
color:#000066;
}
1. példa: A fókuszba kerülő elemek kiemelése
Az alábbi példában a :focus pszeudo-osztály a háttérszín átállításával megváltoztatja a fókuszba kerülő beviteli mezők stílusát.
Példa kód:
<html>
<head>
<style type="text/css">
input.text:focus {
background-color: #7FFF00; color: #000;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label {
background-color: #FF6: color: #000;
}
</style>
</head>
<body>
<form method="post" action="form.php">
<p><label for="fname">Name: </label>
<input class="text" type="text" name="fname" id="fname" />
</p>
<p>
<input type="radio" name="sex" value="male" id="sm" /> <label for="sm">Male</label><br />
<input type="radio" name="sex" value="female" id="sf" /> <label for="sf">Female</label>
<p>
</form>
</body>
</html>
Folyamat
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Ellenőrzések
Folyamat
Minden olyan elem, amely fókuszba kerülhet:
-
Az egeret húzza az elem fölé.
-
Ellenőrizze, hogy megváltozik-e az elem szegélyének vagy hátterének a színe.
-
A billentyűzet fókuszának kipróbálása előtt távolítsa el az egeret az elemről.
- A billentyűzettel jelölje ki az elemet.
- Ellenőrizze, hogy megváltozik-e az elem szegélyének
vagy hátterének a színe.
- Ellenőrizze, hogy a színek visszaállnak-e eredeti az eredeti állapotba a fókusz megszűnésekor.
Elvárható eredmények
-
A 3. 5. és 6. pontok igazak.