Kapitel 17. CSS
Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: translation-feedback@oreilly.com
Einführung
In der modernen Browserumgebung kannst du mit CSS nicht nur Stilregeln schreiben, sondern auch eine Reihe von APIs nutzen, um deine Anwendung weiter zu verbessern.
Das CSS Object Model (CSSOM) ermöglicht es dir, Inline-Stile programmatisch über JavaScript-Code festzulegen. Und nicht nur das: Du kannst sogar die Werte von CSS-Variablen während der Laufzeit ändern.
In Kapitel 8 hast du ein Beispiel dafür gesehen, wie du mit window.matchMedia eine Medienabfrage programmatisch überprüfen kannst, um zu sehen, ob sie auf die aktuelle Seite passt.
Dieses Kapitel enthält einige hilfreiche Rezepte, die einige dieser CSS-bezogenen APIs verwenden. Zum Zeitpunkt der Erstellung dieses Kapitels haben einige dieser APIs keine gute Browserunterstützung. Prüfe immer die Browserkompatibilität, bevor du sie verwendest.
Textbereiche hervorheben
Problem
Du möchtest einen Hervorhebungseffekt auf einen Textbereich im Dokument anwenden.
Lösung
Erstelle ein Range Objekt um den gewünschten Text und verwende dann die CSS Custom Highlight API, um die Hervorhebungsstile auf diesen Bereich anzuwenden.
Der erste Schritt besteht darin, ein Range Objekt zu erstellen. Dieses Objekt stellt einen Textbereich innerhalb des Dokuments dar. Beispiel 17-1 zeigt eine allgemeine Hilfsfunktion zur Erstellung eines Bereichs aus einem Textknoten und dem hervorzuhebenden ...
Get Web API Kochbuch now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
