CSS Du kan blive spændt om i 2015
CSS er et konstant udviklende sprog, og som det nye år begynder er det en god tid at tage et kig på nogle af de nye funktioner, som vi kan begynde at eksperimentere med.
I denne artikel tager jeg et kig på nogle nyere moduler og individuelle CSS-funktioner, der får browsersupport. Ikke alle disse funktioner kan du straks bruge i produktionen, og nogle er kun tilgængelige bag eksperimentelle flag. Men du vil finde masser af ting her, som du kan begynde at lege med - selvom kun under et prototypisk udviklingsstadium.
CSS Selectors niveau 4
Niveau 3 selektorspecifikationen er godt implementeret i browsere og bragt os nyttige selektorer som nth-barn. Selectors Level 4 bringer os endnu flere måder at målrette indhold med CSS.
Negativ pseudoklasse: ikke
Negativ pseudoklassevælgeren : vises ikke på niveau 3, men får en opgradering på niveau 4. På niveau 3 kan du passere en vælger for at sige, at du ikke vil have CSS anvendt på dette element. For at gøre al tekst undtagen tekst med en klasse med intro fed, kan du bruge følgende regel.
p:not(.intro) { font-weight: normal; }På niveau 4 i specifikationen kan du bestå i en kommasepareret liste over selektorer.
p:not(.intro, blockquote) { font-weight: normal; }Den relationelle pseudoklasse: har
Denne pseudoklasse tager en vælgerliste som et argument og vil matche, hvis nogen af disse selektorer ville matche et element. Det er nemmest at se med et eksempel, i dette eksempel vil nogle af de elementer, der indeholder et billede, have den sorte grænse anvendt:
a:has( > img ) { border: 1px solid #000; }I dette andet eksempel kombinerer jeg : har med : ikke og vælger kun li elementer, der ikke indeholder et afsnit element:
li:not(:has(p)) { padding-bottom: 1em; }Kampene - enhver pseudoklasse: kampe
Denne pseudoklasse betyder, at vi kan anvende regler til grupper af selektorer, for eksempel:
p:matches(.alert, .error, .warn) { color: red; }For at teste din browser til støtte for disse og andre avancerede selektorer kan du bruge testen på css4-selectors.com. Det websted er også en stor ressource for at finde ud af mere om kommende selektorer.
CSS blandingsformer
Hvis du er bekendt med blend modes i Photoshop, så er du måske interesseret i Kompositions- og blandingsspecifikation. Denne specifikation gør det muligt for os at anvende blandingsfunktioner til baggrunde og til eventuelle HTML-elementer der lige i browseren.
I det følgende CSS har jeg en kasse indeholdende et baggrundsbillede. Ved at tilføje en baggrundsfarve og derefter indstille baggrundsmixemodus til farvetone og multiplicere, kan jeg anvende interessante effekter på billederne.
.box {background-image: url(balloons.jpg);}.box2 {background-color: red;background-blend-mode: hue;}.box3 {background-color: blue;background-blend-mode: multiply;}
Brug baggrundsmix-tilstand
Egenskaben mix-mix-mode giver dig mulighed for at blande tekst oven på et billede. I nedenstående eksempel har jeg en h1 derefter i .box2 jeg sat til mix-blend-mode: skærm.
.box {background-image: url(balloons-large.jpg);}.box h1 {font-size: 140px;color: green;}.box2 h1 {mix-blend-mode: screen;}
Brug af mix-mix-mode
CSS Blend Modes har faktisk overraskende god support i andre browsere end Internet Explorer, se support matrixen for baggrund-blend-mode , mix-blend-mode er tilgængelig i Safari og Firefox, og bag de eksperimentelle funktioner flag i Opera og Chrome. Med omhyggelig brug er det netop den slags specifikation, du kan begynde at spille med for at forbedre dine designs, så længe tilbagefaldet ikke efterlader ting ulæselige i ikke-understøttende browsere.
Hvis du har brug for mere fuld støtte til ældre browsere, og så ikke føler, at blandingstilstande kan bruges i produktionen, skal du ikke glemme, at du kan bruge disse under udvikling for at undgå ture gennem Photoshop. Når du har færdiggjort billeder og behandlinger, skaber du produktionsbillederne i et grafikprogram, der erstatter CSS-effekterne.
Få mere at vide om brug af blandingsfunktioner med denne praktiske artikel om CSS Tricks , i ressourcerne på Adobe-webstedet og på Dev Opera hjemmeside.
Funktionen calc ()
Funktionen calc () er en del af CSS værdier og enheder modul niveau 3. Det betyder at du kan lave matematiske funktioner lige inden for dit CSS.
En simpel brug af calc () kan findes, hvis du vil placere et baggrundsbillede fra bunden til højre på et element. Placering af et element 30px ind fra øverst til venstre er let, du vil bruge:
.box {background-image: url(check.png);background-position: 30px 30px;}Du kan dog ikke gøre det fra bunden til højre, når du ikke kender beholderens dimensioner. Funktionerne calc () betyder, at du kan trække vores 30 pixels fra 100% af bredde eller højde:
.box {background-image: url(check.png);background-position: calc(100% - 30px) calc(100% - 30px);}Browser support til calc () er god på tværs af moderne browsere, selv om Kan jeg bruge rapporterer at bruge det som en baggrundspositionsværdi i IE9, resulterer i, at browseren krasjer.
CSS Trickery og Calc Function er en sjov artikel om brug af calc () for at løse et CSS problem. Der er nogle simple brugssager over på CSS Tricks.
CSS variabler
En stærk funktion af CSS-forprocessorer som Sass, er evnen til at bruge variabler i vores CSS. På et meget enkelt niveau kan vi spare meget tid ved at erklære de farver og skrifttyper, der anvendes i vores design, og derefter bruge en variabel, når du bruger en bestemt farve eller skrifttype. Hvis vi så beslutter at finjustere en skrifttype eller farvepaletten, behøver vi kun ændre disse værdier på ét sted.
CSS Variabler, beskrevet i CSS brugerdefinerede egenskaber til Cascading Variables modul niveau 1, bringer denne funktionalitet til CSS.
:root {--color-main: #333333;--color-alert: #ffecef;}.error { color: var(--color-alert); }Desværre browser understøttelse for CSS variabler er begrænset til Firefox i øjeblikket.
Du kan se flere eksempler og finde ud af mere i Denne artikel på Mozilla Developer Network.
CSS-eksklusioner
Vi er alle bekendt med floats i CSS. Det enkleste eksempel kan være at flyde et billede for at tillade tekst at strømme rundt om det. Flytninger er dog ret begrænsede, da det flydende element altid stiger til toppen, så mens vi kan flyde et billede tilbage og indpakke tekst til højre og under det, er der ingen måde at droppe et billede i midten af dokumentet og flyde tekst hele vejen rundt, eller placere den i bunden og lad tekst flyde rundt om toppen og siden.
Udelukkelser lader dig ombryde tekst omkring alle sider af en positioneret genstand. Det definerer ikke en ny metode til positionering selv, så den kan bruges sammen med andre metoder. I eksemplet nedenfor placerer jeg absolut et element oven på en tekstblok og erklærer så elementet som en udelukkelse med ejendomsindpakningen med en værdi af begge, så teksten respekterer elementets position og strømmer rundt det.
.main {position:relative;}.exclusion {position: absolute;top: 14em;left: 14em;width: 320px;wrap-flow: both;}
Undtagelser i Internet Explorer
Browser support til ekskluderinger og wrap-flow: Begge er i øjeblikket begrænset til IE10 +, der kræver et-præfiks. Bemærk, at eksklusioner var indtil for nylig knyttet til CSS Shapes-specifikationen, som jeg ser på næste, så nogle af oplysningerne online samler de to.
CSS figurer
Exclusions-specifikationen omhandler indpakning af tekst omkring rektangulære genstande. Former giver os den meget mere magtfulde evne til at pakke tekst omkring ikke-rektangulære genstande, såsom flydende tekst omkring en kurve.
Niveau 1 i CSS Shapes specifikationen definerer en ny egenskabsform udenfor. Denne ejendom kan bruges på et floated element. I nedenstående eksempel bruger jeg form-udvendig til at kurve tekst omkring et flot billede.
.shape {width: 300px;float: left;shape-outside: circle(50%);}
CSS Shapes giver os mulighed for at kurve tekst omkring ballonbilledet
Browser support til figurer niveau 1 Inkluderer Chrome og Safari, hvilket betyder at du kan begynde at bruge det i stylesheets til iOS-enheder. Niveau 2 i specifikationen giver dig mulighed for at forme tekst inde i elementer med form-inde egenskaben, så der er mere at komme fra denne funktion.
Læs mere om figurer i denne A List Apart artikel af Sara Soueidan , og de ledsagende ressourcer.
CSS Grid Layout
Jeg har forladt min favorit til sidst. Jeg har været en stor fan af den nye Grid Layout-spec siden den tidlige implementering i Internet Explorer 10. CSS Grid Layout giver os mulighed for at skabe rigtige gridstrukturer med CSS og placere vores design på det pågældende grid.
Gitterlayout giver os en metode til at oprette strukturer, der ikke er i modsætning til at bruge tabeller til layout. Men som beskrevet i CSS og ikke i HTML tillader de os at oprette layouter, som kan omdefineres ved hjælp af medieforespørgsler og tilpasse sig forskellige sammenhænge. Det lader os ordentligt adskille rækkefølgen af elementer i kilden fra deres visuelle præsentation. Som designer betyder det, at du er fri til at ændre placeringen af sideelementer, som er bedst til dit layout ved forskellige breakpoints, og du behøver ikke at kompromittere et fornuftigt struktureret dokument til dit responsive design. I modsætning til et HTML-tabelbaseret layout kan du lagdele elementer på nettet. Så et element kan overlappe en anden, hvis det kræves.
I eksemplet nedenfor erklærer vi et gitter på elementet med en klasse af .wrapper. Den har tre 100 pixel brede kolonner med 10 px gutters og tre rækker. Vi placerer bokse inde i gitteret ved at bruge linjenumre før og efter, over og under det område, hvor vi vil have elementet til at blive vist.
Grid Example ABCDEF
Gittereksemplet i Chrome
Browser support for den nyeste Gitterspecifikation er begrænset til Chrome, med funktionen "eksperimentelle Webplatforms" -flag aktiveret. Der er en solid implementering af den oprindelige version af specifikationen i Internet Explorer 10 og nyere.
Få mere at vide om Grid Layout på min Gitter ved eksempel websted, hvor du kan se flere Gitter-eksempler, der virker i Chrome, med eksperimentelle webplatformsfunktioner aktiveret. Jeg talte også sidste år på CSS Conf EU on Grid, og du kan se den video her.
Har du en favoritudviklingsspecifikation, der ikke er nævnt her?
Jeg håber du har nydt denne hurtige rundvisning nogle af de interessante, nyere funktioner i CSS. Brug de linkede ressourcer til at finde ud af mere om de funktioner, du har fundet mest interessante. Lad mig vide i kommentarerne, hvis du har en favoritkommende CSS-funktion, som du tror folk skal vide om, eller yderligere gode ressourcer og eksempler på nogen af de funktioner, jeg har beskrevet.