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 ⚠️
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
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.
Sass Warning
Baseline
Anwendungsbeispiel
Digitales Cranach Masterpieces Coffeetable Book
CSS Foundations
- Custom Properties
- Nesting
- Cascade Layers
- Scoped CSS
- Individual Transform Properties
Custom Properties
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;
}
Definiert wird via double dash. Anwenden via var().Custom Properties
:root{
--accent-color: #dd1166;
}
/* break */
a{
color: var(--accent-color);
}
… können zur Laufzeit verändert werden. 😱🕺🏼Custom Properties …
.hero{
--accent-color: white;
/* break */
a{
color: var(--accent-color);
}
}
… können Custom Properties enthalten.Custom Properties …
:root{
--darkest: #000;
--lightest: #fff;
/* break */
--background-color: var(--darkest);
--foreground-color: var(--lightest);
}
… können Custom Properties enthalten.Custom Properties …
: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
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>
… erlaubt verschachtelte CSS Anweisungen.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>
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.
… erlaubt direkte Referenzierung des Elternselektors. 🛝Der CSS Nesting Selector …
.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
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.
Outline of a simple grid. 🛝CSS Grid Layout
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
Adding «brokeability». 🛝CSS Grid Layout
.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.
CSS Transitions
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.
Outline einer CSS Transition.CSS Transitions
div {
transition: <property> <duration> <timing-function> <delay>;
}
/* break */
div {
transition:
<property> <duration> <timing-function> <delay>,
<property> <duration> <timing-function> <delay>;
}
… provide a way to control animation speed when changing CSS properties. 🛝CSS Transitions …
a{
transition: background-color 1s ease-in-out 0s;
background-color: orange;
/* break */
&:hover{
background-color: #dd1166;
}
}
CSS Animations
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.
Outline einer CSS Animation. 🛝CSS Animations
.card {
animation-duration: 3s;
animation-name: slidein;
}
/* break */
@keyframes slidein {
from {
translate: 150vw 0;
}
/* break */
to {
translate: 0 0;
}
}
How to gain more control? 🛝CSS Animations
@keyframes slidein {
0% {
translate: 150vw 0;
}
/* break */
50% {
translate: -10vw 0;
}
/* break */
100% {
translate: 0 0;
}
}
Scroll-Driven Animations
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 Demo.
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.
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.Scroll-Driven Animations
<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;
}
Outline einer Scroll-Driven Animation als View-Timeline 🛝. Der View Timeline Ranges Visualizer unterstützt beim Verständnis.Scroll-Driven Animations
@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
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" />
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 Transitions
@view-transition {
navigation: auto; // [auto | none]
}
Adding custom animation ⎘View Transitions
@keyframes move-out {
from {
transform: translateY(0%);
}
to {
transform: translateY(-100%);
}
}
/* break */
@keyframes move-in {
from {
transform: translateY(100%);
}
to {
transform: translateY(0%);
}
}
Apply the custom animation to the old and new page states ⎘View Transitions
::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
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.
Outline of a popover via Popover API using popover- and popovertarget attribute. 🛝Popover API
<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>
Adding close-button using the popovertarget attribute. 🛝Popover API
<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>
Adding some CSS via ::backdrop, :popover-open and @starting-style. 🛝Popover API
&::backdrop {
background: rgb(0 0 0 / 70%);
}
&:popover-open {
@starting-style {
opacity: 0;
}
opacity: 1;
}
🍻
Wie geht's weiter?
🧰
Gut gepackte Werkzeugkiste lohnt sich!
Danke für's Mitmachen