Tipps & Tricks CSS, JS, Debugging, Browser
Mit der Methode console.log() geben Sie Texte, Variablen und Objekte in der Web-Konsole aus. Für die Webentwicklung gibt es viele weitere nützliche Methoden, die Ihnen das Debugging erleichtern.
1. Usability Aktiver Reiter Auf manchen Webseiten kann es sinnvoll sein, bestimmte Prozesse anzuhalten, wenn sich die Webseite gerade nicht im aktiven Tab befindet. Dafür gibt es die Page Visibility API.
In einem Liveticker werden regelmäßig neue Inhalte hinzugefügt. Wenn der Benutzer aber den Reiter wechselt oder den Browser minimiert, könnte es legitim sein, die Updates zu unterbrechen und erst wieder aufzunehmen, wenn der entsprechende Tab wieder aktiv wird. Ähnliches gilt für Videos: Manche Websites unterbrechen das Laden oder Abspielen eines Videos, wenn der entsprechende Reiter nicht mehr aktiv ist. Zur Umsetzung eignet sich die Page Visibility API ( mzl.la/1Fu21wh), die zwei Eigenschaften und ein Event zur Verfügung stellt: • document.hidden liefert true, wenn die Webseite für den Benutzer nicht sichtbar ist, andernfalls ist der Wert false. • document.visibilityState liefert einen String mit den möglichen Werten visible, hidden, prerender und unloaded. • visibilitychange ist das Event, das ausgelöst wird, wenn sich der Zustand des Reiters ändert. In der neuen Spezifikation Page Visibility Level 2 ist die Eigenschaft document.hidden zwar aus historischen Gründen noch enthalten; die Empfehlung lautet allerdings, stattdessen visibilityState zu nutzen. Der folgende Code ändert den Titel der Webseite, wenn der Benutzer den Reiter wechselt. Diese Abfrage funktioniert in allen modernen Browsern, außerdem in den Internet Explorern 10 und 11. In älteren Versionen von Firefox, Chrome und Opera benötigen Sie allerdings die Prefixes mox und webkit. Die API arbeitet zuverlässig, solange der Nutzer aktiv den Reiter wechselt oder den Browser minimiert. Allerdings triggern nicht alle Handlungen des Benutzers die API. Wenn er etwa auf ein anderes Programmfenster klickt oder das Programm mit [Alt]+[Tab] wechselt, registriert die API diesen Wechsel nicht. Das kann dem gewünschten Verhalten entsprechen, wenn der Nutzer mit mehreren Programmen gleichzeitig arbeiten möchte. In der Praxis fließen neben der Page Visibility API manchmal noch andere Faktoren ein. Zum Beispiel können Sie über die Methoden focus() und blur() beobachten, ob Elemente den Fokus bekommen oder verlieren. Ebenso können Mausbewegungen oder Klicks darauf hindeuten, dass der aktuelle Tab gerade aktiv ist. Die jeweiligen Methoden können allerdings auch false positives liefern, daher ist meist eine Kombination aller Möglichkeiten sinnvoll. Mit ifvisible.js gibt es eine Crossbrowser-Bibliothek von Serkan Yersen, die Sie nutzen können ( bit.ly/2jz1x2q). Die Bibliothek bietet Funktionen für verschiedene Aktionen, etwa, wenn ein Reiter seinen aktiven Zustand ändert:
2. Chrome Bug Sticky Kopfzeilen für Tabellen Mit position: sticky ist es möglich, Tabellen mit Kopfzeilen auszustatten, die beim Scrollen hängen bleiben. Damit das auch in Chrome funktioniert, benötigen Sie allerdings einen kleinen Trick.
Die CSS-Eigenschaft position: sticky wird grundsätzlich von allen modernen Browsern unterstützt (allerdings nicht vom Internet Explorer). Damit sorgen Sie dafür, dass ein Element zunächst relativ positioniert wird und mitscrollt. Sobald das Element allerdings aus dem Viewport verschwinden würde, ändert es sein Verhalten und wechselt auf eine fixierte Positionierung. Damit ist es im Grunde recht einfach, eine Tabelle mit einer sticky Kopfzeile auszustatten. Nehmen wir folgendes Grundgerüst: Eigentlich sollte es genügen, thead oder aber thead tr mit der Eigenschaft position: sticky auszustatten. Leider gibt es einen Bug in Chrome – und damit auch in Edge und Opera –, da alle drei Browser auf Chromium aufbauen. Chromium unterstützt die sticky Positionierung nämlich nicht bei thead und tr. Stattdessen müssen Sie das Element th nutzen. th { position: sticky; top: 0; } Sie können diese Eigenschaft jetzt schon in Ihren Projekten verwenden. Moderne Browser zeigen die Kopfzeile im sticky-Modus an. In älteren Browsern, die die Anweisung nicht verstehen, scrollt die Kopfzeile wie zuvor einfach mit.
3. Textfluss Multi-Line Text Für manche Layouts ist es nötig, Text auf eine bestimmte Anzahl von Zeilen zu beschränken. Für moderne Browser gibt es für diesen Zweck mittlerweile eine einfache Lösung per CSS.
Das CSS Overflow Module Level 3 sieht die Eigenschaft line-clamp vor. Im Wesentlichen legen Sie damit fest, ab welcher Zeile ein Inhalt nicht mehr dargestellt werden soll und ergänzen ein Trennzeichen. Das kann eine übliche Ellipse … sein, aber auch ein String in der Form „… (mehr auf der nächsten Seite)“. Aktuell unterstützen Browser noch nicht die Form, die in der Spezifikation vorgesehen ist. Aber seit Juli 2019 unterstützen alle modernen Browser eine etwas abgespeckte Version. Um einen Absatz auf drei Zeilen zu beschränken, nutzen Sie folgenden Code: Egal, ob Firefox, Chrome, Edge, Safari oder Opera: Alle Browser unterstützen diese webkit-Prefix-Version. Außen vor sind hier ältere Browser, und damit sämtliche Internet Explorer.
4. Intelligente Selektion ::first-letter Mit dem Pseudoelement ::first-letter selektieren Sie den ersten Buchstaben in einem Element – und unter Umständen ein paar Zeichen mehr.
Auf manchen Webseiten ist der erste Buchstabe eines Absatzes etwas anders gestaltet, zum Beispiel in einer anderen Farbe und etwas größer. In CSS sprechen Sie den ersten Buchstaben mit der Pseudoklasse ::first-letter an. Auch wenn hier von letter die Rede ist, die Selektion funktioniert ebenso bei Zahlen. Weniger bekannt ist, dass ::first-letter unter Umständen
5. Webentwicklung Tipps für die Konsole
Eine der ersten Anweisungen, die Webentwickler bei der Arbeit mit den Developer Tools und der Konsole in Browsern lernen, ist die Ausgabe von Hinweisen oder Variablen fürs Debugging: console.log('Button A gedrückt'); console.log(var); 1 Design: Neben console.log() gibt es weitere Möglichkeiten, um die Art der Ausgabe zu kennzeichnen. Je nach Browser werden diese mit unterschiedlichen Farben und Icons angezeigt. console.info('reine Informationen'); console.debug('fürs Debugging'); console.warn('Warnmeldung, auf gelbem
Hintergrund'); console.error('Fehlermeldung, auf
rotem Hintergrund'); Das reicht meist, um besondere Hinweise hervorzuheben. Sie haben aber auch die Möglichkeit, Ihre Meldung mit eigenem CSS zu stylen. console.log('%c Nachricht mit eigenem CSS', 'color:red; background-color: black;') Dabei können Sie allerdings nicht die gesamte Palette an CSS benutzen. Die Konsole wird einige Angaben ignorieren, abhängig vom jeweiligen Browser.
2 Sinnvolle Ausgabe: Sie können alle genannten Methoden nutzen, um Variablen und Objekte auszugeben, etwa: const hero = { codename: 'Darkwing
Duck', realname: 'Drake Mallard' }; const villain = { codename: 'Megavolt', realname: 'Elmo Sputterspark'}; console.log(hero); console.log(villain); Diese Ausgabe ist leider nur bedingt hilfreich. In beiden Fällen wird zwar das Objekt ausgegeben. Sie müssen aber wissen, in welcher Reihenfolge die Ausgabe erfolgt, denn die Konsole gibt Ihnen keinerlei Hinweise darüber, zu welchem Objekt die jeweiligen Werte gehören. Sinnvoller ist die Ausgabe über Computed Property Names. Dazu ergänzen Sie lediglich geschweifte Klammern. In der Ausgabe können Sie so Werte und Objekte zuordnen. console.log( {hero, villain} ); Noch übersichtlicher werden solche Objekte, wenn Sie sie als Tabelle ausgeben. Auch dafür gibt es eine sinnvolle Methode. console.table({ hero, villain}); 3 Performance: Sobald Sie die Performance Ihres JavaScripts testen möchten, bieten sich diese Methoden an: console.time('timer1');
// Ihre Funktion console.timeEnd('timer1'); Damit starten Sie einen Timer und geben am Ende die benötigte Zeit in Millisekunden aus. Sie müssten hier nicht unbedingt eine Variable vergeben. Aber es ist sinnvoll, gleich mit Variablen zu arbeiten; für den Fall, dass Sie verschiedene Events messen möchten. 4 Bedingungen: Manchmal möchten Sie einen Hinweis nur unter bestimmten Bedingungen ausgeben. Dazu könnten Sie eine einfach if-Abfrage nutzen. Es gibt aber eine kompaktere Möglichkeit, die Methode console.assert(). var count = 110; console.assert(count <= 100,
'Zähler hat 100 überschritten'); Die Zeile ist als Annahme zu lesen. Wir gehen davon aus, dass unser Zähler count maximal den Wert 100 erreicht. Falls das allerdings nicht der Fall sein sollte, wird der entsprechende Hinweis angezeigt. 5 Aufräumen: Nachdem wir jetzt die Konsole mit allerlei Informationen gefüllt haben, könnten wir noch aufräumen und alle Einträge löschen, mit einem simplen console.clear();
mehr Zeichen beinhalten kann als nur den ersten Buchstaben. Bestimmte Zeichen, etwa öffnende und schließende Klammern oder Anführungszeichen, werden gemäß Spezifikation zum ersten Zeichen hinzugezählt. Das funktioniert in allen modernen Browsern ab Internet Explorer 9. Der Internet Explorer 8 unterstützt hier lediglich die veraltete (deprecated) Schreibweise mit einem Doppelpunkt, also :firstletter statt ::first-letter. p::first-letter { background-color: #aed6f1; font-weight: bold; }
6. Tool Webhint Webhint prüft Webseiten auf mögliche Probleme. Seit Kurzem gibt es das Online-Tool auch als Erweiterung für die Browser Chrome, Edge und Firefox.
Mit Webhint können Sie eine Webseite auf Probleme in den Bereichen Barrierefreiheit, Browser-Kompatibilität, Performance, Pitfalls, Progressive Web Apps und Sicherheit prüfen. Diese Bereiche überschneiden sich teilweise mit dem Tool Lighthouse, das in Chrome (und damit auch in den neuen Versionen von Edge) enthalten ist. Was Webhint abhebt sind die Tipps für die Cross-Browser-Kompatibilität. So erhalten Sie eine Liste von CSS- und JavaScript-Funktionen, die in verschiedenen Browsern nicht unterstützt werden. Konkret zum Beispiel: object-fit is not supported by ie 11 oder script[defer] is not supported by opera 60,62. Sie können die gewünschten Browser in den Einstellungen selbst festlegen. Die Erweiterung erzeugt einen weiteren Reiter in den Developer Tools. In Chrome können Sie Webhint neben Lighthouse nutzen und eine Webseite mit beiden Tools überprüfen. Neben den neuen Browser-Erweiterungen bietet die Website webhint.io auch einen Online-Scanner. Alternativ können Sie das Tool auch in Ihr CLI (Command-line interface, Kommandozeile) integrieren.
7. Zukunft des Webs The Web We Want Eine neue Kooperation zwischen Browser-Herstellern sammelt auf der Website webwewant.fyi Feature Requests von Webentwicklern.
In den letzten Jahren haben Browser zahlreiche neue Techniken unterstützt. Webworker wünschen sich trotzdem noch dieses oder jenes neue Feature in CSS oder JavaScript. Aaron Gustafson (Mitarbeiter von Microsoft) hat daher das Projekt The Web We Want initiiert. Webworker können dort neue Features vorschlagen. Die Idee ist, dass Browser-Hersteller so besser wissen, in welche Ideen sie ihre Energie stecken sollen. Das Team beinhaltet mit Marcos Cáceres (Mozilla, W3C), Stephanie Drescher (Microsoft), Brian Kardell (Igalia) und Chris Wilson (Google, W3C) Vertreter aller größerer Browser-Hersteller. Wenn Sie eigene Wünsche an Browser-Hersteller haben, können Sie diese auf der Website webwewant.fyi einreichen. Die eingereichten Vorschläge sind öffentlich, und es sind einige interessante Ideen dabei. Zum Beispiel: „Ich wünsche mir eine Möglichkeit, die Scrollrichtung bei Elementen zu ändern (um Interfaces wie bei Textmessages zu ermöglichen)“oder „Ich wünsche mir, SVG komplett über CSS stylen zu können“.