Tabelele de pe CSS pot, dar

Pseudo-clasa țintă

Dacă în adresă URL apare un hashtag, care se potrivește cu valoarea identificatorului unui element din pagină, atunci apare o defilare.

Cu ajutorul acestei pseudo-clase, nu puteți doar să vă mutați în diferite părți ale articolelor, ci și să schimbați stilurile.

De exemplu, să presupunem că există un marcaj următor:

Utilizatorul primește un link de la colegul care conține tagul hash (ceea ce este după grila #) și dă clic pe el:

În acest moment, browserul încarcă pagina și trece imediat la începutul elementului țintă. Sunt de acord că este destul de convenabil.

Cu toate acestea, utilizarea cea mai interesantă a acestei clase pseudo-clase este capacitatea de a aplica stiluri elementului țintă. De exemplu, puteți modifica culoarea textului antetului, care este elementul țintă:

De asemenea, utilizând selectorii în CSS, puteți gestiona elementele vecine, copil și elementele conexe:

Desigur, clasa este dată aici doar pentru un exemplu - nimeni nu interzice să se adreseze imediat selectorului prin etichetă:

Mai multe informații despre pseudo-clasa țintă pot fi obținute din aceste materiale:

Inspecția inițială

Cred că nu este un secret pentru nimeni cum sunt structurate filele. Dar, totuși, voi aminti esența: utilizatorul face clic pe titlul fila și afișează în mod miraculos conținutul.

O miniatură tipică a filelor arată astfel:

Problema este că nu-mi plac soluțiile existente. Familiar? Da, dar aici totul este ceva mai complicat, deoarece nu există soluții în CSS care să poată fi copiate din proiect în proiect.

Deci, ce am nevoie de tab-uri:

Cu toate acestea, înainte de a începe să rezolvați, trebuie să listați toate metodele de organizare a filelor pe CSS:

Variante cu hover și focus Nu-mi place. Nu le voi mai menționa în articol.

punerea în aplicare

Să începem prin rezolvarea problemei că folosirea clasei pseudo-țintă ne permite să defilați la elementul țintă.

Inițial, articolul avea o poveste despre cum am ajuns la o decizie, dar în cele din urmă încă nu va mai fi aici. Nu este interesant ocupația - de a spune ceea ce se dovedește a fi logic și destul de simplu.

Pentru a scapa de defilare, este necesar ca elementul țintă să seteze proprietatea afișajului și să-i atribuie valoarea niciunei. Teoretic, avem faptul că elementul este, de fapt, în DOM și că defila la acesta ar trebui să funcționeze, dar deoarece avem proprietatea afișajului. atunci nu puteți calcula coordonatele elementului. Nu știu dacă este adevărat, dar funcționează.

Prin urmare, nu ne vom referi la fila în sine, ci la un bloc adițional care este direct în fața acestuia. Sly? De asemenea, am crezut acest lucru când am petrecut două ore din viața mea în căutarea unei soluții.

Am dat doar două file din trei. Cred că structura este extrem de clară și nu necesită o explicație.

Clasa predefinită specifică fila afișată în mod implicit. Blocul care precede blocul cu element de clasă. este blocul său de control.

Este minunat, ca totul funcționează:

Uită-te la exemplul de pe CodePen.

Notă, am definit în mod specific cea de-a doua filă afișată în mod implicit. Cum înțelege utilizatorul că este acum activ? Despre asta mai târziu.

Există diferite opțiuni pentru implementarea acestei tehnici. Dar, dintr-o dată, voi spune că în multe dintre ele există o legătură rigidă între markup și CSS.

Problema este că nu puteți suspenda animația în prima filă, deoarece există întotdeauna. Prin urmare, este necesar să lucrați numai cu acele file selectate de utilizator și între timp încercați să întunecați prima filă.

Poate că sunt prea leneș să mă gândesc, dar nu m-am gândit la nimic mai bine decât asta:

Sfârșitul bucuriei

Pe aceste strigăte pline de bucurie pot fi tăcute, deoarece problemele acestei metode sunt:

Toate tranzițiile în tutun se reflectă în istorie.
Prima filă este afișată întotdeauna.
Este destul de dificil să alegeți animația deoarece prima filă este afișată întotdeauna.
O realizare teribilă a evidențierii filelor active.

Dar astfel de probleme sunt lipsite de metoda de organizare a filelor, folosind elemente de intrare și o pseudo-clasă: verificate. Desigur, cu excepția ultimului punct. De exemplu, organizarea filelor de comutare logică se face astfel:

Problema cu lansarea filei active este serioasă. Dar există până la patru soluții:

Adăugați un alt element țintă, dar înainte de fiecare legătură este nonsens.
Structura plat a widget-ului și legarea completă a CSS-ului cu structura - nu vreau.
Structură aproape plană, legată de structura CSS - nu vreau.
Poziționarea absolută a filelor - nu, va exista groază.

În acest caz, avem un cod de rahat, pe care îl veți visa în fiecare zi și vă vom aminti de inutilitatea voastră.

Suport pentru browser

Mergem la Pot să folosesc și să văd o imagine minunată cu privire la pseudo-clasele de țintă și primul copil.

Testează folosind BrowserStack pentru a funcționa în IE9 și suntem bucuroși că totul este afișat corect.

Când să folosești filele pe CSS?

Întrebare destul de interesantă, având în vedere că ați citit aproape întregul articol înainte de asta despre cum să faceți file cu CSS. Voi încerca să răspund.

Cea mai gravă parte a articolului

Probabil, însumând, vreau să-mi pun o singură întrebare și să încerc să o răspund cât mai cinstit: "A fost jocul meritat lumânarea?"

Și răspunsul meu la asta nu este.

Vedeți, orice ar putea spune, filele de pe țintă vor da rezultate la fila de intrare. Problema este că:

Trebuie să arătăm cumva conținutul primei cârje de tabă.
Probleme cu animația din cauza primului element - o cârjă.
Soluția problemei cu defilarea la elementul țintă este o cârpă.

Este greu să spui ceva inteligibil. Nu știu. Am găsit multe implementări diferite ale filelor pe CSS și nici una nu îndeplinește cerințele mele complet. Sunt gata să accept că nu voi fi evidențiat de tab-urile active, va exista o implementare slabă a animației, dar exact până când designerul prietenului nostru decide să o facă.

Dacă designerul dvs. prieten a decis să le evidențieze, atunci aveți două opțiuni:

Furați de aici 4 metode CSS3 Tabbed Content tabs (care le place) și frustrează legătura rigidă a structurii layout și CSS.
Folosiți JS.

Voi clarifica faptul că în articolul "4 Metode CSS3 Tabbed Content" există o legare a logicii de comutare a taburilor și marcarea lor, care nu corespunde cerințelor mele. Logica cu adăugarea de file noi prin CSS este bună în cazul în care filele nu se pot modifica mult timp și / sau nu sunt create automat.

Ușor de întreținut.
Sunt flexibile toate filele pe CSS.
Nu produceți marcare suplimentară.
Utilizați mai multe marcări corecte semantic.
Nu există deficiențe în filele de pe CSS.

Și, în sfârșit, voi pune două întrebări care se vor referi la cititorul indiferent după citirea acestui articol:

Și ce folosești?
Ce părere aveți despre filele CSS?

Vă mulțumim că ați citit până la sfârșit.

Împărtășim pentru găzduire sau pentru cafea.
Cu cât beau mai mult cafea, cu atât mai mult scriu articole.

Articole similare

Pagina anterioară

Pagina următoare