WordPress missachtet W3C-Standards


Inhaltsverzeichnis

  1. Heute am Beispiel des Unterstrich von Hyperlinks, auch Selektor “a”
  2. Die Normung von HTML5 und CSS3 sind gro├če Erleichterungen
  3. WordPress und die Ehrlichkeit
  4. Noch Open Source Software oder doch nicht mehr zu empfehlen
  5. Beispiel der Deklarationen “outline” und “border”

Immer wieder werden von “WordPress” bew├Ąhrte Standards missachtet. Hier im Theme “Twenty Sixteen” von WordPress.org.


Heute am Beispiel des Unterstrich von Hyperlinks, auch Selektor “a”
Das CSS, Cascading Style Sheets, gibt dem Inhalt das Aussehen. Diese Trennung ist vom W3C, World Wide Web Consortium, auch genauso gewollt. Das CSS gibt es mittlerweile in der 3. Version und deckt f├╝r die meisten Webdesigner auch gef├╝hlte 99% der gew├╝nschten Funktionen ab.


Die Normung von HTML5 und CSS3 sind gro├če Erleichterungen
Wird ein Link gesetzt, so wird dieser sofort ohne weitere Layout-Einstellungen in der Farbe Blau und mit Unterstrich dargestellt. Au├čerdem bekommt der Mauszeiger die Form des Pointers zugewiesen. Das sind die 3 Standards die in jedem HTML-Dokument f├╝r Hyperlinks schon vordefiniert sind. Der Unterstrich wird dabei von der Deklaration “text-decoration” mit dem Wert “underline” dargestellt.
Dieser Standard soll gew├Ąhrleisten, das nachfolgende Arbeiten an der Webseite und seinem CSS, ohne weiteren Aufwand und von jedem anderem Bearbeiter fortgesetzt werden k├Ânnen. Denn das schlussendliche Werk, f├╝r das ein Webdesigner bezahlt wird, geh├Ârt dem Kunden.


WordPress und die Ehrlichkeit
Jetzt das Aber, aber warum versuchen Webdesigner diese Standards mit nicht konformen Winkelz├╝gen auszuhebeln? Das bleibt wohl deren Geheimnis. Das es getan wird, das ist zweifellos Tatsache. Doch das es bei den empfohlenen und von der eigenen Plattform verbreitete Themes von WordPress sind, das ist ├Ąrgerlich und widerspricht auch dem Gedanken von Open Source Software, n├Ąmlich der Nichtdiskriminierung, und dem wichtigstem Designprinzip, dem KISS-Prinzip.

In verschieden Themes, die von WordPress vertrieben werden, sind mir solche nicht standardkonformen Deklarationen von Elementen vorgekommen und sie ├Ąrgern mich so sehr das ich nun einen Beitrag zum WordPress Standart-Theme “Twenty Sixteen” schreibe. Denn hier wird der Unterstrich von Links erstellt mit “box-shadow: 0 1px 0 0 currentColor;”.

Versucht nun jemand diesen Unterstrich zu ├Ąndern oder zu entfernen wird er nicht f├╝ndig mit der Suche nach “text-decoration”. Bei einem anderem Theme von WordPress wird der Unterstrich mit “border-bottom” erstellt, das zu dem selbem ├ärger beim Webdesigner f├╝hrt.


Noch Open Source Software oder doch nicht mehr zu empfehlen
Jetzt stellt sich mir die Frage, sind diese Themes denn dann ├╝berhaupt noch Open Source Software und wenn nicht, dann sind diese auch nicht mehr zu empfehlen!

Beispiele
standardkonformer Hyperlink der W3C-Empfehlung
Hyperlink mit “border-bottom”
Hyperlink mit “box-shadow”
Es sind keine Unterschiede zu erkennen, genau das ist die fatale Situation, vor dem der Webdesigner steht. Zudem sind in dem Theme “Twenty Sixteen” 6(sechs) CSS-Dateien mit 53kB, das entspricht etwa 9000 W├Ârter, da ist die Suche nach der entsprechenden Deklarationen schon sehr schwer.


Beispiel der Deklarationen “outline” und “border”
Hier liegt kein Fehler vor, nur scheint “outline” doch sehr redundant zu sein. Die Deklaration “outline” ist ohne sie zu kennen nicht gleich von “border” zu unterscheiden. Der Unterschied liegt darin, “border” legt sich zuerst um den Inhalt und “outline” beinhaltet “border” und den Content. Aber einzeln gesetzt, ist “outline” nicht von “border” zu unterscheiden.

Hyperlink mit “border”
Hyperlink mit “outline”
Hyperlink mit blauer gepunkteter Linie f├╝r “outline” und roter Linie f├╝r “border”

Einzelne W├Ârter in allen Beitr├Ągen mit CSS ohne “class” und “span” formartieren

Oft besteht der Wunsch einzelne W├Ârter im Layout zu charakterisieren oder zu kennzeichnen. Bisher werden daf├╝r die Optionen mit “class”, “span”, “div” oder anderen Elementen genutzt.

Ich habe mir eine Methode erstellt wie dies auch ohne diese Element funktioniert, da zum Beispiel der Standard-Texteditor in WordPress solche Elemente nicht anzeigt.
einzelne-woerter-css3


Beispiele
1. Beispiel
Nutzen sie f├╝r folgende Eingaben das Terminal.

... Eingaben das <em><strong>Terminal</strong></em>.

2. Beispiel
Nutzen sie f├╝r Befehl f├╝r die System├╝bersicht inxi -Fxz.

... System├╝bersicht <code>inxi -Fxz</code>.

Das dazugeh├Ârige CSS:
em strong { color:#c00; }
code { color: #00c; }