Als Web-Entwickler stehen wir oft vor der Herausforderung, den Überblick über unsere CSS-Animationen zu behalten. Besonders in größeren Projekten kann es schwierig sein, alle benannten Keyframes im Blick zu haben. Heute möchte ich einen nützlichen Trick mit euch teilen, wie ihr alle benannten Keyframes auf eurer Webseite schnell und einfach auflisten könnt.
Das Problem
Stellt euch vor, ihr arbeitet an einem umfangreichen Projekt mit mehreren Stylesheets und zahlreichen Animationen. Ihr möchtet wissen, welche Keyframe-Animationen definiert sind, um Duplikate zu vermeiden oder einfach einen Überblick zu bekommen. Die Chrome Developer Tools bieten leider keine direkte Möglichkeit, alle Keyframes auf einmal anzuzeigen.
Die Lösung
Hier kommt JavaScript ins Spiel! Mit einem kurzen Skript können wir alle Stylesheets durchsuchen und die Namen aller definierten Keyframes extrahieren. Hier ist der Code:
const keyframes = [];
for (const sheet of document.styleSheets) {
try {
for (const rule of sheet.cssRules) {
if (rule.type === CSSRule.KEYFRAMES_RULE) {
keyframes.push(rule.name);
}
}
} catch (e) {
console.log('Konnte nicht auf Stylesheet zugreifen:', sheet.href);
}
}
console.log('Gefundene Keyframes:', [...new Set(keyframes)]);Wie es funktioniert
- Wir erstellen ein leeres Array keyframes zur Speicherung der Keyframe-Namen.
- Wir iterieren durch alle Stylesheets der Seite mit document.styleSheets.
- Für jedes Stylesheet durchsuchen wir alle CSS-Regeln.
- Wenn wir eine Keyframes-Regel finden (Typ CSSRule.KEYFRAMES_RULE), fügen wir ihren Namen unserem Array hinzu.
- Wir verwenden einen try-catch-Block, um CORS-Probleme bei externen Stylesheets zu umgehen.
- Am Ende geben wir eine Liste aller einzigartigen Keyframe-Namen aus, indem wir Duplikate mit Set entfernen.
Anwendung
Um diesen Code zu nutzen, öffnet einfach die Chrome Developer Tools auf eurer Webseite, wechselt zur Konsole und fügt den Code ein. Drückt Enter, und ihr erhaltet eine Liste aller benannten Keyframes auf eurer Seite.
Fazit
Dieser einfache Trick kann euch viel Zeit sparen und hilft, den Überblick über eure Animationen zu behalten. Ihr könnt den Code auch in eure Entwicklungs-Workflows integrieren oder ihn als Basis für weiterführende Tools verwenden.Probiert es aus und lasst mich wissen, wie es euch damit ergeht! Happy Coding!
