Webtagr - Technologienummer

CSS random()-Funktion: Verabschieden Sie sich von JavaScript für zufällige Animationen

2025-08-24

CSS erhält eine `random()`-Funktion – ein echter Game Changer für Webdesign! Generieren Sie Zufallszahlen direkt in CSS, ohne JavaScript, für Elemente wie Animationsverzögerungen, zufällige Layouts und zufällige Farben. Die Funktion nimmt min-, max- und Schritt-Argumente entgegen und bietet verschiedene Möglichkeiten, Zufälligkeit zu teilen – mit benutzerdefinierten Eigenschaften oder dem Schlüsselwort `element-shared` für element- oder globale Freigabe. Der Artikel verwendet Beispiele wie die Erstellung eines Sternenfelds, zufällig platzierter Rechtecke und Fotostapel, um die Leistungsfähigkeit von `random()` zu veranschaulichen und Entwickler zu Feedback aufzufordern, um die zukünftige Gestaltung des Features zu beeinflussen.

(webkit.org)

Entwicklung random Funktion

CSS-Ankerpositionierung: Responsive Menüs ohne JavaScript

2025-08-13

Dieser Artikel untersucht die neue Ankerpositionierungsfunktion von CSS, die es ermöglicht, Elemente basierend auf der Position anderer Elemente zu platzieren. Erstellen Sie responsive Menüs und Tooltips mit minimalem CSS, ohne JavaScript. Das Tutorial beschreibt detailliert `position-anchor`, `position-area`, `position-try` und die Funktion `anchor()`, wobei der Einsatz von logischen und physischen Eigenschaften verglichen wird. Ein Beispiel für ein responsives Menü zeigt die Anpassungsfähigkeit auf verschiedenen Bildschirmgrößen.

(webkit.org)

Entwicklung Ankerpositionierung

CSS contrast-color(): Automatisierung des Farbkontrasts für Barrierefreiheit

2025-05-17

Die neue CSS-Funktion `contrast-color()` vereinfacht die Farbauswahl, indem sie automatisch schwarzen oder weißen Text wählt, um mit einer gegebenen Hintergrundfarbe zu kontrastieren. Dieser Artikel untersucht die Verwendung, vergleicht die Algorithmen WCAG 2.1 und APCA zur Kontrastrechnung und untersucht, wie man `prefers-contrast`-Media-Queries für bessere Barrierefreiheit verwendet. Obwohl derzeit auf Schwarz/Weiß beschränkt, könnten zukünftige Iterationen mehr anpassbare Optionen bieten. Die Funktion vereinfacht die Entwicklung und verbessert die Barrierefreiheit, insbesondere bei der Verwaltung mehrerer Farbzustände.

(webkit.org)

Entwicklung Farbkontrast

Safaris text-wrap: pretty: Ein neues Zeitalter für Web-Typografie

2025-04-08

Safari Technology Preview 216 führt `text-wrap: pretty` ein und revolutioniert das Textlayout im Web. Es nutzt paragraphenbasierte Algorithmen, um langjährige typografische Probleme wie zu kurze letzte Zeilen, ungleichmäßige Ränder und störende typografische Flüsse zu lösen. Im Gegensatz zu traditionellen zeilenweisen Algorithmen wertet `pretty` den gesamten Absatz aus und optimiert das Layout für bessere Lesbarkeit und Ästhetik. Obwohl Chrome und andere Browser `pretty` unterstützen, ist die Implementierung von Safari umfassender und passt den gesamten Absatz an, nicht nur die letzten Zeilen. `text-wrap: balance` konzentriert sich darauf, alle Zeilen ungefähr gleich lang zu machen, ideal für Überschriften und kürzere Texte. Entwickler sollten den passenden `text-wrap`-Wert je nach Bedarf auswählen und die Auswirkungen auf die Leistung beachten.

(webkit.org)

Entwicklung Web-Typografie

WebKits deklarativer Web Push: Effizienter, privater

2025-04-03

WebKit stellt deklarativen Web Push vor, um Probleme mit Energieverbrauch und Datenschutz bei herkömmlichem Web Push zu lösen. Herkömmlicher Web Push ist auf Service Worker angewiesen, was ihn anfällig für Intelligent Tracking Prevention (ITP) macht und zu Abonnementwiderrufen bei Verarbeitungsfehlern führt. Deklarativer Web Push ermöglicht das Senden und Anzeigen von Benachrichtigungen ohne Service Worker, indem der Benachrichtigungsinhalt direkt in die Push-Nachricht eingebettet wird. Dies verbessert Effizienz und Datenschutz und ist abwärtskompatibel mit bestehendem Web Push.

(webkit.org)

Entwicklung

CSS Item Flow: Vereinheitlichung von Flexbox, Grid und Masonry-Layouts

2025-04-02

CSS Grid und Flexbox sind leistungsstarke Layout-Tools, aber sie reichen für komplexe Layouts wie Masonry-Anordnungen nicht aus. Ein neuer Vorschlag, "Item Flow", zielt darauf ab, dies zu lösen, indem die Eigenschaften `flex-flow` von Flexbox und `grid-auto-flow` von Grid vereinheitlicht werden. Er führt neue Eigenschaften wie `item-direction`, `item-wrap`, `item-pack` und `item-slack` ein, die eine flexiblere und leistungsfähigere Layout-Steuerung ermöglichen. Dies würde Flexbox eine dichte Packung und Grid die Möglichkeit geben, das Wrapping zu deaktivieren, und gleichzeitig eine saubere Lösung für Masonry-Layouts bieten. Das Ergebnis ist ein einheitlicheres und benutzerfreundlicheres CSS-Layout-System.

(webkit.org)

Entwicklung