Heute kam ein neues Proposal für CSS: Nesting Module. Wenn ich das richtig lese, kann man Selektoren ineinander verschachteln, ähnlich, wie man es bei SCSS auch macht:
This module introduces the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets.
Die verlinkten Beispiele sehen auch danach aus, als hätten sie einfach direkt SCSS genommen.
Man kann in mit CSS ein Element veranlassen, keine Click-/Pointer-Events zu verarbeiten.
Ein Stylesheet, mit dem man debuggen kann, was im head-Element möglicherweise für Probleme sorgen kann: ct.css.
Interessante CSS-Property, die die Browser schon seit Ewigkeiten können: text-stroke. Leider implementieren es alle Browser mit -webkit-Präfix (auch Firefox).
Eine Sammlung an Standard-UI-Patterns mit CSS: csslayout.io.
Ein richtig guter Post über Pixels, Rem und Em in CSS: The Surprising Truth About Pixels and Accessibility. Auch, wenn man den Unterschied schon kennt, ist es sinnvoll zu lesen!
Falls Ihr noch kein :has() in CSS benutzt habt, diese Beiträge würden Euch sicher gefallen:
Hier ist ein kleiner Bericht über die Anstrengungen der Browserhersteller, mehr Kompatibilität zu haben.
HTML+CSS: The Double Emphasis Thing
WebKit und Chrome können jetzt beide CSS-Nesting. (caniuse dazu). Ist noch ein WD, den die beiden Browser dort implementieren.
Chrome kann jetzt image-set.
HTML hat seit Kurzem ja ein Dialog-Element. Jetzt bald kommt das Popover-Element. Mehr hier.
Wer ein paar Fingerübungen in CSS-Selektoren machen will: CSS Speedrun
WebKit zieht eine gute Bilanz aus dem Bestreben, das Web mehr interoperabel zu machen. In der Liste darunter sind auch ein paar coole, neue Features. Darunter das inert-Attribut, font-size-adjust, @starting-style. Gerade das letzte sieht sehr spannend aus.
Ich finde es schön, dass die Browserhersteller zusammenarbeiten. Wenn man aber liest, auf was die sich so bei der Umsetzung konzentrieren: Das sind größtenteils alles neue Features, die sie am Ende wahrscheinlich eh alle umsetzen würden. Da liegt nicht wirklich der Fokus darauf, die Sachen zu fixen, bei denen die Browser schon länger divergent sind.
Gerade zufällig nachgeschaut und festgestellt: CSS Container-Querys kann man mittlerweile benutzen. Sogar der aktuelle ESR von Firefox (v115) kann die.
The 100% correct way to do CSS breakpoints. Am besten wäre es eigentlich, ohne konkrete Breakpoints zu arbeiten und sich das Design mit Constraints zu bauen.
@starting-style ist mittlerweile ganz okay supported (Firefox fehlt noch, 129 kommt aber nächste Woche) und CSS-Sizing mit calc-size wurde vor 5 Tagen in den Standard gemergt. Chrome wird es in in der nächsten Version releasen, alle anderen Browser nicht. Damit kann man jetzt nach height: auto animieren und transitionieren.
Mit progressive-enhancement-Techniken kann man es ja trotzdem schon nutzen.
CSS content-visibility (for React devs).
The
content-visibilityCSS property controls whether or not an element renders its contents at all, along with forcing a strong set of containments, allowing user agents to potentially omit large swathes of layout and rendering work until it becomes needed. It enables the user agent to skip an element’s rendering work (including layout and painting) until it is needed — which makes the initial page load much faster.
MDN.
In CSS gibt es ja die Pseudoklasse :invalid, die immer dann triggert, wenn der aktuelle Inhalt des Inputs nicht passt. Also auch dann, wenn es z. B. noch leer ist, wenn der User noch gar nichts eingetippt hat. Um diese Unschnheit zu behandeln gibt es viele Librarys.
Jetzt braucht man das nicht mehr, sondern kann :user-valid und :user-invalid benutzen. Gibt es beide schon länger, aber viele haben davon nie gehört.
CSS hat eine shape-Funktion, mit der man ähnlich wie bei SVG-Pfaden Formen erzeugen kann, die man z. B. als clip-path verwenden kann.
Implementing a Foil Sticker Effect. Hier ist eine CSS-Variante.
Creating a scroll-spy with 2 lines of CSS (in Chrome 140).