Co je cíl v css. Událost kliknutí čistě CSS bez: target. Jak vytvořit hypertextový odkaz v HTML pomocí href

Dnes budeme hovořit o hlavních souvisejících funkcích s pseudotřídou : cílová a jak jej můžete použít k vytvoření úžasných čistých efektů CSS, naučit se vytvářet prezentace pomocí css a mnoho dalšího.

Co je: cíl?

h1 (font: tučné 30px / 1,5 "Helvetica Neue", Arial, Helvetica, Ženeva, bezpatkové;) h1: target (velikost písma: 50px; dekorace textu: podtržení; barva: # 37aee4;)

Přidat animaci

Pojďme okořenit náš efekt a přidat nějakou animaci, jako pěkný malý přechod pro změnu barvy. Koukej jak to funguje.

h1 (font: tučné 30px / 1,5 "Helvetica Neue", Arial, Helvetica, Ženeva, bezpatkové; -webkit-transition: barva 0,5s lehkost; -moz-transition: barva 0,5s lehkost; -o-přechod: barva 0,5 s lehkost; -ms-přechod: barva 0,5 s lehkost; přechod: barva 0,5 s lehkost;) h1: cíl (velikost písma: 50px; dekorace textu: podtržení; barva: # 37aee4;)

Správa necílových objektů

Řekněme, že chceme změnit styly odstavce, který následuje za vybraným nadpisem.

Je velmi snadné to provést pomocí následujícího kódu. Viz ukázka.

h1: target + p (pozadí: # f7f7f7; odsazení: 10px;)

Vytvoření jednoduché prezentace pomocí CSS

Vývojáři přišli se spoustou aplikací využívajících pseudotřídu : cílová... Tento pseudo selektor se může hodit při vytváření záložek nebo dokonce prezentací. Podívejme se, jak můžete implementovat to druhé.

Vytvořme si neuspořádaný seznam. Každá položka v seznamu bude obsahovat značku ukotvení odkazující na ID fragmentu a obrázek s odpovídajícím ID.

• Jeden
• Dva
• Tři
• čtyři
• Pět

Nyní přidáme naše styly:

* (margin: 0px; padding: 0px;) #slideshow (margin: 50px auto; position: relativní; width: 400px;) ul (list-style: none;) li (float: left; overflow: hidden; margin: 0 20px 0 0;) li a (barva: # 222; výzdoba textu: žádná; písmo: 15px / 1 Helvetica, bezpatkové; -webkit-transition: barva 0,5 s lehkost; -moz-přechod: barva 0,5 s lehkost; -o-přechod: barva 0,5s lehkost; -ms-přechod: barva 0,5s lehkost; přechod: barva 0,5s lehkost;) li a: hover (barva: # 50b0df;) li img (pozice: absolutní; nahoře: 50px; vlevo: 0; z-index: -1; -webkit-transition: neprůhlednost 1s náběh-výstup; -moz-přechod: neprůhlednost 1s náběh-výstup; -o-přechod: neprůhlednost 1s náběh-výstup; -ms-transition: neprůhlednost 1s náběh-výstup; přechod: neprůhlednost 1s náběh;) li img: cíl (z-index: 1;) li img: ne (: cíl) (neprůhlednost: 0;)

Nejprve přidáme plavat vlevo všechny prvky našeho seznamu. Pro prvky jsme použili absolutní a relativní umístění.

Dále nainstalujte z-index: -1 pro všechny snímky a poté nastavte z-index: 1 pro cílové obrázky. To způsobí, že se obrázek po kliknutí na položku seznamu změní. Aby byl přechod plynulejší, nastavíme hodnotu krytí pro další obrázky. 0 .

Podívejte se na ukázku čistě CSS slideshow.

Kompatibilita mezi prohlížeči

Pseudotřída : cílová je selektor CSS úrovně 3, což znamená, že je podporován téměř v každém prohlížeči kromě (neuhodnete) ... IE. Starý dobrý osel podporuje pouze CSS3 selektory ve verzích 9 a 10.

Stejně jako u jakéhokoli jiného problému s vykreslováním selektoru CSS3 v IE je to poměrně snadné opravit pomocí Selectivizr.

Díky tomuto pluginu a kouzlu voodoo budou požadované selektory CSS3 podporovány i v IE6.

Závěr

Používání pseudotříd se může na první pohled zdát skličující, ale proč chápete, jak vám mohou usnadnit práci a učinit váš web zajímavější. Pseudovolič

: cílová je dobrým příkladem. Jen se ujistěte, že to se styly nepřeháníte.

Další zajímavý případ použití : cílová

Ve výchozím nastavení se po kliknutí na odkaz dokument otevře v aktuálním okně nebo rámci. V případě potřeby lze tuto podmínku změnit atributem target tagu. ... XHTML tento atribut nepoužívá.

Syntax

...

Povinný atribut

Hodnoty

Hodnota je název okna nebo rámu určený atributem name. Pokud je nastaveno neexistující jméno, otevře se nové okno. Následující názvy se používají jako vyhrazené názvy.

Prázdné Načte stránku do nového okna prohlížeče. _self Načte stránku do aktuálního okna. _parent Načte stránku do nadřazeného rámce, pokud tam žádné rámce nejsou, pak tato hodnota funguje jako _self. _top Zruší všechny rámce a načte stránku v celém okně prohlížeče, pokud nejsou žádné rámce, pak tato hodnota funguje jako _self.

Výchozí hodnota

Validace

Použití tohoto atributu je zamítnuto specifikací HTML, platný kód lze získat pouze pomocí přechodného stavu .

HTML5 IE Cr Op Sa Fx

Otevřít v novém okně

Pseudo třída: target je jednou ze skvělých funkcí CSS3. Odpovídá prvku, na který ukazuje identifikátor v URI dokumentu.

Identifikátor v URI obsahuje znak „#“ následovaný názvem identifikátoru, který odpovídá hodnotě atributu id prvek v dokumentu.

Podpěra, podpora

Protože mluvíme o CSS3, pseudotřídu podporují všechny moderní prohlížeče kromě IE 6 až 8. Obvyklá frustrace by vám neměla bránit v rozhodnutí použít: target. IE9 již podporuje: cílovou pseudo třídu.

Jak mohu použít: cíl?

Tato pseudo třída může mít svůj vlastní styl, stejně jako pseudo třídy. : vznášet se, : aktivní nebo : soustředit se pro odkazy. Stejně jako výše zmíněné pseudo třídy : cílová používané při určitých akcích s webem. Zejména při použití identifikátoru fragmentu, jako je tento: http://example.com/index.html#lorem-ipsum.

Demonstrace

Demo stránka poskytuje velmi jasný příklad toho, jak a kdy používat : cílová... Pseudo třída : cílová může zlepšit použitelnost vašeho zdroje.

HTML značení

Níže je ukázka z dema. Máme 4 odkazy a stejný počet bloků. Každá skupina má svůj jedinečný identifikátor.

• Blok 1
• Blok 2
• Blok 3
• Blok 4

CSS

Následující CSS kód umožňuje dosáhnout požadovaného efektu, s jehož pomocí se vybere blok s odpovídajícím ID (kolem obdélníku se objeví stín).

/ * Přidejte mezeru * / ul, div (okraj-dole: 10px;) / * Výchozí styl bloku * / div (odsazení: 10px; ohraničení: 1px plné #eaeaea; -moz-border-radius: 5px; border- poloměr : 5px;) / * Změňte zobrazení výstupu, pokud se shoduje * / div: target (border-color: # 9c9c9c; -moz-box-shadow: 0 0 4px # 9c9c9c; -webkit-box-shadow: 0 0 4px # 9c9c9c ; box-shadow: 0 0 4px # 9c9c9c;)

Níže je uveden výsledek akce kódu. Pokud kliknete na odkaz, příslušný blok se zvýrazní a stane se aktivním.

Existuje způsob, jak zpracovat události kliknutí v CSS bez použití JavaScriptu. Metodu můžete použít s : cílová... Ale co když to nelze použít? Existuje další metoda.

Podívejte se na ukázku. Je to kompletně provedeno v CSS, ne na jediném řádku JavaScriptu. Vychází z původního použití: aktivních a: hover selektorů.

Popis

Nejprve musíte vytvořit kontejner, který bude obsahovat tlačítko a bloky, které se zobrazí kliknutím myši. Struktura značek bude vypadat nějak takto:

Je třeba, aby byl .content neviditelný, dokud nestisknete tlačítko myši na .wrapperu. Chcete-li problém vyřešit, nastavte vlastnost display: none pro .content. Poté, když klikneme na .wrapper, povolíme vlastnost display: block pro .content. Chcete-li to provést, nastavte vlastnost display: block pro .wrapper: active .content. V tomto stavu bude obsah .content viditelný pouze po stisknutí tlačítka myši. Pokud jej pustíte, obsah .obsah opět zmizí. Pro opravu uděláme to tak, ž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 (zobrazit: žádné;) .obal: aktivní .obsah (zobrazit: blok;) .obsah: vznášet se (zobrazit: blok;)

Zbývá pouze "učesat" vzhled a dát mu jasnost:

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í.

Pseudotřída: target vybere prvek v dokumentu, na který ukazuje fragment adresy URL. Tato část textu je například zabalena do prvku s ID # target-test. Pokud následujete odkaz, tento prvek se stane cílem a projeví se styly pseudotřídy: target.

Minulý rok jsem psal o: cílové pseudotřídě v 5 nedostatečně používaných selektorech CSS (a jejich aplikacích). Prvním příkladem bylo použití pseudotřídy: target ke zvýraznění části stránky, na kterou bylo navigováno. Může to být například přidání barvy pozadí nebo ohraničení, jako v příkladu s.

Nedávno jsem ale přišel na to, že pseudotřídu: target můžeme využít lépe, když na stránce vytvoříme interaktivní prvky bez JavaScriptu.

Příklad č. 1: skrytí a zobrazení obsahu

Jednoduchým příkladem použití pseudotřídy: target by bylo skrytí a zobrazení obsahu, na který cílíme. V blogu tak můžeme po kliknutí uživatele zobrazit sekci s komentáři. To se provádí jednoduchým skrytím prvku, dokud se neshoduje s: target.

Zobrazit komentáře #comments: not (: target) (zobrazit: žádné;) #comments: target (zobrazit: blok;)

Příklad č. 2: Vysuňte navigaci

Dalším příkladem je vytvoření výsuvné navigační lišty. Navigační lištu umístíme pevně vzhledem k rozsahu, abychom zajistili, že po kliknutí uživatele nedojde k žádnému skoku.

#nav (pozice: pevná; nahoře: 0; výška: 100 %; šířka: 80 %; max. šířka: 400px;) #nav: not (: cíl) (vpravo: -100 %; přechod: vpravo 1,5 s;) #nav: target (vpravo: 0; přechod: vpravo 1 s;)

Příklad č. 3: vyskakovací modální

Když tuto myšlenku rozvedeme dále, můžeme vytvořit modal, který vyplní celou stránku.

# modal-container (pozice: pevná; horní: 0; vlevo: 0; šířka: 100 %; výška: 100 %; pozadí: rgba (0,0,0,0,8); displej: flex; justify-content: center; align-items: center;) .modal (šířka: 70 %; pozadí: #fff; padding: 20px; text-align: center;) # modal-container: not (: target) (opacity: 0; viditelnost: skryté; přechod: neprůhlednost 1s, viditelnost 1s;) # modální kontejner: cíl (neprůhlednost: 1; viditelnost: viditelná; přechod: neprůhlednost 1s, viditelnost 1s;)

Příklad č. 4: změna globálních stylů

Poslední příklad nelze nazvat správným z hlediska sémantiky, jde o aplikaci: cílové pseudotřídy na prvek s následnou výměnou stylů nebo rozložení stránky.

#body: not (: target) (main (width: 60%;) aside (width: 30%;) .show-sidebar-link (display: none;)) #body: target (main (width: 100%; ) stranou (zobrazit: žádné;) .hide-sidebar-link (zobrazit: žádné;))

A co sémantika a dostupnost?

Jak jsem zmínil v článku „Odkazy nebo tlačítka“, při použití prvku prohlížeč očekává přechod na jinou stránku nebo jinou část stránky. V mých příkladech (kromě posledního) se to přesně děje. Jediný trik je v tom, že v normálním stavu je stylizovaný prvek skrytý, dynamicky se objevuje pouze v cílovém stavu.

Pokud mohu říci, tato metoda má dvě potenciální nevýhody:

1. URL se změní, což ovlivní historii prohlížeče. To znamená, že když uživatel přejde „zpět“, může neúmyslně přejít na cílový prvek.
2. K uzavření cílového prvku musí uživatel přejít na jiný prvek nebo pouze na #. Poslední možnost (kterou ve svých příkladech používám) není sémantická a může uživatele přesměrovat na začátek článku, na což uživatel nemusí být připraven.

Při správném použití však lze tuto metodu použít minimálně jako záložní pro uživatele s vypnutým JavaScriptem. V některých případech, jako v prvním příkladu, může být dokonce výhodnější a jednodušší než použití JavaScriptu. Jako vždy záleží na každém konkrétním případě.