De la autor: articol al invitatului nostru, Peter Businessmans. Peter este un dezvoltator front-end la Audience, unde îi place să scrie stiluri în SCSS. Astăzi el ne va arăta ceea ce eu numesc un truc CSS sincer. Întregul web este vertical. Citiți site-ul ca pe o carte obișnuită: de la stânga la dreapta, de sus în jos. Dar uneori vrei să scapi de verticalitate și să faci ceva nebunesc: fă o listă orizontală. Sau chiar mai nebunesc, un site orizontal!

Ar fi bine dacă am putea face așa ceva:

/* cod fals */ div (direcția de defilare: orizontală; )

Din păcate, acest lucru nu se va întâmpla. Acest lucru nici măcar nu este planificat în CSS.

Acest lucru este rău pentru că compania pentru care lucrez ar folosi cu adevărat acest lucru. Facem o mulțime de prezentări, iar prezentarea este un lucru destul de orizontal. De obicei, raportul de aspect al diapozitivelor este 4:3 sau 16:9. Din acest motiv, avem o problemă continuă cu slide-urile orizontale și tehnologiile web verticale. Prin „noi” mă refer la mine. Dar ceea ce iubesc sunt provocările.

Un alt caz de utilizare

Mi-a venit în minte o metodă specifică de aplicare. Ideea este că ar fi convenabil pentru clienți să vadă toate produsele pe un singur slide. Desigur, catalogul de produse nu s-ar încadra într-o singură formă. Prin urmare, am decis să împărțim catalogul în trei categorii, fiecare cu defilare orizontală. Astfel, cele mai populare trei produse sunt vizibile în fiecare categorie, în timp ce produsele mai puțin importante sunt ușor accesibile.

Metodă fără JavaScript

Știm cu toții că există multe moduri de a face derulare orizontală în JS. Există câteva exemple despre CSS-Tricks. Mă întrebam dacă această idee ar putea fi implementată folosind CSS pur. Soluția s-a dovedit a fi foarte simplă:

creați un container cu elemente;

rotiți recipientul cu 90 de grade în sens invers acelor de ceasornic, astfel încât marginea inferioară să fie pe dreapta;

Rotim elementele din interiorul containerului înapoi la locul lor.

Pasul 1) creați un container

Creați un div cu mulți copii.

În exemplul nostru, containerul care poate fi derulat va avea o lățime de 300 px și va avea 8 elemente de 100 x 100 px. Dimensiunile sunt arbitrare, puteți seta oricare.

Înălțimea recipientului va deveni lățimea și invers. Mai jos, „lățimea” containerului va fi de 300 px:

Înveliș cu defilare orizontală ( lățime: 100 px; înălțime: 300 px; overflow-y: automat; overflow-x: ascuns; )

Și elemente copil:

Orizontal-scroll-wrapper > div ( lățime: 100 px; înălțime: 100 px; )

Pasul 2) rotiți recipientul

Acum trebuie să rotim containerul cu -90 de grade folosind proprietatea de transformare CSS. Avem un scroller orizontal.

Înveliș cu defilare orizontală ( ... transformare: rotire (-90 de grade); origine-transformare: dreapta sus; )

Există doar o mică problemă: elementele copil s-au rotit cu containerul.

Pasul 3) readuceți elementele copil înapoi la locul lor

Deci, cum readuceți elementele la locul lor? Întoarceți-l folosind proprietatea de transformare CSS.

Orizontal-scroll-wrapper > div ( ... transformare: rotire(90deg); origine-transformare: dreapta sus; )

Pasul 4) Poziționare fixă

Totul arată bine, dar există câteva probleme.

Am rotit containerul și am stabilit colțul din dreapta sus ca ancoră, ceea ce a făcut ca partea stângă să se deplaseze la lățimea containerului. Dacă vă este greu să vă imaginați, plasați degetul în colțul din dreapta sus al paginii și rotiți-l. Ieșire: trebuie să îl întoarceți utilizând proprietatea translate.

Deja mai bine. Dar primul element nu este încă vizibil, deoarece aceeași problemă se observă și cu elementele copil. Acest lucru poate fi remediat dând primului element copil o marjă de sus cu valoarea lățimii sale sau transformând toate elementele ca un container. Cea mai ușoară modalitate pe care am găsit-o este să adaug o umplutură superioară la container egală cu lățimea elementelor copil, creând astfel o zonă tampon pentru elemente.

Compatibilitate

Am verificat compatibilitatea pe dispozitivele disponibile pentru mine.

Desktop

Deoarece stilul barei de defilare funcționează în prezent numai în browserele Webkit/Blink, o bară de defilare gri obișnuită este afișată în Firefox și IE. Acest lucru poate fi corectat folosind JS și ascunzându-le cu totul, dar acesta este un subiect pentru o altă lecție.

Derularea cu rotița mouse-ului funcționează excelent pe desktop. Dar laptopul meu are propria sa opinie în această privință. Pe dispozitivele cu ecrane tactile și touch pad-uri, demonstrația se comportă ca și cum div-ul nu ar fi fost rotit deloc.

Dispozitive mobile

Am fost plăcut surprins să aflu că Android recunoaște că containerul a fost rotit și vă permite să derulați glisând la stânga și la dreapta.

Cu iOS, dimpotrivă, totul nu este atât de lin. Browserul se comportă ca și cum containerul nu ar fi fost rotit deloc. Prin urmare, pentru a derula trebuie să glisați în sus și în jos, ceea ce este destul de ciudat. Overflow: ascuns nu rezolvă problema.

Concluzie

Potrivit site-ului web Can I Use, transformările în CSS sunt acum suportate de peste 93% dintre utilizatori (la momentul scrierii, noiembrie 2016). Nu ar trebui să fie o problemă aici.

Deși este mai bine să nu utilizați această metodă în producție. L-am testat pe unele dispozitive, dar nu pe toate și nu la fel de amănunțit.

Cea mai mare problemă o reprezintă intrările tactile, în care trebuie să glisați în sus și în jos pentru a merge la stânga și la dreapta. O soluție ar putea fi să scrii un mesaj pe site cu o explicație, dar atunci ar trebui să te bazezi pe utilizatori pentru a-l citi. Și chiar și atunci va fi contrar bunului simț. O altă soluție este capturarea intrărilor tactile folosind JS pe dispozitive, dar apoi este mai bine să scrieți totul în JS și să abandonați complet hack-ul nostru CSS.

Să ne uităm la modul în care regula de depășire CSS (folosind valorile sale ascunse, vizibile, de defilare și automate) poate controla conținutul dacă nu se încadrează în zona dorită.

În practică (în timpul aspectului sau al editării), astfel de situații apar adesea, așa că acest lucru va fi util pentru mulți. Mai mult, pe parcurs vom atinge variații ale acestei proprietăți overflow-x și overflow-y, care sunt un caz special și au propriile lor caracteristici. Să atingem, de asemenea, regula aferentă de depășire a textului, care determină modul de vizibilitate al textului într-un bloc care se extinde dincolo de granițele elementului.

Desigur, în multe cazuri este imposibil să se facă fără a specifica dimensiunile specifice ale zonei folosind lățimea și înălțimea (lățimea și înălțimea blocului), care pot lua . În general, vom lua în considerare mai jos exemple de acțiune a proprietății overflow în toate variantele posibile.

Overflow (vizibil, ascuns) - conținut vizibil sau ascuns al unui bloc care se extinde dincolo de granițele sale

Mai întâi, urmând tradiția, să ne uităm la ce valori sunt în vigoare în tabelul de specificații W3C (datele se bazează pe CSS2.1, deși sunt valide și acceptate în CSS3 mai nou):

După cum puteți vedea, overflow are 4 parametri principali (vizibil, ascuns, automat, scroll) și valoarea de moștenire, care poate fi atribuită dacă se dorește, dar implicit această regulă nu este moștenită ( moștenit: nuîn captură de ecran). Valoarea implicită este vizibilă (inițial: vizibil).

Înainte de a intra în studiu prin studii de caz, să clarificăm câteva detalii. După cum am menționat mai sus, regula de depășire vă permite să controlați conținutul unui element bloc în cazurile în care acesta nu se încadrează în limitele sale. Aceasta rezultă direct din numele acestei reguli CSS (overflow în engleză înseamnă overflow, exces.)

În prealabil, vă puteți familiariza cu ce constă, urmând link-ul furnizat. În plus, ar fi util să aruncăm o privire asupra materialului despre, care oferă elementelor din blocul de pagină caracteristici.

Să luăm containerul DIV ca exemplu (mai multe despre div-uri ca bază pentru aspectul blocului), colorați-l folosind fundalul, prin atributul stil și plasați textul arbitrar în interior:

Rezultatul final va fi cam așa:

Nu am definit lățimea containerului. În acest caz, dacă vă amintiți, elementul bloc ocupă tot spațiul disponibil în lățime. Dar înălțimea blocului, dacă nu este specificată, este determinată tocmai de conținut (în exemplul nostru, textul prezent acolo).

Regula de depășire pentru blocurile care conțin conținut care nu poate fi distribuit în înălțime

Mai sus am oferit un exemplu în care un element de bloc conține text care, dacă lățimea este limitată, poate fi redistribuit (prin schimbarea împachetarii cuvintelor). Acest lucru este acum valabil mai ales atunci când utilizați designul adaptiv pentru vizionarea pe telefoanele mobile. Cu toate acestea, se întâmplă ca conținutul, dintr-un motiv sau altul, să nu aibă o asemenea flexibilitate.

Să începem cu aceleași condiții ca în exemplul discutat mai sus. După cum vă amintiți, atunci când specificați o lățime fixă ​​a blocului, conținutul a fost redistribuit în așa fel încât să nu depășească chenarul orizontal, dar, în același timp, a crescut înălțimea containerului (împreună cu conținutul) pe verticală. Acum să schimbăm conținutul și să înlocuim textul standard cu cuvinte lungi fără spații care să indice lățimea:

Vă rugăm să rețineți că conținutul depășește imediat limitele orizontale atunci când lățimea este limitată. Și dacă scriem overflow ascuns, vom tăia astfel conținutul:

Adăugarea defilării utilizând parametrii de defilare și automat ai regulii de depășire

Acum să ne uităm la cazul în care lățimea și înălțimea recipientului sunt fixe, dar este indicat să lăsați accesibil conținutul care nu se încadrează în el. Să luăm același exemplu cu lățime și înălțime fixe, dar pentru claritate vom seta valoarea înălțimii la 60px adăugând overflow: defilare la stiluri CSS:

Ca rezultat, barele de defilare au apărut vertical și orizontal:

Astfel, conținutul devine accesibil, chiar dacă prin derulare. Cu toate acestea, vă rugăm să rețineți că nu s-a format doar derularea verticală, care este necesară pentru vizualizarea completă, ci și derularea orizontală, care nu este activă. Aceasta este o caracteristică a valorii de defilare.

Aș dori să remarc că regula stilului de bază are variații sub formă de overflow-x și overflow-y, care iau aceleași valori (vizibil, ascuns, scroll, auto) ca și overflow de bază, doar parametrii specificați sunt aplicat continutului blocurilor orizontal ( x) si vertical (y).

Regula de depășire a textului CSS (clip, puncte de suspensie).

Acum să ne familiarizăm cu modificarea proprietății de overflow descrisă mai sus, care a apărut doar în CSS3. Informații despre aceasta pot fi găsite pe pagina oficială corespunzătoare (proiectul editorial W3C):

Proprietate text-debordare are 2 semnificații principale (clip și elipse). Are efect numai dacă este specificată overflow, o valoare diferită de vizibilă. Și acesta, după cum vă amintiți, este parametrul implicit, astfel încât stilurile pentru elementul corespunzător trebuie să aibă un overflow cu ascuns, scroll sau auto.

Clip este valoarea implicită și pur și simplu decupează textul. Prin urmare, să folosim text-overflow pentru DIV-ul nostru cu proprietățile CSS corespunzătoare, adăugând white-space:nowrap (pentru a dezactiva împachetarea cuvintelor):

După cum puteți vedea, punctele de suspensie vă permit să adăugați puncte de suspensieîn loc de text decupat, sugerând continuarea acestuia. Pentru a da acestui exemplu o concluzie logică, puteți adăuga o pseudo-class:hover pentru div, care schimbă stilul elementului atunci când treceți cu mouse-ul peste el:

Class1:hover (overflow:vizibil; spatiu alb:normal;)

Acum textul va fi decupat, dar dacă treceți mouse-ul peste el, va apărea complet. Puteți verifica acest lucru urmând linkul furnizat.

Instrucțiuni

Utilizați o etichetă div dacă aveți nevoie de o bară de derulare nu pentru întreaga pagină, ci doar pentru o zonă limitată a acesteia. În HTML (HyperText Markup Language), „etichetele” se referă la comenzi individuale pentru browser pentru a afișa un anumit element de pagină. În forma sa cea mai simplă, o etichetă div (numită adesea „strat”) arată astfel: