2. Fórumok
  3. Szoftverfejlesztés
  4. CSS topic

Új hozzászólás Aktív témák

  • #2021 Sk8erPeter nagyúr kispx #2020
    Új Válasz #2021
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    Sk8erPeter

    nagyúr

    válasz kispx #2020 üzenetére

    Röviden azért, mert ha nem tartja be az ember a sorrendet, és mindegyik szóbanforgó pszeudoosztályra külön stílus lenne érvényes, előfordulhatna olyan eset, hogy ezek a stílusok felülírják egymást, és nem érvényesülnek az adott elemen akkor, amikor kellene. (Például színekkel könnyen tesztelhető egy ilyen viselkedés, de ugye az ember nem feltétlenül csak színeket definiálhat adott pszeudoosztályra (és a gyakorlatban sokszor nincs minden pszeudoosztálynak külön színe).)

    Hosszabban: az LVHA-szabály az érvényes, vagyis a Link-Visited-Hover-Active. A legkönnyebben talán a LoVe, HAte szavak ebben a sorrendben történő használatával jegyezhető meg. :)
    A :focus pszeudoosztály sorrendjével kapcsolatban nem egyértelműek az álláspontok, de mindenképpen a :link és :visited és után kell jönnie, és még az :active előtt (ez viszont nem kérdés!). De ha ezzel is kiegészítjük az LVHA-t, akkor arra az LVHFA vagy LVFHA rövidítés illik, én az utóbbit, vagyis inkább az LVFHA-t támogatnám - szemben pl. ezzel a cikkel. Ennek az okáról mindjárt. Utóbbinak a megjegyezhetőségére én az előbbiből kiindulva a LoVe Furious HAte szavakat találtam ki. :D

    L: A :link pszeudoosztály tulajdonképpen a nemlétező :unvisitednek felelhetne meg, tehát annak, hogy a felhasználó még nem "látogatta meg" az adott linket. (És a linkelt cikkek szerzőjéhez hasonlóan én sem tudom, hogy miért nem :unvisitednek hívják inkább. :) ) Azért ez az első a sorrendben a definiálandó pszeudoosztályok közül, mert értelemszerűen azt akarod először is megmondani, hogy hogy nézzen ki az a link, amit még nem látogattak meg (nem kattintottak rá, és engedték el a nyomógombot). De tulajdonképpen ennek és a :visited-nek a sorrendje mindegy lenne, mivel egyszerre nem lehet látogatott és nem látogatott egy link, tehát ezek kölcsönösen kizárják egymást (szóval lehetne :visited-:link sorrend is, de a :link-:visited sorrend logikusabb).
    V: A :visited link meg értelemszerűen a már meglátogatott linkekre vonatkozik. Tehát kilőttük az LVHA-ból az első kettőt.
    F: A :focus arra vonatkozik, ha egy adott elem megkapta a fókuszt, akár billentyűzetről vezérelve (pl. odaugrálva Tabbal, akár egy gyorsbillentyűvel, ha épp lehetséges), akár egér segítségével (pl. ha belekattintasz egy <input> elembe).
    H: A :hover arra vonatkozik, ha a felhasználó a link fölé viszi az egérkurzort, és ez azért következik a :link és :visited után, mert amikor a felhasználó a linked fölé viszi a kurzorját, akkor azt szeretnéd, hogy az erre vonatkozó stílus legyen érvényes, ne pedig az, hogy kattintott-e már a linkre vagy sem (mert akkor az az érdekes, hogy épp afölött a link fölött tartózkodik, nem az, hogy volt-e már "látogatva" a link), és az előző kettő felülírná.
    A: Az :active arra vonatkozik, ha az elem "aktiválásra" került. Egérrel való vezérléskor aközött a két időpont között érvényes, amikor rákattintasz, majd elengeded a gombot. Például ha bármelyik egérgombbal való kattintáskor egy darabig nem engeded el a gombot, hanem lenyomva hagyod, akkor látod, hogy épp az :active pszeudoosztály érvényesül. Ha billentyűzetet használsz, akkor úgy látod aktívnak, ha például egy épp fókuszban lévő (!) gombon hosszan nyomvatartod a Space-t.

    Ami miatt én jobbnak tartom, ha a :focus előbb van, mint a :hover (LVFHA), az az, hogy így érvényre tud jutni a :hover pszeudoosztály akkor is, ha az adott elem épp fókuszban van. De érdemes tudni, hogy ilyenkor a :hover ugye felülírja a :focus szabályát.
    Példa a megértéshez: legyen egy input elem, amire az alábbi CSS-kód érvényes:
    input:focus {background-color: orange;}
    input:hover {background-color: red;}
    Ha a fókuszt az elemre helyezed akár egérrel való belekattintással, akár billentyűzettel való odanavigálgatással (pl. Tab segítségével), akkor ugye megkapja a narancssárga háttérszínt. Ha még fölé is viszed az egeret, akkor pedig piros lesz az elem háttere.
    Ha a következő szabály lenne érvényben:
    input:hover {background-color: red;}
    input:focus {background-color: orange;}
    Tehát pont fel lenne cserélve, akkor ugyanebben az esetben hiába vinnéd fölé az egeret, a :hover szabályt felülírná a :focus, és nem kapná meg a piros háttérszínt hover esetén sem.
    Persze van, aki pont fordítva gondolja, és aki szerint ha már egy elem fókuszban van, akkor ne érvényesüljön rá még a hover szabály is (LVHFA). Hát ez fejlesztői döntés kérdése.

    Remélem, érthető volt. :)
    Ide felraktam egy példát is, amivel elég jól tesztelhető az említett pszeudoosztályok működése:
    http://jsfiddle.net/Sk8erPeter/3ovgrwyg/

Új hozzászólás Aktív témák