kaxigt.com

Den här artikeln handlar om CSS och några av dess spännande tekniker.

Det finns flera bra och spännande webbartiklar på nätet. Smashing Magazine är en site som ofta har ett intressant innehåll för oss som bland annat vurmar för CSS och UX. Jag tänker här dela med mig lite CSS-tips som jag tycker är spännande och bra att kunna (eller känna till).

Designa vackra skuggor med CSS

Det här med att skapa realistiska skuggor med CSS kan vara en riktig utmaning. Ett av knepen för att skapa skuggor som känns mer naturliga än vad du vanligtvis ser kommer från Josh W Comeau i hans artikel (tutorial) Designing Beautiful Shadows in CSS. Han menar att om man staplar 5 eller 6 individuella skugglager och sedan anpassar vart och ett av dem med olika värden för x/y offset, oskärpa radie, spridning, färg och opacitet så får man den ultimata effekten på skuggan. Josh’s CSS Shadow Palette Generator är då till god hjälp och jag rekommenderar även hans artikel.

Förbättra skrollprestandan

Johan Isaksson skriver i sin artikel How I made Google’s data grid scroll 10x faster with one line of CSS hur han upptäckte hur väldig Googles rullningsfördröjning var.

Lösningen då?
Efter mycken möda och besvär visade sig att om han helt enkelt till lade en enda rad CSS till <table> på elementpanelen, och specificerade att det inte kommer att påverka layouten eller stilen för andra element på sidan, så ökade prestandan 10 gånger.

table {
  contain: strict; 
}

Läs mer om CSS contain property på MDN.

Mjukare hover effekt (button)

Eric Wätke säger sig ha hittat en väg att få animationer på hover buttons att vara mycket mjukare genom att applicera animationen på pseudo-elementet ::hover eller :hover. Det spelar ingen roll vilken variant du väljer eftersom man måste justera z-indexet ändå. Det här ska inte bara förhindra hover-glitchar utan också se bättre ut samt att man slipper flimret och hoppandet som kan uppstå.

/* Without pseudo-element */
.element{
	background: ...;
	border-radius: ...;
	color: ...;
}
.element.boop{
	animation: boop .2s forwards;
}

/* With pseudo-element */
.element{
	color: ...;
	position: relative;
}
.element.boop::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: ...;
	border-radius: ...;
	z-index: -1;
	animation: boop .2s forwards;
}

Se även lösningen och diskussioner om denna på Erics Twitter-sida. Du märker också att i detta kodexempel så använder han boop-animationer. Vad det är kan du läsa i Josh’s artikel (tutorial) Boop (react)! A whimsical twist on hover transitions.

CSS Pseudo-class som kan vara praktiska

:autofill

Pseudoklassen :autofill CSS matchar endast när ett <input>-element har sitt värde autofyllt av webbläsaren. Den slutar matcha om användaren redigerar fältet.

background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;

https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill

:fullscreen

Pseudoklassen :fullscreen CSS matchar alla element som för närvarande är i helskärmsläge. Om flera element har satts i helskärmsläge, väljs alla. Pseudoklassen :fullscreen låter dig konfigurera dina stilmallar för att automatiskt justera innehållets storlek, stil eller layout när element växlar fram och tillbaka mellan helskärms- och traditionella presentationer.

Magin händer naturligtvis i vår CSS. Här finns två regler. Den första fastställer bakgrundsfärgen för knappen ”Växla helskärmsläge” när elementet inte är i helskärmsläge. Nyckeln är användningen av :not(:fullscreen), som letar efter att elementet inte har pseudoklassen :fullscreen applicerad på sig.

#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}

#fs-toggle:fullscreen {
  background-color: #faa;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen

:focus-within

Pseudoklassen :focus-within CSS matchar ett element om elementet eller någon av dess avkomlingar är fokuserade. Med andra ord, det representerar ett element som i sig matchas av pseudoklassen :focus eller har en avkomling som matchas av :focus. (Detta inkluderar ättlingar i shadow trees.)

/* Selects a <div> when one of its descendants is focused */
div:focus-within {
  background: cyan;
}</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

:indeterminate

Pseudoklassen :indeterminate CSS representerar vilket formelement som helst vars tillstånd är obestämt, till exempel check boxes som har sitt HTML indeterminate-attribut satt till true, radio buttons som är medlemmar i en grupp där alla alternativknappar är avmarkerade och obestämda <progress> element.

/* Selects any <input /> whose state is indeterminate */
input:indeterminate {
  background: lime;
}

Element som den här selektorn riktar in sig på är följande.

https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate

:picture-in-picture

Pseudoklassen :picture-in-picture CSS matchar elementet som för närvarande är i ”bild-i-bild-läge”. Pseudoklassen :picture-in-picture låter dig konfigurera dina stilmallar för att automatiskt justera storleken, stilen eller layouten på innehållet när en video växlar fram och tillbaka mellan ”bild-i-bild” och traditionella presentationslägen.

:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:picture-in-picture

För dem som tycker om att grotta ned sig i CSS i allmänhet och pseudoklasser i synnerhet så är Developer Mozilla ypperlig!

Förhindra Scroll Chaining (skrollkedja)

Föreställ dig att du har ett element med position: fixed, typ en modal dialogruta som är placerad i mitten av viewport, med det faktiska webbsidans innehåll under sig. Nu, om modalen har en skroll-list och du har nått dess nedre gräns så kommer webbläsaren att fortsätta skrolla huvudsidans innehåll. Det är ett standardbeteendet och tyvärr ganska förvirrande. Lyckligtvis kan scroll chaining, som den oönskade effekten kallas, fixas med CSS.

Den magiska ingrediensen är overscroll-behavior. Ahmad Shadeed skriver om just detta i sin artikel Prevent Scroll Chaining With Overscroll Behavior

Den gamla hack-lösningen

Vi brukade fixa det genom att tillämpa overflow: hidden på body-elementet via Javascript. När en modal öppnas lägger vi till en klass till organet som ansvarar för att tillämpa överflödet.

body.modal-open {
    overflow: hidden;
}

.modal.is-open {
    display: block;
}

Den här lösningen brukade fungera perfekt över stationära webbläsare, men Safari på iOS gillade det inte. För att få det att fungera måste vi också lägga till position: fixed till body-elementet.

body.modal-open {
    position: fixed;
    overflow: hidden;
}

.modal.is-open {
    display: block;
}

Men det räcker inte enligt Ben Frain i sin artikel Preventing body scroll for modals in iOS utan vi måste lägga till följande (iOS 13+).

.bg-scrolling-element-when-modal-active {
    /* when modal active */
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    /* Other browsers */
    overscroll-behavior: none;
}

overscroll-behavior

Egenskapen overscroll-behavior anger vad en webbläsare ska göra när vi når gränsen för ett rullningsområde. Det stöds i alla större webbläsare utom Safari. Egenskapen är en förkortning för overscroll-behavior-x och overscroll-behavior-y.

Observera att inställning av överrullningsbeteende kommer att ställa in båda axlarna. Låt oss därför gå in på möjliga värden.

overscroll-behavior: auto

Standardvärdet är auto, vilket möjliggör chain scroll. När vi har ett rullningselement och vi når gränsen för det kommer webbläsaren att fortsätta rulla på <body>-innehållet.

overscroll-behavior: contain

Från dess namn kommer värdet contain att innehålla rullningen inom elementgränsen.

overscroll-behavior: none

När none är inställd har den en liknande effekt att contain för att förhindra studseffekten när toppen eller botten av sidan nås.

Fler värden finns så jag rekommenderar Ahmad Shadeeds artikel.