Rakentaminen monimutkaisia, joustavia asetteluja ei ole koskaan ollut helppoa, mutta CSS3 on varmasti poisti paljon päänsärkyä.
CSS3-ominaisuuksia kuten flexboxiin ja pylväät ovat tehneet monimutkaisia ulkoasuja todellisena mahdollisuutena ja nyt he ovat yhdistyneet yksi uusimmista lisäyksistä web-suunnittelija työkalupakkiin: CSS Regions.
CSS-alueiden avulla voit siirtää sisältöä sarjaan kontteja yhdellä sivulla. Se vastaa tekstiluokkien linkittämistä sovellukseen, kuten InDesign. Se mahdollistaa joitakin ulkoasuja, jotka olivat aiemmin mahdollista vain hämärtämällä linjan datan ja tyylien välillä.
Kuten aina, selaintuki ei ole täydellinen.
CSS-alueet ovat edelleen luonnos, mikä tarkoittaa, että se on kokeellista. Alun perin ainoa selain tosiasiallisesti tukemiseksi oli Internet Explorer 10 (ei, en ole hauskaa); vaikka IE10 käyttää iframea sisällön lähteenä.
Safari väittää tarjoavan tukea etuliitteellä.
Chromessa voit testata ominaisuutta avaamalla selaimesi, kirjoittamalla "about: flags" ja ottamalla käyttöön "enable-experimental-webkit-ominaisuudet" ja käynnistämällä selaimesi uudelleen.
Onneksi on myös a JavaScript-polyfilli jonka on luonut Adobe, joka tuo CSS-alueiden toiminnot selaimiin, jotka eivät tällä hetkellä tue sitä, voit löytää tämän GitHub.
Koska CSS-alueiden tarkoitus on sallia tekstimme virtaus eri säiliöissä, tarvitset ensin jotakin tekstiä:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus imperdiet purus ac eleifend. Vivamus posuere pellentesque nibh vel laoreet. Donec et sem odio. Donec sit amet lorem hendrerit, faucibus libero et, mattis lacus. Suspendisse dapibus rutrum felis quis interdum. Integer tincidunt, orci at condimentum placerat, est nulla sollicitudin velit, vitae gravida nisi odio ac ligula. Sed hendrerit ac massa vel ultricies. Vestibulum commodo, orci et tincidunt laoreet, enim tellus aliquet orci, quis dapibus sapien tellus eu felis. Etiam non arcu at eros luctus consectetur vitae eget nunc. In felis ipsum, vehicula ac mauris vel, porttitor gravida neque.Quisque orci turpis, aliquam vel tortor convallis, ullamcorper molestie nisl. Sed aliquet dignissim lorem non fringilla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue erat ac hendrerit ullamcorper. Morbi facilisis urna nunc, eget pretium lectus congue vitae.Ja sitten jotkut säiliöt:
Nyt meillä on perusmateriaali, me voimme linkittää kontit virtaamalla sisään ja virtaamaan, huomaat esimerkissä, jonka olen lisännyt -webkit- etuliitteen.
.text {-webkit-flow-into: text-flow;padding: 0;margin: 0;color: #F2F2F2;font-family: helvetica, arial;font-size: 16px;line-height: 22px;}.containers{-webkit-flow-from: text-flow;background: #333333;padding: 5px;margin-top: 100px;width: 200px;height: 300px;float: left;margin-right: 20px;}Jos tarkistat tämän selaimessa, näet, että teksti kulkee vain laatikosta toiseen. Jos sijoitat nyt kyseiset säiliöt, teksti jatkuu oikein.
-webkit-flow-into: text-flow;Tämä ominaisuus hyväksyy tunnisteen arvoksi. Kun siirrät arvon tähän ominaisuuteen, siitä tulee osa nimettyä virtausta, ja se lopettaa renderoinnin osana sivuvirtaa. Voit peruuttaa sen asettamalla ominaisuuden epäolennaiseksi.
Käytetyn virtauksen nimi on mielivaltainen, vain varmista, että olet johdonmukainen. Meillä voi olla myös useita elementtejä, joilla on sama nimetty virta kuin yllä olevassa esimerkissämme.
Tämä ei ole pelkästään tekstiä, vaan myös kuvia, luetteloita ja monia muita HTML-sisältöjä.
-webkit-flow-from: text-flow;Käytämme tätä ominaisuutta määritettäessä, mitkä elementit / kohdat pitäisi vastaanottaa määritettyä virtausta.
Arvo on virtauksen nimi, jonka määrittelemme virtauksen sisällyttämiseksi kohteeseen.
Muista, että kaikki alkuperäiseen tekstiin sovellettavat sisältötyypit säilytetään virtauksen kokoisena. Joten jos värittelet tekstiä sinistä, se pysyy sinisenä kaikissa kontissa.
Katsokaa esimerkkiä CSS-alueista toiminnassa tämä kynä Minä loin.
Selaintuki CSS-alueille on tällä hetkellä heikko, ja on pitkä matka siihen, että voimme luottaa siihen päivittäin. Mutta sen tarjoama joustavuus on loistava, ja kun täydellinen tuki on paikallaan, mielestäni CSS-alueet ovat menossa tekniikka tulevina vuosina.
Oletko innostunut CSS-alueista? Kuinka luulet pian, että voimme käyttää niitä? Kerro meille kommentit.
Esitetty kuva / pikkukuva, vesiputouskuva kautta cuatrok77.