A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / Bevezetés a stíluslapok használatába /Látszólagos osztályok

CSS3-as szelektorok bemutatása
- Látszólagos osztályok
  - Dinamikus látszólagos osztályok

CSS3-as szelektorok bemutatása

Látszólagos osztályok

A HTML-elemek egy része szelektálható állapotokkal rendelkezik. Ezen állapotokra illeszkedő szelektorokat a látszólagos osztályok segítségével írhatunk.

A szintaxisuk két részből áll, egy szelektorból és annak egy látszólagos osztályából, ami egy kettősponttal kezdődik.

Dinamikus látszólagos osztályok

A dinamikus látszólagos osztályok a következőek:

:link: annak a linknek a megjelenítéséért felel, ami még nem volt meglátogatva.
:visited: annak a linknek a megjelenítéséért felel, ami már ki volt kiválasztva, vagyis rákattintottunk.
:hover: annak az elemnek a megjelenítéséért felel, amely felett az egérkurzor áll.
:active: annak az elemnek a megjelenítéséért felel, ami éppen aktív. Például egy betöltődött link vagy egy benyomott gomb.
:focus: annak az elemnek a stílusáért felel, amelyiken a fókusz van.
:target: az anchor (könyvjelző) linkek célpontjainak stílusaiért felel.
:enabled: annak az elemnek (többnyire formnak) a stílusaiért felel, amelyik engedélyezve van.
:disabled: annak az elemnek a stílusaiért felel, amelyik le van tiltva.
:checked: annak a jelölőnégyzetnek (checkbox-nak) a stílusaiért felel, amely ki van jelölve.

Kapcsolódó ergonómiai elvek

A linkek színét úgy kell beállítani, hogy meg lehessen különböztetni, hogy mely linkek voltak már meglátogatva, és melyek nem, mégpedig úgy, hogy a már látogatott linkek színe legyen kevésbé élénk.

Kapcsolódó akadálymentességi elvek

Ügyelni kell a linkek (különböző állapot)színeinek megadásánál arra, hogy eléggé kontrasztosak legyenek ahhoz, hogy a gyengén látó felhasználók is el tudják olvasni.

A Firefox böngészőbe érdemes telepíteni a WCAG Contrast Checker bővítményt, amellyel meg tudunk győződni arról, hogy a kontrasztarány megfelelő-e az oldalunkon.

Kapcsolódó akadálymentességi elvek

Szintén akadálymentességi elv, hogy ne csak színnel különböztessük meg az egyes elemeket a színtévesztő felhasználók igényeit kielégítendő. Ezért érdemes a linkeket nem csak színnel, hanem aláhúzással is megkülönböztetni.

Példa - Dinamikus látszólagos osztályok használata

Magyarázat

Mivel a lap hátterét feketére állítottuk be, az alapértelmezett link színek olvashatatlanok lennének, ezért a különböző állapotokat felüldefiniáltuk. Amennyiben a tab billentyűt megnyomjuk, az elemek fókuszba kerülnek, így láthatjuk, hogy a fókuszba került elemek fehér színnel (és az alapértelmezett pontozott körvonallal) vannak megkülönböztetve.

A :target látszólagos osztályt érdemes külön kiemelnünk. Ha az ugrás a linkek tetejére hivatkozásra kattintunk, akkor láthatjuk, hogy a link célpontjaként megadott címsor szövege dőlt betűssé változik, és egy fehér szegély jelenik meg rajta.

Kapcsolódó ergonómiai elvek

Amennyiben egy linkkel az oldalon belüli ugrást valósítunk meg, a látogatónak sokszor nehéz azonosítania azt az elemet, ahova ténylegesen került, ezért ezzel a módszerrel felhívhatjuk rá a figyelmet.

A linkek esetében kötelező a :link, :visited, :hover, :active sorrend (LoVe-HAte), hiszen egy éppen aktív link lehet visited állapotú is. Ha a visited állapotot később formázzuk, mint az active-ot, akkor azzal felülbírál(hat)juk az active állapot értékeit.

Példa - Dinamikus látszólagos osztályok használata (enabled, disabled, checked)

Interaktív példa

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8">
<title>Látszólagos osztályok</title>
<style type="text/css">
   input[type=checkbox]:checked + label 
   {
     color: green;
     font-weight: bold;
   }
input[type=checkbox]:disabled + label 
   {
     color: #555;
     font-style: italic;
   }
</style>
  </head>
  <body>
<form action="#"  method="get">
<p><b>Mely kurzusokat veszed fel ebben a félévben?</b></p>
<input type="checkbox" name="webfejlesztes" id="wf" value="igen">
<label for="wf">Web-fejlesztés 1.</label>
<br>
<input type="checkbox" name="webprogramozas" id="wp" value="igen">
<label for="wp">Web-programozás 1.</label>
<br>
<input type="checkbox" name="webgrafika" id="wg" value="igen">
<label for="wg">Web-grafika 2.</label>
<br>
<input type="checkbox" name="bevesely" id="bev" value="igen" disabled>
<label for="bev">Bevezetés az esélyegyenlőséget szolgáló infokommunikációs technológiákba (Ebben a félévben nem indul.)</label>
<br>
<input value="Adatok elküldése" type="submit">
<input value="Törlés" type="reset">
</form>
  </body>
</html>

Magyarázat

A példában egy űrlapot valósítottunk meg, amely abból a szempontból különleges, hogy lekezeljük, hogy amennyiben egy jelölőnégyzet kijelölt állapotba kerül, akkor a hozzá tartozó (jelen esetben az utána következő) címke tulajdonságait megváltoztatjuk.

A disabled állapotú jelölőnégyzethez tartozó címkét pedig halványabban, dőlt betűvel jelöljük.

Vissza a tartalomjegyzékhez

Fel a lap tetejére

A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.