CSS Keywords zum Reseten: Warum „einfach zurücksetzen“ oft nicht einfach ist
CSS wirkt manchmal herrlich direkt: Du setzt einen Wert – du bekommst ein Ergebnis. Und wenn du „zurück“ willst, nimmst du eben einen der bekannten Keywords: initial, inherit, unset, revert, revert-layer. Klingt nach einem sauberen Werkzeugkasten. In der Praxis ist genau das der Punkt: Diese Keywords sind nicht nur „Werte“, sondern greifen in die Kaskade, […]
CSS-Selektoren lesen & einordnen bei :has(), @if, :is() und :where()
Ich tue mir bei den neuen Selektoren etwas schwer, daher hab ich mir hier etwas zusammengestellt, das mir hilft. Grundregel zum Lesen von CSS-Selektoren 1) Bestimme zuerst das Ziel ganz rechts. Das ist das Element, auf das der Stil am Ende angewendet wird. 2) Arbeite dich dann nach links. Alles links vom Ziel beschreibt Bedingungen, […]
Wer gewinnt in CSS?
Ein Element bekommt seinen finalen CSS-Wert nicht „einfach so“. CSS verarbeitet Regeln in einer festen Logik. Wenn man diese Logik einmal sauber verstanden hat, kann man fast jede „Warum greift das nicht?“-Situation systematisch erklären. Am hilfreichsten ist es, das Ganze als CSS-Pipeline zu sehen – einen Ablauf, der bei jedem Element immer wieder durchlaufen wird: […]
Wenn Web-Technologien verschmelzen: NLP im Browser dank WebAssembly
Heute möchte ich Euch eine echte NLP-Suche im Browser vorstellen: DEMO Aber eines nach dem anderen: Vor ein paar Jahren wäre die Idee, Python-NLP direkt im Browser laufen zu lassen, noch ein typischer „nice try“-Moment gewesen. Heute ist das ein ernstzunehmender Ansatz nicht als Gimmick, sondern als Strategie: Du baust Web-UIs mit HTML/CSS/JavaScript, nutzt aber […]
Elemente auf einer Webseite filtern mit GenericElementFilter
Kennst du das: Du brauchst auf einer Seite ein paar Filter für Karten oder Listen, baust schnell etwas mit JavaScript zusammen, auf der nächsten Seite wieder, diesmal ein wenig anders, und nach einem Jahr hast du vier Varianten von fast demselben Filter im Projekt liegen. Genau das hat mich irgendwann so genervt, dass ich […]
CSS-Einheiten – Ein Vollständiges Cheat Sheet
Oh je die ganzen CSS Einheiten. Das ist mittlerweile echt viel. Dieses Cheatsheet hilft vielleicht. Überblick: Einheiten-Kategorien Kategorie Beschreibung Beispiele Absolute Längeneinheiten fester Maßstab, unabhängig von Text- oder Viewportgröße px, cm, mm, Q, in, pt, pc Relative Längeneinheiten (typografisch) abhängig von Schriftgröße oder Rootgröße em, rem, ex, ch, cap, ic, lh, rlh Relative Längeneinheiten (Viewport-bezogen) […]
Klar strukturiertes CSS mit @layer und @scope
Jeder, der regelmäßig CSS schreibt, kennt das Problem: Mit zunehmender Komplexität werden CSS-Regeln schnell unübersichtlich. Welche Regel greift wann, und wie vermeide ich Konflikte zwischen Stilen? Genau hier setzen die beiden neuen CSS-Features @layer und @scope an, die CSS deutlich übersichtlicher und logischer gestalten. Anhand konkreter Beispiele zeige ich dir, wie das funktioniert. 1. Übersichtliche […]
GSAP jetzt völlig kostenlos: So beendest du Scroll-Pinning per Bedingung
Hey Leute, habt ihr’s schon mitbekommen? Die legendäre Animation Library GSAP (GreenSock Animation Platform) ist jetzt komplett kostenlos geworden – kein Abo, einfach frei nutzen! 🎉 Grund genug, direkt ein paar coole Tricks auszuprobieren. In diesem Beitrag zeige ich dir, wie du ein gepinntes Section-Element beim Scrollen programmgesteuert lösen kannst – ganz ohne aufwändige Höhen- […]
Sprachausgabe im Web mit der Web Speech API
Wenn du wie ich begeisterter Entwickler bist und gerne neue Web-Technologien ausprobierst, dann ist die Web Speech API eine jener Schnittstellen, die auf den ersten Blick einfach wirken, aber eine beeindruckende Tiefe bieten. Als ich das erste Mal die speechSynthesis-API in meinem Browser ausprobierte, war ich fasziniert, wie einfach es ist, einen Text mit der […]
Was ist eigentlich Two-Way Data Binding und wie kann ich es einfach umsetzen?
Stell dir vor, du hast eine Webseite mit ein paar Eingabefeldern – sagen wir, eines für den Namen und eines für das Alter. Wenn der Benutzer dort etwas eingibt, wäre es doch genial, wenn die Änderungen direkt in deinem Datenmodell gespeichert werden und umgekehrt! Willkommen in der Welt des Two-Way Data Bindings. Doch bevor wir […]
