From a07ab0a3d13b50d908960383f8cd9478501775cf Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Thu, 7 May 2026 14:21:00 +0200
Subject: [PATCH] =?UTF-8?q?dhbw=2002=5Fcss=5Fextended:=20native=20html-blo?=
 =?UTF-8?q?ck=20+=20basic-selektoren=20+=20basic-pseudoclasses=20+=20speci?=
 =?UTF-8?q?ficity=20raus=20(jetzt=20in=2001),=20einheitliche=20cover=20(si?=
 =?UTF-8?q?tzung=202=20=E2=80=94=20html=20&=20css=20frameworks),=20font=20?=
 =?UTF-8?q?1.7=E2=86=921.4rem,=20fragen-slide=20raus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 slides/dhbw/02_css_extended.md | 214 ++++-----------------------------
 1 file changed, 23 insertions(+), 191 deletions(-)

diff --git a/slides/dhbw/02_css_extended.md b/slides/dhbw/02_css_extended.md
index 0cd9185..18ec44a 100644
--- a/slides/dhbw/02_css_extended.md
+++ b/slides/dhbw/02_css_extended.md
@@ -17,7 +17,7 @@ section.invert {
   --color-foreground: #fff;
 }
 section {
-  font-size: 1.7rem;
+  font-size: 1.4rem;
 }
 h1 {
   color: #005f8a;
@@ -50,26 +50,34 @@ a {
 <!-- _header: '' -->
 <!-- _backgroundColor: #001520 -->
 
-# CSS: Extended
+# Web Engineering
+
+**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
+
+**Sommersemester 2026** · Sitzung 2 — HTML & CSS (Frameworks)
 
 ---
 
-# CSS Selectors – Tag, Class, ID, Attribute
+# Inhalt
 
-```css
-/* Tag */
-p { color: #333; }
+Aufbauend auf den Grundlagen aus Sitzung 1.
 
-/* Class */
-.button { background: blue; }
+1. Attribut-Selektoren
+2. Combinators (vertieft)
+3. Pseudo-Klassen — erweitert
+4. Shorthand Properties
+5. Flexbox-Shorthands
+6. Custom Properties (Variables)
+7. CSS Functions (`calc`, `clamp`, ...)
+8. Transition & Animation
+9. CSS Frameworks (Tailwind & Co.)
 
-/* ID */
-#header { height: 60px; }
+---
 
-/* Attribute */
-input[type="text"] { border: 1px solid #ccc; }
-input[disabled] { background: #eee; }
-```
+<!-- _class: invert -->
+<!-- _backgroundColor: #001520 -->
+
+# CSS: Extended
 
 ---
 
@@ -118,27 +126,7 @@ h1, h2, h3 { font-weight: bold; }
 
 ---
 
-# Pseudo Classes
-
-```css
-/* User Interaction */
-:hover { color: red; }
-:active { background: blue; }
-:focus { outline: 2px solid orange; }
-
-/* Structure */
-:first-child { margin-left: 0; }
-:last-child { margin-right: 0; }
-:nth-child(odd) { background: #f9f9f9; }
-
-/* Links */
-:visited { color: purple; }
-:link { color: blue; }
-```
-
----
-
-# Pseudo Classes – More
+# Pseudo Classes – Erweitert
 
 ```css
 /* Form States */
@@ -259,28 +247,6 @@ transition: background 0.2s, transform 0.1s;
 
 ---
 
-# CSS Specificity
-
-Welcher Selektor gewinnt? **Punktezählung:**
-
-```
-ID            – 0,1,0,0
-Class / Attr / Pseudo-Class  – 0,0,1,0
-Tag / Pseudo-Element  – 0,0,0,1
-Inline Style          – 1,0,0,0
-!important            – setzt alles außer Kraft
-```
-
-```css
-#main .btn:hover     /* 0,1,2,0 */
-.btn.primary         /* 0,0,2,0 */
-button[type="submit"] /* 0,0,1,1 */
-```
-
-→ Faustregel: möglichst flach. `!important` vermeiden.
-
----
-
 # CSS Frameworks
 
 | Framework | Stil |
@@ -308,137 +274,3 @@ button[type="submit"] /* 0,0,1,1 */
 - JIT-Compiler erzeugt nur genutzte Klassen
 - Design-System via `tailwind.config.js`
 
----
-
-<!-- _class: invert -->
-<!-- _backgroundColor: #001520 -->
-
-# No JavaScript, No Cry
-
-## Native HTML statt JS-Komponenten
-
----
-
-# Native HTML – Was früher JS brauchte
-
-| Komponente | Native Alternative |
-|------------|--------------------|
-| Accordion / Collapsible | `<details>` + `<summary>` |
-| Modal / Dialog | `<dialog>` |
-| Date Picker | `<input type="date">` |
-| Time Picker | `<input type="time">` |
-| Color Picker | `<input type="color">` |
-| Range Slider | `<input type="range">` |
-| Progress Bar | `<progress>` |
-| Auto-Complete | `<datalist>` |
-
-→ Baseline Widely Available (Chrome, Firefox, Safari, Edge).
-
----
-
-# `<details>` + `<summary>`
-
-```html
-<details>
-  <summary>Mehr Infos</summary>
-  <p>Hier steht der ausklappbare Inhalt.</p>
-</details>
-```
-
-- Keine Zeile JS
-- Tastatur-zugänglich
-- Animierbar mit `::details-content` (CSS only)
-
----
-
-# `<dialog>` – Native Modal
-
-```html
-<dialog id="myDialog">
-  <form method="dialog">
-    <p>Wirklich löschen?</p>
-    <button value="cancel">Abbrechen</button>
-    <button value="ok">OK</button>
-  </form>
-</dialog>
-
-<button onclick="myDialog.showModal()">Öffnen</button>
-```
-
-- `showModal()` blockt Hintergrund + ESC schließt
-- Backdrop via `dialog::backdrop`
-- Form mit `method="dialog"` schließt + liefert `returnValue`
-
----
-
-# `<input type="date">` & Co.
-
-```html
-<input type="date" min="2026-01-01" max="2026-12-31">
-<input type="time" step="60">
-<input type="color" value="#005f8a">
-<input type="range" min="0" max="100" step="5" value="50">
-<input type="number" min="1" max="300">
-```
-
-- Plattform-native UI (Touch-Datepicker auf Mobile)
-- Validierung "for free"
-- Locale-Awareness vom Browser
-
----
-
-# `<progress>` – Native Progress Bar
-
-```html
-<progress value="70" max="100">70%</progress>
-
-<!-- indeterminate -->
-<progress></progress>
-```
-
-```css
-progress {
-  width: 100%;
-  height: 0.5rem;
-}
-progress::-webkit-progress-bar { background: #eee; }
-progress::-webkit-progress-value { background: #005f8a; }
-```
-
----
-
-# Form Validation – Native
-
-```html
-<form>
-  <input type="email" required
-         pattern=".+@dhbw\.de"
-         title="Bitte DHBW-Mail eingeben">
-  <input type="password" minlength="8" required>
-  <button>Login</button>
-</form>
-```
-
-- `required`, `min`, `max`, `pattern`, `step`
-- `:invalid` / `:valid` CSS-Pseudoklassen
-- `form.checkValidity()` / `input.setCustomValidity()`
-
----
-
-# Wann doch JS?
-
-- Komplexe Interaktion über mehrere Komponenten
-- State, der nicht ins DOM gehört
-- Async / Server-Sync
-- Animationen mit komplexer Logik
-- Cross-Browser-Polyfills (selten heute)
-
-→ **Default: HTML/CSS. JS nur wenn nötig.**
-
----
-
-# Fragen?
-
-1. Was bedeutet `div > p` vs `div p`?
-2. Wann nutzt du `nth-child(even)`?
-3. Warum `--variable` statt direkt `#fff`?
\ No newline at end of file