Mit einer einzigen Zeile in Ihrer CSS-Datei können Sie die typografische Qualität Ihrer HTML-Dokumente auf ein wesentlich professionelleres Niveau befördern: hanging-punctuation: first;.
Hier ein Screenshot einer HTML-Seite – ins Bild klicken, um Vorher/Nachher zu vergleichen.
Text ohne hängende Interpunktion
Siehe auch Hängende Interpunktion (Wikipedia) und hanging-punctuation (Developer Mozilla)
Update
Wie Michael in den Kommentaren zu Recht anmerkt, ist die Browserunterstützung sehr bescheiden – bisher ist nur Safari in der Lage, hanging-punctuation darzustellen.
text-indent wird allerdings von allen gängigen Browsern unterstützt. Mit text-indent: -.43em erreichen Sie (angepasst für die Schrift im Screenshot-Beispiel) ebenfalls eine hängende Interpunktion – und so wird sie auch in Browsern wie Firefox oder Chrome dargestellt. Hier sieht man das Beispiel aus dem Screenshot live: Räuberleiter.
2
CSS Grid Areas CSS Grid support has been widely available since March 2017 in all major browsers. Yet, here we are in 2024, and I still see few people using the grid template areas feature.
Wenn Select-Menüs länger werden, können sie schnell unübersichtlich werden, siehe Screenshot links. Leider kann man select options aber nicht stylen – was also tun, wenn man ein Menü mit Icons haben möchte? Ganz einfach: Nutzen Sie Emojis:
Getestet auf macOS in Safari, Chromium und Firefox.
Normalerweise halte ich nicht viel von negativer Bildschirmdarstellung. Hier habe ich auch erklärt, warum: Negativdarstellung und Ergonomie.
Ich würde auch nie auf die Idee kommen, unter Mojave oder Catalina im Dunkel-Modus zu arbeiten. Seit allerdings auch iOS 13 den „Dark mode“ beherrscht, habe ich meine Meinung – zumindest in Bezug auf iPhone und iPad – ein wenig geändert: Es ist abends/nachts einfach angenehmer und augenschonender, Texte nicht auf einem blendend weißen Hintergrund lesen zu müssen.
Deshalb hat qxm.de jetzt per CSS einen Dunkel-Modus spendiert bekommen, der in iOS 13 und MacOS Mojave/Catalina automatisch dargestellt wird, falls der Nutzer auf seinem Gerät den Dunkel-Modus aktiviert hat:
Hier ein Ausschnitt aus der CSS-Datei:
@media screen and (prefers-color-scheme: dark) {
:root {
--text-color: #ccc;
--text-light-color: #aaa:
--text-menu-color: #999;
--heading-color: #aaa;
--bg-color: #2f3436;
--bg-light-color: #6c767c;
--link-color: #2f79af;
--link-light-color: #2f79af;
}
}
2
Ein Formular kann mehrere Submit-Buttons haben, deren Werte man mittels POST ermitteln kann, um festzustellen, welcher Button gedrückt wurde. Beispielsweise kann ein Kommentar-Formular einen Vorschau-, einen Reset- und einen Abschicken-Button haben.
So weit, so gut. Was aber, wenn man ein Formular mit mehreren Submit-Buttons nicht per Klick, sondern per Javascript abschicken möchte, beispielsweise, um einen Kommentar mit Command-S bzw. CTRL-S abzuschicken? Dann hilft document.Kommentarformular.submit() nicht weiter. Stattdessen simuliert man einen Klick auf den entsprechenden Button:
if (Bedingung) {
document.getElementById('Abschicken').click();
}
2
Mein Blog ist mir zu klein geworden, deshalb ist hier jetzt alles ein bisschen breiter, blauer und luftiger. Und entschlackter. Wurde ja auch mal Zeit, nach fast 11 Jahren. Nun gut, damals war an so etwas wie mobiles Web, Retina-Displays oder Webfonts überhaupt noch nicht zu denken, und die Mehrheit schaute noch auf 1024×768-Bildschirme – wenn überhaupt! Und heute gilt allseits die Devise: mobile first …
Zum Vergleich – so sah es vorher aus:
9
