Udalosť kliknutia v čistom CSS bez:target. Cieľ v CSS. Ako to funguje? Čo sa týka sémantiky a dostupnosti
Existuje spôsob, ako zvládnuť udalosti kliknutia v CSS bez pomocou JavaScriptu. Metódu môžete použiť s :cieľ. Ale čo ak sa to nedá použiť? Existuje aj iná metóda.
Pozrite si ukážku. Je kompletne vytvorený v CSS, nie v riadku kódu JavaScript. Vychádza z pôvodného použitia voličov:active a:hover.
Popis
Najprv musíte vytvoriť kontajner, ktorý bude obsahovať tlačidlo a bloky, ktoré sa zobrazia po stlačení myši. Štruktúra značiek bude vyzerať takto:
Musíme urobiť .content neviditeľným, kým sa nestlačí tlačidlo myši na .wrapper . Ak chcete problém vyriešiť, nastavte zobrazenie vlastnosti .content: none . Potom, keď stlačíte tlačidlo myši na .wrapper, zahrnieme vlastnosť display: block pre .content. Prečo nastaviť vlastnosť .wrapper:active .content display: block . V tomto stave bude obsah .content viditeľný iba po stlačení tlačidla myši. Ak ho uvoľníte, obsah .content znova zmizne. Aby sme to napravili, uistite sa, že keď je kurzor myši nad .content , má prvok priradenú vlastnosť display: block. To znamená, že nastavíme vlastnosť display: block pre .content:hover. CSS kód bude vyzerať takto:
Obsah ( display: none; ) .wrapper:active .content ( display: block; ) .content:hover ( display: block; )
Zostáva len „vyčesať“ vzhľad a urob to jasnejšie:
Wrapper ( pozícia: relatívna; ) .button ( pozadie: žltá; výška: 20px; šírka: 150px; ) .content (pozícia: absolútna; vrchná časť: 20px; ) .content li ( pozadie: červená; )
Text tlačidla vo vyššie uvedenom kóde bude mať žlté pozadie a informácie zobrazené po stlačení tlačidla myši budú mať červené pozadie.
Pomocou pseudotriedy:target môžete na internete ľahko nájsť mnoho tutoriálov. Neriaďme sa však kódexom niekoho iného, ale skúsme mu porozumieť a pochopiť, ako to funguje? Samozrejme, bez príkladov sa nezaobídeme.
Čo je:target?
V CSS:target je to pseudotrieda, ktorá vám umožňuje vybrať celý „kus“ vášho HTML dokumentu, na ktorom sa vykoná nejaká akcia. Môže to byť napríklad odsek textu alebo nadpis.
Pseudotriedy by sa nemali zamieňať s pseudoprvkami, ktoré môžu vybrať iba určitú časť prvku, napríklad prvé písmeno alebo prvý riadok odseku.
Pseudotriedy:
- a:link(color:#111)
- a:hover(color:#222)
- div:first-child(color:#333)
Pseudoprvky:
- p::first-letter(color:#444)
- p::prvý riadok(farba:#555)
Myslím, že zo syntaxe je jasné, čo robí tá alebo ona pseudotrieda alebo pseudoprvok. Najpopulárnejšia pseudotrieda je :hover, stretávajú sa s ňou všetci správcovia webu, popisuje štýly prvku pri prechode myšou. target funguje podobne a popisuje štýly prvku, keď nastane určitá situácia.
ID fragmentov
Toto je skrátka vec, na ktorú sa viaže naša pseudotrieda. Ide o hashtag so slovom alebo frázou, ktorý je umiestnený na konci adresy. Vyzerá to takto:
Túto techniku možno použiť na prechody v rámci článku. Napríklad na začiatku článku vytvoríte malý obsah, keď kliknete na prvok, ktorého osoba sa dostane do sekcie, kam vedie odkaz, do sekcie je potrebné pridať identifikátor.
Toto funguje pre čisté HTML, nie sú potrebné žiadne triky. Malé identifikátory.
Spracovanie kliknutia pomocou:target
Teraz sa pokúsme uistiť, že keď kliknete na požadovanú časť z našej improvizovanej ponuky, zmení sa štýl nadpisu, ktorý ukazuje, ktorý odsek je práve aktívny.
H1 ( písmo: 30px Arial bezpätkové; ) h1:cieľ (veľkosť písma: 50px; výzdoba textu: podčiarknutie; farba: #37aee4; )
Kód je veľmi jednoduchý – po kliknutí nadpis zmení svoju veľkosť, farbu a je podčiarknutý. Môžete pridať život (Ruslan, ahoj) a vytvoriť animáciu na zmenu farby nadpisu:
H1 ( písmo: 30px Arial bezpätkové; -webkit-prechod: farba 0,5 s ľahkosť; -moz-prechod: farba 0,5 s ľahkosť; -o-prechod: farba 0,5 s ľahkosť; -ms-prechod: farba 0,5 s ľahkosť; prechod: farba 0,5 s ľahkosť; )
Zvýraznenie aktívneho názvu je dobrá vec, ale čo ak potrebujete zmeniť dizajn textu, ktorý za ním nasleduje? CSS nám dáva túto príležitosť. Vyzerá to takto:
H1:target + p (pozadie: #eaeaea; výplň: 10px; )
V tomto prípade znamienko plus znamená, že štýl by sa mal použiť na odsek za nadpisom. teda pri zmene aktívnej hlavičky zmeníme aj dizajn sekcie s textom, ktorý mu „patrí“.
Podpora prehliadača
Cieľová pseudotrieda patrí do tretej edície CSS a je dokonale podporovaná všetkými prehliadačmi okrem IE, staršieho ako verzia 9. Preto by ste ju nemali implementovať, ak vaše publikum používa tento prehliadač. Aj keď existuje cesta von - toto je Selectvizr, knižnica JS, pomocou ktorej môžete IE prinútiť pracovať s CSS3. Len pridáme scenár a je to, funguje to.
Jediná vec je, že ak nepoužívate JQuery alebo MooTools, musíte ich pripojiť, aby tento skript fungoval. Oficiálna webová stránka obsahuje tabuľku, ktorá ukazuje, ktoré knižnice čo podporujú. Ak vás to zaujíma, prečítajte si ho. Toto .
Záver
Používanie pseudotried sa môže zdať komplikované, ale keď pochopíte, ako fungujú, môžete robiť úžasné veci iba pomocou CSS a ničoho iného. Pseudotrieda:cieľ- vynikajúce potvrdenie tohto. S jeho pomocou môžete radikálne zmeniť interakciu stránky s návštevníkom. Vyššie uvedený príklad je najjednoduchší, no aj tak pridáva stránke trochu interaktivity. Ale toto je len pár riadkov kódu.
Nepreháňajte to s krásou a podporou prehliadača a všetko bude v poriadku.
Pekný deň
target="_blank sa používa na vytvorenie značky otvoril odkaz v novom okne. Ale čo je cieľové HTML? Prečo by mal byť prázdny? A najzaujímavejšie je, prečo je na začiatku podčiarknutie? Pozrime sa bližšie na tento kód a pochopíme, čo robí.
cieľový atribút
Cieľové hodnoty
Štyri najbežnejšie hodnoty pre cieľový atribút sú:
_ja
Jediná situácia, v ktorej sa to môže stať, je, ak je značka použitá v HTML
_blank
Otvorí odkaz na novej karte alebo okne. Toto je určené miestnymi nastaveniami používateľa, vo väčšine prehliadačov je to nová karta. Možno si myslíte, že pomocou tejto hodnoty môžete implementovať reklamné jednotky vyskakovacích okien. Ale to nie je pravda. Najčastejšie sa na to používa JavaScript namiesto HTML.
Táto cieľová hodnota atribútu HTML sa najlepšie používa na otváranie odkazov na externé lokality alebo súbory PDF na novej karte. Vďaka tomu sa po zatvorení týchto kariet používateľ vráti späť na vašu stránku. Nemalo by sa to však zneužívať, pretože pre používateľa bude dosť ťažké navigovať, ak sa každý odkaz otvorí na novej karte.
_rodič
Hodnota _parent otvorí odkaz v nadradenom rámci pre rámec, v ktorom sa nachádzate. Toto nie je populárna hodnota, pretože značky na vytváranie rámcov