Trucuri cu pseudo-țintă -

Pseudo: țintă (obiectiv) selectează elementul din document, ceea ce indică o bucată de URL. De exemplu, această bucată de text element de înfășurat cu ID # țintă-test. Dacă faceți clic pe link-ul # țintă-test. acest element va fi obiectivul și pseudo-stiluri: țintă va intra în vigoare.

Anul trecut am scris despre pseudo-clase: țintă la articolul 5 din selectori CSS insuficient utilizat (și aplicarea lor). Primul exemplu a fost utilizarea de pseudo: țintă pentru secțiunea de iluminare din spate a paginii pe care să facă tranziția. Acest lucru poate fi, de exemplu, pentru a adăuga o culoare de fundal sau de frontieră, la fel ca în exemplul # țintă-test.

Exemplu №1: ascunderea și conținut care arată

Exemplul №2: navigare retractabil

Următorul exemplu este crearea unui slide-out bara de navigare. Am pus un panou de navigare fixat în ceea ce privește domeniul de aplicare, pentru a se asigura că nu salturi după ce utilizatorul face clic.

Exemplul №3: modal fereastră pop-up

putem crea o fereastra modal Dezvoltarea acestei idei, care umple întreaga pagină.

Exemplul №4: schimbarea stiluri globale

Ultimul exemplu nu poate fi numit adevărat în ceea ce privește semantica, este utilizarea de pseudo: țintă la elementul urmată de înlocuirea stiluri și aspect al paginii.

Cum despre semantica și accesibilitatea?

Așa cum am menționat în articolul „link-ul sau butonul.“ folosind elementul browser-ul se așteaptă ca trecerea la o altă pagină sau o altă secțiune a paginii. În exemplele mele (cu excepția ultima), acest lucru este ceea ce se întâmplă. Numai truc este că într-un element normal de stilizuemy de stat este ascuns, ea poyavletsya dinamic doar să se concentreze stat.

În ceea ce pot spune, această metodă are două dezavantaje potențiale:

  1. Schimbarea URL-ul, care poate afecta istoria browser-ului. Acest lucru înseamnă că, atunci când utilizatorul „înapoi“, el poate merge din neatenție la elementul țintă.
  2. utilizatorii sunt rugați să meargă pentru a închide elementul țintă la un alt element sau pur și simplu un #. Ultima opțiune (pe care le folosesc în exemplele mele) nu este semantic și poate redirecționa utilizatorul spre partea de sus a articolului, la care utilizatorul poate să nu fie gata.