Christian Noss
prof @th_koeln // founder @klickmeister // driver @micologne // supporter @codeandcontext & @webscicologne
CSS Features & Concepts in 2024
28.07.2024
In diesem Workshop werden einige neue CSS-Features und Konzepte für das Jahr 2024 vorgestellt … nagut, auch ein paar ältere 😉. Dabei liegt der Fokus auf der Verbesserung des Feels einer Website. Wir befassen uns u.A. mit Web Standards & Lean Web Development, Custom Properties, Scroll Driven Animations, View Transitions, CSS Nesting, der Popover API und Broken Grid via CSS Grid. Dazu gibt es Videos, Slides und ein Repo mit einer Demo und Challenges zum üben.
Viel Spaß!
01 // Embrace the platform
Worum geht es im Workshop und warum könnte das wichtig sein? Neben dem Blick auf CSS Features sprechen wir über die Bedeutung von Webstandards und nachhaltiger Webentwicklung.
02 // CSS Custom Properties und Nesting
Wir tauchen in die Welt der Webstandards ein und untersuchen einige nützliche CSS-Features. Dabei erstellen wir ein interaktives Coffee Table Book und diskutieren die Unterschiede zwischen Sass-Variablen und Custom Properties.
03 // Broken Grid via CSS Grid
Wir prüfen, wie man mit dem CSS-Grid-Modul Broken Grids erstellt, um eine dynamischere und weniger starre Anordnung von Elementen auf einer Webseite zu erreichen.
04 // CSS Transitions & Animations
In diesem Teil erörtern wir, wie Transitions und Animationen im UI-Design die Benutzererfahrung verbessern, die Aufmerksamkeit lenken und ein mentales Modell der Informationsarchitektur schaffen können.
05 // Scroll-Driven Animations via CSS
Mit Scroll Driven Animations können wir Werte ändern, abhängig von der Progression oder vom Fortschritt einer scrollbasierten Timeline. Dies kann auf jedem scrollbaren Element angewendet werden. Die Funktion ist auf CSS-Animationen und der Web Animation API aufgebaut.
06 // View transitions via CSS
Wir werfen einen Blick auf die View Transition API, ein experimentelles Feature, das Animationen zwischen verschiedenen Website-Ansichten ermöglicht. Wir diskutieren die Möglichkeiten und Herausforderungen bei der Implementierung und Choreographie von Übergängen.
07 // Popover API
In diesem Teil befassen wir uns mit der Popover API, die Entwickler:innen einen standardisierten Weg bietet, Popover Modals zu implementieren. Dies kann entweder deklarativ über HTML oder über JavaScript erfolgen. Wir schauen uns an, wie man ein Popover Element erstellt und mit einem Trigger-Element verbindet, das das Popover aktiviert.
08 // Outro
Hier werden einige weiterführende Links zu Vorträgen und Texten vorgestellt.
09 // Challenges und Übungen zum Workshop
In diesem Teil schauen wir uns das Anwendungsbeispiel und die verschiedneen Challenges an, an denen wir die Konzepte und Technologien aus den vorhergehenden Videos endlich anwenden. Viel Spaß dabei!
Material
Playgrounds
Folgende Playgrounds zum Workshop sind auf Codepen verfügbar:
- CSS Broken Grid Demo
- CSS Popover Demo
- CSS Scroll Driven View Timeline Demo
- CSS Scroll Driven Animation Demo
- CSS Transition Demo