Warum greift die CSS-Eigenschaft nicht?

[Rolf B]

Hallo alle,

es geht mir um die Cards im Wiki. Deren Text ist zunächst ununterstrichen, aber tabbt man drauf oder hält die Maus drüber, wird der Titel unterstrichen.

Wir haben einen Sonderfall, wo ein Teil des Titels nicht unterstrichen werden soll.

Ich habe ein Onlinebeispiel bei jsFiddle, siehe problematische Seite.

Der für die Fragestellung relevante Teil ist:

<div class="card">
  <div class="title">Titel der Karte
    <span class="notabene">(ohne Unterstreichung)</span></div>
  <p class="inhalt">Inhalt der Karte</p>
  <a href="#foo">Link in der Karte</a>
</div>

Styles:

.card:has(a:hover) .title, .card:focus-within .title {
  text-decoration-line: underline;
}

.card .title .notabene {
  display: block;
  font-size: 70%;
  text-decoration-line: none !important;
}

Hovere ich über dem Link (oder tabbe hinein), wird aller Text in der Card unterstrichen. Auch der notabene-Span. Trotz expliziter und wichtiger Angabe, dass das nicht passieren soll. Das !important war ein Versuch, eigentlich sollte schon die Spezifität ausreichen.

Wieso lässt sich die Unterstreichung nicht aufheben? Fiddle mit Live-Beispiel unter problematischer Seite.

Zu beachten ist, dass wir im Wiki mit dem HTML nicht frei sind. Links müssen durch [ziel titel] markiert werden und der Titel darf nur Text sein, kein Markup.

Rolf

[JürgenB]

Hallo Rolf,

für mich sieht das so aus, als ob nicht der Text im Span sondern das Span-Element unterstrichen wird. Färb den Text im Span mal z.B. rot. Der Unterstrich beim Hover bleibt schwarz.

Gruß
Jürgen

[Gunnar Bittersmann]

@@Rolf B

Hovere ich über dem Link (oder tabbe hinein), wird aller Text in der Card unterstrichen. Auch der notabene-Span. Trotz expliziter und wichtiger Angabe, dass das nicht passieren soll.

Hach, ich wusste doch, dass wir das hier im Forum schon mal hatten. War wohl vor deiner Zeit. Und dann fiel mir auch der Suchbegriff wieder ein: Schuhkarton!

I kid you not. Schuhkarton!

---

Du möchtest die Unterstreichungsfarbe des nicht unterstrichenen (besser gesagt: nicht unterstrichen aussehenden) Bereichs auf die Hintergrundfarbe setzen? Vergiss dabei nicht den Darkmode!

Eher möchtest du den zu unterstreichenden Bereich in ein span packen und nur darauf text-decoration anwenden.

Oder du möchtest gar auf den zweifelhaften Effekt ganz verzichten. Wozu soll der gut sein?

Jolan tru

[Matthias Scharwies]

Guten Morgen,

Oder du möchtest gar auf den zweifelhaften Effekt ganz verzichten. Wozu soll der gut sein?

Die Cards bestehen ja aus mehreren Elementen mit einem Link. Da entsteht das Problem, das ein Link in Mediawiki nur spans enthalten kann.

Das ist so gelöst, dass sich der (nachgelagerte) Link über die gesamte Gridzelle erstreckt; der Linktext aber in .class-titel steckt und wie ein Link aussehen soll.

Ich hatte den Text „Artikel der Woche“ in diesem span - da waren wir am Mittwoch ratlos - jetzt aber nach vorne ausgelagert:

Vergiss dabei nicht den Darkmode!

Das SVG sieht im Dark Mode noch nicht gut aus - den hat aber nur das Makeover-Skin - am Tag X werde ich die in einem Rutsch aktualisieren.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Oder du möchtest gar auf den zweifelhaften Effekt ganz verzichten. Wozu soll der gut sein?

Die Cards bestehen ja aus mehreren Elementen mit einem Link. Da entsteht das Problem, das ein Link in Mediawiki nur spans enthalten kann.

Ich glaube, deine Antwort geht völlig an meiner Frage vorbei.

Das ist so gelöst, dass sich der (nachgelagerte) Link über die gesamte Gridzelle erstreckt; der Linktext aber in .class-titel steckt und wie ein Link aussehen soll.

Was heißt „wie ein Link aussehen“? Cards sehen wie Links aus; das ist deren Zweck: andere Inhalte anteasern und darauf verlinken. Da braucht es keine Unterstreichung; die ist eher störend.

Und die Link-Titel haben ja auch initial keine Unterstreichung, die kommt erst beim Hovern – dann, wenn man sie nicht braucht, weil man die Card längst als Link erkannt hat.

Wenn Hover-Effekt bei Cards (Warum eigentlich? IMHO sind Hover-Effekte überbewertet.), dann einen für die ganze Card: Rahmen oder Änderung der Hintergrundfarbe. Unterstreichung kann weg.

Jolan tru

[Rolf B]

Hallo Gunnar,

Und die Link-Titel haben ja auch initial keine Unterstreichung, die kommt erst beim Hovern – dann, wenn man sie nicht braucht, weil man die Card längst als Link erkannt hat.

An der Stelle habe ich noch ein "to-discuss" offen: Man kann in Mediawiki einstellen, ob man Links unterstrichen haben möchte oder nicht (Einstellungen/Aussehen). Mediawiki bietet an: "Nie", "Immer" oder "Verwende Browser/OS-Default".

Im Moment ist es im Makeover-Skin so, dass ich für normale Artikel-Links diese Einstellung beachte. Was einfach ist, man muss einfach die Finger von der Linkdekoration lassen und Mediawiki machen lassen. Bei den Cards ist es schwieriger, glaube ich. Vielleicht ist aber auch die Vorgehensweise falsch, ich müsste vermutlich den Titeltext in den Link hineinnehmen statt ihn separat zu haben, und auch auf Cards die Linkdekoration nicht anfassen. Dann verhalten sich die Cards genau wie normale Links, und das fände ich erstrebenswert. Ein zusätzlicher Leuchtrahmen um die Card herum schadet nicht, finde ich.

Wie man Teile des Card-Titels vom Unterstreichen ausnimmt, haben wir ja mittlerweile gelernt.

Rolf

[Gunnar Bittersmann]

@@Rolf B

An der Stelle habe ich noch ein "to-discuss" offen: Man kann in Mediawiki einstellen, ob man Links unterstrichen haben möchte oder nicht (Einstellungen/Aussehen). Mediawiki bietet an: "Nie", "Immer" oder "Verwende Browser/OS-Default".

Ohne Kontext ist die Einstellung Mumpitz. Von was für Links reden wir hier?

Links im Fließtext: sollten immer unterstrichen sein. Dunkelblaue Schrift ist für etliche Nutzer nur schwer von schwarzer zu unterscheiden. Farbe sollte nicht das einzige Unterscheidungsmerkmal sein.

Anders sieht es aus bei Links, die durch ihre exponierte Stellung bereits als Links erkennbar sind, wie Links im Navigationsmenü. Bei solchen ist eine Unterstreichung nicht nur überflüssig, sondern oft sogar störend.

Wenn Mediawiki die Optionen nur für alle Links gleichermaßen anbietet, dann ist das völliger Quatsch. Und wenn die Optionen für Links im Fließtest und Links im Menü getrennt angeboten werden, dann ist das auch Quatsch, weil für erstere die einzig sinnvolle Option „immer“ ist, für zweitere „nie“.

Jolan tru

[Rolf B]

Hallo Gunnar,

Wenn Mediawiki die Optionen nur für alle Links gleichermaßen anbietet, dann ist das völliger Quatsch.

Wieso prügelst du sinnlos auf unser Wiki ein, statt einfach mal drauf zu schauen? Dann wüsstest du deine Antwort.

Darüber hinaus schrub ich es auch:

Im Moment ist es im Makeover-Skin so, dass ich für normale Artikel-Links diese Einstellung beachte.

Zumindest denke ich im Moment, dass es so ist. In der Navigation gilt generell text-decoration:none.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wieso prügelst du sinnlos auf unser Wiki ein, statt einfach mal drauf zu schauen?

Willst du hier Pluspunkte von Leuten haschen, die nicht genau lesen, was ich eigentlich geschrieben habe?

Ich habe nicht auf das SELFHTML-Wiki eingeprügelt. Wenn, dann auf Mediawiki. Aber auch darauf nicht. Ich schrieb einen Kondidionalsatz. Wenn die Bedingung „Wenn Mediawiki die Optionen nur für alle Links gleichermaßen anbietet“ nicht zutrifft, ist das Nachfolgende nichtig.

Und ob meine Bemerkungen, wie Links aussehen sollten (d.h. was CMSe/Themes anbieten sollten), nun so sinnlos waren oder nicht, liegt im Auge des Betrachters. Lies: überlass die Bewertung mal anderen.

Jolan tru

[Rolf B]

Hallo Gunnar,

ich brauche keine Pluspunkte, ich habe mehr als zuviele davon.

Du als Vereinsmitglied und langjähriger Mitarbeiter solltest mit dem Wiki so weit vertraut sein, dass Du an dieser Stelle keines Konditionalsatzes bedarfst. Dir sollte exakt bekannt sein, ob dein "Wenn" zutrifft oder nicht. Es trifft nicht zu. Bei Artikellinks wird unterstrichen, bei Navigationslinks wird nur unterstrichen wenn der Link gehovert/fokussiert wird.

Und wenn Du daraus dann einen Konditionalsatz machst, der die Möglichkeit des Zutreffens andeutet, dann machst Du das Wiki vorsätzlich bei denen schlecht, die diese Kondition nicht genau kennen. Aber nein, du hast ja nur einen Konditionalsatz geschrieben, zwinker zwinker ZWINKER…

Dass es die Mediawiki-Option zum Unterstreichen von Links gibt, ist nun mal Fakt. Die kann ich nicht herauslöschen. Ich kann sie natürlich ignorieren. Aber es muss ja einen Grund geben, warum Mediawiki die anbietet – offenbar wurde sie mal von Anwendern gewünscht (vermutlich die, die Links farblich gut erkennen können).

Falls Du mit der UX des Wikis unzufrieden bist, vor allem im entstehenden Makeover-Skin, wären konstruktive Verbesserungsvorschläge sehr gerne gesehen.

Rolf

[Gunnar Bittersmann]

@@Rolf B

ich brauche keine Pluspunkte, ich habe mehr als zuviele davon.

Da haben wir was gemeinsam.

Du als Vereinsmitglied und langjähriger Mitarbeiter solltest mit dem Wiki so weit vertraut sein, dass Du an dieser Stelle keines Konditionalsatzes bedarfst. Dir sollte exakt bekannt sein, ob dein "Wenn" zutrifft oder nicht.

Nein. Wiki-Admin zu werden steht auf meiner Wunschliste ganz weit unten.

Es trifft nicht zu. Bei Artikellinks wird unterstrichen, bei Navigationslinks wird nur unterstrichen wenn der Link gehovert/fokussiert wird.

Ach was. Die Frage ist, ob das von Mediawiki so kommt oder durch das SELFHTML-Stylesheet.

Dass es die Mediawiki-Option zum Unterstreichen von Links gibt, ist nun mal Fakt. Die kann ich nicht herauslöschen. Ich kann sie natürlich ignorieren. Aber es muss ja einen Grund geben, warum Mediawiki die anbietet

Könnte ja sein, dass Mediawiki von Entwicklern entwickelt wurde, die kein Gespür für Design haben; ja nicht einmal ein Gespür dafür, dass es ratsam wäre, jemanden mit Gespür für Design mit ins Boot zu holen. Die grottig schlechte Typografie, die in der deutschsprachigen Wikipedia immer noch vorherrscht, ist ein Indiz dafür. („Folterkammer mit 8 Metern Satzbreite“ — Frank Rausch)

offenbar wurde sie mal von Anwendern gewünscht (vermutlich die, die Links farblich gut erkennen können).

Und vermutlich die, die auch kein Gespür für Design haben und kein Gespür dafür … (Ich wiederhole mich.)

Jolan tru

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Oder du möchtest gar auf den zweifelhaften Effekt ganz verzichten. Wozu soll der gut sein?

Die Cards bestehen ja aus mehreren Elementen mit einem Link. Da entsteht das Problem, das ein Link in Mediawiki nur spans enthalten kann.

Ich glaube, deine Antwort geht völlig an meiner Frage vorbei.

...

Wenn Hover-Effekt bei Cards (Warum eigentlich? IMHO sind Hover-Effekte überbewertet.), dann einen für die ganze Card: Rahmen oder Änderung der Hintergrundfarbe. Unterstreichung kann weg.

Das mit den Cards - auch die gekenzeichneten Seitenenamen mit .titel-card - haben wir so entwickelt und auf der MV 2024 vorgestellt. Damals hattest du keine Einwände geäußert.

Der ganze Thread wirkt auf mich wie der von Christian Kruse mehrfach angesprochene constant stream of negative thoughts.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Das mit den Cards - auch die gekenzeichneten Seitenenamen mit .titel-card - haben wir so entwickelt und auf der MV 2024 vorgestellt. Damals hattest du keine Einwände geäußert.

Und man darf am Wiki nichts mehr ändern, was man vor Jahren übersehen hat‽ 🤡

Gilt das nur für UX/Design oder auch für Inhalte?

Der ganze Thread wirkt auf mich wie der von Christian Kruse mehrfach angesprochene constant stream of negative thoughts.

Könnte das daran liegen, dass du alles zum Wiki Gesagte persönlich nimmst?

Jolan tru

[Rolf B]

Hallo Gunnar,

Oooookeeeh... nach diesem Hinweis habe ich noch mal die Spec gelesen. MDN formuliert das ziemlich knapp so:

Text decorations are drawn across descendant text elements. This means that if an element specifies a text decoration, then a child element can't remove the decoration.

Aber das sind nur 90% der Wahrheit. Die strahlende Ausnahme heißt „atomic inlines“. Das sind inline-Elemente, die einen neuen Formatierungkontext erzeugen. Beispielweise <span style="display:inline-block"></span>. Auf die wird die Unterstreichung nicht propagiert. „Nur“ ein Block-Element reicht nicht, auch nicht mit den diversen Klimmzügen zum erstellen eines Block Formatting Context (contain:content oder overflow:hidden oder display:flow-root).

Die generische Lochstanze für den Schuhkarton sähe also so aus:

{{Card|

titel=<span class="nolink">Artikel der Woche</span><br>
Wie man Löcher in Schuhkartons stanzt|
...
}}

mit dieser Regel im Skin (Selfhtml + Makeover):

.card .card-title .nolink {
  display: inline-block;
  color: var(--text-color);
}

Der <br> ist unvermeidlich, weil ich ja ein inline-Element brauche. Auf ein Zusatzdiv um den span herum habe ich keine Lust…

Ich habe das in Matthias' cardifiziertem Experiment mal eingebaut.

• Ansicht im Selfhtml-Skin
• Ansicht im Makeover-Skin

Seiteneffekt ist: inline-block Elemente brechen erstmal als Ganzes um und nur wenn der Platz nicht reicht, wird innerhalb des inline-block Elements umgebrochen. Für den hier gesuchten Zweck ist das aber gerade erwünscht.

Rolf

[Hans]

Ich weiß ja nicht, aber ...

.card:has(a:hover) .title, .card:focus-within .title {
  text-decoration-line: underline;
}

.card .title .notabene {
  display: block;
  font-size: 70%;
  text-decoration-line: none !important;
}

da würde mir ein Hinweis fehlen auf .notabene.a:hover mit text-decoration-line:none

vielleicht hilft das?

[Rolf B]

Hallo Hans,

nein, die Regel wird schon angewendet. Aber es ergibt sich eben diese "Schuhkarton"-Eigenschaft, die Gunnar beschrieb. Der Notabene-Span wird korrekt nicht unterstrichen, aber die Unterstreichung des Elternelements "scheint durch", weil der span ein normales Inline-Element ist. Es braucht schon die Atomstanze („atomic inline“), damit das nicht passiert.

Ich habe mal spaßeshalber ein p gemacht mit einer 8px dicken, roten Unterstreichung und darin ein span mit einer 5px dicken, blauen Unterstreichung. Da sieht man diese Überlagerung.

Okay, kleiner Cheat: ich musste text-underline-position setzen, damit die Unterstreichungen auf einer Höhe waren. Normalerweise sind dickere Unterstreichungen weiter weg als dünne.

<p>Ein Ring, sie zu <span>knechten</span>, sie alle zu finden</p>

p {
  text-decoration: 8px #f88 underline;
  text-underline-offset: 3px;
}
p span {
  text-decoration: 5px blue underline;
}

Jedenfalls: wenn ich für den Span ein text-decoration:none angebe, dann ist einfach nichts da, was die durchscheinende Unterstreichung überlagert, und man sieht sie. Das ist in CSS so gewollt, und ich hatte keine Ahnung davon. Gezeichnet: Euer Wiki-Mitautor 😢

Rolf

[Michael_K]

Hallo Rolf,

<div class="card">
  <div class="title">Titel der Karte
    <span class="notabene">(ohne Unterstreichung)</span></div>
  <p class="inhalt">Inhalt der Karte</p>
  <a href="#foo">Link in der Karte</a>
</div>

Die Ursache hierfür liegt in der Zeile:

  <a href="#foo">Link in der Karte</a>

Und der damit verbundenen absolute Positionierung via:

card > a {
  position: absolute;
  display: block;
  font-size: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

`

Gruss Michael