De la autor: un articol al invitatului nostru, Peter Bismens. Peter este un dezvoltator front-end la Audience, unde îi place să scrie stiluri în SCSS. Astăzi ne va arăta ceea ce eu numesc un truc CSS sincer. Întregul web este vertical. Citiți site-ul ca pe o carte normală: 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 nu este nici măcar în planurile în CSS.

Acest lucru este foarte rău, pentru că în compania în care lucrez mi-ar fi foarte util. Facem o mulțime de prezentări, iar o prezentare 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ă constantă cu slide-urile orizontale și tehnologiile web verticale. Prin „noi” mă refer la mine însumi. Dar ceea ce îmi place este dificultatea.

Un alt caz de utilizare

Am venit cu o aplicație anume. Ideea este că ar fi convenabil pentru cumpărători să vadă toate produsele pe un singur slide. Desigur, catalogul de mărfuri nu s-ar încadra într-o singură formă. Așa că am decis să împărțim catalogul în trei categorii, fiecare cu derulare 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. Câteva exemple sunt pe CSS-Tricks. Mă întrebam dacă această idee ar putea fi implementată în 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 fața inferioară să fie pe dreapta;

rotiți elementele din interiorul recipientului înapoi la locul lor.

Pasul 1) creați un container

Creați un bloc div cu multe elemente copil.

Î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. Sub „lățimea” containerului va fi 300px:

Î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 împreună cu containerul.

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

Așadar, cum reașezi elementele la locul lor? Rotiți-l înapoi cu proprietatea de transformare CSS.

horizontal-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 pus ancora în colțul din dreapta sus, care a mutat partea stângă cu lățimea containerului. Dacă vă este greu să vă imaginați, puneți degetul în colțul din dreapta sus al paginii și rotiți-l. Ieșire: trebuie să îl rotiți înapoi folosind proprietatea translate.

Deja mai bine. Dar primul element încă nu este vizibil, deoarece aceeași problemă se observă și cu elementele copil. Acest lucru poate fi remediat dând primului element copil o marjă superioară cu lățimea sa sau transformând toate elementele ca un container. Cel mai simplu mod pe care l-am găsit este să adaug o umplutură superioară la container care este 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, Firefox și IE arată o bară de defilare simplă gri. Acest lucru poate fi remediat cu JS și ascuns cu totul, dar acesta este un subiect pentru un alt tutorial.

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 touchpad-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ă un container a fost rotit și vă permite să glisați la dreapta și la stânga.

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

Concluzie

Potrivit Can I Use, transformările CSS sunt suportate în prezent de peste 93% dintre utilizatori (în momentul scrierii acestui articol, noiembrie 2016). Nu ar trebui să fie o problemă aici.

Deși este mai bine să nu folosiți această metodă în producție. L-am testat pe unele dispozitive, dar departe de toate și nu atât de amănunțit.

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

În acest articol, vom analiza în detaliu proprietatea overflow cu toate valorile sale, care vă permite, de asemenea, să adăugați sau să eliminați o bară de defilare orizontală / verticală. Cu alte cuvinte, cum să faci bare de defilare.

Overflow în CSS este responsabil pentru modul în care informațiile din bloc vor arăta dacă conținutul depășește înălțimea sau lățimea acestui bloc. Această proprietate se aplică numai elementelor bloc (display : block ; sau celor care sunt inițial elemente bloc - div și așa mai departe).

Valori posibile pe care le poate lua această proprietate (valorile implicite sunt vizibile):

• Vizibil - Se afișează întregul conținut al elementului, chiar și în afara înălțimii și lățimii setate.
• Ascuns - Numai zona din interiorul elementului este afișată, restul va fi ascuns.
• Defilare - Barele de defilare sunt întotdeauna adăugate.
• Auto - Scrollbars sunt adăugate numai atunci când este necesar.
• Moștenire - Moștenește valoarea părintelui.

Cel mai adesea, această proprietate este folosită pentru a elimina sau adăuga bare de defilare la un element. Așa sunt, de exemplu, manevrate ramele pentru a nu le înghesui la dimensiunea maximă. Sau pentru a introduce un text mare, astfel încât să nu ocupe o jumătate de pagină, ci să se așeze confortabil într-un bloc special și acolo să poată fi derulat și citit. În cea mai mare parte, proprietatea rezolvă problemele de afișare confortabilă a informațiilor.

În demonstrație, puteți vedea cum funcționează în practică fiecare dintre valorile proprietății:

Cod HTML

body (marja: 0 0 0 0; padding: 0 0 60px 0; font-size: 16px;) h2 (culoare:#CC0033;) div ( lățime: 200px; /* lățime fixă ​​*/ înălțime: 300px; /* fix înălțime */ chenar:1px solid #555; padding:4px; margin:4px; float:left; ) .VisibleDiv (overflow:visible;) .HiddenDiv (overflow:hidden;) .ScrollDiv (overflow:scroll;) .AutoDiv ( overflow:auto;)

Merită să acordați atenție faptului că, în acest caz particular, blocurile cu o înălțime și lățime fixă ​​dată. Acest lucru este important, de exemplu, luați în considerare opțiunea când înălțimea blocului este setată la automat:

Vedem că textul în toate cazurile este corect afișat în interiorul blocului, cu excepția unui mic inconvenient în cazul scroll-ului, unde apar bare de defilare inactive.

Dar în acest caz există un mic pericol, întâlnit cu care mulți nu înțeleg de ce a apărut și cum să-l remedieze. Ideea este că dacă un bloc cu overflow : vizibil ; adică valoarea implicită, iar conținutul său are elemente cu orice valoare float, cu excepția none , atunci toate acestea nu vor fi afișate corect. Pentru a înțelege care este această situație, luați în considerare un exemplu:

Sub blocul VisibleDiv se află un alt bloc

Nu există nimic sub blocul VisibleDiv

body (marja: 0 0 0 0; umplutură: 0 0 60px 0; dimensiunea fontului: 16px;) h2 (culoare:#CC0033;) p (float:stânga;) div ( lățime: 500px; înălțime: automat; chenar: 1px solid #555; padding:4px; margin:4px; ) .VisibleDiv (overflow:visible;background: rgba(0,255,0,0.1);) .ignor (fundal: rgba(0,255,0,0.6); culoare:# FFFFFF;greutatea fontului:bold;)

În primul caz, este clar că conținutul cu proprietatea float iese în afara blocului și nu este luat în considerare de acesta la determinarea înălțimii blocului, în al doilea caz, sub blocul cu preaplin : vizibil ; un alt bloc este special plasat și vopsit într-o culoare diferită. Acestea nu sunt singurele exemple despre modul în care astfel de blocuri (cu overflow : vizibil ; și înălțime : auto ; ) se pot comporta pe pagină. Acest lucru se rezolvă prin înlocuirea valorii vizibile cu hidden , rețineți că această proprietate ar trebui specificată doar pentru blocurile cu înălțime : auto ; , dacă există o înălțime fixă, atunci există șanse mari ca conținutul să se ascundă pur și simplu dacă este mai mare decât înălțimea dată.

Iată cum ar arăta versiunea corectată:

De asemenea, nu vei avea o astfel de problemă dacă blocul cu overflow : vizibil ; si inaltime : auto ; este setată și o anumită valoare a proprietății float. În general, în multe cazuri, afișarea elementelor depinde de un set de proprietăți, și nu de proprietăți individuale.

Puteți utiliza overflow-y: derulați pentru a derula vertical.

Uneori este necesar să plasați o bucată mare de text într-o fereastră mică care nu se potrivește complet acolo, pentru a rezolva această problemă este ușor să creați un strat cu derulare - div cu scroll.

Va dura

Strat de dimensiune fixă ​​și stil CSS.

css

Clasa .scroll CSS este setată la 600 px lungime și 300 px înălțime, umplutură, chenar și culoare de fundal. DAR! Cel mai important, overflow:auto setează bara de derulare să apară atunci când cantitatea de text este mai mare decât dimensiunea stratului.

Defilare ( lățime: 500 px; înălțime: 300 px; /* este necesară dimensiunea fixă ​​*/ overflow: automat; /* derulare apare după cum este necesar */ padding: 10px 20px; border:#999 1px solid; background-color:#FAFAFA; )

HTML

Rezultat

Pe ecran veți vedea un cadru mic cu text și un chenar gri.

Cele mai răspândite sunt lichidele de răcire cu etilenglicol pe bază de etilenglicol și apă (distilată) cu un complex de aditivi.

Antigelurile se obțin ca soluții apoase ale concentratelor corespunzătoare. În timpul funcționării, calitatea antigelului poate fi controlată prin densitate. Din lichidul de răcire în timpul funcționării, în primul rând, se evaporă apa, care trebuie completată periodic (distilată). Este necesar să vă asigurați că benzina și uleiurile nu intră în antigel, deoarece provoacă spumare și eliberarea de lichid din sistem.

Durata de viață a lichidelor de răcire precum „Tosol” și „Lena” este limitată de durabilitatea aditivilor și este de obicei de 2 ani; kilometrajul pentru diverse mașini este în medie de 50.000 km.

Când reparați o mașină uzată pentru prima dată, lichidul de răcire trebuie înlocuit. După scurgerea lichidului vechi, umpleți sistemul cu apă curată, porniți motorul și lăsați-l la ralanti timp de 15-20 de minute; apoi scurgeți apa și reumpleți sistemul cu lichid de răcire nou.

Proprietatea overflow controlează afișarea conținutului unui element bloc dacă nu se potrivește în întregime și depășește zona de dimensiune specificată.

informatie scurta

Notaţie

Valori

vizibil Afișează întregul conținut al elementului, chiar și în afara înălțimii și lățimii setate. ascuns Numai zona din interiorul elementului este afișată, restul va fi ascuns. scroll Barele de defilare sunt întotdeauna adăugate. Barele de defilare automate sunt adăugate numai atunci când este necesar.

Cutie cu nisip

Winnie the Pooh nu s-a împotrivit întotdeauna un pic de răcoare, mai ales la ora unsprezece dimineața, pentru că la acea oră micul dejun se terminase de mult, iar cina nici nu se gândise să înceapă. Și, desigur, s-a bucurat teribil să vadă că Iepurele a scos cești și farfurii.

div (înălțime: 80px; overflow: automat; )

Exemplu

Rezultatul acestui exemplu este prezentat în Fig. unu.

Orez. 1. Aplicarea proprietății overflow

Model de obiect

Un obiect.stil.debordare

Notă

Internet Explorer până la versiunea 7.0 inclusiv:

• Elementele copil poziționate relativ, cu overflow setat la automat sau scroll, se comportă ca și cum ar fi setate pe poziție: fixă.

Internet Explorer 8:

• Combinarea depășirii cu valoarea de defilare cu proprietățile max-height și float poate face ca elementele paginii web să dispară, rezultând un ecran gol în browser.
• Pentru un bloc care are proprietățile float și overflow setate la scroll , lățimea setată prin proprietatea max-width este ignorată.
• Înălțimea unei casete cu o bară de derulare orizontală este mărită cu înălțimea barei de derulare, deși specificația CSS specifică că dimensiunile trebuie să includă și barele de defilare.

Firefox 3.6 aplică incorect overflow grupurilor de celule de tabel ( , , ).

Specificație

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare (Recomandare) - specificația este aprobată de W3C și recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar este necesar sprijinul comunității de dezvoltare pentru implementarea standardului.
• Recomandare propusă ( Recomandare sugerată) - în această etapă, documentul este înaintat Consiliului consultativ W3C pentru aprobare finală.
• Proiect de lucru - Un proiect mai matur după discuții și amendamente pentru revizuirea comunității.
• Schița redactorului ( Proiect editorial) este o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• proiect ( Proiectul caietului de sarcini) este prima versiune preliminară a standardului.