CSS Features & Concepts in 2024

View Transitions, Scroll-Driven Animations und mehr 🥳

Checkin?

Wo will ich hin?

Ziele des Workshops

- kleiner Denkanstoß zum Thema «Lean Web Development» und Web Standards - Einblicke in neue CSS Features mit Gewicht auf «Feel» - neue Features in einem konzeptionellen und kompositorischen Zusammenhang kennen lernen - bissl Spaß haben 👻

Disclaimer ⚠️

Wir werden die meisten Themen, Konzepte & Techniken nur sehr oberflächlich behandeln.

Viele Technologien sind noch nicht flächendeckend verfügbar und laufen nur auf Chrome.

Die Inhalte für das Anwendungsbeispiel sind nur für diesen Workshop bestimmt.

Bei mir ist babylonisches Sprachgewirr. Sry!

Die meisten Features hab ich noch nie in der Hand gehabt. 😱

Web as a Technology?

Web as a Plattform?

Web as a Medium?

Web of Functionalities?

Web of Content?

Ich mag das Web!

What are the three basic building blocks of the web?

What is the idea behind the concept «Separation of Concerns»?

Separation of Concerns

HTML, CSS, Javascript

Law of instrument

The law of the instrument, law of the hammer, Maslow's hammer, or golden hammer is a cognitive bias that involves an over-reliance on a familiar tool. Abraham Maslow wrote in 1966, «If the only tool you have is a hammer, it is tempting to treat everything as if it were a nail.»

Greenfield vs. Brownfield

oder: Woran erkenne ich ein erfolgreiches Web Projekt?

The Lean Web

We keep throwing more JS at things in attempt to force the control we get in the backend onto the front end. But that’s not how it works. Trying to fight the nature of the medium is the source of a lot of the pain with modern web development.

Chris Ferdinandi // The Lean Web

Embrace the Platform

Rather than using dependencies or libraries, use the native JavaScript methods and Browser APIs that are baked right in for free whenever you can.
Chris Ferdinandi // Lean Web Principles

Web Standards

Features, die einmal im Browser implementiert sind bleiben i.d.R. drin.

Baseline

is determined by this web feature being supported on the current and the previous major versions of major browsers.

Anwendungsbeispiel

Digitales Cranach Masterpieces Coffeetable Book

CSS Foundations

Custom Properties
Nesting
Cascade Layers
Scoped CSS
Individual Transform Properties

Custom Properties

Baseline since April 2017

Custom properties are entities defined by CSS authors that represent specific values to be reused throughout a document.

Was ist der Unterschied zwischen Custom Properties und Sass Variables?

Custom Properties

.

:root{
  --name: value;
}

Custom Properties

Definiert wird via double dash. Anwenden via var().

:root{
  --accent-color: #dd1166;
}
/* break */
a{ 
  color: var(--accent-color);
}

Custom Properties …

… können zur Laufzeit verändert werden. 😱🕺🏼

.hero{
  --accent-color: white;
  /* break */
  a{ 
    color: var(--accent-color);
  }
}

Custom Properties …

… können Custom Properties enthalten.

:root{
  --darkest: #000;
  --lightest: #fff;
  /* break */
  --background-color: var(--darkest);
  --foreground-color: var(--lightest);
}

Custom Properties …

… können Custom Properties enthalten.

:root{
  --darkest: #000;
  --lightest: #fff;
  /* break */
  --background-color: var(--darkest);
  --foreground-color: var(--lightest);
}
/* break */
body:has(.lightmode){
  --background-color: var(--lightest);
  --foreground-color: var(--darkest);
}

CSS Nesting

Baseline since April 2023

CSS Nesting

The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule.

CSS Nesting

CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor.

CSS Nesting

CSS nesting helps with the readability, modularity, and maintainability of CSS stylesheets. It also potentially helps reduce the size of CSS files, thereby decreasing the amount of data downloaded by users.

CSS Nesting

.

<body>
  <header>
    <h1>Hello World</h1>
    <p>Kleiner Text der eigentlich keine Aussage hat.</p>
  </header>
  <p>
    Weiterer sinnloser Text, der nichts aussagt.
  </p>
</body>

CSS Nesting …

… erlaubt verschachtelte CSS Anweisungen.

<body>
  <header>
    <h1>Hello World</h1>
    <p>Kleiner Text der eigentlich keine Aussage hat.</p>
  </header>
  <p>
    Weiterer sinnloser Text, der nichts aussagt.
  </p>
</body>

header{
  background-color: purple;
  /* break */
  h1{
    font-size: 2rem;
  }
  h1, p{
    color: white;
  }
}

CSS Nesting Selector &

The CSS & nesting selector explicitly states the relationship between parent and child rules when using CSS nesting.

Der CSS Nesting Selector …

… erlaubt direkte Referenzierung des Elternselektors. 🛝

.hero{
  .card{
    background-color: pink;
    /* break */
    &:hover{
      background-color: green;
    }
  }
/* break */
  &:hover{
    transform: scale(1.1);
  }
}

.hero .card{
  background-color: pink;
}
/* break */
.hero .card:hover{
  background-color: green;
}
/* break */
.hero:hover{
  transform: scale(1.1);
}

Broken Grid via CSS Grid

Global Availability > 97%

Broken Grid Example

CSS Grid Layout

The CSS grid layout module excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. Like tables, grid layout enables an author to align elements into columns and rows.

CSS Grid Layout

Outline of a simple grid. 🛝

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

CSS Grid Layout

Adding «brokeability». 🛝

.grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-rows: auto;
}

.element-1{
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

🕺🏼

Warum Transitions & Animations?

UI movement helps to build a mental model.

UI motion attracts user attention.

UI motion increases the joy of use.

When it's used properly and wisely. 🧐

CSS Transitions

Baseline since ~2019

CSS Transitions

CSS transitions provide a way to control animation speed when changing CSS properties.

Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.

CSS Transitions

Outline einer CSS Transition.

div {
  transition: <property> <duration> <timing-function> <delay>;
}

/* break */
div {
  transition: 
    <property> <duration> <timing-function> <delay>, 
    <property> <duration> <timing-function> <delay>;
}

CSS Transitions …

… provide a way to control animation speed when changing CSS properties. 🛝

a{
  transition: background-color 1s ease-in-out 0s;
  background-color: orange;
  /* break */
  &:hover{
    background-color: #dd1166;
  }
}

CSS Animations

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.

CSS Animations

Outline einer CSS Animation. 🛝

.card {
  animation-duration: 3s;
  animation-name: slidein;
}
/* break */
@keyframes slidein {
  from {
    translate: 150vw 0;
  }
/* break */
  to {
    translate: 0 0;
  }
}

CSS Animations

How to gain more control? 🛝

@keyframes slidein {
  0% {
    translate: 150vw 0;
  }
/* break */
  50% {
    translate: -10vw 0;
  }
/* break */
  100% {
    translate: 0 0;
  }
}

Scroll-Driven Animations

Experimental Feature

Scroll-Driven Animations

The CSS scroll-driven animations module allows you to animate property values based on a progression along a scroll-based timeline instead of the default time-based document timeline. This means that you can animate an element by scrolling a scrollable element, rather than just by the passing of time.

It is built on top of CSS animations module and Web Animations API.

Scroll-Driven Animations Examples

All taken from [Bramus](https://www.bram.us) Demo. - [Reading Progress Indicator](https://scroll-driven-animations.style/demos/progress-bar/css/) - [Horizontal Scroll Section](https://scroll-driven-animations.style/demos/horizontal-section/css/) - [Image Reveal Effects](https://scroll-driven-animations.style/demos/image-reveal/css/)

Advantages of SDA

They're easy to use for simple animations; you can create them without even having to know JavaScript.
The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

Scroll-Driven Animations

Outline einer Scroll-Driven Animation als Scroll-Timeline 🛝 am Beispiel eines Reading Process Indicators. Der Scroll Timeline Progress Visualizer und die Chrome Extension unterstützen beim Verständnis.

<body>
  <div id="progress"></div>
  …
</body>

html{
  scroll-timeline-name: --page-scroll;
}
/* break */
@keyframes grow-progress {  
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
/* break */
#progress {
  /* Styling Stuff */
  background-color: red;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
  transform-origin: 0 50%;
  /* break */
  /* Animation Stuff */
  animation-timeline: --page-scroll;
  animation-duration: auto;
  animation-timing-function: linear;
  animation-name: grow-progress;
}

Scroll-Driven Animations

Outline einer Scroll-Driven Animation als View-Timeline 🛝. Der View Timeline Ranges Visualizer unterstützt beim Verständnis.

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1; 
    transform: scale(1);
  }
}

.scale-in {
  /* Create View Timeline */
  view-timeline-name: --appear-in-viewport;
  /* break */
  /* Attach animation, linked to the  View Timeline */
  animation-name: scale-in;
  animation-timing-function: linear;
  animation-timeline: --appear-in-viewport;
  /* break */  
  /* Tweak range when effect should run */
  animation-range: entry 25% cover 50%;
}

View Transitions API

Experimental Feature

View Transitions

The View Transitions API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).🕺🏼🙌🏽

View transitions are a popular design choice for reducing users' cognitive load, helping them stay in context, and reducing perceived loading latency as they move between states or views of an application.

View Transitions

~~Step 1: Policy in allen HTML Dokumenten hinzufügen.~~ Deprecated 😱

<meta name="view-transition" content="same-origin" />

View Transitions

Adding css-at-Rule. For a cross-document view transition to work, the current and destination documents of the navigation also need to be on the same origin ⎘

@view-transition {
  navigation: auto; // [auto | none]
}

View Transitions

Adding custom animation ⎘

@keyframes move-out {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}
/* break */
@keyframes move-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0%);
  }
}

View Transitions

Apply the custom animation to the old and new page states ⎘

::view-transition-old(root) {
  animation-name: move-out;
  animation-duration: 0.4s;
  animation-timing-function: ease-in;
  animation-direction: both;
}
/* break */
::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}

🥳

Popover API

Baseline since 2024

Popover API

The Popover API provides developers with a standard, consistent, flexible mechanism for displaying popover content on top of other page content. Popover content can be controlled either declaratively using HTML attributes, or via JavaScript.

Popover API

Outline of a popover via Popover API using popover- and popovertarget attribute. 🛝

<div id="my-popover" class="settings-popover" popover>
  <p>Ich bin ein Popover</p>
</div>

<header>
  <button popovertarget="my-popover">
    <span class="material-symbols-outlined">settings</span>
  </button>
</header>

Popover API

Adding close-button using the popovertarget attribute. 🛝

<div id="my-popover" class="settings-popover" popover>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span class="material-symbols-outlined">close</span>
  </button>
  <p>Ich bin ein Popover</p>
</div>

<header>
  <button popovertarget="my-popover">
    <span class="material-symbols-outlined">settings</span>
  </button>
</header>

Popover API

Adding some CSS via ::backdrop, :popover-open and @starting-style. 🛝

&::backdrop {
  background: rgb(0 0 0 / 70%);
}

&:popover-open {
  @starting-style {
    opacity: 0;
  }

  opacity: 1;
}

🍻

Wie geht's weiter?

Diggin Deeper

Checkout The Lean Web
Checkout What's new in the Web, Google I/O Talk from Rachel Andrew
Checkout Multi-page application View Transitions are here, Google I/O Talk from Bramus Van Damme
Checkout The state of CSS and Web UI, Google I/O Talk from Una Kravets

🧰

Gut gepackte Werkzeugkiste lohnt sich!

Danke für's Mitmachen

https://christiannoss.de