CSS Du kan bli upphetsad om 2015
CSS är ett ständigt utvecklande språk, och som det nya året börjar är det en bra tid att ta en titt på några av de nya funktionerna som vi kan börja experimentera med.
I den här artikeln tar jag en titt på några nyare moduler och individuella CSS-funktioner som får webbläsarsupport. Inte alla är funktioner du kan använda direkt i produktionen, och vissa är bara tillgängliga bakom experimentella flaggor. Men du hittar massor av saker här som du kan börja spela med - även om det bara under ett prototyputvecklingsstadium.
CSS Selectors nivå 4
Nivån 3 väljare specifikation är väl implementerad i webbläsare och förde oss användbara selektörer som nth-barn. Selectors Level 4 ger oss ännu fler sätt att rikta in innehåll med CSS.
Negationen pseudo-klass: inte
Negativ pseudoklassväljare : visas inte på nivå 3 men får en uppgradering på nivå 4. På nivå 3 kan du passera en väljare för att säga att du inte vill att CSS ska tillämpas på det här elementet. För att göra all text utom text med en klass av intro fet kan du använda följande regel.
p:not(.intro) { font-weight: normal; }På nivå 4 i specifikationen kan du passera i en kommaseparerad lista över selektorer.
p:not(.intro, blockquote) { font-weight: normal; }Relationell pseudoklass: har
Denna pseudoklass tar en väljarlista som ett argument och matchar om någon av dessa väljare skulle matcha ett element. Det är enklast att se med ett exempel, i det här exemplet kommer alla element som innehåller en bild att ha den svarta gränsen applicerad:
a:has( > img ) { border: 1px solid #000; }I det här andra exemplet kombinerar jag : har med : inte och väljer endast li- element som inte innehåller ett styckeelement:
li:not(:has(p)) { padding-bottom: 1em; }Matcherna - någon pseudoklass: matchningar
Denna pseudoklass innebär att vi kan tillämpa regler på grupper av selektörer, till exempel:
p:matches(.alert, .error, .warn) { color: red; }För att testa din webbläsare för stöd till dessa och andra avancerade selektorer kan du använda testet på css4-selectors.com. Den här webbplatsen är också en bra resurs för att få reda på mer om kommande väljare.
CSS-blandningsmetoder
Om du är bekant med Blend Modes i Photoshop så kanske du är intresserad av Kompositions- och blandningsspecifikation. Denna specifikation tillåter oss att tillämpa blandningslägen till bakgrund och till alla HTML-element där i webbläsaren.
I följande CSS har jag en låda som innehåller en bakgrundsbild. Genom att lägga till en bakgrundsfärg och sedan ställa in bakgrunds-blandningsläge till nyans och multiplicera kan jag tillämpa intressanta effekter på bilderna.
.box {background-image: url(balloons.jpg);}.box2 {background-color: red;background-blend-mode: hue;}.box3 {background-color: blue;background-blend-mode: multiply;}
Använda bakgrunds-blandningsläge
Egenskapen mix-mix-mode kan du blanda text ovanpå en bild. I det nedanstående exemplet har jag en h1 sedan i .box2 ställde jag på mix-mix-mode: skärm.
.box {background-image: url(balloons-large.jpg);}.box h1 {font-size: 140px;color: green;}.box2 h1 {mix-blend-mode: screen;}
Använda mix-mix-läge
CSS-blandningsmetoder har faktiskt överraskande bra stöd i andra moderna webbläsare än Internet Explorer, se supportmatrisen för bakgrund-blandning-mode , mix-mix-läge finns i Safari och Firefox, och bakom de experimentella funktionerna flagga i Opera och Chrome. Med noggrann användning är det precis den typ av specifikation du kan börja spela med för att förbättra dina mönster, så länge som fallbacken inte lämnar saker oläsliga i icke-stödjande webbläsare.
Om du behöver mer fullständigt stöd för äldre webbläsare och det känns inte att blandningslägen kan användas i produktionen, men glöm inte att du kan använda dessa under utveckling för att undvika resor genom Photoshop. När du har slutfört bilder och behandlingar skapar du produktionsbilderna i ett grafikprogram, som ersätter CSS-effekterna.
Läs mer om hur du använder blandningslägen med denna praktiska artikel om CSS Tricks , i resurserna på Adobes webbplats och på Dev Opera webbplats.
Funktionen calc ()
Funktionen calc () är en del av CSS-värden och enheter modulnivå 3. Det betyder att du kan göra matematiska funktioner direkt i din CSS.
En enkel användning av calc () kan hittas om du vill placera en bakgrundsbild längst ned till höger om ett element. Att placera ett element 30px inifrån från vänster är enkelt, du skulle använda:
.box {background-image: url(check.png);background-position: 30px 30px;}Men du kan inte göra det från nedre höger när du inte känner till behållarens dimensioner. Funktionerna calc () kan du dra av våra 30 pixlar från 100% av bredd eller höjd:
.box {background-image: url(check.png);background-position: calc(100% - 30px) calc(100% - 30px);}Browser support för calc () är bra över moderna webbläsare, även om Kan jag använda rapporterar att användandet av det som ett bakgrundspositionsvärde i IE9 resulterar i att webbläsaren kraschar.
CSS Trickery och Calc Function är en rolig artikel om att använda calc () för att lösa ett CSS-problem. Det finns några enkla användningsfall över vid CSS Tricks.
CSS-variabler
En kraftfull funktion av CSS-förprocessorer som Sass, är möjligheten att använda variabler i vår CSS. På en mycket enkel nivå kan vi spara mycket tid genom att deklarera de färger och teckensnitt som används i vår design och sedan använda en variabel när du använder en viss färg eller typsnitt. Om vi sedan bestämmer oss för att finjustera ett teckensnitt eller färgpalett behöver vi bara ändra dessa värden på ett ställe.
CSS-variabler, beskrivna i CSS Anpassade egenskaper för Cascading Variables-modulen nivå 1, tar denna funktion till CSS.
:root {--color-main: #333333;--color-alert: #ffecef;}.error { color: var(--color-alert); }Tyvärr stödjer webbläsare för CSS-variabler är begränsad till Firefox för närvarande.
Du kan se fler exempel och få reda på mer i den här artikeln på Mozilla Developer Network.
CSS-undantag
Vi är alla bekanta med flottor i CSS. Det enklaste exemplet kan flyta en bild för att låta text flöda runt den. Flöden är dock ganska begränsade eftersom det flytande föremålet alltid stiger till toppen, så medan vi kan flyta en bild kvar och sätta in text till höger och under det finns det ingen möjlighet att släppa en bild i mitten av dokumentet och flödestekst hela vägen runt, eller placera den längst ner och låt texten flöda runt toppen och sidan.
undantag kan du lägga in text runt alla sidor av ett placerat objekt. Det definierar inte en ny metod för positionering i sig, så kan den användas tillsammans med andra metoder. I exemplet nedan placerar jag absolut ett element ovanpå ett textblock och förklarar då det elementet som en uteslutning med egenskapsväxlingsflödet med ett värde av båda, så texten respekterar då elementets position och rinner runt Det.
.main {position:relative;}.exclusion {position: absolute;top: 14em;left: 14em;width: 320px;wrap-flow: both;}
Undantag i Internet Explorer
Webbläsarstöd för uteslutningar och wrap-flow: båda är för närvarande begränsade till IE10 +, vilket kräver ett -s-prefix. Observera att Exclusions var länge länkad till CSS Shapes-specifikationen som jag ser på nästa, så en del av informationen online sammankopplar de två.
CSS-former
Exklusionsspecifikationen behandlar inslagning av text runt rektangulära föremål. Former ger oss mycket kraftfullare förmåga att sätta in text runt icke-rektangulära objekt, till exempel flytande text runt en kurva.
Nivå 1 i CSS Shapes-specifikationen definierar en ny fastighetsform utanför. Den här egenskapen kan användas på ett flytande element. I det nedanstående exemplet använder jag form-outside för att kurva text runt en flytad bild.
.shape {width: 300px;float: left;shape-outside: circle(50%);}
CSS-former tillåter oss att kurva text runt ballongbilden
Webbläsarstöd för former nivå 1 inkluderar Chrome och Safari, vilket innebär att du kan börja använda den i stylesheets för iOS-enheter. Nivån 2 i specifikationen gör det möjligt för dig att forma textelement i form med inbyggnadsegenskapen , så det finns mer att komma från den här funktionen.
Läs mer om Former i denna A List Apart artikel av Sara Soueidan , och medföljande resurser.
CSS Grid Layout
Jag har lämnat min favorit till sist. Jag har varit ett bra fan av den nya Grid Layout-specifikationen sedan den tidiga implementeringen i Internet Explorer 10. CSS Grid Layout ger oss ett sätt att skapa korrekta gridstrukturer med CSS och positionera vår design på det nätet.
Grid layout ger oss en metod att skapa strukturer som inte är olikt med att använda tabeller för layout. Men som beskrivs i CSS och inte i HTML tillåter de oss att skapa layouter som kan omdefinieras med hjälp av mediefrågor och anpassa sig till olika sammanhang. Det låter oss ordentligt skilja ordningen av element i källan från deras visuella presentation. Som designer betyder det att du kan ändra platsen för sidelement som är bäst för din layout vid olika brytpunkter och behöver inte kompromissa med ett förnuftigt strukturerat dokument för din lyhörda design. Till skillnad från en HTML-tabellbaserad layout kan du lagra objekt på rutnätet. Så ett objekt kan överlappa en annan om det behövs.
I exemplet nedan förklarar vi ett rutnät på elementet med en klass av .wrapper. Den har tre 100 pixlar breda kolumner med 10 px takrännor och tre rader. Vi placerar lådorna inuti rutnätet med hjälp av radnummer före och efter ovanför och under det område där vi vill att elementet ska visas.
Grid Example ABCDEF
Rutnätet i Chrome
Webbläsarstöd för den senaste Grid-specifikationen är begränsad till Chrome med funktionen "Experimental Web Platform" flaggan aktiverad. Det finns ett solidt genomförande av den ursprungliga versionen av specifikationen i Internet Explorer 10 och senare.
Läs mer om Grid Layout på min Rutnät enligt exempel webbplats där du kan se flera Grid-exempel som fungerar i Chrome, med experimentella webbplatskompatibla funktioner aktiverade. Jag talade också förra året på CSS Conf EU on Grid och du kan se den videoen här.
Har du en favoritspecifikation som inte nämns här?
Jag hoppas att du har haft denna snabba rundtur några av de intressanta, nyare funktionerna i CSS. Använd de länkade resurserna för att få reda på mer om de funktioner du har hittat mest intressanta. Låt mig veta i kommentarerna om du har en favoritkommande CSS-funktion som du tycker att folk borde veta om, eller extra stora resurser och exempel på någon av de funktioner som jag har beskrivit.