State of CSS

Vorstellung und Beispiele für ein paar neuere CSS Features, Stand 06.2022

James Isaac

James Isaac

The Shy Basketball Lover

When I’m playing basketball, I forget everything around me. It’s just me or me and the team. It’s a liberating feeling.

Worum geht's?

Basis für dieses Dokument ist der State of CSS 2022 Vortrag von Adam Argyle. Ich habe eine Themen/ Techniken heraus gepickt, ein wenig ausgelotet und ausprobiert und Beispiele dazu entwickelt (oder manchmal auch stumpf übernommen). Die Motivation dahinter: welche neuen Features kommen, welche Möglichkeiten gehen damit einher, welchen Reifegrad haben die Features heute und inwiefern verändern sie den Gestaltungs- und Entwicklungsprozess?

cn // 06.2022

Cascade Layers

The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers. MDN Webdocs 

@layer base, theme;

@layer base {
  .card {
    …
  }
}

@layer base {
  .card {
    …
  }
}

@layer theme {
  .card {
    …
  }
}
sentiment_very_satisfied

Das Feature ist in den meisten aktuellen Browsern implementiert und kann für professionellen Einsatz in Betracht gezogen werden.

CSS Subgrid

CSS Grid wirkt sich nur auf die direkten Kind-Elemente des Grid-Containers aus. Mit Subgrid können tiefer verschachtelte Ebenen am Raster ausgerichtet werden. kulturbanause Team

Placeholder Image

Lorem ipsum dolor sit amet consecteturadipisicing elit.

Voluptate molestiae blanditiis provident voluptates modi perspiciatis in libero cum sint temporibus delectus minima, ipsam mollitia dicta quam asperiores quo necessitatibus veritatis. Modi perspiciatis in libero cum sint temporibus delectus minima.

Placeholder Image

Consectetur adipisicing elit.

Officia nihil sapiente error facilis omnis officiis cupiditate, ea consequuntur ut at dolorum nostrum aliquam adipisci voluptatum consectetur delectus.

Placeholder Image

Vel minus, rem, totam perferendis

Sequi nulla sintdelectus commodi quaerat iusto in, velit expedita odit, at dolores hic cumque accusantium. Ullam necessitatibus temporibus libero commodi placeat?

Placeholder Image

Quaerat deleniti ducimus quasi numquam?

Alias, perferendis! Voluptatem facere fuga unde dolores ex quos, tenetur sint culpa dignissimos provident tempora, fugiat pariatur doloribus a. Velit, voluptatibus vel.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-element {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
}
sentiment_neutral

Das Feature ist bislang nur in Safari und Firefox implementiert.

Aspect Ratio & Object Fit

The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions. MDN Webdocs

Aspect Ratio für Container

.aspect-ratio-2-1{
  aspect-ratio: 2/1;
}

.aspect-ratio-2-1:hover {
  aspect-ratio: 1/1;
}
Placeholder Image 
.aspect-ratio-2-1{
  aspect-ratio: 2/1;
}
Placeholder Image 
.aspect-ratio-2-1{
  aspect-ratio: 2/1;
}

.o-f-cover{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Placeholder Image 
.o-p-bottom{
  object-position: bottom;
}
sentiment_very_satisfied

Aspect-Ratio ist in fast allen aktuellen Browsern implementiert (globale Verfügbarkeit 86.51%) und kann für professionellen Einsatz genutzt werden. Object-fit hat derzeit eine globale Verfügbarkeit von ca. 95%

Container Queries

Media-queries allow an author to make style changes based on the overall viewport dimensions – but in many cases, authors would prefer styling modular components based on their context within a layout. Miriam Eric Suzanne in Container Queries, Explainer & Proposal

Anna Smith favorite

Anna Smith

The Anime Fan

While I love computer science, pop culture and anime, I equally enjoy partying and doing sports with my friends.
James Isaac

James Isaac

The Shy Basketball Lover

When I’m playing basketball, I forget everything around me. It’s just me or me and the team. It’s a liberating feeling.
Laura Koch

Laura Koch

Jogger

I love to do sports in my free time. But I feel lonely and want to meet people who I can talk to on my walks.
Matthias Zweig

Matthias Zweig

The hockey enthusiast

I am a long-time fan of my local hockey club. Now I would like to play myself. But I don't dare sign up for a team because I think the hurdles are too big.
Sandra Diedrich

Sandra Diedrich

The longtime handball player

Since I've been studying, I don't find the time to play in a club any more. I think it would still be nice to play with friends from time to time. 
.card-wrap {
  container-name: grid-element;
  container-type: inline-size;
}

@container grid-element (min-width: 400px) {
  .card {
    display: flex;
  }

  .card img {
    width: 50%;
  }
}

Als container-name können ausschließlich custom-idents verwendet werden.

sentiment_dissatisfied

Container Queries sind derzeit nur in Tech Previews verfügbar und können daher nur für Experimente eingesetzt werden, sollen aber 2022 in den großen Browsern verfügbar sein. Man darf gespannt sein.

Accent Color

The accent-color property in CSS is capable of re-tinting the accented color of form controls provided by the browser’s default styles with a custom color value. Geoff Graham // CSS Tricks

Radio Buttons 
.element {
  accent-color: #dd116;
}
:root {
  accent-color: #dd116;
}
sentiment_satisfied

Accent Color hat derzeit eine globale Verfügbarkeit von ca. 83% und kann für den professionellen Einsatz in Erwägung gezogen werden.

Hue, Whiteness & Blackness

HWB stands for hue, whiteness and blackness. Like HSL, the hue can be anywhere within a range of 0 to 360. The other two arguments control how much white or black is mixed into that hue, up to 100% (which would result in a totally white or totally black color). If equal amounts of white and black are mixed in, the color becomes increasingly gray. We can think of this as being similar to mixing paint. It could be especially useful for creating monochrome color palettes. Michelle Barker // CSS Tricks

Triade der Grundfarben

Farbkreis mit triadischen Grundfarben

background-color: hwb(0deg 0% 0%);
background-color: hwb(120deg 0% 0%);
background-color: hwb(240deg 0% 0%);
background-color: hwb(240deg 50% 0%);
background-color: hwb(240deg 50% 20%);
background-color: hwb(240deg 50% 40%);
background-color: hwb(240deg 50% 60%);
background-color: hwb(240deg 50% 80%);
sentiment_satisfied

Das HWB color model hat derzeit eine globale Verfügbarkeit von ca. 78% und kann für den professionellen Einsatz in Erwägung gezogen werden.

Color Mix

Defining a color palette and theme can be a lot of work, especially when considering contextual colors for elements’ various states. While CSS color-mix() only blends two colors together, this little function may be the key to maximizing your colors without maximum effort. Daniel Yuschick // CSS Tricks 

background-color: color-mix(in srgb, red 50%, yellow);
background-color: color-mix(in srgb, red 50%, blue);
background-color: #d16;

background-color: color-mix(in srgb, #d16 70%, white);
background-color: color-mix(in srgb, #d16 70%, black);
background-color: color-mix(in srgb, #d16 70%, 
  rgb(255 255 255 / 50%));
sentiment_dissatisfied

Color Mix ist derzeit nur in Tech Previews verfügbar und kann daher nur für Experimente eingesetzt werden. Die Funktion soll aber 2022 in den großen Browsern verfügbar sein. Die Funktion kann im Firefox via about:config und layout.css.color-mix.enabled aktiviert werden.

Color Contrast

The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list. MDN Web Docs

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus maxime repellendus accusantium perferendis veritatis a sed, mollitia ab sint numquam. Fugiat delectus modi ut minus commodi obcaecati sint soluta ratione. 

background-color: #d16;
color: color-contrast(#d16 vs white, black);

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus maxime repellendus accusantium perferendis veritatis a sed, mollitia ab sint numquam. Fugiat delectus modi ut minus commodi obcaecati sint soluta ratione. 

background-color: #ddd;
color: color-contrast(#ddd vs white, black);

Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus maxime repellendus accusantium perferendis veritatis a sed, mollitia ab sint numquam. Fugiat delectus modi ut minus commodi obcaecati sint soluta ratione.

sentiment_dissatisfied

Color Contrast ist derzeit nur in Safari verfügbar und kann daher nur für Experimente eingesetzt werden. Die Funktion soll aber 2022 in den großen Browsern verfügbar sein. Sie kann in Safari via CSS color-contrast() Flag aktiviert werden.

Relative Color

Relative color allows us to manipulate and convert any color to any format. We can use it to create a color palette from any chosen color. Fabio Giolito 

--basecolor: rgb(221 17 102);
background-color: var(--basecolor);
background-color: rgb(from var(--basecolor) r g 20);

background-color: rgb(from var(--basecolor) r g 250);
sentiment_dissatisfied

Zur Relative Color Funktion ließ sich leider weder bei Can I use noch bei MDN Web Docs etwas finden. Daher ist diese Funktion wohl erst mal als experimentell einzustufen.

:has() Selector

The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters match at least one element. Bramus Van Damme

Placeholder Image
Placeholder Image
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam, dolor recusandae eius quas repellat quod obcaecati voluptates minima ut numquam quisquam optio a hic nemo eligendi ducimus qui tenetur odit! 
figure:has(figcaption) {
  overflow: hidden;
  border: solid var(--border-width-m) var(--darkest);
  border-radius: var(--radius-m);
}
              
figure:has(figcaption) img {
  object-position: bottom;
}
sentiment_dissatisfied

Der :has() Selector ist im aktuellen Chrome(106) und der Safari Tech Preview verfügbar. Daher ist diese Funktion wohl erst mal als experimentell einzustufen.

HTMLElement.inert

The HTMLElement property inert is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful when building UIs such as modals where you would want to "trap" the focus inside the modal when it's visible. MDN Webdocs

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse nemo voluptatem velit at excepturi officiis quam quia sunt omnis voluptatibus? Atque deleniti soluta quo, odit ea repellat quisquam veniam quis? 

<form class="demo-form">
…
</form>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse nemo voluptatem velit at excepturi officiis quam quia sunt omnis voluptatibus? Atque deleniti soluta quo, odit ea repellat quisquam veniam quis? 

<form class="demo-form" inert> 
…
</form>
sentiment_neutral

Die inert Eigenschaft ist in einigen einigen aktuellen Browsern implementiert. Die globale Verfügbarkeit beträgt 43%. verfügbar.