Od autora:članak našeg gosta, Petera Bismensa. Peter je front-end programer u Audience, gdje uživa u stilovima pisanja u SCSS-u. Danas će nam pokazati ono što ja zovem poštenim CSS trikom. Cijela mreža je okomita. Čitate stranicu kao normalnu knjigu: s lijeva na desno, odozgo prema dolje. Ali ponekad poželite da se udaljite od vertikalnosti i učinite nešto ludo: napravite horizontalnu listu. Ili još luđe, horizontalna stranica!

Bilo bi lijepo kada bismo mogli uraditi nešto ovako:

/* lažni kod */ div (smjer pomicanja: horizontalno; )

Nažalost, to se neće dogoditi. Ovo čak nije ni u planovima u CSS-u.

To je jako loše, jer bi u kompaniji u kojoj radim bilo jako korisno. Radimo puno prezentacija, a prezentacija je prilično horizontalna stvar. Obično je omjer stranica 4:3 ili 16:9. Zbog toga imamo stalni problem sa horizontalnim slajdovima i vertikalnim web tehnologijama. Pod "mi" mislim na sebe. Ali ono što volim je poteškoća.

Još jedan slučaj upotrebe

Smislio sam konkretnu aplikaciju. Ideja je da bi kupcima bilo zgodno da vide sve proizvode na jednom slajdu. Naravno, katalog robe ne bi stao u jedan oblik. Stoga smo odlučili podijeliti katalog u tri kategorije, svaka s horizontalnim pomicanjem. Tako su tri najpopularnija proizvoda vidljiva u svakoj kategoriji, dok su manje važni proizvodi lako dostupni.

Metoda bez JavaScripta

Svi znamo da postoji mnogo načina za horizontalno pomicanje u JS-u. Neki primjeri su na CSS-trikovima. Pitao sam se da li se ova ideja može implementirati u čistom CSS-u. Ispostavilo se da je rješenje vrlo jednostavno:

kreirajte kontejner sa elementima;

okrenite posudu za 90 stepeni u smeru suprotnom od kazaljke na satu tako da donja strana bude na desnoj strani;

vratite elemente unutar kontejnera na svoje mjesto.

Korak 1) kreirajte kontejner

Kreirajte div blok sa mnogo podređenih elemenata.

U našem primjeru, kontejner koji se može pomicati bit će širok 300px i imat će 8 elemenata od 100x100px. Dimenzije su proizvoljne, možete postaviti bilo koje.

Visina kontejnera će postati širina i obrnuto. Ispod "širine" kontejnera će biti 300px:

Horizontal-scroll-wrapper (širina: 100px; visina: 300px; overflow-y: auto; overflow-x: skriven; )

I podređeni elementi:

Horizontal-scroll-wrapper > div (širina: 100px; visina: 100px; )

Korak 2) rotirajte kontejner

Sada moramo rotirati kontejner za -90 stepeni koristeći CSS svojstvo transform. Imamo horizontalni skroler.

Horizontalni-scroll-wrapper (... transform: rotate(-90deg); transform-origin: desni vrh; )

Samo postoji jedan mali problem: podređeni elementi su se rotirali zajedno sa kontejnerom.

Korak 3) vratite podređene elemente na njihova mjesta

Kako onda vratiti elemente na njihova mjesta? Rotirajte ga nazad sa svojstvom CSS transformacije.

horizontal-scroll-wrapper > div ( ... transform: rotate(90deg); transform-origin: desno gore; )

Korak 4) fiksno pozicioniranje

Sve izgleda dobro, ali ima par problema.

Zarotirali smo kontejner i postavili sidro u gornji desni ugao, koje je pomaknulo lijevu stranu za širinu kontejnera. Ako vam je to teško zamisliti, samo stavite prst na gornji desni ugao stranice i rotirajte ga. Izlaz: trebate ga rotirati nazad koristeći svojstvo translate.

Već bolje. Ali prvi element još uvijek nije vidljiv, jer se isti problem uočava i sa podređenim elementima. Ovo se može popraviti tako da se prvom podređenom elementu da gornja margina sa njegovom širinom ili transformacijom svih elemenata poput kontejnera. Najlakši način koji sam pronašao je da dodam gornji padding u kontejner koji je jednak širini podređenih elemenata, stvarajući tako tampon zonu za elemente.

Kompatibilnost

Provjerio sam kompatibilnost na uređajima koji su mi dostupni.

Desktop

Pošto stil trake za pomeranje trenutno funkcioniše samo u Webkit/Blink pretraživačima, Firefox i IE prikazuju običnu sivu traku za pomeranje. Ovo se može popraviti pomoću JS-a i potpuno sakriti, ali to je tema za drugi vodič.

Pomicanje pomoću kotačića miša odlično funkcionira na desktopu. Ali moj laptop ima svoje mišljenje o ovom pitanju. Na uređajima sa ekranima osetljivim na dodir i tačpedima, demo se ponaša kao da div uopšte nije rotiran.

Mobilni uređaji

Bio sam ugodno iznenađen kada sam saznao da Android prepoznaje da je kontejner rotiran i omogućava vam da prevlačite desno i lijevo.

Sa iOS-om, naprotiv, stvari nisu tako glatke. Pretraživač se ponaša kao da se kontejner uopće nije rotirao. Stoga, morate koristiti prelaske nagore i nadole za skrolovanje, što je prilično čudno. Overflow: skriveno ne rješava problem.

Zaključak

Prema Can I Use, CSS transformacije sada podržava 93%+ korisnika (od ovog pisanja, novembar 2016.). Ovdje ne bi trebalo biti problema.

Iako je bolje ne koristiti ovu metodu u proizvodnji. Testirao sam ga na nekim uređajima, ali daleko od svih i ne tako temeljito.

Najveći problem su dodirni ulazi, gdje morate prevlačiti gore-dolje da biste išli lijevo-desno. Rješenje bi bilo da napišete objavu na stranici s objašnjenjem, ali tada se morate osloniti na korisnike da je pročitaju. A čak i tada će biti u suprotnosti sa zdravim razumom. Drugo rješenje je hvatanje dodirnih unosa pomoću JS-a na uređajima, ali onda je bolje sve napisati u JS-u i potpuno napustiti naš CSS hak.

U ovom članku ćemo detaljno analizirati svojstvo overflow sa svim njegovim vrijednostima, koje vam također omogućava dodavanje ili uklanjanje horizontalne/vertikalne trake za pomicanje. Drugim riječima, kako napraviti trake za pomicanje.

Overflow u CSS-u je odgovoran za to kako će informacije u bloku izgledati ako sadržaj premašuje visinu ili širinu ovog bloka. Ovo svojstvo se odnosi samo na blok elemente (display : block ; ili one koji su inicijalno blok elementi - div i tako dalje).

Moguće vrijednosti koje ovo svojstvo može imati (zadana vrijednost je vidljiva):

• Vidljivo - prikazuje se cijeli sadržaj elementa, čak i izvan postavljene visine i širine.
• Skriveno - Samo područje unutar elementa je prikazano, ostalo će biti skriveno.
• Scroll - trake za pomicanje se uvijek dodaju.
• Automatski - trake za pomicanje se dodaju samo kada su potrebne.
• Naslijediti - Nasljeđuje vrijednost roditelja.

Najčešće se ovo svojstvo koristi za uklanjanje ili dodavanje traka za pomicanje nekom elementu. Ovako se, na primjer, rukuje okvirima da se ne bi nagurali u punoj veličini. Ili da ubacite neki veliki tekst tako da ne zauzima pola stranice, već da se udobno smjesti u poseban blok, i tamo se može listati i čitati. Uglavnom, nekretnina rješava probleme udobnog prikaza informacija.

U demonstraciji možete vidjeti kako svaka od vrijednosti svojstva funkcionira u praksi:

HTML kod

tijelo (margina:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (boja:#CC0033;) div ( širina:200px; /* fiksna širina */ visina:300px; /* fiksna visina */ border:1px solid #555; padding:4px; margin:4px; float:left; ) .VisibleDiv (overflow:visible;) .HiddenDiv (overflow:hidden;) .ScrollDiv (overflow:scroll;) .AutoDiv ( overflow:auto;)

Vrijedno je obratiti pažnju na činjenicu da su u ovom konkretnom slučaju blokovi sa datom fiksnom visinom i širinom. Ovo je važno, na primjer, razmotrite opciju kada je visina bloka postavljena na auto:

Vidimo da je tekst u svim slučajevima ispravno prikazan unutar bloka, osim male neugodnosti u slučaju scroll , gdje se pojavljuju neaktivne trake za pomicanje.

Ali u ovom slučaju postoji mala opasnost, susrevši se s kojom mnogi ne razumiju zašto je nastala i kako to popraviti. Poenta je da ako je blok sa overflow: vidljiv; to jest, zadana vrijednost, a njegov sadržaj ima elemente sa bilo kojom float vrijednošću osim none , onda sve ovo neće biti ispravno prikazano. Da biste razumjeli kakva je ova situacija, razmotrite primjer:

Ispod bloka VisibleDiv je još jedan blok

Nema ničega ispod bloka VisibleDiv

tijelo (margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;) h2 (boja:#CC0033;) p (float:left;) div ( width:500px; visina:auto; granica: 1px solid #555; padding:4px; margin:4px; ) .VisibleDiv (overflow:visible;background: rgba(0,255,0,0.1);) .ignor (background: rgba(0,255,0,0.6); color:# FFFFFF;font-weight:bold;)

U prvom slučaju, jasno je da sadržaj sa svojstvom float izlazi izvan bloka i ne uzima se u obzir pri određivanju visine bloka, u drugom slučaju ispod bloka sa overflow : visible ; drugi blok je posebno postavljen i ofarban u drugu boju. Ovo nisu jedini primjeri kako se takvi blokovi (s overflow : visible ; i height : auto ; ) mogu ponašati na stranici. Ovo je popravljeno zamjenom vidljive vrijednosti sa hidden, zapamtite da ovo svojstvo treba specificirati samo za blokove s visinom: auto; , ako postoji fiksna visina, onda postoji velika šansa da će se sadržaj jednostavno sakriti ako je veći od date visine.

Evo kako bi ispravljena verzija izgledala:

Također, nećete imati takav problem ako je blok sa overflow : vidljiv ; i visina: auto; određena je vrijednost svojstva float. Općenito, u mnogim slučajevima prikaz elemenata ovisi o skupu svojstava, a ne o pojedinačnim svojstvima.

Možete koristiti overflow-y: skrolujte da biste se pomerali okomito.

Ponekad je potrebno postaviti veliki komad teksta u mali prozor koji tu ne stane u potpunosti, da biste riješili ovaj problem lako je kreirati sloj sa pomicanjem - div sa skrolom.

Trebaće

Sloj fiksne veličine i CSS stil.

css

.scroll CSS klasa je postavljena na 600px dužine i 300px visine, padding, ivica i boja pozadine. ALI! Što je najvažnije, overflow:auto postavlja traku za pomicanje da se pojavi kada je količina teksta veća od veličine sloja.

Pomicanje (širina:500px; visina:300px; /* potrebna je fiksna veličina */ overflow:auto; /* pomicanje se pojavljuje po potrebi */ padding:10px 20px; granica:#999 1px čvrsta; background-color:#FAFAFA; )

HTML

Rezultat

Na ekranu ćete videti mali okvir sa tekstom i sivim okvirom.

Najrasprostranjenije su etilen glikol rashladne tečnosti na bazi etilen glikola i vode (destilirane) sa kompleksom aditiva.

Antifrizi se dobijaju kao vodeni rastvori odgovarajućih koncentrata. Tokom rada, kvalitet antifriza se može kontrolisati gustinom. Iz rashladnog sredstva tokom rada, prije svega, isparava voda, koju treba povremeno dopunjavati (destilirati). Potrebno je osigurati da benzin i ulja ne dođu u antifriz, jer uzrokuju pjenjenje i oslobađanje tečnosti iz sistema.

Vijek trajanja rashladnih tekućina kao što su "Tosol" i "Lena" ograničen je izdržljivošću aditiva i obično je 2 godine; kilometraža za razne automobile u prosjeku iznosi 50.000 km.

Prilikom prvog servisiranja rabljenog automobila potrebno je zamijeniti rashladnu tečnost. Nakon što ispraznite staru tečnost, napunite sistem čistom vodom, pokrenite motor i ostavite ga da radi u praznom hodu 15-20 minuta; zatim ispustite vodu i napunite sistem novom rashladnom tečnošću.

Svojstvo overflow kontrolira prikaz sadržaja elementa bloka ako se ne uklapa u potpunosti i prelazi područje navedenih dimenzija.

kratke informacije

Notacija

Vrijednosti

vidljivo Prikazuje cijeli sadržaj elementa, čak i izvan postavljene visine i širine. skriveno Samo područje unutar elementa je prikazano, ostalo će biti skriveno. Scroll Trake za pomicanje se uvijek dodaju. auto Scrollbars se dodaju samo kada je potrebno.

Sandbox

Winnie the Pooh uvijek nije bio nesklon malo osvježenja, posebno u jedanaest sati ujutro, jer je u to vrijeme doručak već odavno bio završen, a večera nije ni pomišljala da počne. I, naravno, užasno mu je bilo drago kada je vidio da Zec vadi šolje i tanjire.

div (visina: 80px; overflow: auto; )

Primjer

Rezultat ovog primjera prikazan je na sl. jedan.

Rice. 1. Primjena svojstva overflow

Objektni model

Objekt.style.overflow

Bilješka

Internet Explorer do verzije 7.0 uključujući:

• Relativno pozicionirani podređeni elementi s prelivanjem postavljenim na auto ili pomicanje ponašaju se kao da su postavljeni na položaj: fiksno.

Internet Explorer 8:

• Kombinovanje prelivanja sa vrednošću pomeranja sa svojstvima max-height i float može dovesti do nestanka elemenata veb stranice, ostavljajući prazan ekran u pretraživaču.
• Za blok koji ima svojstva float i overflow postavljena na pomicanje, širina postavljena preko svojstva max-width se zanemaruje.
• Visina bloka sa horizontalnom trakom za pomeranje povećava se za visinu trake za pomeranje, iako CSS specifikacija navodi da date dimenzije treba da uključuju i trake za pomeranje.

Firefox 3.6 pogrešno primjenjuje prelivanje na grupe ćelija tabele ( , , ).

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

• Preporuka (Recommendation) - specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka) - grupa odgovorna za standard je zadovoljna da ispunjava svoje ciljeve, ali je za implementaciju standarda potrebna podrška razvojne zajednice.
• Predložena preporuka ( Predložena preporuka) - u ovoj fazi, dokument se dostavlja Savjetodavnom odboru W3C na konačno odobrenje.
• Radni nacrt – zreliji nacrt nakon rasprave i amandmana za reviziju zajednice.
• Nacrt urednika ( Urednički nacrt) je nacrt standarda nakon što su urednici projekta izvršili izmjene.
• nacrt ( Nacrt specifikacije) je prva verzija standarda.