CSS voit saada innoissaan vuonna 2015
CSS on jatkuvasti kehittyvä kieli, ja uudenvuoden alkaessa on hyvä hetki tutustua joihinkin kehittyviin piirteisiin, joihin voimme alkaa kokeilla.
Tässä artikkelissa tarkastelen joitain uudempia moduuleja ja yksittäisiä CSS-ominaisuuksia, jotka saavat selainta tukea. Kaikki nämä eivät ole ominaisuuksia, joita voit käyttää tuotannossa välittömästi, ja jotkut ovat käytettävissä vain kokeiluluokkien takana. Löydät kuitenkin paljon asioita, joista voit aloittaa pelaamisen - vaikkakin vain prototyping-vaiheessa.
CSS-valitsimien taso 4
Tason 3 valitsimien määritys on hyvin toteutettu selaimissa ja tuonut meille hyödyllisiä valitsimia, kuten n: ää lasta. Valitsimet taso 4 tuo meille entistä enemmän tapoja kohdistaa sisältöä CSS: llä.
Negatiivinen pseudo-luokka: ei
Negatiivisen pseudoluokan valitsin : ei näy tasossa 3, mutta saa päivityksen tasolle 4. Tason 3 kohdalla voit siirtää valitsimen sanoaksesi, että et halua CSS: ää käyttävän tätä elementtiä. Jotta kaikki tekstit, lukuun ottamatta tekstiä, luokka intro lihavoitu, voit käyttää seuraavaa sääntöä.
p:not(.intro) { font-weight: normal; }Erittelyn tasolla 4 voit välittää pilkuilla erotetun luettelon valitsimista.
p:not(.intro, blockquote) { font-weight: normal; }Relationaalinen pseudo-luokka: on
Tämä pseudo-luokka ottaa valintaluettelon argumenttina ja vastaa, jos jokin näistä valitsimista vastaa yhtä elementtiä. Esimerkkinä on helpointa nähdä, tässä esimerkissä kaikki elementit, jotka sisältävät kuvan, on musta reunus:
a:has( > img ) { border: 1px solid #000; }Tässä toisessa esimerkissä yhdistän : on : ei ja valitsemalla vain li elementtejä, jotka eivät sisällä kappaleelementtiä:
li:not(:has(p)) { padding-bottom: 1em; }Ottelut - kaikki pseudo-luokat: ottelut
Tämä pseudo-luokka tarkoittaa, että voimme soveltaa sääntöjä valitsimien ryhmiin, esimerkiksi:
p:matches(.alert, .error, .warn) { color: red; }Testata selaimesi näiden ja muiden kehittyneiden valitsimien tukemiseksi css4-selectors.com. Tämä sivusto on myös erinomainen resurssi, josta saat lisätietoja tulevista valitsimista.
CSS-sekoitustilat
Jos olet perehtynyt Photoshopin sekoitustiloihin, saatat olla kiinnostunut Koostumus ja sekoittaminen. Tämä määrittely antaa meille mahdollisuuden soveltaa sekoitustiloja taustoihin ja mihin tahansa HTML-elementteihin juuri selaimessa.
Seuraavassa CSS: ssä on laatikko, joka sisältää taustakuvan. Lisäämällä taustavärin ja asettamalla taustan sekoitus -tilan sävyttämiseksi ja monistamiseksi lisäämään mielenkiintoisia vaikutuksia kuviin.
.box {background-image: url(balloons.jpg);}.box2 {background-color: red;background-blend-mode: hue;}.box3 {background-color: blue;background-blend-mode: multiply;}
Tausta-sekoitus-tilan käyttäminen
Sekoitus-sekoitus-ominaisuuden avulla voit sekoittaa tekstiä kuvan päälle. Alla olevassa esimerkissä olen h1 sitten .box2 asetin sekoitus-sekoitus-tilaan: näyttö.
.box {background-image: url(balloons-large.jpg);}.box h1 {font-size: 140px;color: green;}.box2 h1 {mix-blend-mode: screen;}
Mix-blend-tilan käyttäminen
CSS Blend -modeissa on yllättävän hyvä tuki nykyaikaisissa selaimissa kuin Internet Explorerissa, katso tukimatriisi tausta-sekoitus-tilassa , mix-blend-tila on käytettävissä Safarissa ja Firefoxissa sekä kokeellisten ominaisuuksien lipun alla Opera ja Chromessa. Huolellisella käyttötarkoituksella tämä on täsmälleen sellainen määrittely, jonka voit aloittaa parantaaksenne malleja, niin kauan kuin varmuuskopiointi ei jätä asioita lukukelvottomiksi ei-tukevissa selaimissa.
Jos tarvitset täydellistä tukea vanhemmille selaimille, joten älä sekoita sekoitustiloja vielä tuotannossa, älä unohda, että voit käyttää niitä kehityksen aikana, jotta Photoshopista ei päästä matkoja. Kun olet viimeistellyt kuvia ja hoitoja, luo tuotanto-kuvat grafiikkamuotoon, joka korvaa CSS-tehosteet.
Lue lisää sekoitustilan käytöstä tämä käytännöllinen artikkeli CSS Tricksistä , sisään resurssit Adoben verkkosivuilla ja Dev Opera -verkkosivustolla.
Calc () -toiminto
Calc () -toiminto on osa CSS-arvot ja yksikkömoduulin taso 3. Se tarkoittaa, että voit tehdä matemaattisia toimintoja aivan CSS: n sisällä.
Kalkin () avulla on helppo löytää, jos haluat sijoittaa taustakuvan elementin oikeasta alareunasta. Elementin 30px sijoittaminen vasemmalta ylhäältä on helppoa, käytät:
.box {background-image: url(check.png);background-position: 30px 30px;}Et kuitenkaan voi tehdä sitä alhaalta oikealta, kun et tiedä säiliön mittasuhteita. Calc () -toiminnolla voit vähentää 30 pikseliä 100% leveydestä tai korkeudesta:
.box {background-image: url(check.png);background-position: calc(100% - 30px) calc(100% - 30px);}Selaustuki calc (): lle on hyvää nykyaikaisissa selaimissa, vaikkakin Voinko käyttää raportit, jotka käyttävät sitä tausta-aseman arvona IE9: ssa, selaimen kaatuminen.
CSS-temppu ja laskutoiminto on hauska artikkeli calc () käyttämisestä CSS-ongelman ratkaisemiseksi. On olemassa yksinkertaisia käyttötapauksia yli CSS Tricks.
CSS-muuttujia
CSS-esiprosessoreiden, kuten Sassin, voimakas ominaisuus on kyky käyttää muuttujia CSS: ssä. Hyvin yksinkertaisella tasolla voimme säästää paljon aikaa ilmoittamalla suunnittelussa käytetyt värit ja fontit ja sitten käyttämällä muuttujaa, kun käytetään tiettyä väriä tai fonttia. Jos sitten päätämme nipistää fonttia tai väripalettia, tarvitsemme vain muuttaa nämä arvot yhteen paikkaan.
CSS-muuttujat, jotka on kuvattu kohdassa CSS mukautetut ominaisuudet Cascading Variables -moduulin tasolle 1, tuo tämän toiminnon CSS: ään.
:root {--color-main: #333333;--color-alert: #ffecef;}.error { color: var(--color-alert); }Surullisesti selaimen tuki CSS-muuttujia on rajoitettu Firefoxen tällä hetkellä.
Näet enemmän esimerkkejä ja tutustu lisää tämä artikkeli Mozillan kehittäjäverkostosta.
CSS-poikkeukset
Kaikki tunnetaan kelluvista CSS: stä. Yksinkertaisin esimerkki saattaa olla kelluva kuva, jotta teksti kulkee sen ympärillä. Kuitenkin kellukkeet ovat melko rajoitettuja, koska kelluva esine nousee aina ylhäältä, joten kun voimme kellastuttaa kuvan vasemmalle ja kääriä tekstiä oikealle ja alle sen, ei ole mahdollista pudottaa kuvaa keskelle dokumenttia ja virtausta ympäri tai aseta se alareunaan ja anna tekstin kulkea ylä- ja sivun ympäri.
poissulkemiset voit kääriä tekstiä sijoitetun objektin kaikkiin sivuihin. Se ei määritä uutta paikannusmenetelmää, joten sitä voidaan käyttää yhdessä muiden menetelmien kanssa. Alla olevassa esimerkissä olen ehdottomasti sijoittamassa elementti tekstilohkon päälle ja julistanut sen elementiksi syrjäytymisestään ominaisuuden käärevirtauksella molempien arvolla , joten teksti kunnioittaa elementin sijaintia ja virtaa ympäri se.
.main {position:relative;}.exclusion {position: absolute;top: 14em;left: 14em;width: 320px;wrap-flow: both;}
Poikkeukset Internet Explorerissa
Selaimen tuki poissulkemisten ja wrap-flow: molemmat on tällä hetkellä rajoitettu IE10 +, joka vaatii -ms etuliite. Huomaa, että Exclusions oli vasta äskettäin sidottu CSS-muotoihin, jotka katson seuraavaksi, joten jotkin tiedot verkossa yhdistävät nämä kaksi.
CSS-muotoja
Exclusions-eritelmässä käsitellään tekstin käärintä suorakulmaisten esineiden ympärillä. Muodot tuovat meidät paljon tehokkaammin kykyyn kääntää tekstiä ei-suorakaiteen muotoisten esineiden ympärille, kuten virtaavan tekstin käyrän ympärille.
CSS-muodot -standardin taso 1 määrittää uuden ominaisuuden muodon ulkopuolelta. Tätä ominaisuutta voidaan käyttää kelluvassa elementissä. Alla olevassa esimerkissä käytän muodon ulkopuolella käyrän tekstiä kelluvan kuvan ympärillä.
.shape {width: 300px;float: left;shape-outside: circle(50%);}
CSS-muodot antavat meille mahdollisuuden käyristää tekstiä pallon ilmakuvan ympärillä
Selaustuki muotoille tasolle 1 sisältää Chrome ja Safari, joten voit käyttää sitä iOS-laitteiden tyylitiedostoissa. Erittelyn tason 2 avulla voit muokata tekstiä sisältävien elementtien muotoa sisältävän ominaisuuden avulla. Tästä ominaisuudesta tulee enemmän.
Lue lisää Muotoista tässä A List Apart -artikkelissa Sara Soueidan , ja mukana olevat resurssit.
CSS Grid Layout
Olen jättänyt suosikkini viimeiseen. Olen ollut suurenmoinen kehittäjä Grid Layout -tapahtumasta, koska se on toteutettu nopeasti Internet Explorer 10: ssä. CSS Grid Layout antaa meille mahdollisuuden luoda oikeat ristikkorakenteet CSS: llä ja sijoittaa muotoilemme tähän verkkoon.
Verkkosuunnittelu antaa meille menetelmän sellaisten rakenteiden luomiselle, jotka eivät ole toisin kuin taulukoita layoutissa. Kuitenkin kuvataan CSS: ssä eikä HTML: ssä, ne antavat meille mahdollisuuden luoda sellaisia ulkoasuja, jotka voidaan määritellä median kyselyillä ja sopeutua erilaisiin kontekstiin. Sen avulla voimme erottaa lähdekoodien järjestys erikseen niiden visuaalisesta esityksestä. Suunnittelijana tämä tarkoittaa sitä, että voit vapaasti muuttaa sivuosien sijaintia parhaalla mahdollisella tavalla asetteluksi eri rajapisteissä, eikä sinun tarvitse vaarantaa järkevästi jäsenneltyä asiakirjaa herkälle suunnittelulle. Toisin kuin HTML-taulukko-pohjainen ulkoasu, voit kerätä kohteita ruutuun. Joten yksi kohde voi päällekkäin toisesta, jos sitä tarvitaan.
Alla olevassa esimerkissä ilmoitamme ruudukon elementille, jossa on .wrapper- luokka . Siinä on kolme 100 pikselin leveää saraketta, joissa on 10 px vesikourut ja kolme riviä. Sijoitamme ruudut ruutuun rivinumerot ennen ja jälkeen, ylä-ja alapuolella alue, jossa haluamme elementti näytetään.
Grid Example ABCDEF
Ristikkomalli Chromessa
Selaintuki uusin Grid-määritys on rajoitettu Chromeen, jonka kokeellinen Web Platform -ominaisuus on käytössä. Internet Explorer 10: ssa ja uudemmassa versiossa on vakiomuotoinen spesifikaation versio.
Lisätietoja Grid Layout -ominaisuudesta Ruutu esimerkin avulla sivusto, jossa näet useita Grid-esimerkkejä, jotka toimivat Chromessa, ja kokeelliset verkkoalustoominaisuudet ovat käytössä. Puhuin myös viime vuonna CSS Conf EU on Gridissa ja näet videon tässä.
Onko sinulla suosikki uutuuksia, joita ei ole mainittu tässä?
Toivon, että olet nauttinut tästä nopeasta kiertueesta joitain CSS: n mielenkiintoisimmista, uudemmista ominaisuuksista. Käytä linkitettyjä resursseja saadaksesi lisätietoja mielenkiintoisimmista ominaisuuksista. Haluaisin kertoa huomautuksistanne, jos sinulla on suosikki CSS-ominaisuus, jonka mielestäsi ihmisten pitäisi tietää, tai muita suuria resursseja ja esimerkkejä mistä tahansa kuvatuista ominaisuuksista.