Nga autori: artikull nga i ftuari ynë, Peter Bizmans. Peter është një zhvillues i faqes së përparme në faqen Audience, ku i pëlqen stilet e të shkruarit në SCSS. Sot ai do të na tregojë atë që unë e quaj një truk i sinqertë CSS. I gjithë rrjeti është vertikal. Ju e lexoni faqen si një libër i zakonshëm: nga e majta në të djathtë, nga lart poshtë. Por ndonjëherë ju dëshironi të largoheni nga vertikaliteti dhe të bëni diçka të çmendur: bëni një listë horizontale. Ose edhe më e çmendur, një faqe horizontale!

Do të ishte mirë nëse mund të bënim kështu:

/ * kod i rremë * / div (drejtimi i rrotullimit: horizontal;)

Fatkeqësisht, kjo nuk do të ndodhë. Kjo nuk është as në planet për CSS.

Kjo është shumë e keqe, sepse në kompaninë për të cilën punoj do të ishte shumë e dobishme. Ne bëjmë shumë prezantime dhe një prezantim është një gjë mjaft horizontale. Zakonisht raporti i pamjes së rrëshqitjeve është 4: 3 ose 16: 9. Për shkak të kësaj, ne kemi një problem të vazhdueshëm me rrëshqitjet horizontale dhe teknologjitë vertikale të internetit. Me "ne" nënkuptoj veten time. Por ajo që dua është vështirësia.

Një tjetër rast përdorimi

Më erdhi në mendje një aplikim specifik. Ideja është se do të ishte e përshtatshme për blerësit që të shikonin të gjitha produktet në një rrëshqitje. Natyrisht, katalogu i produkteve nuk do të përshtatej në një formë. Prandaj, vendosëm ta ndajmë katalogun në tre kategori, secila me lëvizje horizontale. Kështu, tre produktet më të njohura janë të dukshme në secilën kategori, ndërsa produktet më pak të rëndësishme janë lehtësisht të aksesueshme.

Mënyra pa JavaScript

Të gjithë e dimë se ka shumë mënyra për të bërë lëvizje horizontale në JavaScript. Ka disa shembuj në CSS-Tricks. Pyesja veten nëse kjo ide mund të zbatohej në CSS të pastër. Zgjidhja doli të ishte shumë e thjeshtë:

krijoni një enë me elementë;

rrotulloni enën 90 gradë në të kundërt të akrepave të orës në mënyrë që buza e poshtme të jetë në të djathtë;

rrotulloni elementët brenda enës përsëri në vend.

Hapi 1) krijoni kontejnerin

Krijoni një bllok div me shumë fëmijë.

Në shembullin tonë, kontejneri i lëvizshëm do të jetë 300px i gjerë dhe do të përmbajë 8 elementë 100x100px. Madhësitë janë arbitrare, ju mund të vendosni ndonjë.

Lartësia e enës do të bëhet gjerësia dhe anasjelltas. Nën "gjerësia" e kontejnerit do të jetë 300 px:

Mbështjellës me lëvizje horizontale (gjerësia: 100 px; lartësia: 300 px; tejmbushje-y: automatik; vërshimi-x: i fshehur;)

Dhe fëmijët:

Horizontal-scroll-wrapper> div (gjerësia: 100 px; lartësia: 100 px;)

Hapi 2) rrotulloni enën

Tani duhet të rrotullojmë kontejnerin -90 gradë duke përdorur vetinë transform CSS. Ne morëm një rrotullues horizontal.

Horizontal-scroll-wrapper (... transformimi: rrotullo (-90 gradë); transformimi-origjina: lart djathtas;)

Ekziston vetëm një problem i vogël: fëmijët rrotulloheshin me kontejnerin.

Hapi 3) vendosini fëmijët në vend

Pra, si t'i ktheni artikujt në vend? Rrotulloje atë duke përdorur veçorinë transform CSS.

Horizontal-scroll-wrapper> div (... transformimi: rrotullo (90 gradë); transformimi-origjina: lart djathtas;)

Hapi 4) pozicionimi fiks

Duket mirë, por ka disa probleme.

Ne e rrotulluam enën dhe vendosëm këndin e sipërm të djathtë si një spirancë, gjë që bëri që ana e majtë të zhvendosej nga gjerësia e enës. Nëse e keni të vështirë të imagjinoni, thjesht vendosni gishtin në këndin e sipërm të djathtë të faqes dhe rrotullojeni. Dalje: duhet ta rrotulloni mbrapsht duke përdorur veçorinë translate.

Me mire tani. Por elementi i parë ende nuk është i dukshëm pasi i njëjti problem vërehet edhe me fëmijët. Kjo mund të korrigjohet duke i dhënë fëmijës së parë një diferencë të lartë me gjerësinë e tij, ose duke i transformuar të gjithë elementët si një enë. Mënyra më e lehtë që kam gjetur është të shtoj mbushje të sipërme në enë të barabartë me gjerësinë e fëmijëve, duke krijuar kështu një tampon për elementët.

Përputhshmëria

Kam kontrolluar përputhshmërinë në pajisjet e disponueshme për mua.

Desktop

Meqenëse stilimi i shiritave lëvizës deri më tani funksionon vetëm në shfletuesit Webkit / Blink, një shirit i rregullt lëvizës gri shfaqet në Firefox dhe IE. Kjo mund të rregullohet me JS dhe të fshihet fare, por kjo është një temë për një mësim tjetër.

Lëvizja me timonin e miut funksionon mirë në desktop. Por laptopi im ka mendimin e vet për këtë çështje. Në pajisjet me ekrane me prekje dhe tastierë me prekje, demonstrimi sillet sikur div të mos ishte rrotulluar fare.

Pajisje celulare

U befasova këndshëm kur zbulova se Android e kupton që kontejneri është rrotulluar dhe ju lejon të lëvizni me rrëshqitje djathtas dhe majtas.

Përkundrazi, me iOS, gjërat nuk janë aq të qetë. Shfletuesi sillet sikur kontejneri të mos ishte rrotulluar fare. Prandaj, duhet të përdorni rrëshqitjet lart e poshtë për të lëvizur, gjë që është mjaft e çuditshme. Mbushje: e fshehura nuk e zgjidh problemin.

konkluzioni

Sipas faqes së internetit Can I Use, transformimet në CSS tani mbështeten nga 93% + e përdoruesve (në kohën e këtij shkrimi, nëntor 2016). Ky nuk duhet të jetë problem.

Megjithatë, është më mirë të mos e përdorni këtë metodë në mënyrë produktive. E testova në disa pajisje, por jo të gjitha dhe jo aq tërësisht.

Problemi më i madh janë hyrjet ndijore, në të cilat duhet të rrëshqitni lart e poshtë për të shkuar majtas dhe djathtas. Zgjidhja mund të jetë të shkruani një mesazh në faqe me një shpjegim, por më pas duhet të mbështeteni në faktin që përdoruesit do ta lexojnë atë. Dhe edhe atëherë do të ishte në kundërshtim me sensin e përbashkët. Një zgjidhje tjetër është të kapni inputet ndijore duke përdorur JS në pajisje, por atëherë është më mirë të shkruani gjithçka në JS dhe të braktisni plotësisht hakimin tonë CSS.

Në këtë artikull, ne do të analizojmë në detaje veçorinë e tejmbushjes me të gjitha vlerat e saj, e cila gjithashtu ju lejon të shtoni ose hiqni një shirit lëvizjeje horizontale / vertikale. Me fjalë të tjera, si të krijoni shirita lëvizës.

Overflow në CSS është përgjegjëse për mënyrën se si do të duket shfaqja e informacionit në një bllok nëse përmbajtja tejkalon lartësinë ose gjerësinë e këtij blloku. Kjo veçori vlen vetëm për elementët e bllokut (ekrani: bllok; ose ato që fillimisht janë të bazuara në bllok - div, e kështu me radhë).

Vlerat e mundshme që merr kjo pronë (të dukshme si parazgjedhje):

• I dukshëm - Shfaq të gjithë përmbajtjen e elementit, edhe përtej lartësisë dhe gjerësisë së specifikuar.
• Fshehur - Shfaqet vetëm zona brenda elementit, pjesa tjetër do të fshihet.
• Lëvizja - Shiritat e lëvizjes shtohen gjithmonë.
• Auto - Shiritat e lëvizjes shtohen vetëm kur nevojitet.
• Inherit - Trashëgon vlerën nga prindi.

Më shpesh kjo veti përdoret për të hequr ose shtuar shirita lëvizjeje në ndonjë element. Kështu, për shembull, bëni me korniza në mënyrë që të mos i mbushni në madhësi të plotë. Ose për të futur ndonjë tekst të madh, në mënyrë që të mos zërë gjysmë faqe, por të ulet rehat në një bllok të veçantë, dhe atje të mund të lëvizet dhe të lexohet. Në pjesën më të madhe, prona zgjidh problemin e një shfaqjeje të rehatshme të informacionit.

Në demonstrim, mund të vëzhgoni se si funksionon në të vërtetë secila prej vlerave të pronës:

Kodi HTML

trupi (diferenca: 0 0 0 0; mbushja: 0 0 60 px 0; madhësia e shkronjave: 16 px;) h2 (ngjyra: # CC0033;) div (gjerësia: 200 px; / * gjerësia fikse * / lartësia: 300 px; / * fikse lartësia * / kufiri: 1 px solid # 555; mbushja: 4 px; diferenca: 4 px; noton: majtas;) .VisibleDiv (mbushje: e dukshme;) .HiddenDiv (mbushje: e fshehur;) .ScrollDiv (mbushje: lëviz;) .AutoDiv ( vërshimi: automatik;)

Vlen t'i kushtohet vëmendje faktit se në këtë rast të veçantë, blloqe me një lartësi dhe gjerësi të caktuar fikse. Kjo është e rëndësishme, për shembull, merrni parasysh opsionin kur lartësia e bllokut është vendosur në automatik:

Mund të shohim që teksti shfaqet saktë brenda bllokut në të gjitha rastet, me përjashtim të një shqetësimi të vogël në rastin e lëvizjes, ku shfaqen shiritat e lëvizjes joaktive.

Por në këtë rast ekziston një rrezik i vogël, përballë të cilit shumë nuk e kuptojnë pse ka lindur dhe si ta rregullojnë atë. Çështja është se nëse një bllok me tejmbushje: i dukshëm; dmth vlera e paracaktuar dhe përmbajtja e saj ka elemente me çdo vlerë float, përveç asnjërës, atëherë e gjithë kjo do të shfaqet gabimisht. Për të kuptuar se çfarë është kjo situatë, merrni parasysh një shembull:

Ekziston një bllok tjetër nën bllokun VisibleDiv.

Nuk ka asgjë nën bllokun VisibleDiv

trupi (diferenca: 0 0 0 0; mbushja: 0 0 60 px 0; madhësia e shkronjave: 16 px;) h2 (ngjyra: # CC0033;) p (lundrues: majtas;) div (gjerësia: 500 px; lartësia: automatik; kufiri: 1px solid # 555; mbushje: 4px; margjina: 4px;) .VisibleDiv (mbushje: e dukshme; sfond: rgba (0,255,0,0,1);) .injoroj (sfondi: rgba (0,255,0,0.6); ngjyra: # FFFFFF; pesha e shkronjave: e theksuar;)

Në rastin e parë, mund të shihni se përmbajtja me veçorinë float largohet nga blloku dhe nuk merret parasysh prej tij gjatë përcaktimit të lartësisë së bllokut, në rastin e dytë, nën bllokun me tejmbushje: i dukshëm; një bllok tjetër është vendosur posaçërisht dhe hije me një ngjyrë të ndryshme. Këta nuk janë shembujt e vetëm se si blloqe të tilla mund të sillen në faqe (me tejmbushje: të dukshme; dhe lartësi: automatik;). Kjo mund të rregullohet duke zëvendësuar vlerën e dukshme me të fshehur, duhet mbajtur mend se kjo pronë duhet të specifikohet vetëm për blloqet me lartësi: auto; nëse ka një lartësi fikse, atëherë ekziston një shans i madh që përmbajtja thjesht të fshihet nëse është më e madhe se lartësia e specifikuar.

Kështu do të dukej versioni i rishikuar:

Gjithashtu, nuk do të keni një problem të tillë nëse blloku me tejmbushje: i dukshëm; dhe lartësia: auto; gjithashtu vendosni një vlerë për vetinë float. Në përgjithësi, në shumë raste, shfaqja e artikujve varet nga një grup karakteristikash dhe jo nga vetitë individuale.

Mund të përdorni overflow-y: lëvizni për të lëvizur vertikalisht.

Ndonjëherë është e nevojshme të vendosni një pjesë të madhe teksti në një dritare të vogël që nuk përshtatet plotësisht atje, për të zgjidhur këtë problem është e lehtë të krijoni një shtresë lëvizëse - lëvizëse div.

Ajo do të marrë

Shtresa me madhësi fikse dhe stil CSS.

CSS

Klasa .scroll CSS vendos parametrat 600 pikselë të gjatë dhe 300 pikselë të lartë, mbushjen, kufirin dhe ngjyrën e sfondit. POR! Më e rëndësishmja, parametri "overflow: auto" vendos që shiriti i lëvizjes të shfaqet kur sasia e tekstit është më e madhe se madhësia e shtresës.

Lëvizja (gjerësia: 500 px; lartësia: 300 px; / * kërkohet madhësi fikse * / tejmbushja: automatikisht; / * lëvizja shfaqet sipas nevojës * / mbushja: 10 pikselë 20 px; kufiri: # 999 1 px solid; ngjyra e sfondit: #FAFAFA;)

HTML

Rezultati

Në ekran, do të shihni një kornizë të vogël me tekst dhe një kufi gri.

Më të përhapurit janë ftohësit e etilen glikolit të bazuar në etilen glikol dhe ujë (i distiluar) me një kompleks aditivësh.

Antifrizët fitohen si tretësirë ​​ujore të koncentrateve përkatëse. Gjatë funksionimit, cilësia e antifrizit mund të kontrollohet nga dendësia. Gjatë funksionimit, uji avullohet fillimisht nga ftohësi, i cili duhet të rimbushet (distilohet) periodikisht. Është e nevojshme të sigurohet që asnjë benzinë ​​dhe vajra të mos futen në antifriz, pasi ato shkaktojnë shkumë dhe lëshimin e lëngut nga sistemi.

Jeta e shërbimit të ftohësve si "Tosol" dhe "Lena" është e kufizuar nga jeta e shërbimit të aditivëve dhe zakonisht është 2 vjet; kilometrazhi mesatar për makina të ndryshme është 50,000 km.

Kur servisoni një automjet të përdorur për herë të parë, ftohësi duhet të zëvendësohet. Pasi të keni kulluar lëngun e vjetër, mbushni sistemin me ujë të pastër, ndizni motorin dhe lëreni të punojë për 15-20 minuta; më pas kullojeni ujin dhe rimbushni sistemin me ftohës të ri.

Vetia overflow kontrollon shfaqjen e përmbajtjes së një elementi blloku nëse nuk përshtatet plotësisht dhe është jashtë madhësisë së specifikuar.

informacion të shkurtër

Emërtimet

vlerat

i dukshëm Shfaq të gjithë përmbajtjen e elementit, edhe përtej lartësisë dhe gjerësisë së specifikuar. i fshehur Shfaqet vetëm zona brenda elementit, pjesa tjetër do të fshihet. Scroll Shiritat e lëvizjes shtohen gjithmonë. Shiritat e lëvizjes automatike shtohen vetëm kur nevojitet.

Sandbox

Winnie the Pooh nuk ishte gjithmonë kundër një pije freskuese, veçanërisht në orën njëmbëdhjetë të mëngjesit, sepse në këtë kohë mëngjesi kishte mbaruar tashmë shumë kohë më parë, dhe dreka as që kishte menduar të fillonte. Dhe, sigurisht, ai ishte jashtëzakonisht i kënaqur kur pa Lepurin duke nxjerrë gota dhe pjata.

div (lartësia: 80 px; tejmbushja: automatik;)

Shembull

Rezultati i këtij shembulli është paraqitur në Fig. një.

Oriz. 1. Zbatimi i vetive të tejmbushjes

Modeli i objektit

Nje objekt.stil.mbushje

shënim

Internet Explorer deri dhe duke përfshirë versionin 7.0:

• Fëmijët e pozicionuar relativisht, vlerat e tejmbushjes së të cilëve janë vendosur në automatik ose me lëvizje, sillen sikur të kenë pozicion: fiks.

Internet Explorer 8:

• Kombinimi i tejmbushjes me vlerën e lëvizjes me vetitë max-height dhe float mund të shkaktojë zhdukjen e elementeve të faqes së internetit, duke rezultuar në një ekran bosh në shfletues.
• Për një bllok me veçori float dhe overflow të vendosura në lëvizje, gjerësia e vendosur nëpërmjet veçorisë max-width shpërfillet.
• Lartësia e një blloku me një shirit lëvizës horizontal rritet me lartësinë e shiritit të lëvizjes, megjithëse sipas specifikimit CSS, dimensionet e dhëna duhet të përfshijnë gjithashtu shiritat lëvizës.

Firefox 3.6 zbaton gabimisht tejmbushjen në grupet e qelizave të tabelës ( , , ).

Specifikim

Çdo specifikim kalon nëpër disa faza të miratimit.

• Rekomandim - Ky specifikim është miratuar nga W3C dhe rekomandohet si standard.
• Rekomandimi i Kandidatit ( Rekomandim i mundshëm) - grupi përgjegjës për standardin është i kënaqur që ai është në përputhje me objektivat e tij, por kërkohet ndihma e komunitetit të zhvilluesve për zbatimin e standardit.
• Rekomandimi i propozuar ( Rekomandim i sugjeruar) - Në këtë pikë, dokumenti i dorëzohet Këshillit Këshillimor të W3C për miratim përfundimtar.
• Drafti Punues - Një version më i pjekur i draftit pas diskutimit dhe amendamenteve për shqyrtim nga komuniteti.
• Drafti i redaktorit ( Drafti editorial) - një draft version i standardit pas redaktimit nga redaktorët e projektit.
• draft ( Draft specifikimi) është drafti i parë i standardit.