Čo je cieľ v css. Cieľ v CSS. Ako to funguje? Čo sa týka sémantiky a dostupnosti
Štandardne sa po kliknutí na prepojenie dokument otvorí v aktuálnom okne alebo ráme. V prípade potreby je možné túto podmienku zmeniť atribútom target tagu . Tento atribút nie je povolený v XHTML.
Syntax
...Povinný atribút
hodnoty
Hodnota je názov okna alebo rámu určený atribútom name. Ak je nastavený neexistujúci názov, otvorí sa nové okno. Nasledujúce sa používajú ako vyhradené názvy.
Prázdne Načíta stránku do nového okna prehliadača. _self Načíta stránku do aktuálneho okna. _parent Načíta stránku do nadradeného rámca; ak neexistujú žiadne rámce, potom táto hodnota funguje ako _self . _top Zahodí všetky rámce a načíta stránku v úplnom okne prehliadača; ak neexistujú žiadne rámce, táto hodnota funguje ako _self .
Predvolená hodnota
Validácia
Používanie tohto atribútu je zastarané HTML špecifikácia, platný kód sa získa iba pri použití prechodu .
HTML5 IE Cr Op Sa Fx
Otvoriť v novom okne
Pseudotrieda:cieľ vyberie prvok v dokumente, na ktorý ukazuje fragment adresy URL. Táto časť textu je napríklad zabalená do prvku s ID #target-test . Ak budete nasledovať odkaz, tento prvok sa stane cieľom a prejavia sa štýly pseudo-class:target.
Minulý rok som o pseudotriede:target písal v článku 5 nedostatočne používaných selektorov CSS (a ako ich používať) . Prvým príkladom bolo použitie pseudotriedy:cieľ na zvýraznenie časti stránky, na ktorú bolo navigované. Môže to byť napríklad pridanie farby pozadia alebo orámovania, ako v príklade s .
Nedávno som ale prišiel na to, že pseudotriedu:target môžeme využiť s väčším prínosom, keď vytvoríme interaktívne prvky na stránke bez JavaScriptu.
Príklad č. 1: Skrytie a zobrazenie obsahu
Jednoduchý príklad použitie pseudotriedy:target skryje a zobrazí obsah, na ktorý zacieľujeme. V blogu tak môžeme po kliknutí používateľa zobraziť sekciu komentárov. To sa dosiahne jednoduchým skrytím prvku, kým nespadne pod:target .
Zobraziť komentáre #comments:not(:target) ( display: none; ) #comments:target ( display: block; )
Príklad č. 2: Výsuvná navigácia
Ďalším príkladom je vytvorenie posuvnej navigačnej lišty. Navigačnú lištu umiestňujeme pevne vzhľadom na rozsah, aby sme zabezpečili, že po kliknutí používateľa nedochádza k preskakovaniu.
#nav ( pozícia: pevná; horná časť: 0; výška: 100 %; šírka: 80 %; maximálna šírka: 400 pixelov; ) #nav:not(:cieľ) (vpravo: -100 %; prechod: vpravo 1,5 s; ) #nav:target (vpravo: 0; prechod: vpravo 1s; )
Príklad č. 3: Vyskakovacie modálne okno
Rozvíjaním tejto myšlienky môžeme vytvoriť modálne okno, vyplní celú stránku.
#modal-container ( pozícia: pevná; horná: 0; vľavo: 0; šírka: 100 %; výška: 100 %; pozadie: rgba(0,0,0,0,8); displej: flex; justify-content: center; align-items: center; ) .modal ( šírka: 70 %; pozadie: #fff; padding: 20px; text-align: center; ) #modal-container:not(:target) ( nepriehľadnosť: 0; viditeľnosť: skryté; prechod: nepriehľadnosť 1s, viditeľnosť 1s; ) #modal-container:target ( nepriehľadnosť: 1; viditeľnosť: viditeľné; prechod: nepriehľadnosť 1s, viditeľnosť 1s; )
Príklad č. 4: Zmena globálnych štýlov
Posledný príklad nemožno nazvať správnym z hľadiska sémantiky; je to aplikácia pseudotriedy:cieľ na prvok
nasleduje zmena štýlov alebo rozloženia stránky.#body:not(:target) ( main ( width: 60%; ) aside ( width: 30%; ) .show-sidebar-link ( display: none; ) ) #body:target ( main ( width: 100%; ) aside ( display: none; ) .hide-sidebar-link ( display: none; ) )
A čo sémantika a dostupnosť?
Ako som už spomenul v článku „Odkazy alebo tlačidlá“, pri použití prvku Prehliadač čaká na prechod na inú stránku alebo inú časť stránky. V mojich príkladoch (okrem posledného) sa to presne deje. Jediný trik je v tom, že v normálnom stave je štylizovaný prvok skrytý, dynamicky sa objaví len v cieľovom stave.
Pokiaľ viem, táto metóda má dve potenciálne nevýhody:
- Adresa URL sa zmení, čo ovplyvní históriu prehliadača. To znamená, že keď používateľ prejde „späť“, môže neúmyselne prejsť na cieľový prvok.
- Ak chcete zatvoriť cieľový prvok, používateľ sa musí presunúť na iný prvok alebo jednoducho na # . Posledná možnosť (ktorú používam vo svojich príkladoch) nie je sémantická a môže používateľa presmerovať na začiatok článku, na čo používateľ nemusí byť pripravený.
Ak sa však použije správne, túto metódu možno použiť minimálne ako záložnú skúsenosť pre používateľov s zakázaným JavaScriptom. V niektorých prípadoch, ako v prvom príklade, to môže byť dokonca výhodnejšie a jednoduchšie ako používanie JavaScriptu. Ako vždy, toto závisí od každého jednotlivého prípadu.
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