Despre un cod

Fila Nav

File de navigare pentru două formulare.

Reactiv: nu

Dependențe: bootstrap.css

Despre un cod

Fila CSS

Browsere compatibile: Chrome, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre un cod

Filele

Selectorul + selectează următorul element adiacent. Din punct de vedere istoric, acest lucru a fost grozav pentru etichetele de stil. Cu grila CSS, un element poate fi lângă altul în marcaj, dar undeva complet diferit în afișare. Acest stilou folosește o intrare simplă: selector bifat combinat cu o mulțime de + "-uri pentru a stila diferite pagini ale unui microsite imaginar.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre un cod

File CSS pure

Versiunea radio a filelor. Cerințe: să nu se bazeze pe ID-uri specifice pentru CSS (CSS-ul nu ar trebui să cunoască ID-uri specifice), flexibil pentru orice număr de file necunoscute, accesibile. Avertismente: deoarece acestea sunt casete de selectare, filele nu pot fi afișate în tab-uri, trebuie să utilizeze tastele săgeți .

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre un cod

File CSS

File verticale CSS pur.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: nu

Dependente: -

Despre un cod

File CSS pure cu indicator

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre un cod

File de tranziție animate

File de tranziție animate cu casete de selectare.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre un cod

File de culoare CSS pur

Fără etichete file de culoare CSS pur.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre un cod

Numai file CSS

Material Design numai file CSS.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre un cod

File CSS3

File CSS3 responsive pur de la Sorax.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre un cod

Controale filelor folosind HTML și CSS

A face clic pe etichete este, de fapt, același lucru cu a face clic pe casetele de introducere. Intrările radio sunt ascunse cu CSS. Când este selectat un radio, apar vecinii curioși ai conținutului filei. Asta este! Singurul dezavantaj este că nu vei putea stila fila selectată fără a apela la niște JS, dar asta nu ar trebui să fie o problemă foarte mare.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

Reactiv: da

Dependente: -

Despre un cod

File CSS pure

Doar HTML și CSS.

Browsere compatibile: Chrome, Edge, Firefox, Opera, Safari

În continuarea postării anterioare despre elementele de selecție a stilului, aș dori să vă spun cum să o faceți complet file adaptive fără a utiliza javascript, poziționare absolută și hack-uri de legături.

Pentru început, aș dori să spun că nu fac apel la abandonarea javascript-ului doar în favoarea CSS; mai jos va fi prezentată doar una dintre modalitățile de implementare a file-urilor. Există multe situații în care această abordare nu ți se potrivește și în care nu te poți descurca fără JS, dar acum nu este vorba despre asta.

Să înțelegem ce vrem să vedem ca rezultat al lucrării și ce cerințe am propus pentru aceasta:

1. Lucrați fără JavaScript,
2. Nu există nicio legătură cu numărul de file (putem folosi un widget pe pagini diferite cu conținut diferit în interior),
3. Adaptabilitate,
4. Compatibilitate maximă între browsere și platforme,
5. Cea mai convenabilă și mai înțeleasă interfață de utilizare,
6. Nu există restricții privind conținutul intern al filelor, fie că este vorba de text, conținut media sau aspect din interiorul filei.

Vizual ar trebui să arate cam așa:

Înainte de a-ți arăta opțiunea file fără JS, aș dori să vorbesc despre câteva opțiuni de implementare pe care le-am găsit în procesul de rezolvare a acestei probleme.

Opțiunea unu

Persoana care a venit cu această metodă fie a vrut în mod clar să-și bată joc de utilizatori, fie este unul dintre vizitatorii Reddit care a creat acele controale de volum foarte „conveniente”. Această abordare mă face nervos.

Esența metodei este următoarea:

Legăturile sunt folosite ca titluri (butoanele în sine) ale filelor, în atributul href, care conține id-ul filei corespunzătoare - un div sau orice alt element. Fila activă este selectată folosind pseudo-class:target .

Funcționează așa:

După cum probabil ați observat, avem câteva probleme la utilizarea acestei metode:

1. Când facem clic pe filă, pagina începe să sară, deoarece browserul ne trimite unde duce acest link. Desigur, acest lucru poate fi evitat, dar fără JS nu există nicio cale.
2. Titlul filei active nu este evidențiat; acest lucru se poate face, dar este extrem de problematic.
3. Inițial, nu există file active (din moment ce încă nu am făcut clic pe linkuri) și trebuie să recurgem la un hack și să activăm a treia filă; selectarea primei în acest fel nu va funcționa.
4. Adaptabilitate foarte controversată: da, filele sunt rearanjate la linie nouă când ecranul se îngustează și conținutul filei se îngustează odată cu acesta, dar nu arată foarte frumos. Această problemă poate fi rezolvată prin interogări media, dar având în vedere că nu vom fi legați de numărul de file, problema va rămâne pe unele dimensiuni de afișare.

Tragem o concluzie justificată: această metodă nu este potrivită pentru noi, deoarece nu va satisface majoritatea cerințelor. Implementarea este groaznică și nu aș recomanda utilizarea acesteia.

Varianta a doua

Aceasta metoda crearea de file fără JavaScript este deja mai practic, deși are și unele probleme în aplicare. Esența metodei este următoarea: caseta de selectare și elementele de etichetă sunt folosite pentru titlurile filelor și folosind pseudo-clasa:checked și încă una element div putem arăta numai conținutul filei active și ascunde toate celelalte:

Introducere filă-wrapper: bifat + etichetă + .tab-element (afișare: bloc;)

Iată cum funcționează:

După cum probabil ați observat, în acest exemplu folosim poziție: absolute; pentru a plasa titlurile filelor în partea de sus și conținutul filelor în partea de jos. Acest lucru creează anumite probleme:

1. Complet inadaptabil. Când schimbați dimensiunile ecranului, filele cad și conținutul filei le acoperă. Acest lucru poate fi remediat: faceți defilarea orizontală a filelor, această soluție are un loc, dar nu prea îmi place.
2. Deoarece folosim poziționarea absolută pentru a afișa conținutul filelor, va trebui să specificăm o înălțime fixă ​​a filelor, altfel acestea se vor suprapune pe conținutul de mai jos (văzut în exemplu), ceea ce înseamnă că nu putem folosi această abordare cu un număr necunoscut anterior de file.

Desigur, în unele cazuri această metodă poate fi folosită, de exemplu, atunci când cunoașteți dinainte numărul de file și cantitatea de conținut din interiorul acestora. Dar căutăm solutie universala, prin urmare această abordare nu este aplicabilă în cazul nostru.

Soluţie

A treia opțiune, care este și soluția, este o modificare a celei de-a doua metode. Funcționează exact la fel, totuși nu vom folosi poziționarea absolută și proprietate de plutire pentru titluri.

ÎN aceasta metoda Folosim flexbox-ul la modă pentru a plasa file și conținutul acestora. Frumusețea flexbox aici este că putem desemna ce elemente să afișam mai întâi și care la sfârșit. Acest lucru se poate face folosind proprietatea de comandă: 1; , care este implicit la zero.

Adaptabilitatea filelor se realizează și prin proprietatea flex flex-grow: 1; , care permite filelor să se întindă pe toată lățimea conținutului, astfel încât să nu ne facem griji cu privire la afișarea unui număr diferit de file. De asemenea, putem plasa conținut de orice și diferite dimensiuni în interiorul fiecărei file, acest lucru nu va afecta afișarea conținutului după ele.

Această abordare funcționează în toate browsere moderne, inclusiv mobil. Dintre proprietățile neobișnuite pentru mulți, este folosit doar Flexbox și a fost mult timp acceptat pe scară largă. ÎN Browsere FireFox, Chrome, Safari și Opera, nu am găsit probleme cu funcționarea filelor.

Puteți verifica această abordare pe jsfiddle sau pe propriile proiecte. M-aș bucura să văd în comentarii și alte propuneri de soluții la această problemă.

Nu cu mult timp în urmă, ne-am uitat la implementarea filelor cu conținut, fără a conecta javascript, folosind exclusiv .
Astăzi vreau să vă prezint o altă soluție, nu mai puțin interesantă, pentru crearea unui bloc compact de file, construit pe CSS3 pur și folosind elemente aspect adaptiv. Ca și în prima variantă, nimic de prisos sau greoi, doar minim cod css, și veți avea la dispoziție un bloc adaptiv cu file comutabile care se va potrivi perfect în orice secțiune a paginii, fie că este un mesaj separat, o coloană laterală sau o fereastră modală.

Ce modificări au fost făcute față de prima versiune?
În primul rând, blocul de file a devenit adaptiv, adică. când vizionați dispozitive mobile, dimensiunea filelor se modifică în funcție de dimensiunea ecranelor dispozitivelor utilizatorului, textul titlurilor este eliminat și rămân doar pictogramele font, indicând sensul conținutului unuia sau altuia.
Pictogramele fonturilor sunt din , colecția este foarte bogată și, în plus, absolut gratuită. Puteți integra pictograme în orice proiect utilizând un set descărcat de fonturi sau le puteți conecta la fișierul stil CSS direct de pe site-ul dezvoltatorului prin @import folosind următoarea linie:

@import url ("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

În exemplul demonstrativ, asta este exact ceea ce am făcut, așa că, uitându-vă la codul sursă, vă puteți da seama cu ușurință ce este.
Structura file-urilor din Html este destul de simplă. Container div de bază, link și direct secțiuni