Bisschen Style-Sheets aufgeräumt

In eigener Sache.

Sorry, Leute, hat etwas gedauert, aber ich habe – endlich – noch ein paar Sachen in den Style-Sheets aufgeräumt. Einige der gemeldeten Fehler, besonders auf Handys, sollten nun behoben oder zumindest besser sein.

Ich hatte leider noch einige dringendere Sachen zu erledigen, weshalb das etwas liegen geblieben ist. Dazu kam das Problem, dass ich zwar – danke für die vielen Hinweise auf die Debug-Modi von Firefox und Chrome, aber die kannte ich schon – die Debug-Modi nutze und kenne, aber das Problem war, dass meine eigenen Mobilgeräte und auch die Debug-Modi (ich hatte nicht sämtliche Emulationen ausprobiert) die Fehler nicht zeigten. Insofern musste ich erst mal suchen, welche Geräte und welche Emulationseinstellungen die gemeldeten Fehler zeigen, damit ich sie testen und beheben kann.

Es waren jetzt einige max-width-Einstellungen, die noch fehlten, und Einstellungen für overflow-x, an denen ich auch erst rumprobieren musste, weil da der inherit beim Grid nicht so funktionierte, wie ich mir das ursprünglich vorgestellt hatte.

Es lassen sich auch nicht alle Problem beheben (solange man die Seiten mit WordPress erstellt): Was ist, wenn der Text in einem link (a href=..) breiter als der Bildschirm ist? Bisher beschwerten sich einige, dass dann der Text schrumpft, bis der ganze Link reinpasst, was zunächst mal eine Folge dessen ist, dass overflow-x per default auf visible steht. Das kann man so einstellen, dass das abgeschnitten wird oder scrollt. Man will aber einen Zeilenumbruch haben. Das Problem daran, dass man unterschiedliche Umbruchtypen für Links braucht, in denen normaler Text steht wie hier und solchen, in denen zur Lesbarkeit der Link nochmal selbst steht, wie hier: https://www.danisch.de/blog/. Das Problem hatte ich nämlich vor Jahren schon mal und viele Leserbeschwerden bekommen. Im ersten Fall, wenn da normaler deutscher Text drinsteht, braucht man word-break: normal;, damit das wie normaler Text umgebrochen wird. Das führt aber dazu, dass dann, wenn wie im zweiten Fall ein URL im Text drinsteht, damit man ihn auch lesen kann, der mit dieser Einstellung nicht umgebrochen wird und rechts über den Text hinausragt (und dann overflow-x steuert, welches der verfügbaren Unglücke dann passiert). Deshalb würde man da dann word-break: break-all; setzen, womit dann auch URLs umgebrochen werden, nämlich immer da, wo es nicht mehr reinpasst. Macht man das aber (und das hatte ich mal vor ein paar Jahren), dann werden auch Links mit normalem deutschen Text nicht mehr nach den normalen Text-Regeln umgebrochen, sondern einfach da, wo der Platz zuende ist. Und dann rappelt einem sofort die Mailbox voll von Lesern, die einem sofort schreiben, ich könne wohl kein Deutsch, wüsste, nicht, wo man trennen muss, wäre Analphabet und so weiter.

Das Problem ist also, dass es keine Einstellung gibt, die beide zufrieden stellt, die Webseiten-Ästheten und die Deutsch-Kontrolleure.

Lösbare wäre das schon, indem man per css zwei Link-Klassen mit unterschiedlichen CSS-Einstellungen definiert, aber das wird von WordPress nicht unterstützt und das jedesmal von Hand zu setzen, ist mir zuviel Aufwand. Um also die Beschwerden und die Shitstorms zu minimieren, lasse ich das jetzt auf word-break: normal;, solange ich auf WordPress bin. Das führt nun dazu, dass der URL dann, wenn er zu lange ist, eben rechts abgeschnitten ist bzw. das Element am unteren (Text-)Ende einen Scrollbalken hat. Besser und shitstormminimierender kriege ich das jetzt ohne Softwareeingriff und ohne großen manuellen Aufwand beim Schreiben nicht hin.

Update: Doch, scheint mit word-wrap: break-word; zu funktionieren, Danke für den Hinweis.

Manche wird auch noch ein anderes Problem interessieren, an dem ich noch etwas gebastelt habe.

Man kann nämlich in Stylesheets nicht nur feste Werte, sondern auch Ausdrücke einbauen, etwa die Summe oder das Maxium von Werten. Man kann also sowas wie calc(5em+10em) hinschreiben. Nun ist die Sache die: Ich versuche, beim Stylesheets Ausdrücke, die von Pixeln abhängen (Einheit px) nicht zu verwenden, weil die Einstellungen von der Bildschirmauflösung unabhängig sein sollen, also auf einem 4k-Monitor und einem 1366-Pixel-Notebook oder einen kleineren Handy gleich aussehen sollen. Und für die Druckausgabe in pt und cm. Das funktioniert wunderbar, solange man nicht auf Werbung angewiesen ist. Da sagt einem nämlich der Werbeanbieter, dass der Banner jetzt so und soviele Pixel breit ist. Zwangsläufig kommt man dann doch wieder in die Einheit px.

Das ist aber nicht so schlimm, weil neuere Browser in Style Sheets auch Ausdrücke auswerten können. Man kann also beispielsweise statt fester Größen solche Ausdrücke wie max(45em,728px) hinschreiben, damit beispielsweise die mittlere Spalte für den Text mindestens 45mal die Breite des Buchstabens M breit ist, und zwar unabhängig von der Schriftgröße und Auflösung, und trotzdem auch mindestens 728px, damit die Werbeeinblendung reinpasst. Das ist famos, weil der Browser beim Darstellen weiß, wievielen Pixeln ein em entspricht, und rechnet das passend aus. Tolle Sache. Man kann auch sowas wie minmax(calc(600px + 3ex),auto) hinschreiben, damit ein Feld für den Werbbanner rechts mindestens 600 Pixel für den Banner plus 3ex (Höhe eines Buchstabens x) hoch ist, damit noch die Beschriftung „Werbung“ drüber passt, bei Bedarf aber auch größer werden kann. Eigentlich eine ganz famose Sache, die für responsive Layouts gut ist.

Aber, ach.

Ich verwende für Style Sheets einen SASS-Präprozessor, der einem vieles sehr erleichtert.

Netter- und Dummerweise hat der aber selbst Funktionen wie calc und max und so weiter, und wenn man da sowas wie max(45em,728px) hinschreibt, bricht der mit einer Fehlermeldung ab, weil er das beim Erstellen des CSS schon ausrechnen will, aber nicht kann, weil er ja noch nicht weiß, wie groß ein em dann bei der Darstellung im Browser sein wird und em nicht in pixel umrechnen kann. Und die Funktionen in SASS heißen blöderweise genauso wie in CSS. Immer, wenn man es hinschreibt, versucht SASS es schon auszurechnen, obwohl das noch nicht geht. Man muss den Ausdruck aus Strings zusammenbasteln, damit er dann auch wie max(45em,728px) im Stylesheet steht und der SASS-Präprozessor nicht versucht, ihn auszurechnen, und sich beschwert, dass er das nicht kann.

*Seufz*

Erfahrungsgemäß ist sowas nie fertig, es gibt immer was zu tun und zu verbessern. (“Yippiejaja-yippie-yippie-yeah”)

Mir gefällt es auch noch nicht vom Aussehen her.

Viele Leser hatten angemeckert, dass ihnen die Schrift nicht kontrastreich genug ist. Ich habe die Überschriften dunkler gemacht, was zwar vielen Lesern gefällt und mir eine Reihe von Dankes-Mails eingebracht hat, mir aber leider selbst nicht so gefällt.

Ich bin auch nicht so glücklich mit dem dreispaltigen Layout. Zweispaltig wie vorher wäre mir lieber, links Text, rechts Gerümpel, aber das war zu lang und nicht Handy-tauglich. Und irgendwo muss das Zeug ja hin.

Es gibt recht schöne Webseiten, die eine deutlich größere Schriftart wählen. Sieht gut aus. Aber eigentlich sagen alle Design-Handbücher, dass man davon die Finger lassen und die Textgröße dem Browser und den persönlichen Benutzereinstellungen überlassen soll. Viele Leser beklagen, ihnen sei die Schrift zu klein, weil sie nicht wissen, dass sie die bevorzugte Schriftgröße am Browser selbst irgendwo einstellen können/sollen. Ich habe auch viele sehbehinderte Leser, die sich die Schriftgröße größer oder sehr groß einstellen und auf großen Bildschirmen lesen. Das würde man stören, wenn man eine feste Schriftgröße vorgibt. Das tun zwar alle Webseiten, die für normale Nutzer „schön“ aussehen, aber es ist halt nicht so barrierefrei. Übrigens, und so nebenbei bemerkt: Google berücksichtigt in seinem Webseitenranking auch, ob eine Seite responsiv und barrierefrei ist.

Ich habe schon überlegt, ob ich die Textspalte umrahmen oder weiß unterlegen soll, weil ein Leser – zu Recht – anmeckerte, dass der Text für das Auge nicht isoliert und leicht abzugrenzen genug da steht. Schön sieht’s dann aber auch nicht aus.

Der Header gefällt mir auch noch nicht.

Heißt im Klartext:

Das wird noch ein paar evolutionäre Verbesserungsiterationen geben müssen.

Aber immerhin gefällt es mir, das Layout über ein Grid-Layout zu machen.

Ein Leser wollte wissen, was denn ein Grid-Layout überhaupt ist.

Also, das ist so: Man muss sich irgenwie überlegen, wie man die Elemente auf der Webseite anordnen kann. Früher verwendete man dafür schräge Tricks wie Float-Elemente, die man links oder rechts hinpappen und dann den Text herumfließen lassen, was aber Mist ist, weil das eigentlich dafür gedacht ist, um in einem Text Graphiken (wie in Lexika und Zeitschriften) so auftauchen zu lassen, dass sie den Text nicht unterbrechen, sondern dran vorbeifließt. So hatte ich früher, vor Jahren, auch mal das Blog-Layout gebaut, das ist aber Murks. Das sieht zwar zuerst mal aus, wie gewollt, aber es gibt da so eine Style-sheet-Einstellung clear: both; , die dann in manchen Werbeeinblendungen vorkommt und einem alles durcheinanderwirft. Dann gibt es die Möglichkeit, Textboxen wie etwa mit den Menüs oder der Werbung absolut und unabhängig vom Textfluss auf der Seite zu platzieren. Das funktioniert, ist aber mit viel Rechnerei verbunden, weil dann die Abstände passen müssen, und es ist nicht wirklich responsiv, passt sich also nicht gut an Handy-Bildschirme an. Auch nicht gut.

Und ganz früher hat man das Tabellen-Element missbraucht, um eine Webseite als Tabelle aufzubauen, aus Spalten und Zeilen, in die man die Elemente packt, das war aber auch nichts. Das sah zwar auch aus wie gewollt, war aber nicht „barrierefrei“, weil die Lesegeräte für Sehbehinderte dann den Inhalt nicht finden und versuchen, eine Tabelle vorzulesen. Das war alles lange Zeit ein übles Gewurschtel.

Deshalb hat man vor ein paar Jahren zwei neue Elementgruppen eingeführt, nämlich Grid und Flex, die, genauer gesagt, keine neuen HTML-Elemente sind, sondern nur neue Stylesheet-Werte für das Attribut display, die dann jedes Behälterelement entsprechend verwandeln und es erlauben, Elemente abhängig von Bildschirmgröße und Auflösung anzuordnen.

Flex stapelt die Elemente einfach horizontal oder vertikal ein, und wenn sie nicht mehr passen, in die nächste Zeile. So kann man beispielsweise eine Sammlung von Bildern, Suchergebnissen, Warenangeboten und sowas über den Bildschirm verteilen. Einfach auffüllen. Und man kann angeben, wie überschüssiger Platz verteilt wird, dass also die Abstände gleich groß oder proportional aufgeteilt werden.

Grid dagegen (und das habe ich hier verwendet) ordnet Elemente anhand eines imaginären Rasters an, ganz ähnlich einer Tabelle. Ich habe das hier so gewählt, dass bei einem normalen Bildschirm drei Spalten, auf einem Handy oder Drucker aber nur eine Spalte auftaucht. Und dann kann man sagen, wohin Elemente gepackt werden sollen und wieviele Zeilen und Spalten sie breit sein sollen. Beispielsweise ist der Header hier auf Bildschirm und Handy in Zeile 1, aber auf dem Bildschirm über die Spalten 1,2,3 verteilt, auf dem Handy nur Spalte 1. Auf dem Bildschirm ist das Menü links in Spalte 1, der Text in Spalte 2 und die vertikalen Werbungen rechts in Spalte 3, dafür in der gleichen Zeile nebeneinander, während auf dem Handy alles in einer Spalte und dafür untereinander angeordnet ist. Und dann schreibt man einfach mit den Ausdrücken, die ich oben beschreiben habe, hin, wie breit man das haben will. also etwa, dass die mittlere Spalte, die den Blogtext enthält, eben mindstens 45em, also so breit wie 45 M-Buchstaben und auch mindestens 728 Pixel breit sein muss, damit die Werbung reinpasst.

Und das ist eine feine Sache, die mir sehr gut gefällt (auch wenn mir daran nicht alles gefällt), weil man viel viel weniger Tricks braucht und Werte auch nicht konsistent an verschiedenen Stellen angeben muss, sondern alles nur einmal hinschreibt, und das dann auch schön passt und sowohl auf Bildschirmen, als auch auf Handys passend angezeigt wird (wenn man denn erst mal alles richtig gesetzt hat).

Und besonders schön: Das funktioniert komplett ohne Javascript und ohne irgendwelche Frameworks.

Und was mir noch besser gefällt: Endlich mal keine schrägen Tricks, wie man sie über Jahre brauchte, damit die Seite auch auf fünf verschiedenen Browsern funktionierte und man extra Webseiten-Designer brauchte, die die Macken aller Browser kannten und wie man sie umgeht, sondern eine halbwegs einheitliche Darstellung, in der man (fast) ohne Browser-Sperenzchen auskommt. Es funktioniert (nahezu) so, dass man einfach nur in normalem HTML und normalen CSS hinschreibt, was man haben will, und das endlich auch so bekommt. Was wohl auch damit zu tun hat, dass Microsoft seinen Internet Explorer endlich begraben hat.

Ich hatte das vor ein paar Jahren schon mal probiert, aber da haben das zuviele Browser noch nicht unterstützt. Jetzt funktioniert es bei fast allen. Schöne Sache, das.

Wie gesagt, es wird noch einige Basteleien, Korrekturen und vor allem noch ein paar Neuigkeiten geben. Es sieht zwar noch nicht so aus, dass es mir gefällt, aber es ist strukturell und hierarchisch jetzt wenigstens so, dass es mir gefällt und vor allem: Wieder wartbar ist.

Jetzt muss ich mir überlegen, wie ich das alles noch verbessern, modernisieren, optisch bekömmlicher machen kann.