Urte askotan, CSS flotak webguneak diseinuak sortzeko osagaiak izan dira. Zure diseinua zutabe anitzetarako deitzen baduzu, karroza aktibatu duzu . Metodo honen arazoa da diseinatzaile / garatzaileek web diseinu konplexuak sortzerakoan asmatutako sinestezina izan arren CSS flotak inoiz ez zirela modu honetan erabili behar.
Mugikorrek eta CSS kokapenek urte asko daramatzate web diseinuko leku bat egoteko, diseinu berriagoak dituzten teknikak, CSS Grid eta Flexbox-ek gaur egun web diseinatzaileek beren gunearen diseinuak sortzeko modu berriak emanez. Potentzial handia erakusten duen beste diseinu teknika berri bat CSS zutabe anizkoitzak da.
Gaur egun CSS zutabeak egon dira urte askotan, baina nabigatzaile zaharragoetan euskarririk ez izatea (batez ere Internet Explorerren bertsio zaharragoak) asko aldatu dituzte profesionalek beren produkzio-lanetan.
IEren bertsio zaharragoen euskarrien amaierarekin, web diseinatzaile batzuek CSS formatu berrien aukerekin, CSS zutabeekin konparatuz gero, eta kontrol mugikor horrekin baino askoz ere kontrol handiagoa dute.
CSS zutabeen oinarriak
Izenak dioen bezala, CSS Zutabe anitzak (CSS3 zutabe anitzeko diseinua ere deitua) edukia zutabe kopuru jakin batean zatitzea ahalbidetzen du. Erabili beharreko oinarrizko CSS propietateak hauek dira:
- Zutabe-zenbaketa
- Zutabe-hutsune
Zutabe kopuruaren arabera, zuk nahi dituzun zutabe kopurua zehazten du. Zutabeen hutsunea zutabe horien arteko tartea edo tartea izango litzateke. Nabigatzaileak balio horiek hartuko ditu eta zuk zehaztutako zutabe kopurua banatuko du edukia.
CSS zutabe anitzetako adibide komun bat praktikan egongo litzateke testu-edukien bloke bat zutabe anitzetan banatzea, egunkariaren artikulu batean ikusiko duzunaren antzekoa. Esan HTML markaketa hau duzula (kontuan izan, adibidez, paragrafo baten hasiera besterik ez dut egiten, praktikan litekeena da marka honen edukiaren hainbat paragrafo ere):
Zure artikuluaren goiburua
Imajinatu hemen testu zati asko ...
CSS estilo hauek idatzi ondoren:
.content {-moz-column-count: 3; -webkit-column-count: 3; zutabe kopurua: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; zutabe-hutsunea: 30 px; }CSS arau honek "eduki" zatiketa zatituko luke 3 zutabe berdinetan, horien arteko 30 pixeleko hutsune batekin. Bi zutabeak 3 izan ezik, balioa aldatu eta arakatzaileak zutabe horien zabalera berriak kalkulatuko ditu edukia era uniformean zatitzeko. Oharra nabarmentzen diren lehen mailako hornitzaileak erabiltzen ditugu, eta ez dira aurrizkiaren deklarazioak.
Hori bezain erraza da, modu horretan erabiltzea webguneen erabilerarako zalantzagarria da. Bai, zutabe anitzetako eduki sorta bat zatitu dezakezu, baina agian ez da Web orriko irakurketarako esperientzia onena, batez ere zutabe horien altuera pantailaren "tolestu" azpian jaisten bada.
Irakurleek gora eta behera joan beharko lukete eduki osoa irakurtzeko. Oraindik ere, CSS zutabeetako zuzendaria hemen ikusten duzun bezain erraza da, eta paragrafo batzuen edukia zatitu baino askoz ere gehiago erabil daiteke. Izan ere, diseinua erabil daiteke.
Diseinua CSS zutabeekin
Esan edukia duten 3 eduki zutabe dituen web orri bat duzula. Webgunearen diseinu oso tipikoa da eta 3 zutabe horiek lortzeko, normalean zatitzen dituzun zatitzaileak mugituko dituzu. Hainbat zutabe CSSren bidez, askoz errazagoa da.
Hona hemen HTML adibide batzuk:
Azken Albisteak
Edukia hemen joanen litzateke ...
Gure Blogetik
Edukia hemen joanen litzateke ...
Datozen gertaerak
Edukia hemen joango litzateke ... p>
Zutabe anitz horietako CSSak aldez aurretik ikusi duenarekin hasten da:
.content {-moz-column-count: 3; -webkit-column-count: 3; zutabe kopurua: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; zutabe-hutsunea: 30 px; }Orain, erronka da hemen, nabigatzaileak edukiak modu berdinean banatzea nahi baita, eta, beraz, zatiketa horien edukia luzera desberdina bada, arakatzaileak banakako zatiketa baten edukia banatuko du, hasierako zutabea eta zutabe bat gehituz gero beste bat jarraitzen (hau ikusi ahal izango duzu kode hau erabiliz esperimentu bat exekutatzeko eta zatiketa bakoitzaren barruan edukiaren luzera ezberdinak gehitzeko).
Hori ez da nahi duzuna. Zatiketa horietako bakoitzek zutabe desberdin bat sortu nahi dute eta, banakako zatiketa baten edukia zein handia edo txiki izan daitekeen, zatitu nahi ez zenuke. Horretarako, CSS lerro gehigarri hau gehitu dezakezu:
.content div {bistaratzea: inline-block; }Honek "edukia" barruan dauden zatiketa horiek osorik mantenduko ditu, nahiz eta nabigatzaileak zutabe anitzetan banatzen dituen. Nahiz eta hobe, ez dugu inolako zabalera finkorik ematen ez dudalako, zutabe horiek automatikoki tamainaz aldatuko dira arakatzailearen tamaina aldatzen, web sentikorren aplikazio egokia egiteko. "Lerro barneko" estiloarekin batera, hiru zatiketa bakoitzeko eduki zutabe bereizi bat izango da.
Zutabe-zabalera erabiltzea
Jabetzako "zutabe-zenbaketa" gainetik beste jabetza bat dago, eta zure diseinuen beharren arabera, zure gunearen aukera hobea izango da. Hau da "zutabe zabalera". Aurretik agertzen den HTML markatze bera erabiliz, hau egin genezake gure CSSarekin:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; zutabe zabalera: 500 px; -moz-column-gap: 30px; -webkit-column-gap: 30px; zutabe-hutsunea: 30 px; } .content div {erakutsi: inline-block; }Arakatzaile honek "zutabe zabalera" erabiltzen du zutabe horren gehienezko balioa den moduan. Beraz, arakatzailearen leihoan 500 pixel zabal baino gutxiago badago, 3 zatiketa horiek zutabe bakarrean agertuko lirateke, beste baten gailurretan. Pantaila diseinu mugikorretan / txikietan erabilitako diseinu tipikoa da.
Arakatzailearen zabalera handiagotzeko 2 zutabe egokitzeko, zehaztutako zutabe hutsuneekin batera, arakatzaileak bi zutabe zutabe bakarreko diseinura automatikoki abiatuko dira. Pantailaren zabalera handitu eta, azkenean, 3 zutabeko diseinua lortuko duzu, gure zutabeetan bistaratutako 3 zatietako bakoitzean. Berriro ere, hau da modu egokian, gailu anitzeko konfigurazio anitzetarako eta diseinu-estiloak aldatzeko multimedia-kontsultak erabili beharrik ere.
Beste zutabearen propietateak
Hemen estalitako propietateez gainera, "zutabe-araua" propietateak ere baditu, zutabeen arteko arauak sortzeko kolorea, estiloa eta zabaleraren balioak ere badituzu. Horrek ertzekin ordez erabili beharko lirateke zutabeak bereizteko lerro batzuk izan ditzazun.
Denbora esperimentatzeko
Une honetan, CSS Multiple Column Layout oso ondo onartzen da. Aurrizkiekin, web erabiltzaileen% 94ek baino gehiagok ikusi ahal izango lituzke estilo hori, eta onartu gabeko taldea Internet Explorer-en bertsio zaharragoak izango litzateke.
Une honetan laguntza maila honekin, ez dago arrazoirik CSS Zutabeekin esperimentatzen hasteko eta estilo horiek prestatzeko prestatutako webguneetan. Zure esperimentuak HTML artikulu honetan eta CSS erabiliz aurkez ditzakezu artikulu honetan eta inguruan jolastu balio ezberdinekin, zure gunearen diseinuaren beharren arabera onena izango litzatekeen ikusteko.