Fem nya CSS-funktioner du kan använda idag

CSS utvecklas hela tiden och det kan vara svårt att hänga med i vilka nya funktioner som dyker upp och vilka webbläsare de fungerar i. Har du koll på de här nya CSS-funktionerna?

Cascading Style Sheets (CSS) har haft en kraftig utveckling de senaste tio åren. Då CSS inte uppdateras i bestämda versioner utan i moduler kan det vara svårt att hålla reda på nya funktioner som tillkommer. Tillverkare av webbläsare implementerar dessutom nya CSS-funktioner i olika takt vilket gör att de till en början kanske bara fungerar i en eller ett fåtal webbläsare.

Här är några nya CSS-funktioner jag tror du kan ha användning av och som fungerar i senaste versionerna av moderna webbläsare som: Chrome, Firefox, Edge och Safari. Gemensamt för dessa är att de tidigare krävt krångligare kod eller att de endast gått att lösa med JavaScript.

CH-enheten

CH-enheten är en relativ enhet som utgår ifrån tecknet ”0”s (siffran nolls) bredd. Den är alltså relativ till textstorleken men även till vilket typsnitt som används. Ett problem som CH kan hjälpa till med är att begränsa antal tecken som ska visas på en rad. De flesta typsnitt har tecken med olika bredd: ”0” är till exempel bredare än ”I” men smalare än ”M”. Därmed är det svårt att sätta exakt antal tecken per rad men det går att hamna i närheten.

Enligt WCAG 1.4.8 (nivå AAA) ska en rad innehålla max 80 tecken för god läsbarhet. Att ange 80ch som bredd för texten kommer dock resultera i för många tecken per rad eftersom tecknet ”0” är bredare än de flesta tecken. Omkring 60ch kan vara ett mer lämpligt värde för att uppnå max 80 tecken per rad. En del hävdar att 65 tecken per rad är det optimala antalet tecken. Enligt mina egna tester kan 55ch vara ett lagom värde att använda för att hamna omkring 60-70 tecken per rad.

Exempel på hur CH-enheten används i CSS:

p { max-width: 55ch;}

Demo av CH-enheten

Marker pseudo-elementet

Marker är ett pseudo-element för att ange utseende på punkter för list-element. Det har tidigare inte varit möjligt att ändra till exempel färg eller typsnitt på punkterna på ett enkelt sätt utan att skriva ganska många rader kod. I och med marker har detta blivit mycket enklare. Marker kan även kombineras med content-egenskapen för att ange en ett annat tecken, emoji eller en bild som punkt.

Exempel på hur marker kan användas:

/* Gör punkter i punktlistor gröna och 50% större */
ul li::marker {
  color: green;
  font-size: 150%;
}

/* Gör siffror i listor röda och kursiva */
ol li::marker {
  color: darkred;
  font-style: italic;
}

/* Visa tumme upp-emoji istället för punkter i punktlistor */
.thumbsup li::marker {
  content: "👍";
}

Demo av marker

Focus-within pseudo-selektor

Focus-within löser ett gammalt problem med att förändra utseendet på ett förälder-element när användaren sätter fokus på ett barn-element. Detta har tidigare bara vara möjligt med hjälp av JavaScript men går nu att lösa med endast CSS. Ett vanligt exempel på när detta är användbart är om en grupp av formulärfält ska markeras när ett av fälten får fokus.

.form-group:focus-within {
  background-color: lightblue;
}

Demo av focus-within

Matematiska funktioner

De matematiska funktionerna Min, Max och Clamp kan användas för att ange storlek för HTML-element, storlek på text och mycket annat. I tillgänglig, responsiv design är det en fördel att ange storlekar i relativa mått som utgår ifrån skärmens storlek.

Min-funktionen tar en lista av flera värden och returnerar det minsta av värdena som svar. Det fina är att det går att kombinera värden med olika enheter, till exempel: px, rem, % eller vw.

I detta exempel sätts bredden på en sidospalt till 33% av fönstrets bredd men som mest 300px.

.sidebar {
  width: min(33vw, 300px);
}

Max-funktionen gör samma sak som min-funktionen fast omvänt: den returnerar det största värdet. I detta exempel som istället använder max sätts sidospaltens bredd till 33% men som minst 300px.

.sidebar {
  width: max(33vw, 300px);
}

Ett problem som kan uppstå när man utgår från skärmens storlek är att storleken blir för liten på små skärmar eller för stor på stora skärmar. Här kommer Clamp-funktionen till användning. Den tar emot ett värde men även ett minimum och maximum-värde och värdet som returneras från funktionen kommer alltid vara inom detta span.

Ett exempel är att göra text-storlek relativ till skärmens storlek så den är mindre på små skärmar och större på stora skärmar. Följande kodexempel skulle sätta textstorleken relativ till skärmens bredd men som max 20 pixlar och minst 16 pixlar.

/* Sätt textstorlek till 90% av texts grundstorlek gånger en halv 
 * procent av fönstrets storlek men som minst grundstorleken och 
 * max 125% av grundstorleken 
 */
.fluid-text {
  --font-size-min: 1rem; /* 16px */
  --font-size-max: 1.25rem; /* 20px */
  font-size: clamp(var(--font-size-min), calc(.9rem + 0.5vw), var(--font-size-max));
}

Demo av min, max, clamp

Line-clamp-egenskapen

Line-clamp-egenskapen begränsar antalet rader av en text som ska visas. Under mina år som utvecklare är det troligen ett av de problem jag oftast blivit ombedd att lösa. Tyvärr har det tills nyligen varit svårt att göra på ett bra sätt eftersom antalet tecken som får plats på en rad kan skilja sig beroende på om användaren besöker sidan med en telefon eller en datorskärm. Även storleken på texten kan skilja sig på olika enheter. Lösningen har varit att försöka räkna ut hur många tecken som får plats på en rad med JavaScript. Eller att försöka räkna ut hur hög en rad text blir och begränsa textens HTML-element till en viss höjd.

Nu finns en standardlösning för line-clamp i CSS. I detta exempel skulle texten kortas av till max tre rader och avslutas med tre punkter.

/* Sätt max antal rader text till 3 */
.line-clamp {
  line-clamp: 3 "...";
}

Att använda line-clamp enligt specifikationen fungerar tyvärr inte i några moderna webbläsare idag. Men alla har stöd för funktionen genom webkit-prefix. Det kan verka som en osäker lösning men det framgår (märkligt nog) i specifikationen att webbläsare också måste implementera stöd för webkit-prefix-versionen.

Exempel på -webkit-line-clamp:

/* Sätt max antal rader text till 3 */
.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Demo av line-clamp

Utvecklingen av CSS går ständigt framåt. Med nya standardfunktioner kan vi byta ut gamla, krångliga lösningar. Nya funktioner ger oss möjlighet att skriva mindre och enklare kod samt minska risken för buggar. Alla de funktioner som jag presenterat går bra att använda med så kallad "progressive enhancement". Om en äldre webbläsare inte förstår CH-enheten eller Line-clamp-egenskapen är allt som sker att textraderna blir längre eller att fler rader text syns. Inget innehåll försvinner och webbsidan fungerar fortfarande. Webbläsare fungerar nämligen som så att de ignorerar den CSS-kod de inte förstår. Kan inte webbläsaren tolka Clamp-funktionen? Inga problem! Lägg bara till en till font-size-deklaration på raden innan som sätter ett fast värde för textstorleken.

Publicerad:
Patrik Hassel, porträtt

Patrik Hassel

Säljansvarig

Tel: 073-944 20 49