CSS du kan bli begeistret om i 2015
CSS er et stadig utviklende språk, og som nyttår begynner, er det en flott tid å ta en titt på noen av de nye funksjonene som vi kan begynne å eksperimentere med.
I denne artikkelen tar jeg en titt på noen nyere moduler og individuelle CSS-funksjoner som får nettleserstøtte. Ikke alle disse funksjonene vil du umiddelbart kunne bruke i produksjon, og noen er bare tilgjengelige bak eksperimentelle flagg. Men du finner mange ting her du kan begynne å leke med - selv om du bare er i prototypingstadiet av utvikling.
CSS Selectors nivå 4
Nivå 3-seleksjonsspesifikasjonen er godt implementert i nettlesere og brakt oss nyttige selektorer som nth-barn. Selektorer Nivå 4 gir oss enda flere måter å målrette innhold med CSS.
Negativt pseudoklasse: ikke
Negativ pseudoklassevalg : vises ikke på nivå 3, men får en oppgradering på nivå 4. På nivå 3 kan du passere en velger for å si at du ikke vil at CSS skal brukes på dette elementet. Hvis du vil lage all tekst unntatt tekst med en klasse med intro- fet, kan du bruke følgende regel.
p:not(.intro) { font-weight: normal; }På nivå 4 i spesifikasjonen kan du passere i en kommaseparert liste over selektorer.
p:not(.intro, blockquote) { font-weight: normal; }Den relasjonelle pseudoklassen: har
Denne pseudoklassen tar en valgliste som et argument og vil samsvare dersom noen av disse seleksjonene ville matche ett element. Det er enklest å se med et eksempel, i dette eksemplet vil noen elementer som inneholder et bilde, ha den sorte grensen brukt:
a:has( > img ) { border: 1px solid #000; }I dette andre eksempelet kombinerer jeg : har med : ikke og velger bare li elementer som ikke inneholder et avsnittelement:
li:not(:has(p)) { padding-bottom: 1em; }Kampene - noen pseudoklasse: kamper
Denne pseudoklassen betyr at vi kan bruke regler til grupper av selektorer, for eksempel:
p:matches(.alert, .error, .warn) { color: red; }For å teste nettleseren din for støtte til disse og andre avanserte valgorer kan du bruke testen på css4-selectors.com. Det nettstedet er også en stor ressurs for å finne ut mer om kommende selektorer.
CSS-blandingsmodus
Hvis du er kjent med Blend Modes i Photoshop, kan du være interessert i Komposisjon og blandingsspesifikasjon. Denne spesifikasjonen vil tillate oss å bruke blandemodi til bakgrunn og til eventuelle HTML-elementer der i nettleseren.
I det følgende CSS har jeg en boks som inneholder et bakgrunnsbilde. Ved å legge til en bakgrunnsfarge og deretter sette bakgrunns-blend-modus til fargetone og multiplisere, kan jeg søke interessante effekter på bildene.
.box {background-image: url(balloons.jpg);}.box2 {background-color: red;background-blend-mode: hue;}.box3 {background-color: blue;background-blend-mode: multiply;}
Bruk bakgrunnsmessig modus
Mix-blend-mode-egenskapen lar deg blande tekst på toppen av et bilde. I eksemplet nedenfor har jeg en h1 deretter i .boks2 jeg setter til blanding-blend-modus: skjerm.
.box {background-image: url(balloons-large.jpg);}.box h1 {font-size: 140px;color: green;}.box2 h1 {mix-blend-mode: screen;}
Bruke mix-blend-modus
CSS Blend Modes har faktisk overraskende god støtte i moderne nettlesere enn Internet Explorer, se supportmatrisen for Bakgrunnen-blanding-modus , mix-blend-modus er tilgjengelig i Safari og Firefox, og bak eksperimentelle funksjoner flagger i Opera og Chrome. Med forsiktig bruk er dette akkurat den spesifikasjonen du kan begynne å leke med for å forbedre designene dine, så lenge fallbacken ikke lar ting være ulastelig i ikke-støttende nettlesere.
Hvis du trenger fullere støtte for eldre nettlesere, og ikke føler at blandingsmoduser kan brukes i produksjonen, må du ikke glemme at du kan bruke disse under utvikling for å unngå turer gjennom Photoshop. Når du har ferdigstillede bilder og behandlinger, lager du bildene i et grafikkprogram, og erstatter CSS-effektene.
Finn ut mer om bruk av blandemodus med denne praktiske artikkelen om CSS Tricks , i ressursene på Adobe-nettstedet og på Dev Opera nettsted.
Beregningen () -funksjonen
Beregningen () -funksjonen er en del av CSS verdier og enheter modul nivå 3. Det betyr at du kan gjøre matematiske funksjoner rett innenfor CSS.
En enkel bruk av calc () kan bli funnet hvis du vil plassere et bakgrunnsbilde nederst til høyre på et element. Plassering av et element 30px inn fra øverst til venstre er enkelt, du vil bruke:
.box {background-image: url(check.png);background-position: 30px 30px;}Du kan imidlertid ikke gjøre det fra nederst til høyre når du ikke kjenner dimensjonene til beholderen. Kalk () -funksjonene betyr at du kan trekke våre 30 piksler fra 100% av bredde eller høyde:
.box {background-image: url(check.png);background-position: calc(100% - 30px) calc(100% - 30px);}Nettleserstøtte for calc () er god på tvers av moderne nettlesere, selv om Kan jeg bruke rapporterer at bruk av det som en bakgrunnsposisjon i IE9 resulterer i at nettleseren krasjer.
CSS Trickery og Calc Function er en morsom artikkel om bruk av calc () for å løse et CSS-problem. Det er noen enkle brukstilfeller over på CSS Tricks.
CSS variabler
En kraftig funksjon av CSS-forprosessorer som Sass, er evnen til å bruke variabler i vårt CSS. På et veldig enkelt nivå kan vi spare mye tid ved å erklære fargene og skrifter som brukes i vårt design, og deretter bruke en variabel når du bruker en bestemt farge eller skrift. Hvis vi da bestemmer oss for å justere en skrift eller fargepaletten, trenger vi bare å endre disse verdiene på ett sted.
CSS Variabler, beskrevet i CSS Egendefinerte egenskaper for Cascading Variables modul nivå 1, bringer denne funksjonaliteten til CSS.
:root {--color-main: #333333;--color-alert: #ffecef;}.error { color: var(--color-alert); }Dessverre støtter nettleseren for CSS variabler er begrenset til Firefox for øyeblikket.
Du kan se flere eksempler og finne ut mer i denne artikkelen på Mozilla Developer Network.
CSS-ekskluderinger
Vi er alle kjent med flyter i CSS. Det enkleste eksempelet kan flyte et bilde for å la teksten flyte rundt den. Flytene er imidlertid ganske begrensede da det flytende elementet alltid stiger til toppen, så mens vi kan flyte et bilde igjen og pakke inn tekst til høyre og under det, er det ikke mulig å slippe et bilde inn i midten av dokumentet og flyt tekst helt rundt, eller plasser den nederst og la teksten flyte rundt toppen og siden.
utelukkelser lar deg legge inn tekst rundt alle sider av en posisjonert gjenstand. Det definerer ikke en ny metode for posisjonering selv, så det kan brukes sammen med andre metoder. I eksemplet nedenfor plasserer jeg absolutt et element på toppen av en blokk med tekst, og erklærer det elementet som en utelukkelse med egenskapsvippstrømmen med en verdi av begge, slik at teksten respekterer elementets posisjon og strømmer rundt den.
.main {position:relative;}.exclusion {position: absolute;top: 14em;left: 14em;width: 320px;wrap-flow: both;}
Utelukkelser i Internet Explorer
Nettleserstøtte for ekskluderinger og wrap-flow: Begge er for øyeblikket begrenset til IE10 +, og krever et pre-prefix. Vær oppmerksom på at eksklusjoner var inntil nylig knyttet til CSS Shapes-spesifikasjonen som jeg ser på neste, slik at noe av informasjonen på nettet samler de to.
CSS figurer
Exclusions-spesifikasjonen omhandler innpakning av tekst rundt rektangulære gjenstander. Former gir oss mye kraftigere evne til å pakke inn tekst rundt ikke-rektangulære objekter, for eksempel flytende tekst rundt en kurve.
Nivå 1 i CSS Shapes-spesifikasjonen definerer en ny egenskap form-utenfor. Denne egenskapen kan brukes på et flytende element. I det nedenstående eksemplet bruker jeg form-utvendig til å kurve tekst rundt et flatt bilde.
.shape {width: 300px;float: left;shape-outside: circle(50%);}
CSS Shapes lar oss kurve tekst rundt ballongbildet
Nettleserstøtte for figurer Nivå 1 inkluderer Chrome og Safari, noe som betyr at du kan begynne å bruke den i stilark for iOS-enheter. Nivå 2 i spesifikasjonen gir deg mulighet til å forme tekst i elementer med form-inne- egenskapen, så det er mer å komme fra denne funksjonen.
Les mer om Shapes i denne A List Apart artikkelen av Sara Soueidan , og de medfølgende ressursene.
CSS Grid Layout
Jeg har forlatt min favoritt til sist. Jeg har vært en stor fan av den nye Grid Layout-spesifikasjonen siden den tidlige implementeringen i Internet Explorer 10. CSS Grid Layout gir oss en måte å skape riktige gridstrukturer med CSS og plassere vårt design på det gridet.
Grid layout gir oss en metode for å lage strukturer som ikke er ulikt å bruke tabeller for layout. Men blir beskrevet i CSS og ikke i HTML de tillater oss å lage oppsett som kan omdefineres ved hjelp av medieforespørsler og tilpasse seg ulike sammenhenger. Det lar oss skille ordrenes elementer i kilden riktig fra sin visuelle presentasjon. Som designer betyr dette at du er ledig til å endre plasseringen av sideelementer som er best for layoutet ditt ved forskjellige bruddpunkter, og ikke å kompromittere et fornuftig strukturert dokument for din responsive design. I motsetning til et HTML-tabellbasert layout, kan du lagre elementer på rutenettet. Så ett element kan overlappe en annen hvis nødvendig.
I eksemplet nedenfor erklærer vi et rutenett på elementet med en klasse av .wrapper. Den har tre 100 piksler brede kolonner med 10 px takrenner og tre rader. Vi plasserer boksene i rutenettet ved å bruke linjenumre før og etter, over og under området der vi vil at elementet skal vises.
Grid Example ABCDEF
Rutenetteksemplet i Chrome
Nettleserstøtte for den nyeste gridspesifikasjonen er begrenset til Chrome, med funksjonen "eksperimentell webplattform" flagget aktivert. Det er en solid implementering av den første versjonen av spesifikasjonen i Internet Explorer 10 og nyere.
Finn ut mer om Grid Layout på min Rutenettet ved eksempel nettsted, der du kan se flere rutenetteksempler som fungerer i Chrome, med eksperimentelle webplattformfunksjoner aktivert. Jeg snakket også i fjor på CSS Conf EU on Grid, og du kan se videoen her.
Har du en favoritt fremvoksende spesifikasjon som ikke er nevnt her?
Jeg håper du har hatt glede av denne raske turen rundt noen av de interessante, nyere funksjonene til CSS. Bruk de koblede ressursene for å finne ut mer om funksjonene du har funnet mest interessante. Gi meg beskjed i kommentarene hvis du har en favorittkommende CSS-funksjon som du tror folk skal vite om, eller flere gode ressurser og eksempler på noen av funksjonene jeg har beskrevet.