Default Properies?

[heinetz]

Hallo Forum,

wenn ich früher Websites mit Tabellen gebaut habe, war das Design vollständig abhängig vom Markup. Heute versuche ich zuerst semantisch vernünftiges Markup zu schreiben und versuche dann ein vorgegebenes Layout mit CSS umzusetzen, ohne das Markup zu verändern.

Nun stehe ich vor folgender Aufgabe:

In einer recht komplexen Anwendung steckt weit verteilt dieses Konstrukt:

<button class="example_button"><a class="example_button_link" href="example.htm">Example</a></button>

Das führt nun zu Problemen resp. die fallen nun auf. Ich denke darüber nach, wie sich der Fehler mit relativ wenig Aufwand und wenig fehleranfällig beheben lässt. Ich habe die Möglichkeit, das Markup und das CSS zu ändern. Da das CSS sehr komplex ist, denke ich darüber nach, nur das Markup zu ändern:

<div class="example_button"><a class="example_button_link" href="example.htm">Example</a></div>

Das müsste doch theoretisch funktionieren wenn mein div.example_button sämtliche CSS-Eigenschaften des button.example_button erhält, oder? Nun habe ich für meinen button.example_button natürlich nur CSS-Eigenschaften definiert, die notwendig waren, um die default-Werte eines <button>s zu überschreiben und ein <div> hat sicher andere default-Werte, die überschrieben werden müssten. Aber so müsste es theoretisch gehen oder?

gruss, heinetz

[dedlfix]

Tach!

In einer recht komplexen Anwendung steckt weit verteilt dieses Konstrukt:

<button class="example_button"><a class="example_button_link" href="example.htm">Example</a></button>

Findest du, dass das ein sinnvolles Konstrukt ist? Ein interaktives Element steckt in einem interaktiven Element. Welches Element soll denn nun auf eine Interaktivität reagieren?

Anscheinend ist das hier der Link, der irgendwohin verlinken soll und nicht der Button, der eine Aktion auslösen soll. Ist der Button letztlich nur ein Hilfskonstrukt, um dem Link das Aussehen eines Buttons zu geben?

<div class="example_button"><a class="example_button_link" href="example.htm">Example</a></div>

Anscheinend.

Nun habe ich für meinen button.example_button natürlich nur CSS-Eigenschaften definiert, die notwendig waren, um die default-Werte eines <button>s zu überschreiben und ein <div> hat sicher andere default-Werte, die überschrieben werden müssten.

Also, wenn du dir die Frage stellst, welche Eigenschaften eines Elements überschrieben werden müssen, um sie wegzubekommen, dann wäre eher die Frage sinnvoll, warum man das tun möchte und ob es nicht ein besseres Element für den vorliegenden Anwendungsfall gibt.

Aber mal konkret gefragt: Für welches Problem meinst du, brauchst du ein Container-Element für den Link? Lässt sich der Link nicht bereits so gestalten, wie du ihn haben möchtest?

dedlfix.

[heinetz]

Hallo @dedlfix,

irgendwie schaffe ich es hier selten, mich zu erklären ;( Aber ich probier's gerne nochmal 😉

Findest du, dass das ein sinnvolles Konstrukt ist?

Nein, es ist definitiv falsch, nicht valide und führt, wie gesagt zu einem Fehler, der nun auffällt.

Ist der Button letztlich nur ein Hilfskonstrukt, um dem Link das Aussehen eines Buttons zu geben?

Ich gehe sogar soweit, dass der Begriff "Button" zu einer falschen Abstraktion geführt hat. Es handelt sich um einen Text, der in einer eckigen Box steckt. Die Box hat eine Hintergrundfarbe und vielleicht einen Rahmen. Daher spricht der Designer von einem Button. Wenn man auf den Text klickt, gelangt man zu einer anderen Seite. Deshalb hat das technisch nichts mit einem Button zu tun, sondern ist einfach ein Textlink.

<div class="example_button"><a class="example_button_link" href="example.htm">Example</a></div>

Anscheinend.

Nun habe ich für meinen button.example_button natürlich nur CSS-Eigenschaften definiert, die notwendig waren, um die default-Werte eines <button>s zu überschreiben und ein <div> hat sicher andere default-Werte, die überschrieben werden müssten.

Also, wenn du dir die Frage stellst, welche Eigenschaften eines Elements überschrieben werden müssen, um sie wegzubekommen, dann wäre eher die Frage sinnvoll, warum man das tun möchte und ob es nicht ein besseres Element für den vorliegenden Anwendungsfall gibt.

Was genau ist für diesen Fall ein besseres Element? Ich möchte ja nur dem <button> seinen semantischen Sinn nehmen und an dem Konstrukt nichts ändern aus dem <button>. habe mit einem <div> ein Element gewählt, das meinem Verständnis ein reines Gestaltungselement ist. Ein <span> wäre vielleicht eine Alternative. Weil die Default-Eigenschaften eines <span> eher denen eines Button entsprechen und weniger überschrieben werden muss?

Aber mal konkret gefragt: Für welches Problem meinst du, brauchst du ein Container-Element für den Link? Lässt sich der Link nicht bereits so gestalten, wie du ihn haben möchtest?

Doch, theoretisch schon. Allerdings besteht das Konstrukt aus einem Eltern- und einem Kindelement. Die beiden haben ein Verhältnis zueinander ... margin, padding usw. Ich möchte mit wenigen Anpassungen valides Markup daraus machen. Ob das sinnvoll ist? Ja, in diesem Kontext schon, weil es relativ wenig Aufwand bedeutet.

Aber zurück zu meiner grundsätzlichen Frage:

Kann man jedes Element oder HTML-Tag gleich aussehen lassen indem man lediglich CSS-Eigenschaften anpasst? Mit den Chrome-Dev-Tools lassen sich ja sämtliche CSS-Eigenschaften einschliesslich der Default-Werte anzeigen. So bin ich schon darauf gekommen, dass mein div.example_button sich äusserlich von dem button.example_button unterscheidet, weil der <button> per default ein inline-block- und ein <div> per default ein block-Element ist. Wenn meine Annahme stimmt, müsste ich sämtliche Eigenschaften vergleichen und könnte so erreichen, was ich will. Sicher würde ich auch eine Menge lernen, aber das wäre mühselig. Interessant wäre daher, ob es etwas gibt, was mir diese Arbeit erleichtert.

gruss, heinetz

[Henry]

Hallo heinetz,

Kann man jedes Element oder HTML-Tag gleich aussehen lassen indem man lediglich CSS-Eigenschaften anpasst?

Grundsätzlich ja, aber nicht immer unbedingt sinnvoll/so vorgesehen/erlaubt

Interessant wäre daher, ob es etwas gibt, was mir diese Arbeit erleichtert.

Wie du schon sagst:

irgendwie schaffe ich es hier selten, mich zu erklären

Daher bin ich nicht sicher ob dir eine Spielwiese zum Austoben und lernen jetzt wirklich weiter hilft, aber ich probiers mal: Zur Spielwiese

(*dort auf RUN klicken und Quelltext nach Belieben ändern und experimentieren)

Gruss
Henry

[Gunnar Bittersmann]

@@heinetz

habe mit einem <div> ein Element gewählt, das meinem Verständnis ein reines Gestaltungselement ist. Ein <span> wäre vielleicht eine Alternative. Weil die Default-Eigenschaften eines <span> eher denen eines Button entsprechen und weniger überschrieben werden muss?

div und span unterscheiden sich in einer Eigenschaft: display (block bzw. inline). In allen anderen CSS-Eigenschaften sollten sie übereinstimmen.

Aber mal konkret gefragt: Für welches Problem meinst du, brauchst du ein Container-Element für den Link? Lässt sich der Link nicht bereits so gestalten, wie du ihn haben möchtest?

Doch, theoretisch schon. Allerdings besteht das Konstrukt aus einem Eltern- und einem Kindelement. Die beiden haben ein Verhältnis zueinander ... margin, padding usw.

Dann sollte doch aber die gesamte Box einschließlich ihres Paddings clickbar sein. Also eher nicht

<span class="example_button">
	<a class="example_button_link" href="example.htm">Example</a>
</span>

sondern

<a class="example_button" href="example.htm">
	<span class="example_button_link">Example</span>
</a>

Kann man jedes Element oder HTML-Tag gleich aussehen lassen indem man lediglich CSS-Eigenschaften anpasst?

Grundsätzlich ja. Manche Elemente sind aber ziemlich (fieldset) bis völlig störrisch (option) und reagieren nur auf manche oder so gut wie gar keine CSS-Eigenschaften.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Dann sollte doch aber die gesamte Box einschließlich ihres Paddings clickbar sein. Also eher nicht <span><a href="example.htm">Example</a></span>, sondern <a href="example.htm"><span>Example</span></a>

Wobei es aber durchaus Fälle gibt, wo das a-Element innen stehen soll: Wenn nämlich in der clickbaren Box noch Inhalt ist, der nicht zum Linktitel gehören soll:

<div>
	<a href="…">Produktname</a>
	<p>Produktbeschreibung</p>
</div>

Die clickbare Fläche wird dann mit absolut positioniertem a::after-Pseudoelement auf die Größe der Box ausgedehnt.

Der Sinn dahinter: Für Mausschubser soll die gesamte Box clickbar sein. Für Screenreader-Nutzer soll aber nur der Produktname als Linktitel fungieren, nicht die Produktbeschreibung.

☞ Beispiel

LLAP 🖖

[dedlfix]

Tach!

Was genau ist für diesen Fall ein besseres Element? Ich möchte ja nur dem <button> seinen semantischen Sinn nehmen und an dem Konstrukt nichts ändern aus dem <button>. habe mit einem <div> ein Element gewählt, das meinem Verständnis ein reines Gestaltungselement ist. Ein <span> wäre vielleicht eine Alternative. Weil die Default-Eigenschaften eines <span> eher denen eines Button entsprechen und weniger überschrieben werden muss?

Ein Button ist ein Klick-Element zum Auslösen einer Aktion. Er hat allerdings keinen semantischen Sinn, wenn er stattdessen nur als Container missbraucht wird, der da rein zu Gestaltungszwecken vorhanden ist. Die Semantik von div versus span ist, Block-Elemente versus Elemente im Text zu gruppieren. Was davon nun für deinen Anwendungsfall semantisch ist, weiß ich nicht. In einem Menü wären es Block-Elemente, in einem Fließtext sind es Text-Gruppierer.

dedlfix.

[Gunnar Bittersmann]

@@heinetz

<button class="example_button"><a class="example_button_link" href="example.htm">Example</a></button>

was kein gültiges HTML ist: button darf keine weiteren interaktiven Elemente anthalten, also auch kein a.

<div class="example_button"><a class="example_button_link" href="example.htm">Example</a></div>

Das müsste doch theoretisch funktionieren wenn mein div.example_button sämtliche CSS-Eigenschaften des button.example_button erhält, oder?

Ja.

Nun habe ich für meinen button.example_button natürlich nur CSS-Eigenschaften definiert, die notwendig waren, um die default-Werte eines <button>s zu überschreiben und ein <div> hat sicher andere default-Werte, die überschrieben werden müssten.

Außer display: block dürfte ein div so ziemlich gar keine besonderen Stile haben, d.h. für alle anderen CSS-Eigenschaften deren Defaultwerte.

Wozu brauchst das div um das a dann überhaupt?

LLAP 🖖

[beatovich]

hallo

Zitat:

Da das CSS sehr komplex ist

Dein Beitrag erinnert mich daran, dass ich in mein rootcss noch Defaultwerte der Form...

button a:after {content:'INVALID HTML' !important; color:red !important;}

setzen sollte.

[Matthias Apsel]

Hallo beatovich,

Dein Beitrag erinnert mich daran, dass ich in mein rootcss noch Defaultwerte der Form...

button a:after {content:'INVALID HTML' !important; color:red !important;}

Und auch a button nicht vergessen. Siehe auch https://wiki.selfhtml.org/wiki/CSS/Tutorials/Validierungs-Stylesheet

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Und auch a button nicht vergessen.

Und auch a a und button button nicht …

Eher sowas:

:matches(a, button) :matches(a[href], audio[controls], button, details, embed, iframe, img[usemap] input:not([type="hidden"]), label, select, textarea, video[controls])

wobei matches() noch nicht allzu dolle unterstützt wird und dafür noch -moz-any() bzw. -webkit-any() verwendet werden müssten.

LLAP 🖖