Prona thyer brenda përcakton parimet për rregullimin e ndërprerjeve të faqeve dhe kolonave brenda elementit aktual. Si parazgjedhje, ndërprerjet e faqeve ose kolonave vendosen automatikisht dhe nuk trashëgohen nga elementët prindër. Vlera e shmangies së faqes përdoret vetëm kur formatoni dokumente të faqe, si p.sh. kur printoni, dhe injorohet për pamjet jo të faqeve, si p.sh. kur shfaqen në një shfletues. Vlera e shmangies së kolonës përdoret për tekstin me shumë kolona.
Vlerat e vlefshme
- CSS2 CSS3 auto- Ndërprerja automatike e faqes ose kolonës përpara elementit aktual (e parazgjedhur)
- CSS2 CSS3 shmangni
- CSS3 shmang-faqe- anuloni ndërprerjen e faqes brenda elementit aktual
- CSS3 shmangi-kolona- anulimi i thyerjes së kolonës brenda elementit aktual
Shembuj të përdorimit
thyer brenda: auto; - shpërndarje uniforme
Shpërndarja uniforme e përmbajtjes ndërmjet kolonave, në të cilën ndërprerjet vendosen automatikisht në vendet më të përshtatshme brenda ose ndërmjet çdo elementi. Me një shpërndarje të barabartë, lartësia e kolonave është afërsisht e njëjtë me një densitet pak a shumë uniform të tekstit.
Stili ( numërimi i kolonave: 3; boshllëku i kolonës: 2em; rregulli i kolonës: 1px solid #666; )
tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
thyej-brenda: shmang-kollona; - anuloni ndërprerjet e kolonave
Stili ( numërimi i kolonave: 3; boshllëku i kolonës: 2em; rregulli i kolonës: 1px solid #666; )
blloku 1 tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
blloku i 2-të tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
blloku i 3-të tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst
Vetia break-inside përcaktohet në specifikimin e modulit CSS 3 Multi-column Layout, zbatohet për elementët e nivelit të bllokut dhe është i vlefshëm në të gjitha mediat e faqeve, vlera e tij nuk trashëgohet nga një element prind në hierarkinë e dokumentit dhe është i paracaktuar në auto. Prona aktualisht mbështetet në të gjithë shfletuesit kryesorë.
Shiko gjithashtu:
- break-after - rregullat për vendosjen e një kolone ose ndërprerjeje faqeje pas një elementi
- break-fore - rregullat për vendosjen e një kolone ose ndërprerjeje faqe përpara një elementi
- -webkit-column-break-after - rregullat për vendosjen e një ndërprerjeje kolone pas një elementi
- -webkit-column-break-fore - rregullat për vendosjen e një ndërprerjeje kolone përpara një elementi
- -webkit-column-break-inside - rregullat për vendosjen e një ndërprerjeje kolone brenda një elementi
Moduli Kolonat CSS3 përshkruan një plan urbanistik me shumë kolona që ju lejon të organizoni përmbajtjen në mënyrë që të përfshijë shumë kontejnerë vertikalë, njësoj si një gazetë ose revistë. Kolonat mund të përmbajnë tituj, tekst, tabela, fotografi dhe çdo element tjetër inline.
Modeli me shumë kolona
Mbështetja e shfletuesit
IE: 10
Buzë: 12
Firefox: 52, 2 -moz
Krom: 50, 4 -kot ueb-
Safari: 9, 3.1 -kit në internet-
Opera: 37, 11.5 -webkit-
iOS Safari: 9, 3.2 -kit në internet-
Shfletuesi UC për Android: 11.8
Chrome për Android: 73
Internet Samsung: 5, 4 -kit në internet-
Postimi i vjetër
24 nëntor 2012
15 Qytetet e vogla më simpatike në Angli
1. Berwick-upon-Tweed
Berwick u themelua si një vendbanim anglo-sakson gjatë kohës së Mbretërisë së Northumbria, e cila u aneksua nga Anglia në shekullin e 10-të. Zona ishte për më shumë se 400 vjet në qendër të luftërave historike kufitare midis Mbretërive të Anglisë dhe Skocisë, dhe disa herë zotërimi i Berwick-ut ndryshoi duart midis dy mbretërive. Hera e fundit që ndryshoi duart ishte kur Richard of Gloucester e rimori atë për në Angli në 1482. Deri më sot, shumë Berwickers ndjejnë një afinitet të ngushtë me Skocinë.
Në ditët e sotme Berwick-upon-Tweed është shumë i vizituar për historinë e tij shumë të dukshme: muret e qytetit mesjetar, muret e elizabetit, rrënojat e kështjellës së shekullit të 13-të, 'Ura e vjetër' e shekullit të 17-të, bashkia e qytetit, kazermat më të hershme të ushtrisë britanike, hoteli më verior i Anglisë, ndër të tjera. .
2. Thekra
Thekra e lashtë është e gjitha rrugët me kalldrëm dhe radhët e rrënuara të shtëpive buzë detit. Fillimisht pjesë e Konfederatës së Porteve të Cinque, pesë qytete strategjike të rëndësishme për qëllime tregtare dhe ushtarake në kohët mesjetare, sot Thekra është praktikisht një muze i gjallë. Kalaja e thekës, e njohur gjerësisht si Kulla Ypres, u ndërtua në 1249 nga Henri III për t'u mbrojtur nga bastisjet e shpeshta nga francezët; edhe më i vjetër, St. Kisha e Marisë shikon mbi qytet. Thekra është gjithashtu vetëm pak minuta larg nga një prej plazheve më të famshme të Anglisë, Camber Sands, një shesh lojërash prej dy miljesh për tërfistët dhe adhuruesit e plazhit.
Figura 1. Shembull i paraqitjes me shumë kolona
1. Numri dhe gjerësia e kolonave
Përcaktimi i numrit dhe gjerësisë së kolonave është thelbësor kur ndërtohet një plan urbanistik me shumë kolona. Vetitë e numërimit të kolonave dhe të gjerësisë së kolonës përdoren për të vendosur numrin dhe gjerësinë e kolonave.
Vetia e tretë, kolonat, është një veti stenografike që përcakton gjerësinë dhe numrin e kolonave menjëherë.
Faktorë të tjerë, të tillë si ndërprerjet e qarta të kolonave, kufizimet e përmbajtjes dhe lartësisë, mund të ndikojnë në numrin dhe gjerësinë aktuale të kolonave.
1.1. Gjerësia e kolonës: vetia e gjerësisë së kolonës
Vetia kolonë-gjerësi specifikon gjerësinë minimale që duhet të zërë secila kolonë.
Prona nuk është e trashëguar.
Sintaksë
Gjerësia e kolonës: auto; gjerësia e kolonës: 100 px; gjerësia e kolonës: 10em; gjerësia e kolonës: 3.3 vw; kolona-gjerësia: trashëgoj; gjerësia e kolonës: fillestare;
1.2. Numri i kolonave: vetia e numërimit të kolonave
Vetia e numërimit të kolonave përshkruan numrin e kolonave dhe gjerësia e tyre do të llogaritet bazuar në gjerësinë e hapësirës së disponueshme. Nëse gjerësia e kolonës specifikohet në të njëjtën kohë me numërimin e kolonave, atëherë numërimi i kolonave do të konsiderohet numri maksimal i kolonave.
Prona nuk është e trashëguar.
Sintaksë
Column-count: auto; numërimi i kolonave: 2; kolona-count: trashëgoj; kolona-count: fillestar;
1.3. Vendosja e kolonave duke përdorur një veti kolone të vetme
Vetia e kolonave është një veti stenografike për vendosjen e gjerësisë së kolonës dhe numërimit të kolonave. Vlerat e hequra vendosen në vlerat e tyre fillestare.
Prona nuk është e trashëguar.
Sintaksë
Kolonat: 12em; /* gjerësia e kolonës: 12em; kolona-count: auto */ kolona: auto 12em; /* gjerësia e kolonës: 12em; numërimi i kolonave: auto */ kolonat: 2; /* kolona-width: auto; numërimi i kolonave: 2 */ kolona: 2 auto; /* kolona-width: auto; kolona-count: 2 */ kolona: auto; /* kolona-width: auto; kolona-count: auto */ kolonat: auto auto; /* kolona-width: auto; kolona-count: auto */ kolonat: trashëgojnë; kolonat: fillestare;
2. Hapësirat ndërmjet kolonave dhe vijave ndarëse
Hapësirat e kolonave dhe linjat ndarëse vendosen ndërmjet kolonave në një enë me shumë kolona. Gjatësia e hapësirave dhe ndarësve është e barabartë me lartësinë e kolonës. Boshllëqet në kolona zënë hapësirë, domethënë, ato largojnë përmbajtjen në kolonat ngjitur.
Vija ndarëse vizatohet në mes të hapësirës ndërmjet kolonave, duke mos zënë hapësirë. Kjo do të thotë, prania ose trashësia e vijës ndarëse nuk do të ndryshojë vendosjen e asgjëje tjetër.
Linjat janë pikturuar pikërisht mbi kufirin e elementit me shumë kolona. Nëse elementi ka një zonë të lëvizshme, linjat ndarëse lëvizin së bashku me kolonat. Linjat ndarëse shfaqen vetëm ndërmjet dy kolonave që kanë përmbajtje.
2.1. Boshllëqet ndërmjet kolonave: vetia kolonë-gap
Vetia kolonë-gap përcakton hendekun midis kolonave. Nëse vendosni një vijë ndarëse për kolonat duke përdorur veçorinë kolonë-rregull, atëherë kjo linjë do të vendoset në mes të hendekut dhe gjerësia e saj nuk do të ndryshojë gjerësinë e përgjithshme.
Prona nuk është e trashëguar.
Sintaksë
Hendeku i kolonës: normale; boshllëk kolone: 3px; boshllëk kolone: 2.5em; boshllëk kolone: 3%; kolonë-boshllëk: trashëgoj; shtyllë-boshllëk: fillestar;
2.2. Ngjyra e vijës ndarëse: veti kolonë-rregull-ngjyrë
Vetia kolonë-rregull-ngjyrë specifikon ngjyrën e vijës ndarëse.
Prona nuk është e trashëguar.
Sintaksë
Kolona-rregull-ngjyra: rozë; kolona-rregull-ngjyra: #D71C3B; kolona-rregull-ngjyra: rgb(192, 56, 78); kolona-rregull-ngjyra: transparente; kolona-rregull-ngjyra: hsla(0, 100%, 50%, 0.6); kolona-rregull-ngjyra: trashëgoj; kolona-rregull-ngjyra: fillestare;
2.3. Stili i linjës ndarëse: veti e stilit kolonë-rregull
Vetia e stilit kolonë-rregull vendos stilin e vijës ndarëse.
Prona nuk është e trashëguar.
| kolonë-rregull-stili | |
|---|---|
| Vlerat: | |
| asnje | Vlera vlerësohet në 0. Vlera e paracaktuar. |
| i fshehur | Njësoj si me vlerën none , rreshti është i fshehur. |
| me pika | Shfaq një vijë si një grup pikash katrore. |
| i thyer | Shfaq një rresht si një sekuencë vijash. |
| të ngurta | Linjë e rregullt. |
| dyfishtë | Shfaq vijën ndarëse në formën e dy vijave të holla paralele të vendosura në një distancë nga njëra-tjetra. Gjerësia e vijës ndarëse nuk është e specifikuar, por shuma e vijave dhe hapësira ndërmjet tyre është e barabartë me vlerën kolonë-rregull-gjerësi. |
| brazdë | Shfaq një vijë vëllimore të shtypur në kanavacë. Kjo arrihet duke krijuar një hije me dy ngjyra, një më e errët dhe një më e lehtë. |
| kurriz | Shfaq vijën ndarëse të vëllimit, d.m.th. efekti i kundërt me groove. |
| futur | Shfaq një vijë të fortë në një ngjyrë më të errët se ngjyra e specifikuar e linjës. |
| fillimi | Shfaq një vijë të fortë me ngjyrën e specifikuar nga vetia kolonë-rule-color. |
| fillestare | Vendos vlerën e pronës në vlerën e paracaktuar. |
| trashëgojnë | Trashëgon vlerën e pronës nga elementi mëmë. |
Sintaksë
Column-rule-style: asnjë; kolonë-rregull-stili: i fshehur; kolonë-rregull-stili: me pika; kolonë-rregull-stili: i ndërprerë; kolonë-rregull-style: solid; kolonë-rregull-style: dyfishtë; kolonë-rregull-style: brazdë; kolonë-rregull-stili: kurriz; kolonë-rule-style: inset; kolonë-rregull-style:fillim; kolonë-rregull-style: trashëgoj; kolonë-rregull-stili: fillestar;
2.4. Gjerësia e vijës ndarëse: vetia kolonë-rregull-gjerësi
Vetia kolonë-rregull-gjerësi përcakton gjerësinë e vijës ndarëse. Vlerat negative nuk lejohen. Nuk funksionon pa veçorinë e stilit të rregullave të kolonës.
Prona nuk është e trashëguar.
Sintaksë
Kolona-rregulli-gjerësia: e hollë; kolona-rregulli-gjerësia: e mesme; kolona-rregulla-gjerësia: e trashë; kolona-rregulli-gjerësia: 1px; kolona-rregulla-gjerësia: 2.5em; kolonë-rregull-gjerësi: trashëgoj; kolona-rregulli-gjerësia: fillestare;
2.5. Një përmbledhje e shpejtë e vetive të vijës ndarëse: vetia e rregullave të kolonës
Vetia kolonë-rule është stenografi për veçorinë kolonë-rregull-gjerësi kolonë-rregull-style kolonë-rregull-ngjyrë.
Prona nuk është e trashëguar.
Sintaksë
Rregulla e kolonës: me pika; kolona-rregull: solid 8px; kolona-rregull: blu e fortë; rregulli i kolonës: blu e trashë e futur; kolonë-rregull: trashëgoj; kolona-rregull: fillestar;
3. Prirjet e kolonave
Kur përmbajtja vendoset në kolona të shumta, shfletuesi duhet të përcaktojë se ku vendosen ndarjet e kolonave. Problemi i ndarjes së përmbajtjes në kolona është i ngjashëm me ndarjen e përmbajtjes në faqe. Për të adresuar këtë çështje, janë prezantuar tre veti të reja për të lejuar që ndërprerjet e kolonave të përshkruhen në të njëjtat veçori si ndërprerjet e faqeve: break-fore, break-after dhe break-inside.
4. Shtrirja e kolonës: vetia e hapësirës së kolonës
Vetia kolonë-span lejon një element të shtrijë disa kolona. Tregohet jo për bllokun e kontejnerit, por për një element specifik brenda, për shembull, për një kokë.
Në të ardhmen do të jetë e mundur të specifikohet numri i kolonave që do të shtrihen, ngjashëm me atributin colspan që mund të aplikohet në një qelizë tabele, por specifikimi CSS3 ka vetëm dy vlera të mundshme: asnjë dhe të gjitha .
Vetia nuk funksionon si parazgjedhje në Firefox. Përdoruesi duhet të aktivizojë në mënyrë eksplicite veçorinë, layout.css.column-span.enabled duhet të vendoset në true . Për të ndryshuar cilësimet në Firefox, shkoni te about:config.
Prona nuk është e trashëguar.
Sintaksë
Hapësira e kolonës: asnjë; shtyllë-hapësirë: të gjitha; kolona-span: trashëgoj; shtylla-span: fillestar;
5. Plotësimi i kolonave me përmbajtje: vetia kolon-fill
Vetia e mbushjes së kolonave kontrollon se si mbushen kolonat me përmbajtje. Ekzistojnë dy strategji për mbushjen e kolonave: kolonat mund të jenë të rreshtuara sipas lartësisë ose jo. Nëse kolonat janë të rreshtuara, shfletuesit duhet të përpiqen të minimizojnë ndryshimet në lartësinë e kolonës, duke llogaritur ndërprerjet e detyruara, të vejat, jetimët dhe vetitë e tjera që mund të ndikojnë në lartësinë e kolonës. Nëse kolonat nuk janë të rreshtuara, ato plotësohen në mënyrë sekuenciale, disa prej tyre mund të plotësohen pjesërisht ose të mos plotësohen fare.
Prona nuk është e trashëguar.
Sintaksë
Mbushja e kolonës: auto; kolona-mbushje: bilanc; kolona-mbushje: bilanc-të gjitha; kolona-mbushje: trashëgoj; kolona-mbushje: fillestare;
6. Mbushje
6.1. Mbushje brenda kontejnerëve me shumë kolona
Me përjashtim të rasteve kur do të shkaktonte thyerjen e një kolone, përmbajtja që shtrihet përtej kufijve të një kolone shtrihet përtej kufijve të saj dhe nuk ndërpritet. Kjo vlen kryesisht për imazhet. Për të zgjidhur këtë problem, duhet të vendosni vetitë e mëposhtme për imazhet:
Img ( shfaqja: bllok; /*hiqni mbushjen e poshtme nën imazh*/ gjerësia: 100%; /*shtrijeni imazhin në të gjithë gjerësinë e bllokut të kontejnerit*/ )
6.2. Fletëzimi dhe tejmbushja jashtë kontejnerëve me shumë kolona
Përmbajtja dhe linjat ndarëse që shtrihen përtej kolonave në skajet e një kontejneri me shumë kolona priten sipas vetive të tejmbushjes.
Një kontejner me shumë kolona mund të ketë më shumë kolona sesa ka vend për të, për shkak të kufizimeve të lartësisë së kolonës (si lartësia ose lartësia maksimale) dhe prishjeve të qarta të kolonës. Në këtë rast, kolonat shtesë krijohen në drejtim të rreshtit, duke lëvizur në faqet pasuese.
Të Moduli i paraqitjes me shumë kolona CSS shtrihet modaliteti i paraqitjes së bllokut për të lejuar përcaktimin e lehtë të kolonave të shumta të tekstit. Njerëzit kanë vështirësi në leximin e tekstit nëse rreshtat janë shumë të gjatë; nëse u duhet shumë kohë që sytë të lëvizin nga fundi i një rreshti në fillim të rreshtit tjetër, ata humbasin gjurmën se në cilën linjë ishin. Prandaj, për të shfrytëzuar maksimalisht një ekran të madh, autorët duhet të kenë kolona teksti me gjerësi të kufizuar të vendosura krah për krah, ashtu siç bëjnë gazetat.
Fatkeqësisht, kjo është e pamundur të bëhet me CSS dhe HTML pa detyruar ndërprerjet e kolonave në pozicione fikse, ose duke kufizuar ashpër shënimin e lejuar në tekst, ose duke përdorur skriptime heroike. Ky kufizim zgjidhet duke shtuar veçori të reja CSS për të zgjeruar mënyrën tradicionale të paraqitjes së bllokut.
Përdorimi i kolonave
Numri dhe gjerësia e kolonave
Dy veti CSS kontrollojnë nëse dhe sa kolona do të shfaqen: numërimi i kolonave dhe gjerësia e kolonës.
Vetia e numërimit të kolonave vendos numrin e kolonave në një numër të caktuar. P.sh.,
Shembulli 1
HTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud ushtrime ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat jo proident, ndodh në culpa qui officia deserunt mollit anim id est laborum.
CSS
#col (numërimi i kolonave: 2; )Rezultati
Do të shfaqë përmbajtjen në dy kolona (nëse jeni duke përdorur një shfletues në përputhje me shumë kolona):
Vetia kolonë-gjerësi vendos gjerësinë minimale të dëshiruar të kolonës. Nëse nuk është caktuar gjithashtu numërimi i kolonave, atëherë shfletuesi automatikisht do të krijojë aq kolona sa të përshtaten në gjerësinë e disponueshme.
Shembulli 2
HTML
CSS
#wid (gjerësia e kolonës: 100 px; )Rezultati
Në një bllok me shumë kolona, përmbajtja rrjedh automatikisht nga një kolonë në tjetrën sipas nevojës. I gjithë funksionaliteti HTML, CSS dhe DOM mbështetet brenda kolonave, siç janë redaktimi dhe printimi.
Stenografia e kolonave
Shumicën e kohës, një projektues uebi do të përdorë një nga dy vetitë CSS: numërimi i kolonës ose gjerësia e kolonës. Meqenëse vlerat për këto veti nuk mbivendosen, shpesh është e përshtatshme të përdoren kolonat stenografi. P.sh.
Gjerësia e kolonës së deklarimit CSS: 12em mund të zëvendësohet me kolonat: 12em .
Shembulli 3
HTML
CSS
#col_short (kolona: 12em; )Numri i kolonave të deklarimit CSS: 4 mund të zëvendësohet me kolonat: 4 .
Shembulli 4
HTML
CSS
#kolona_4 (kolona: 4; )Rezultati
Dy deklaratat CSS me gjerësinë e kolonës: 8em dhe numërimin e kolonave: 12 mund të zëvendësohen me kolonat: 12 8em .
Shembulli 5
HTML
CSS
#columns_12 (kolona: 12 8em; )Rezultati
Balancimi i lartësisë
Specifikimi i kolonës CSS3 kërkon që lartësitë e kolonës duhet të jenë të balancuara: domethënë, shfletuesi vendos automatikisht lartësinë maksimale të kolonës në mënyrë që lartësitë e përmbajtjes në secilën kolonë të jenë afërsisht të barabarta. Firefox-i e bën këtë.
Sidoqoftë, në disa situata është gjithashtu e dobishme të vendosni lartësinë maksimale të kolonave në mënyrë eksplicite, dhe më pas të vendosni përmbajtjen duke filluar nga kolona e parë dhe duke krijuar aq kolona sa të jetë e nevojshme, ndoshta duke u tejmbushur në të djathtë. Prandaj, nëse lartësia është e kufizuar, duke vendosur vetitë e lartësisë CSS ose max-height në një bllok me shumë kolona, secila kolonë lejohet të rritet në atë lartësi dhe jo më tej përpara se të shtohet kolona e re. Kjo mënyrë është gjithashtu shumë më efikase për paraqitjen.
Boshllëqet e kolonave
Ekziston një hendek midis kolonave. Parazgjedhja e rekomanduar është 1em. Kjo madhësi mund të ndryshohet duke aplikuar veçorinë kolonë-gap në bllokun me shumë kolona:
Shembulli 6
HTML
CSS
#column_gap (kollona-numërimi: 5; boshllëk kolonash: 2em; )Rezultati
Degradim i këndshëm
Vetitë e kolonës thjesht do të injorohen nga shfletuesit që nuk mbështesin kolona. Prandaj është relativisht e lehtë të krijosh një plan urbanistik që do të shfaqet në një kolonë të vetme në ata shfletues dhe do të përdorë kolona të shumta në shfletuesit mbështetës.
konkluzioni
Kolonat CSS3 janë një strukturë primitive që do t'i ndihmojë zhvilluesit e uebit të përdorin sa më mirë pasurinë e paluajtshme të ekranit. Zhvilluesit imagjinarë mund të gjejnë shumë përdorime për to, veçanërisht me veçorinë automatike të balancimit të lartësisë.
Si të rregulloni tekstin në një faqe në disa kolona? Dhe a mund të bëhet kjo automatikisht? Me siguri, shumë prej jush që janë ose kanë qenë të përfshirë në zhvillimin e uebit e kanë hasur këtë problem - dhe shpesh hasin në zgjidhje komplekse që kërkojnë stile të ndërlikuara ose përdorimin e bibliotekave shtesë JavaScript (shih, për shembull, shtojcën Columnizer për jQuery).
Paraqitja e përmbajtjes me shumë kolona (për të mos u ngatërruar me detyrën e paraqitjes së përgjithshme të faqeve me shumë kolona, e cila është më afër problemit të rregullimit të blloqeve në një rrjet) ka bërë rrugën e saj në botën e standardeve të internetit për një kohë të gjatë. dhe, së fundi, jo vetëm që ka arritur statusin e rekomandimit të kandidatit në formën e modulit përkatës CSS3 Multi-column Layout , por gjithashtu ka marrë mbështetje mjaft të gjerë në shfletues: diku me parashtesa (-moz- ose -webkit-) dhe diku në aktual (Opera 11.1+) dhe versionet e planifikuara (IE10+), dhe menjëherë pa prefikse.
Koment
Në rastin e Internet Explorer 10, kjo automatikisht do të thotë që ju mund të përdorni CSS3 Multi-colonn kur zhvilloni aplikacione të stilit Metro për Windows 8 duke përdorur HTML/CSS/JS.
Për qëllimet e këtij artikulli, nuk do të përdor prefikset e shfletuesit për të ngatërruar kodin, por në përdorim në jetën reale, mos harroni të shtoni mbështetje për prefiks për Firefox, Safari dhe Chrome.
Më lejoni të vërej menjëherë dy detaje më të rëndësishme.
Së pari, në shumicën e rasteve, përdorimi i paraqitjes me shumë kolona për tekstin mund të konsiderohet si një zhvillim i shfaqjes së përmbajtjes së faqes përgjatë rrugës së Përmirësimit Progresiv, brenda së cilës përdoruesit e faqeve më moderne do të marrin më shumë të mira:
Së dyti, ekrani me shumë kolona përshtatet mirë me aftësitë e pyetjeve të medias (dhe ideve të dizajnit të përgjegjshëm), për shembull, në madhësi të ndryshme ekrani mund të formatoni tekstin në një numër të ndryshëm kolonash:
Dhe gjëja e fundit që do të doja të shënoja në hyrje, në mënyrë që të mos ndalem më tej në këtë dhe të vazhdojmë me një ndërgjegje të pastër në detajet teknike: kur përdorni paraqitjen e tekstit me shumë kolona, duhet të mbani mend se një rregullim i tillë presupozon gjithashtu një rend të caktuar leximi (për gjuhët evropiane, nga e majta në të djathtë). Prandaj, është e rëndësishme që për të zhvendosur shikimin nga një kolonë në tjetrën, është e nevojshme të kryhen sa më pak veprime shtesë, veçanërisht kur bëhet fjalë për rrotullat vertikale:
Në këtë kuptim, natyra horizontale e kolonave kombinohet më mirë me lëvizjen horizontale (siç përdoret në shumë aplikacione Win8 - për shembull, kjo është qartë e dukshme në aplikacionin USA Today):
Në përgjithësi, altoparlantët janë të shkëlqyer, por mos harroni për përvojën e përdoruesit. Dhe tani në betejë!
Kolonat
Pra, kemi tekst (përmbajtje) që duam ta vendosim në disa kolona. Ku të fillojë?
Për ta kthyer një element të tillë në një me shumë kolona, duhet të vendosni një nga vetitë përmes stileve CSS: kolonë-gjerësi ose numërimi i kolonave në një kuptim tjetër përveç auto. Për shembull,
Për të ndarë tekstin në dy kolona, thjesht bëni këtë:
Artikull (numërimi i kolonave: 2; )
Shfletuesi do të bëjë pjesën tjetër: 
Prona alternative - kolonë-gjerësi— ju lejon të vendosni gjerësinë optimale të kolonës:
Artikull (gjerësia e kolonës: 150 px; )
Në këtë rast, vetë shfletuesi e thyen përmbajtjen në numrin e kërkuar të kolonave për të mbushur kontejnerin e jashtëm, duke u përshtatur me gjerësinë e specifikuar të kolonës. Pika e rëndësishme është se gjerësia aktuale mund të ndryshojë nga ajo e specifikuar lart ose poshtë: në figurën e mësipërme, shiriti gri është saktësisht 150 px i gjerë - dhe, siç mund ta shihni, është më i vogël se gjerësia aktuale e kolonës.
Kjo sjellje përcaktohet nga specifikimi dhe lejon (automatikisht) fleksibilitet më të madh kur zhvillohet shënimi i përgjegjshëm:
Për shembull, nëse keni një kontejner me gjerësi 100 px dhe vendosni kolonat të jenë 45 px, atëherë shfletuesi do të konsiderojë se do të përshtaten vetëm dy kolona dhe për të mbushur të gjithë hapësirën, do të rrisë madhësinë e secilës në 50 px. (Kjo gjithashtu merr parasysh hapësirën midis kolonave, e cila do të diskutohet në seksionin vijues.)
Në një farë kuptimi, kjo mund të shihet si një alternativë ndaj përdorimit të pyetjeve mediatike për të specifikuar një numër të ndryshëm kolonash në varësi të madhësisë së dritares dhe duke llogaritur automatikisht gjerësinë e kolonës:
@media (min. gjerësi: 400 pikselë) ( artikulli ( numërimi i kolonave: 2; ) ) @media (gjerësia minimale: 600 px) ( artikulli ( numërimi i kolonave: 3; ) ) ...
Kjo është hera e dytë që po flas për një alternativë - dhe ja pse.
numëro vs. gjerësia
Siç duhet të jetë tashmë e qartë nga përshkrimi i mësipërm, specifikimi ofron dy mënyra për të vendosur numrin dhe gjerësinë e kolonave (nga rruga, është e njëjtë për të gjitha kolonat!):- numërimi i kolonave ju lejon të specifikoni numrin e kolonave në të cilat dëshironi të ndani përmbajtjen, ndërsa gjerësia e kolonave përcaktohet nga shfletuesi, duke marrë parasysh hapësirën e disponueshme.
- kolonë-gjerësi vjen nga ana e kundërt: tregon se çfarë duhet të jenë përafërsisht kolonat, megjithatë, llogaritjen e numrit të tyre e lë në diskrecionin e shfletuesit.
Kolonat: 12em; /* gjerësia e kolonës: 12em; numërimi i kolonave: automatik; */ kolona: 2; /* kolona-width: auto; numërimi i kolonave: 2; */ kolonat: auto; /* kolona-width: auto; numërimi i kolonave: automatik; */ kolonat: auto 12em; /* gjerësia e kolonës: 12em; numërimi i kolonave: automatik; */ kolona: 2 auto; /* kolona-width: auto; numërimi i kolonave: 2; */
Çfarë ndodh nëse specifikoni numrin e kolonave dhe gjerësinë optimale? Sipas specifikimeve, në këtë rast numërimi i kolonave përcakton numrin maksimal të kolonave:
Artikulli ( kolonat: 150 px 3; /* gjerësia e kolonës: 150 px; numri i kolonave: 3; */ )
Në fakt, duke ndjekur zhvillimin e standardeve të uebit, duke përfshirë disa nga artikujt e mi rreth CSS3 (shih, për shembull,), shpresoj që të jeni jo më pak të frymëzuar nga mundësitë që hapen për zhvilluesit e uebit. Mjetet adaptive, fleksibël dhe të fuqishëm për menaxhimin e vendosjes së përmbajtjes po bëhen më të afërta dhe më të aksesueshme. Dhe zgjidhja e problemeve komplekse po bëhet më e lehtë.
Interaktive
Ju mund të luani me mënyrën se si funksionon CSS3 Multi-colonn në ietestdrive.com:
Provojeni, eksperimentoni. Raportoni gabimet te zhvilluesit e shfletuesit. Dhe mos harroni të mendoni se çfarë do të shohin përdoruesit e shfletuesve më të vjetër (dhe në dukje moderne, por ende jo plotësisht në përputhje me standardet)—për shembull, mund të përdorni një shtojcë për jQuery Columnizer. Mos harroni përshtatshmërinë dhe shikuesit e ekraneve të vegjël dhe të mëdhenj.
Si të rregulloni tekstin në një faqe në disa kolona? Dhe a mund të bëhet kjo automatikisht? Me siguri, shumë prej jush që janë ose kanë qenë të përfshirë në zhvillimin e uebit e kanë hasur këtë problem - dhe shpesh hasin në zgjidhje komplekse që kërkojnë stile të ndërlikuara ose përdorimin e bibliotekave shtesë JavaScript (shih, për shembull, shtojcën Columnizer për jQuery).
Paraqitja e përmbajtjes me shumë kolona (për të mos u ngatërruar me detyrën e paraqitjes së përgjithshme të faqeve me shumë kolona, e cila është më afër problemit të rregullimit të blloqeve në një rrjet) ka bërë rrugën e saj në botën e standardeve të internetit për një kohë të gjatë. dhe, së fundi, jo vetëm që ka arritur statusin e rekomandimit të kandidatit në formën e modulit përkatës CSS3 Multi-column Layout , por gjithashtu ka marrë mbështetje mjaft të gjerë në shfletues: diku me parashtesa (-moz- ose -webkit-) dhe diku në aktual (Opera 11.1+) dhe versionet e planifikuara (IE10+), dhe menjëherë pa prefikse.
Koment
Në rastin e Internet Explorer 10, kjo automatikisht do të thotë që ju mund të përdorni CSS3 Multi-colonn kur zhvilloni aplikacione të stilit Metro për Windows 8 duke përdorur HTML/CSS/JS.
Për qëllimet e këtij artikulli, nuk do të përdor prefikset e shfletuesit për të ngatërruar kodin, por në përdorim në jetën reale, mos harroni të shtoni mbështetje për prefiks për Firefox, Safari dhe Chrome.
Më lejoni të vërej menjëherë dy detaje më të rëndësishme.
Së pari, në shumicën e rasteve, përdorimi i paraqitjes me shumë kolona për tekstin mund të konsiderohet si një zhvillim i shfaqjes së përmbajtjes së faqes përgjatë rrugës së Përmirësimit Progresiv, brenda së cilës përdoruesit e faqeve më moderne do të marrin më shumë të mira:
Së dyti, ekrani me shumë kolona përshtatet mirë me aftësitë e pyetjeve të medias (dhe ideve të dizajnit të përgjegjshëm), për shembull, në madhësi të ndryshme ekrani mund të formatoni tekstin në një numër të ndryshëm kolonash:
Dhe gjëja e fundit që do të doja të shënoja në hyrje, në mënyrë që të mos ndalem më tej në këtë dhe të vazhdojmë me një ndërgjegje të pastër në detajet teknike: kur përdorni paraqitjen e tekstit me shumë kolona, duhet të mbani mend se një rregullim i tillë presupozon gjithashtu një rend të caktuar leximi (për gjuhët evropiane, nga e majta në të djathtë). Prandaj, është e rëndësishme që për të zhvendosur shikimin nga një kolonë në tjetrën, është e nevojshme të kryhen sa më pak veprime shtesë, veçanërisht kur bëhet fjalë për rrotullat vertikale:
Në këtë kuptim, natyra horizontale e kolonave kombinohet më mirë me lëvizjen horizontale (siç përdoret në shumë aplikacione Win8 - për shembull, kjo është qartë e dukshme në aplikacionin USA Today):
Në përgjithësi, altoparlantët janë të shkëlqyer, por mos harroni për përvojën e përdoruesit. Dhe tani në betejë!
Kolonat
Pra, kemi tekst (përmbajtje) që duam ta vendosim në disa kolona. Ku të fillojë?
Për ta kthyer një element të tillë në një me shumë kolona, duhet të vendosni një nga vetitë përmes stileve CSS: kolonë-gjerësi ose numërimi i kolonave në një kuptim tjetër përveç auto. Për shembull,
Për të ndarë tekstin në dy kolona, thjesht bëni këtë:
Artikull (numërimi i kolonave: 2; )
Shfletuesi do të bëjë pjesën tjetër:
Prona alternative - kolonë-gjerësi— ju lejon të vendosni gjerësinë optimale të kolonës:
Artikull (gjerësia e kolonës: 150 px; )
Në këtë rast, vetë shfletuesi e thyen përmbajtjen në numrin e kërkuar të kolonave për të mbushur kontejnerin e jashtëm, duke u përshtatur me gjerësinë e specifikuar të kolonës. Pika e rëndësishme është se gjerësia aktuale mund të ndryshojë nga ajo e specifikuar lart ose poshtë: në figurën e mësipërme, shiriti gri është saktësisht 150 px i gjerë - dhe, siç mund ta shihni, është më i vogël se gjerësia aktuale e kolonës.
Kjo sjellje përcaktohet nga specifikimi dhe lejon (automatikisht) fleksibilitet më të madh kur zhvillohet shënimi i përgjegjshëm:
Për shembull, nëse keni një kontejner me gjerësi 100 px dhe vendosni kolonat të jenë 45 px, atëherë shfletuesi do të konsiderojë se do të përshtaten vetëm dy kolona dhe për të mbushur të gjithë hapësirën, do të rrisë madhësinë e secilës në 50 px. (Kjo gjithashtu merr parasysh hapësirën midis kolonave, e cila do të diskutohet në seksionin vijues.)
Në një farë kuptimi, kjo mund të shihet si një alternativë ndaj përdorimit të pyetjeve mediatike për të specifikuar një numër të ndryshëm kolonash në varësi të madhësisë së dritares dhe duke llogaritur automatikisht gjerësinë e kolonës:
@media (min. gjerësi: 400 pikselë) ( artikulli ( numërimi i kolonave: 2; ) ) @media (gjerësia minimale: 600 px) ( artikulli ( numërimi i kolonave: 3; ) ) ...
Kjo është hera e dytë që po flas për një alternativë - dhe ja pse.
numëro vs. gjerësia
Siç duhet të jetë tashmë e qartë nga përshkrimi i mësipërm, specifikimi ofron dy mënyra për të vendosur numrin dhe gjerësinë e kolonave (nga rruga, është e njëjtë për të gjitha kolonat!):- numërimi i kolonave ju lejon të specifikoni numrin e kolonave në të cilat dëshironi të ndani përmbajtjen, ndërsa gjerësia e kolonave përcaktohet nga shfletuesi, duke marrë parasysh hapësirën e disponueshme.
- kolonë-gjerësi vjen nga ana e kundërt: tregon se çfarë duhet të jenë përafërsisht kolonat, megjithatë, llogaritjen e numrit të tyre e lë në diskrecionin e shfletuesit.
Kolonat: 12em; /* gjerësia e kolonës: 12em; numërimi i kolonave: automatik; */ kolona: 2; /* kolona-width: auto; numërimi i kolonave: 2; */ kolonat: auto; /* kolona-width: auto; numërimi i kolonave: automatik; */ kolonat: auto 12em; /* gjerësia e kolonës: 12em; numërimi i kolonave: automatik; */ kolona: 2 auto; /* kolona-width: auto; numërimi i kolonave: 2; */
Çfarë ndodh nëse specifikoni numrin e kolonave dhe gjerësinë optimale? Sipas specifikimeve, në këtë rast numërimi i kolonave përcakton numrin maksimal të kolonave:
Artikulli ( kolonat: 150 px 3; /* gjerësia e kolonës: 150 px; numri i kolonave: 3; */ )
Në fakt, duke ndjekur zhvillimin e standardeve të uebit, duke përfshirë disa nga artikujt e mi rreth CSS3 (shih, për shembull,), shpresoj që të jeni jo më pak të frymëzuar nga mundësitë që hapen për zhvilluesit e uebit. Mjetet adaptive, fleksibël dhe të fuqishëm për menaxhimin e vendosjes së përmbajtjes po bëhen më të afërta dhe më të aksesueshme. Dhe zgjidhja e problemeve komplekse po bëhet më e lehtë.
Interaktive
Ju mund të luani me mënyrën se si funksionon CSS3 Multi-colonn në ietestdrive.com:
Provojeni, eksperimentoni. Raportoni gabimet te zhvilluesit e shfletuesit. Dhe mos harroni të mendoni se çfarë do të shohin përdoruesit e shfletuesve më të vjetër (dhe në dukje moderne, por ende jo plotësisht në përputhje me standardet)—për shembull, mund të përdorni një shtojcë për jQuery Columnizer. Mos harroni përshtatshmërinë dhe shikuesit e ekraneve të vegjël dhe të mëdhenj.