Referenz - Seiten für den schnellen Überblick

[Matthias Scharwies]

Servus!

@Rolf B hatte mir vor einiger Zeit geschrieben, dass er die HTML-Element-Referenz um ein Feld "Zusatztext" erweitert hat. Trotzdem möchte ich erst einmal die CSS-Referenz vorstellen und dann diskutieren:

CSS/Eigenschaften/border

• die erste Zeile {{CSS-Referenz-Eigenschaft| …}} ruft eine Vorlage mit vielen Parametern auf. Die ist geschützt, da sie mehr als 250mal aufgerufen wird. Änderungen müssen vorher im Team besprochen werden.
• eine kurze Einführung erklärt, was die Eigenschaft macht.
• dann folgt eine Tabelle mit …
  • den möglichen Werten
  • einer Zeile für die Vererbung steuernden Werte
  • einer Zeile mit dem Defaultwert
• auf welche Elemente die Eigenschaft anwendbar ist
• ob sie vererbbar ist
• ob sie animierbar ist
• einer möglichen Angabe von caniuse

1. Sollte man die Tabelle evtl. in eine dl umwandeln?
   • wie sollte man mehrere Zeilen dd einbauen - wohl eher nicht mit <br>, oder?

2. Der Satz mit den Vererbung steuernden Werten sollte nur dort stehen, wo ge- und vererbt werden kann, oder?

3. Wie kann man den Default-Wert stärker hervorheben? (Früher war es eine eigene Spalte; jetzt geht er imho unter.)

Konsens ist wohl, dass dieser Bereich frei von Problemen mit Browser-Unterstützung, etc bleibt.

Danach folgt:

Dort haben wir die Tabellen schon entfernt.

Das Beispiel soll sehr kurz sein. In der Erklärung kann man schon mögliche Probleme beim Einsatz aufwerfen.

Für Hinweise gibt es die 2 Parameter Hinweis =und Tipp = . Hier sollte eigentlich ein Satz stehen. Bei einer Liste in Mediawiki-Syntax * wird das erste li nicht gerendert, sondern als * dargestellt. Das habe ich hier mit einem vorangestelllten <br>gelöst.

Wichtig: kurze Best practice-Tipps und Warnungen sind ok, optimalerweise verlinken wir auf ein Tutorial mit Live-Beispielen!

Evtl. sollte man das Siehe_auch, das auf eins oder mehrere Tutorials verlinkt vor die Weblinks stellen.

Ich habe mal einen Versuch mit dl erstellt: CSS/Eigenschaften/border-versuch. Ich persönlich würde zuerst das Wiki-Makeover abschließen, stelle das Projekt so aber schon mal vor.

HTML-Referenz

Hier ein Beispiel für die HTML-Referenz: HTML/Elemente/option

Ich weiß nicht, warum die Tabelle nach unten bis hinter die Weblinks gerutscht ist. Evtl lag es an der Länge des ganzen Tabellenblocks, der dann das Beispiel ganz nach unten verschoben hätte.

Hier würde ich auch versuchen wollen, die obere Tabelle durch dl zu ersetzen.

Bei der Syntax würde ich nur Start- und End-Tag darstellen, bei optional einen Link auf das entsprechende Tutorial. Die beiden Code-Beispiele würde ich weglassen, bei body gab's schon mal einen der behauptete, dass wir so den Einsatz mehrerer body-Elemente propagieren würden.

Die zweite Tabelle table.attribute-reference hatte bis eben nur eine Breite von 60%; habe ich gerade auf 100% geändert. Evtl. sollte man hier wie bei den Universalattributen einen Verbergen-Modus einbauen.

tl;dr

Was haltet ihr davon, das irgendwann so umzusetzen?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Table-Layout in der Referenz ist sicher kein Vorzeigeobjekt 😉

Das Problem mit dem ersten Listenpunkt würde ich zurückhaltend adressieren. <br> ist keine wirkliche Lösung in der dl Implementierung, weil das Wiki das <br> Element in eine eigene Definitionsliste packt und daraus dies rendert - Einrückung von mir:

<div>
  <dl>
    <dt> Erlaube Werte</dt>
    <dd> <br></dd>
  </dl>
  <ul>
    <li> 1 - 3 Angaben zu Rahmendicke, -stil und -farbe</li>
  </ul>
  <dl>
    <dd> </dd>
    <dt> Defaultwert</dt>
    <dd> </dd>
    <dd> siehe Einzeleigenschaften</dd>
    <dt> anwendbar auf</dt>
    <dd> alle Elemente </dd>
  </dl>
  ...

• Die Liste wird nicht in die dl hineingesetzt
• Vor Defaultwert steht ein überflüssiges <dd></dd>. Das liegt daran, dass Du den Doppelpunkt für das dd in der Vorlage stehen hast und innerhalb dessen abfragst, ob vererbt wird. Zum einen meine ich, dass die Abfrage nicht dahin gehört, aber wenn man sowas bauen muss, dann muss der : wohl in den if hinein. Aber da bin ich auch nicht hinreichend firm mit Vorlagen und im Wiki an deiner Vorlage rumprobieren will ich jetzt auch nicht.

Ich hatte das Problem früher schonmal; ich meine, die Mischung von Definitions- und anderen Listen in der 1.27 Version von Mediawiki ist toxisch. Wenn man Listen schachtelt, müssen die Listenmarker ohne Space beieinander stehen. Also eigentlich so:

;Teekessel
:* Ein Kochgerät
:* Ein Rätsel

Aber dann rendert das Mediawiki 1.27 kein dl und alles ist fett, weil es Teil des dt Elements ist. Neuere Mediawiki-Versionen machen das richtig, z.B. die Wikipedia. D.h. solange wir das alte Wiki haben, sollten wir mit der dl-Umstellung warten.

Für die Autoren von solchen Seiten heißt das dann aber auch: Der erste Listenpunkt muss als * notiert werden und die Folgepunkte als :* - und DAS wäre total blöd weil dann nämlich die Vorlagenimplementierung in den Artikeltext hineinsickert. Gibt's Schleifen in Vorlagen?

2. Der Satz mit den Vererbung steuernden Werten sollte nur dort stehen, wo ge- und vererbt werden kann, oder?

Oder. Diese Werte sind überall zulässig und können für nicht vererbte Attribute auch die Vererbung einschalten.

3. Wie kann man den Default-Wert stärker hervorheben? (Früher war es eine eigene Spalte; jetzt geht er imho unter.)

Dann mach doch halt eine eigene Zeile draus. So wie es jetzt im border-versuch ist.

Ich weiß nicht, warum die Tabelle nach unten bis hinter die Weblinks gerutscht ist.

Du meinst die Table mit Syntax etc, und die Attribute? Die Vorlage gibt das so aus. Seit es sie gibt.

Rolf

[Matthias Scharwies]

Guten Morgen!

neuer Versuch:

• CSS/Eigenschaften/border-versuch

Das sieht imho ganz gut aus!

Problem: Wenn man mehrere erlaubte Werte hat (siehe: caption-side), muss man da irgendwie mehrere Parameter für erlaubte Werte = eingeben können.

Mediawiki beendet die dl und fängt einen neue ul an, die dann links im Grid positioniert ist. Bug wurde wohl in Version 1.35 gefixt.

Möglichkeit, die ul und li manuell einzugeben, siehe …

HTML

• HTML/Elemente/option (im Test-Wiki)
• HTML/Elemente/address (im Test-Wiki)

Wie ihr seht, muss man über jede einzelne Seite doch noch mal drüber, da es bei WAI-ARIA immer eine Liste mit nur einem li gab, kann imho weg.

Bei option habe ich bei den Elternelementen die ul und li manuell eingefügt.

@Der Martin @Rolf B @JürgenB Evtl. können wir das heute Abend mal kurz besprechen. Die CSS-Festlegungen müssen im Makeover ja eh angefasst werden.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Morgen!

Ich habe die neue Vorlage heute morgen „eingebaut“!

Der Sinn der Vorlagen ist ja, dass man nur sie - und nicht etwa die Inhalte - verändert.

Die dl wird durch einen Bug in Mediawiki 1.27 bei einer ul in der Vorlage unterbrochen, was nicht optimal aussieht, aber imho zu verschmerzen ist:

• CSS/Eigenschaften/align-content

Ich hoffe auf einen zeitnahen Bugfix durch die Versionshebung im Wiki-Makeover.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

das Wiki macht es einem echt nicht leicht.

Bei der Nutzung Anwenden einer Vorlage wird jeglicher Whitespace zwischen dem = und dem Wert eines Parameters vom Wiki-Parser entfernt. Sowohl Whitespace, der in der Vorlage ist, wie auch Whitespace, der im Artikeltext ist.

Das heißt: selbst wenn man versucht, durch manuelle Codierung der Rahmen-DL in der Vorlage (was nicht im Artikelraum ist und damit akzeptabel wäre) den Wikimedia 1.27 Bug auszugleichen, entsteht nach Anwendung der Vorlage ein

<dd>* Erster Listenpunkt
* Zweiter Listenpunkt</dd>

Der erste Stern steht nicht am Zeilenanfang und damit wird er nicht als Listenmarker verwendet. Man kann im Artikeltext ein &nbsp; einfügen. Als HTML Symbol oder per Alt+0160 (Windows). Aber dann hat man eine Leerzeile vor der Liste, die man auch nicht will.

Argh. Mediawiki 1.35, herbei!!! 😉

Rolf