SELF-Wiki: Selektoren in CSS

[Ryuno-Ki]

Moin Matthias,

Servus!

@Felix Riesterer und @Ryuno-Ki vielen Dank für Eure Änderungen!

Da war doch einiges dabei! Ich hatte ja mal ne Rechtschreib-KI verwendet, bin nach 3 Tutorials an deren Monatslimit gestoßen und hätte abonnieren sollen. Markdow-Formatierung (** …**) als falsch für Mediawiki zu erkennen ('''…'''), hätte sie aber auch nicht vermocht.

Ich verwende LanguageTool auf meiner Maschine mit fasttext (letzteres wurde wohl 2024 eingestellt). Kann nicht mit dem Markup um, aber wenn das gerenderte HTML markiert und per Add-on analysiert wird, kommt sogar etwas Brauchbares bei raus. (Nicht vergessen, dem Add-on in den Einstellungen auf den eigenen Language-Tool zu verweisen!) Weil es in Java geschrieben wurde, ist es gewohnt ressourcenhungrig.

Mir ging es bei der Frage darum, wie man die einzelnen Kapitel visualisieren kann:

• gemeinsame Farbe rebeccapurpleund entweder weiß wie im Logo oder gold, was unserem gold-steelBlue der Beispiele nahekommt.

Persönlich würde ich das Ergebnis in https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Artikel dokumentiert sehen wollen. Styleguide ist aber auch wieder ein Thema für sich.

• Gibt es Icons für Selektoren? - habe keine gefunden.
  Sind die Codesnippets aussagekräftig?

Hab mir jetzt nur den jeweils ersten Reiter (mit CSS) angeschaut. Weil ich da zu sehr als Web-Entwickler drauf schauen würde, mag ich lieber Hobbyisten die Frage beantworten lassen.

(Im Gegensatz zur Kachel für Ausgrauen - aber da muss ein anderer Wert als #ccc stehen. Die Kachel ist nicht Teil des Bildschirmphotos, daher hier einmal ausgeklammert.)

Ja, bitte eins nach dem anderen!

Fliegt da eine offene Liste wie bei den ToDos rum? Klingt für mich nach etwas, dass zum Betrieb / Customising des Wikis gehört. Damit nicht für jeden Menschen anzupassen.

Ideen für bessere Icons?

Das dürfte ein eigenes Fass sein. Die Vielfalt an Styling ist bereits jetzt groß.

Magst einen eigenen Faden für Öffnen?

Ja, bitte eins nach dem anderen.

Okay.

Klassen und Klassenselektoren sollten Sie daher nur dann einsetzen, wenn keine andere Zuordnungsmöglichkeit besteht.

Der Hinweis-Block ist nicht ganz korrekt.

Evtl. eine Formulierung wie "so wenig wie möglich, so viele wie nötig"?

„Kommt drauf an”. Was sind die Ziele? Klassen zum Styling zu verwenden ist „einfach” zu vermitteln. Führt dann nur zu div-Suppe und dergleichen. Beim Styling mit Attributen muss sich der*die Autorin ja mit den möglichen Werten auseinandersetzen. Sinnvoll, aber höhere Lernschwelle.

Im Endeffekt haben sich Muster wie BEM daraus entwickelt.

Hinsichtlich der Anwendung würde ich ja auf TailwindCSS verweisen (Beispiel mit der Checkbox).

Magst du das machen? Bitte!

Wenn du soweit „fertig” bist. Vielleicht magst du ja erst noch einige Runden drehen. Ich rante gerne über TailwindCSS. Gibt auch Fanatiker auf der anderen Seite. Wie so vieles im Web: es polarisiert.

In den Beispielen würde ich darauf achten, sich nicht auf die Farbe zu verlassen, um Menschen mit Farbfehlsichtigkeit nicht auszuschließen.

Wo gibt es da Probleme?

Vor allem bei Männern kann es schwer werden, Farben auseinander zu halten:

Unter Farbenfehlsichtigkeit (Dyschromatopsie, Dyschromasie) versteht man eine erbliche Anomalie der Netzhaut, von der etwa acht bis neun Prozent der Männer, aber nur etwa ein Prozent der Frauen betroffen sind. Die Betroffenen haben eine Anomalie an mindestens einem der drei farbevermittelnden Rezeptoren der Zapfenzellen der Netzhaut des Auges.

https://de.wikipedia.org/wiki/Farbenfehlsichtigkeit

Deswegen heißt es in der WCAG SC 1.4.1 auch:

Color is not the only way of distinguishing information.

Fettdruck ist da etwa eine bessere Option.

Das Tutorial soll ja nur zeigen, wie's geht. Und da wäre mir noch mehr ::after lieber als alle mal kurz vorzustellen.

Hier siehst du, was SELFHTML an Referenzseiten hat.

Würde ich mit Pull-Quotes kombinieren. Da wird ja gerne ein typographisches Anführungszeichen genutzt.

MDN kennt noch ein paar weitere 😇

Das ist meine große Frage, die ich nicht ansprechen wollte: Schafft es SELFHTML mit 2 Aktiven - für alle

• CSS-Eigenschaften,
• CSS-Selektoren
• JS-Methoden

nicht nur Seiten, sondern auch Beispiele mit Anwendungsfällen zu erstellen?

Bei MDN sind es auch überschaubar viele. Einiges lässt sich sicherlich automatisieren (da spricht wieder der Techie in mir). Aber ob das die Infrastruktur des Vereins mitmacht, kann ich nicht beurteilen. Wikimedia hat ja auch eine Flotte von Bots im Einsatz, soweit ich weiß.

Zumindest könnte auf die MDN / CSS-Spec verwiesen werden mit dem Hinweis, dass da noch mehr gibt.

:future (passt zu :current und :past) hatte ich in die Übersicht mit aufgenommen, angesichts der Browser-Unterstützung und weil mir kein Beispiel einfallen will, werde ich es vorerst ausklammern.

::checkmark

::picker(select)

kommen nächste Woche.

*dreht Däumchen

Gruß,