Warum greift die CSS-Eigenschaft nicht?
bearbeitet von
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):
~~~css
.card .card-title .nolink {
display: inline-block;
color: var(--text-color);
}
~~~
Der <br> ist unvermeidlich, weil ich ja ein inline-Element brauche.
Ich habe das in Matthias' cardifiziertem Experiment mal eingebaut.
* [Ansicht im Selfhtml-Skin](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/SELFHTML?useskin=Selfhtml)
* [Ansicht im Makeover-Skin](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/SELFHTML?useskin=Makeover)
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_
--
sumpsi - posui - obstruxi
Warum greift die CSS-Eigenschaft nicht?
bearbeitet von
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):
~~~css
.card .card-title .nolink {
display: inline-block;
color: var(--text-color);
}
~~~
Der <br> ist unvermeidlich, weil ich ja ein inline-Element brauche.
Ich habe das auf [Matthias' cardifiziertem Experiment](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/SELFHTML) mal eingebaut. Ich denke, ich mache dafür noch eine Klasse in den Skin, so dass man `<span class="nolink">...</span>` schreiben kann. Oder ich kapsele das als Vorlage {{Card-Noline|...}}. In einer Vorlage KÖNNTE ich auch noch ein <div></div> um den Span legen und damit das <br> unnötig machen, aber eigentlich will ich den Break nicht forcieren.
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_
--
sumpsi - posui - obstruxi
Warum greift die CSS-Eigenschaft nicht?
bearbeitet von
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 Lochstanze für den Schuhkarton sähe also so aus:
~~~
{{Card|
titel=<span style="display:inline-block;color:var(--text-color)">
Artikel der Woche</span>
<br>Wie man Löcher in Schuhkartons stanzt|
...
}}
~~~
Ich habe das auf [Matthias' cardifiziertem Experiment](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/SELFHTML) mal eingebaut. Ich denke, ich mache dafür noch eine Klasse in den Skin, so dass man `<span class="nolink">...</span>` schreiben kann. Oder ich kapsele das als Vorlage {{Card-Noline|...}}.
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_
--
sumpsi - posui - obstruxi
Warum greift die CSS-Eigenschaft nicht?
bearbeitet von
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 Lochstanze für den Schuhkarton sähe also so aus:
~~~
{{Card|
titel=<span style="display:inline-block">Artikel der Woche</span>
<br>Wiem man Löcher in Schuhkartons stanzt|
...
}}
~~~
Ich habe das auf [Matthias' cardifiziertem Experiment](https://wiki.selfhtml.org/wiki/Benutzer:MScharwies/SELFHTML) mal eingebaut. Vermutlich mache ich dafür noch eine Klasse in den Skin, so dass man `<span class="noline">...</span>` schreiben kann. Oder ich mache eine Vorlage für {{Noline|...}}
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_
--
sumpsi - posui - obstruxi