CSS Þú getur orðið spenntur um árið 2015
CSS er stöðugt að þróa tungumál, og eins og nýtt ár hefst er frábært að skoða nokkrar af nýju eiginleikum sem við getum byrjað að gera tilraunir með.
Í þessari grein mun ég kíkja á nokkrar nýrri mát og einstaka CSS eiginleika sem eru að fá vafra stuðning. Ekki eru allar þessar aðgerðir sem þú munt geta notað í framleiðslu strax, og sumir eru aðeins fáanlegar á bak við tilraunalög. Hins vegar finnur þú fullt af hlutum hér sem þú getur byrjað að spila með - jafnvel þótt aðeins sé á frumgerðarsviðinu í þróuninni.
CSS veljari stig 4
Stig 3 keyrslutækjanna er vel útfærður í vöfrum og leiddi okkur til gagnsæja valda eins og nth-barn. Kjósendur stig 4 færir okkur enn fleiri leiðir til að miða á efni með CSS.
Neitun gervi-bekknum: ekki
Útilokar gervi-flokkur valinn : birtist ekki á stigi 3 en fær uppfærsla á stigi 4. Á stigi 3 er hægt að fara framhjá vali til að segja að þú viljir ekki að CSS sé beitt á þennan þátt. Til að búa til alla texta nema texti með innblástursklassa geturðu notað eftirfarandi reglu.
p:not(.intro) { font-weight: normal; }Á stigi 4 í forskriftinni er hægt að fara fram á kommu aðskilin lista yfir valsmenn.
p:not(.intro, blockquote) { font-weight: normal; }Venslaflokksflokkurinn: hefur
Þessi gervi-flokkur tekur vallista sem rifrildi og mun passa ef einhver þessara valmælenda mætir einum þáttum. Það er auðveldast að sjá með dæmi, í þessu dæmi eru allir þættir sem innihalda mynd, svört landamæri sótt:
a:has( > img ) { border: 1px solid #000; }Í þessu öðru dæmi er ég að sameina : hefur með : ekki og valið aðeins li þætti sem innihalda ekki þáttarþætti:
li:not(:has(p)) { padding-bottom: 1em; }Samsvörunin - allir gervi-flokkar: passar
Þessi gervi-flokkur þýðir að við getum sótt reglur við hópa seljenda, til dæmis:
p:matches(.alert, .error, .warn) { color: red; }Til að prófa vafrann þinn til að styðja við þessa og aðra háþróaða valkennara er hægt að nota prófið á css4-selectors.com. Þessi síða er líka frábær úrræði til að komast að því að komast í snertingu við næstu valendur.
CSS blandunarhamur
Ef þú þekkir blend modes í Photoshop þá gætirðu haft áhuga á því Samsetning og blanda forskrift. Þessi forskrift leyfir okkur að beita blönduhamum að bakgrunni og til HTML-atriða þarna í vafranum.
Í eftirfarandi CSS er ég með kassa sem inniheldur bakgrunnsmynd. Með því að bæta við bakgrunnslit og setja síðan bakgrunnsmengun til að litna og margfalda þá get ég beitt áhugaverðum áhrifum á myndirnar.
.box {background-image: url(balloons.jpg);}.box2 {background-color: red;background-blend-mode: hue;}.box3 {background-color: blue;background-blend-mode: multiply;}
Notkun bakgrunnsblönduhamur
Blanda-blanda-ham eign gerir þér kleift að blanda texta ofan á mynd. Í dæmi hér að neðan er ég með h1 þá í .box2 setti ég á blöndunartillögu: skjá.
.box {background-image: url(balloons-large.jpg);}.box h1 {font-size: 140px;color: green;}.box2 h1 {mix-blend-mode: screen;}
Notkun blandunarblanda
CSS Blend Modes hafa í raun ótrúlega góðan stuðning í nútíma vöfrum öðrum en Internet Explorer, sjá stuðningslistann fyrir Bakgrunnur-blanda-ham , blanda-blanda-ham er í boði í Safari og Firefox, og á bak við tilraunaeiginleikana fána í Óperu og Króm. Með vandlega notkun er þetta einmitt það sem þú getur byrjað að spila með til að auka hönnunina þína, svo lengi sem fallbackin skilur ekki hlutina ólæsanlegt í óbreyttum vafra.
Ef þú þarft að fá meiri stuðning fyrir eldri vafra og svo finnst þér ekki að nota blandaða stillingar í framleiðslu, ekki gleyma því að þú getur notað þetta í þróun til að forðast ferðir í gegnum Photoshop. Þegar þú hefur lokið myndum og meðhöndlun búðu til framleiðslu myndirnar í grafík forrit, skipta um CSS áhrif.
Frekari upplýsingar um notkun blendarmála með Þessi hagnýta grein um CSS Bragðarefur , í auðlindirnar á vef Adobe og á Dev Opera vefsíðu.
The calc () virka
The calc () virka er hluti af CSS gildi og einingar mát stig 3. Það þýðir að þú getur gert stærðfræðilegar aðgerðir rétt innan CSS þinnar.
Einföld notkun calc () er að finna ef þú vilt setja bakgrunnsmynd á botn hægra megin á frumefni. Staðsetning einingar 30 punkta frá efra vinstri er auðvelt, þú myndir nota:
.box {background-image: url(check.png);background-position: 30px 30px;}Hins vegar getur þú ekki gert það frá neðst til hægri, þegar þú þekkir ekki málið ílátið. The calc () aðgerðir þýðir að þú getur dregið 30 pixla okkar frá 100% af breidd eða hæð:
.box {background-image: url(check.png);background-position: calc(100% - 30px) calc(100% - 30px);}Browser stuðningur við calc () er góður í nútíma vafra, þó Get ég notað skýrslur um að nota það sem bakgrunnsstaða í IE9 leiðir í vafranum að hrun.
CSS Trickery og Calc Function er skemmtileg grein um að nota calc () til að leysa CSS vandamál. Það eru nokkur einföld dæmi um notkun yfir á CSS bragðarefur.
CSS Variables
Öflugur eiginleiki CSS fyrir örgjörva eins og Sass, er hæfni til að nota breytur í CSS okkar. Á mjög einföldum stigum getum við sparað mikinn tíma með því að lýsa yfir litum og leturum sem notaðar eru í hönnuninni okkar, og nota breytu þegar tiltekin litur eða leturgerð er notuð. Ef við ákveðum síðan að klíra leturgerð eða litaval sem við þurfum aðeins að breyta þessum gildum á einum stað.
CSS Variables, sem lýst er í CSS sérsniðnar eiginleikar fyrir Cascading Variables mát stig 1, færir þessa virkni inn í CSS.
:root {--color-main: #333333;--color-alert: #ffecef;}.error { color: var(--color-alert); }Því miður styður vafrinn við CSS Variables er takmörkuð við Firefox núna.
Þú getur séð fleiri dæmi og fundið meira í Þessi grein á Mozilla Developer Network.
CSS útilokanir
Við erum öll kunnugt um flot í CSS. Einfaldasta dæmiið gæti verið fljótandi mynd til að leyfa texta að flæða í kringum hana. Hins vegar eru flotar tiltölulega takmörkuð þar sem flotið er alltaf upp á toppinn, þannig að á meðan við getum flot mynd til vinstri og vefjað texta til hægri og neðan við það er engin leið til að sleppa mynd í miðju skjalsins og flæða texta allt í kringum, eða staðsetja það neðst og láta texta flæða um topp og hlið.
Útilokanir leyfir þér að vefja texta í kringum allar hliðar staðsetningar hlutar. Það skilgreinir ekki nýja aðferð við að staðsetja sig, svo hægt er að nota það í tengslum við aðrar aðferðir. Í dæminu hér fyrir neðan er ég algerlega að setja frumefni ofan á textabluti og lýsa því yfir að þessi þáttur sé útilokun með eignarhleðsluflæðinu með gildi bæði, þannig að textinn virðir þá stöðu frumefnisins og flæðir um það.
.main {position:relative;}.exclusion {position: absolute;top: 14em;left: 14em;width: 320px;wrap-flow: both;}
Útilokanir í Internet Explorer
Stuðningur við vafra fyrir útilokanir og hula flæði: báðir eru takmörkuð við IE10 + og þurfa fyrirframforskeyti. Athugaðu að útilokanir voru þar til nýlega tengdir CSS Forms forskriftinni sem ég lít á næstum, svo að einhver af upplýsingunum tengist á milli tveggja.
CSS form
Útilokunarlýsingin fjallar um umbúðir texta um rétthyrndar hlutir. Formar fær okkur miklu öflugri getu til að vefja texta í kringum rétthyrndar hlutir, svo sem flæðandi texta í kringum feril.
Stig 1 í CSS Forms skilgreiningunni skilgreinir nýtt eignarform-úti. Þessi eign er hægt að nota á floated þáttur. Í dæmi hér að neðan er ég að nota form-utan til að beygja texta um flot mynd.
.shape {width: 300px;float: left;shape-outside: circle(50%);}
CSS form gerir okkur kleift að beygja texta í kringum blöðruna
Stuðningur við vafra fyrir form Level 1 felur í sér Chrome og Safari, sem þýðir að þú gætir byrjað að nota það í stílheitum fyrir IOS tæki. Stig 2 í forskriftinni gerir þér kleift að móta texta inni í þætti með lögun-inni eign, svo það er meira að koma frá þessari aðgerð.
Lestu meira um form í þessum lista yfir sundurliðaðar greinar eftir Sara Soueidan , og meðfylgjandi auðlindir.
CSS Grid Layout
Ég hef skilið eftir uppáhalds minn þar til síðast. Ég hef verið mikill aðdáandi af nýjum Grid Layout forskrift frá upphafi framkvæmd í Internet Explorer 10. CSS Grid Layout gefur okkur leið til að búa til rétta rist mannvirki með CSS og staðsetningu hönnun okkar á því rist.
Grid layout gefur okkur aðferð til að búa til mannvirki sem eru ekki ólíkar með því að nota töflur fyrir skipulag. Hins vegar, sem lýst er í CSS og ekki í HTML, leyfa þeir okkur að búa til skipulag sem hægt er að endurskilgreina með fjölmiðlafyrirspurnum og laga sig að mismunandi samhengi. Það gerir okkur kleift að skilja regluna af þætti í upptökunni frá sjónrænum kynningum. Sem hönnuður þýðir þetta að þú ert frjálst að breyta staðsetningu hliðarþátta sem er best fyrir skipulag þitt á mismunandi hléum og þarf ekki að koma í veg fyrir skynsamlega skipulagt skjal fyrir móttækilegan hönnun. Ólíkt því sem HTML-borð byggir á, getur þú lagað atriði á ristinni. Svo eitt atriði getur skarast annað ef þörf krefur.
Í dæminu hér að neðan lýsum við yfir rist á frumefni með bekknum .wrapper. Það hefur þrjá 100 punkta breitt dálka með 10 px rennurum og þremur röðum. Við stillum reitina inni í ristinu með því að nota lína númer fyrir og eftir, yfir og neðan svæðið þar sem við viljum að þátturinn sé sýndur.
Grid Example ABCDEF
Ristið dæmi í Chrome
Vefur stuðningur fyrir nýjustu Grid Specification er takmörkuð við Chrome með "Tilraunaverkefni Web Platform Features" flaggvirkt. Það er traustur framkvæmd fyrstu útgáfu forskriftarinnar í Internet Explorer 10 og uppi.
Finndu út meira um Grid Layout á minn Rist með dæmi staður þar sem þú getur séð nokkur dæmi um rist sem virka í Chrome, með tilraunaverkefnum á vefnum. Ég talaði einnig í fyrra á CSS Conf EU á Grid og þú getur séð þetta myndband hér.
Ertu með framúrskarandi forskrift sem ekki er getið hér?
Ég vona að þú hafir notið þessa fljótu ferðalags um nokkrar af áhugaverðu, nýrri eiginleikum CSS. Notaðu tengda auðlindina til að finna út meira um þá eiginleika sem þú hefur fundið mest áhugavert. Láttu mig vita í athugasemdum ef þú ert með uppáhalds komandi CSS eiginleiki sem þú heldur að fólk ætti að vita um, eða fleiri frábærir auðlindir og dæmi um eitthvað af þeim eiginleikum sem ég hef lýst.