Událost kliknutí v čistém CSS bez:target. Cíl v CSS. Jak to funguje? Co sémantika a přístupnost
Existuje způsob, jak zvládnout události kliknutí v CSS bez pomocí JavaScriptu. Metodu můžete použít s :cílová. Ale co když se to nedá použít? Existuje další metoda.
Podívejte se na ukázku. Je kompletně vytvořen v CSS, ne v řádku kódu JavaScript. Vychází z původního použití selektorů:active a:hover.
Popis
Nejprve je potřeba vytvořit kontejner, který bude obsahovat tlačítko a bloky, které se zobrazí po stisku myši. Struktura značek bude vypadat nějak takto:
Potřebujeme, aby byl .content neviditelný, dokud nestisknete tlačítko myši na .wrapperu. Chcete-li problém vyřešit, nastavte zobrazení vlastnosti .content: none . Poté, když stisknete tlačítko myši na .wrapper, zahrneme vlastnost display: block pro .content. Proč nastavit vlastnost .wrapper:active .content display: block . V tomto stavu bude obsah .content viditelný pouze po stisknutí tlačítka myši. Pokud jej uvolníte, obsah .content opět zmizí. Abychom to napravili, ujistěte se, že když je kurzor myši nad .content , je prvku přiřazena vlastnost display: block. To znamená, že nastavíme vlastnost display: block pro .content:hover. CSS kód bude vypadat takto:
Obsah ( display: none; ) .wrapper:active .content ( display: block; ) .content:hover ( display: block; )
Zbývá jen „vyčesat“ vzhled a upřesněte:
Wrapper ( pozice: relativní; ) .button ( pozadí: žluté; výška: 20px; šířka: 150px; ) .content ( pozice: absolutní; padding-top: 20px; ) .content li ( pozadí: červená; )
Text tlačítka ve výše uvedeném kódu bude mít žluté pozadí a informace zobrazené po stisknutí tlačítka myši budou mít červené pozadí.
Pomocí pseudotřídy:target můžete na internetu snadno najít mnoho návodů. Neřiďme se však cizím kodexem, ale zkusme mu porozumět a pochopit, jak funguje? Samozřejmě se neobejdeme bez příkladů.
Co je:target?
V CSS:target je to pseudotřída, která vám umožňuje vybrat celý „kus“ vašeho HTML dokumentu, na kterém bude provedena nějaká akce. Může to být například odstavec textu nebo nadpis.
Pseudotřídy by se neměly zaměňovat s pseudoprvky, které mohou vybrat pouze určitou část prvku, například první písmeno nebo první řádek odstavce.
Pseudotřídy:
- a:link(color:#111)
- a:hover(color:#222)
- div:first-child(color:#333)
Pseudoprvky:
- p::first-letter(color:#444)
- p::první řádek(barva:#555)
Myslím, že ze syntaxe je jasné, co ta či ona pseudotřída nebo pseudoprvek dělá. Nejoblíbenější pseudotřída je :hover, setkávají se s ní všichni webmasteři, popisuje styly prvku při vznášení. target funguje podobně a popisuje styly prvku, když nastane určitá situace.
ID fragmentů
To je zkrátka věc, ke které je naše pseudotřída svázána. Jedná se o hashtag se slovem nebo frází, který je umístěn na konci adresy. Vypadá to takto:
Tuto techniku lze použít pro přechody v rámci článku. Například na začátku článku vytvoříte malý obsah, když kliknete na prvek, z něhož se osoba dostane do sekce, kam odkaz vede, sekce potřebuje přidat identifikátor.
Toto funguje pro čisté HTML, nejsou potřeba žádné triky. Malé identifikátory.
Zpracování kliknutí pomocí:target
Nyní se pokusme ujistit, že když kliknete na požadovanou sekci z naší improvizované nabídky, změní se styl nadpisu, který ukazuje, který odstavec je aktuálně aktivní.
H1 ( písmo: 30px Arial sans-serif; ) h1:target (velikost písma: 50px; zdobení textu: podtržení; barva: #37aee4; )
Kód je velmi jednoduchý – po kliknutí nadpis změní velikost, barvu a podtrhne se. Můžete přidat život (Ruslan, ahoj) a vytvořit animaci pro změnu barvy titulku:
H1 ( písmo: 30px Arial bezpatkové; -webkit-přechod: barva 0,5 s lehkost; -moz-přechod: barva 0,5 s lehkost; -o-přechod: barva 0,5 s lehkost; -ms-přechod: barva 0,5 s lehkost; přechod: barva 0,5s lehkost;)
Zvýraznění aktivního názvu je dobrá věc, ale co když potřebujete změnit vzhled textu, který za ním následuje? CSS nám tuto možnost dává. Vypadá to takto:
H1:target + p (pozadí: #eaeaea; odsazení: 10px; )
V tomto případě znaménko plus znamená, že styl by měl být aplikován na odstavec za nadpisem. Tím pádem, když se změní aktivní záhlaví, změníme také design sekce s textem, který mu „patří“.
Podpora prohlížeče
Cílová pseudotřída patří do třetí edice CSS a je dokonale podporována všemi prohlížeči kromě IE, starší než verze 9. Proto byste ji neměli implementovat, pokud vaše publikum používá tento prohlížeč. I když existuje cesta ven - toto je Selectvizr, knihovna JS, se kterou můžete IE přimět k práci s CSS3. Prostě přidáme scénář a je to, funguje to.
Jediná věc je, že pokud nepoužíváte JQuery nebo MooTools, musíte je připojit, aby tento skript fungoval. Na oficiálních stránkách je tabulka, která ukazuje, které knihovny co podporují. Pokud vás to zajímá, přečtěte si to. Tento .
Závěr
Používání pseudo tříd se může zdát složité, ale jakmile pochopíte, jak fungují, můžete dělat úžasné věci pouze pomocí CSS a ničeho jiného. Pseudotřída:cíl- vynikající potvrzení tohoto. S jeho pomocí můžete radikálně změnit interakci stránky s návštěvníkem. Výše uvedený příklad je nejjednodušší, ale přesto přidává stránce trochu interaktivity. Ale to je jen pár řádků kódu.
Nepřehánějte to s krásou a podporou prohlížeče a vše bude v pořádku.
Hezký den
target="_blank se používá k vytvoření značky otevřel odkaz v novém okně. Ale co je to cílové HTML? Proč by měl být prázdný? A nejzajímavější je, proč je na začátku podtržítko? Pojďme se na tento kód podívat blíže a pochopit, co dělá.
cílový atribut
Cílové hodnoty
Čtyři nejběžnější hodnoty pro cílový atribut jsou:
_já
Jediná situace, ve které k tomu může dojít, je použití značky v HTML
_prázdný
Otevře odkaz na nové kartě nebo okně. To je určeno místním nastavením uživatele, ve většině prohlížečů se jedná o stránku s novou záložkou. Možná si myslíte, že pomocí této hodnoty můžete implementovat vyskakovací reklamní jednotky. Ale to není pravda. Nejčastěji se k tomu používá JavaScript spíše než HTML.
Tato cílová hodnota atributu HTML se nejlépe používá k otevírání odkazů na externí weby nebo soubory PDF na nové kartě. Díky tomu je po zavření těchto záložek uživatel vrácen na váš web. To by však nemělo být zneužíváno, protože pro uživatele bude poměrně obtížné navigovat, pokud se každý odkaz otevře na nové kartě.
_rodič
Hodnota _parent otevře odkaz v nadřazeném rámci pro rámec, ve kterém se nacházíte. Toto není populární hodnota, protože značky pro vytváření rámců