nicht angemeldet Robert B.
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Robert B.
Rolf B
Hallo Ich war so viele Jahre HTML Abstinent das ich nicht mal mehr meinen alten Account hier kenne. Dementsprechend, und da die Zeit nicht stehen bleibt, bin ich mit dem CSS "von heute" überfordert und teils erschlagen.
Meine Quelle: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Gestaltung_mit_CSS#Radio-Buttons_verstecken
Diese Buttons habe ich mit Bildern versehen. Einmal weiß und einmal schwarz. Wenn der Button aktiv ist wechselt die Hintergrundfarbe zu grün. Jetzt müsste ja nur noch die schwarze Grafik erscheinen. Also zb "waage" zu "waageSCHWARZ" ändern. Ist das via CSS zu realisieren?
Ich möchte nur ungern den Umweg via JS gehen, den Button ermitteln, um dann das Element zu ändern.
Und warum ist da ein Rand um der Grafik?
Ja, data:image ist so schon gewollt.
Der Martin
Tabellenkalk
JürgenB
Matthias Scharwies<html>
<head>
<title>Fuddel App</title>
<meta http-equiv="content-type" name="viewport" content="width=device-width, user-scalable=no, charset=utf-8" />
<style type="text/css">
<!--
.toggle-buttons input[type="radio"]{
visibility:hidden;
position: absolute;
}
.toggle-buttons label {
border: 1px solid #333;
border-radius: 0.5em;
align-items: center;
justify-content: center;
display: flex;
background: #001A47; /* blau */
}
.toggle-buttons input:checked + label {
background: #CBFB6A; /* grün */
box-shadow: none;
}
.toggle-buttons img {
width:50px;
height:40px;
background-repeat: no-repeat;
background-position: center center;
}
.waageSCHWARZ {
background-image:url('data:image/gif;base64,R0lGODlhKQAWAOfHAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0NDQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8fHyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDExMTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkNDQ0REREVFRUZGRkdHR0hISElJSUpKSktLS0xMTE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra2xsbG1tbW5ubm9vb3BwcHFxcXJycnNzc3R0dHV1dXZ2dnd3d3h4eHl5eXp6ent7e3x8fH19fX5+fn9/f4CAgIGBgYKCgoODg4SEhIWFhYaGhoeHh4iIiImJiYqKiouLi4yMjI2NjY6Ojo+Pj5CQkJGRkZKSkpOTk5SUlJWVlZaWlpeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLW1tba2tre3t7i4uLm5ubq6uru7u7y8vL29vb6+vr+/v8DAwMHBwcLCwsPDw8TExMXFxcbGxsfHx8jIyMnJycrKysvLy8zMzM3Nzc7Ozs/Pz9DQ0NHR0dLS0tPT09TU1NXV1dbW1tfX19jY2NnZ2dra2tvb29zc3N3d3d7e3t/f3+Dg4OHh4eLi4uPj4+Tk5OXl5ebm5ufn5+jo6Onp6erq6uvr6+zs7O3t7e7u7u/v7/Dw8PHx8fLy8vPz8/T09PX19fb29vf39/j4+Pn5+fr6+vv7+/z8/P39/f7+/v///yH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAP8ALAAAAAApABYAAAiHAP8JHEiwoMGDAwEAQMiw4T+FBhVKdEixIMSHEiderEgxY8aEEzky9LgwYkiRIEkivLixIsmSLQmyLNnxo0WaMnHGXInz5sGXPX8GzSlUZUObQnkiHXnSJNOdTjHyRMlUIFSpVKNaHXoVJdCkWW8a9RlWbFOiZc1WTUu1a1agcOGKjEvX48GAADs=');
}
.waage {
background-image:url('data:image/gif;base64,R0lGODlhKQAWAIABAP///+MAACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAAApABYAAAJcjI+pewAMY3DKWYkTnfbujHVdc4GQ+FSlSaLM9mVoGiNwGo4abvP1y9stZsFhsWd0RXRGIPO0UkF/Ug6QBTVQrdiq9rhlEZvdnVJYNkeRaXW2jQ13iXS6qY4XLQoAOw==');
}
.lkwSCHWARZ {
background-image:url('data:image/gif;base64,R0lGODlhKQAWAIQTAIWFhVdXV3Z2dtzc3EdHR2ZmZjc3N+bm5tXV1cPDwyYmJszMzKWlpZubmxMTE7q6upKSkrCwsAAAAP///////////////////////////////////////////////////yH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAB8ALAAAAAApABYAAAVz4CeOZGmeqCmtbJuqb9nOUjyytriqdf7htp2s5wO+hCRkUXkiJp1L6LMpzRmHVB+vytRVo1taV/tjil3k7fPMbrvL7ri8HRbz6uj82avU0+A4bIBCf3ZlXoMuhD2LP4OIh0eMk5Aof5J+V1RjYWtfaaAiIQA7');
}
.lkw {
background-image:url('data:image/gif;base64,R0lGODlhKQAWAIQSAIWFhVdXV3Z2dtzc3EdHR2ZmZjc3N+bm5tXV1cPDwyYmJszMzKWlpZubmxMTE7q6upKSkrCwsAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAB8ALAAAAAApABYAAAVz4CeOZGmeqHmsbJuqb9nORzyytriqdf7htp2s5wO+hCRkUXkiJp1L6LMpzRmHVB+vytRVo1taV/tjil3k7fPMbrvL7ri8HRbz6uj82avU0+A4bIBCf3ZlXoMuhD2LP4OIh0eMk5Aof5J+V1RjYWtfaaAiIQA7');
}
.editSCHWARZ {
background-image:url('data:image/gif;base64,R0lGODlhKgAWAOcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAP8ALAAAAAAqABYAAAiMAP8JHEiwIEEACAEYXMiw4cKECR1KlIhQYMV/Fy9O3AgxIsaOCjdSrKhxIMmSIg2ibLgy5cGQJmFalOlSJUyQMWs+1OjR40eaLiHmHPoTqEiUJZEa5UgzadOlE4XOfBmz5VGnUmdCTYlVplWdX4nqpMp0bMGIK09u5YqzqE+zZDOGDAvX7dq6L+kyDAgAOw==');
}
.edit {
background-image:url('data:image/gif;base64,R0lGODlhKgAWAIABAP///+MAACH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAAAqABYAAAJgjI+JwKAP42tNWstMDnvfT1Vc6HxY5h1oaips9LZLqdKaLbs0WeeTJxKNcDJK7zgkmlgpphKEa0afF+NtVostpdYbtcW1aX1jpA8LPScqr9UXzEsK1ehOqUyXv/MzPKQAADs=');
}
-->
</style>
</body>
<div class="toggle-buttons">
<input type="radio" id="modus1" name="group-b">
<label for="modus1"><img class="waage"></label>
<input type="radio" id="modus2" name="group-b">
<label for="modus2"><img class="lkw"></label>
<input type="radio" id="modus3" name="group-b">
<label for="modus3"><img class="edit"></label>
</div>
</html>
Die Pseudoklassen benutzt das Beispiel ja schon. Die Buttons sind blau, und der Button der angewählt wird, ändert dann sein Farbe zu grün. Aber das Bild wird nicht geändert. Und es muss für jeden der 3 Buttons ein eigenes Bild geändert werden. Ich habe zB "waage" wo die Grafik weiß ist. Und das soll zu der Grafik geändert werden die bei "waageSCHWARZ" hinterlegt ist.
@@Tatauiert
Meine Quelle: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Gestaltung_mit_CSS#Radio-Buttons_verstecken
Im SELFHTML-Wiki steht viel Gutes, aber leider auch noch viel Unsinn. Du bist bei Unsinn gelandet.
.toggle-buttons input[type="radio"]{
visibility:hidden;
}
ist völlig falsch, damit wird das vormals interaktive Element aus dem accessibility tree entfernt und es ist nichts mehr da, was man per Tastatur bedienen kann.
Interaktive Elemente dürfen niemals mit visibility: hidden oder display: none versteckt werden.
Das Beispiel darunter ist also genauso schlecht.
Interaktive Elemente kann man visuell verstecken, sodass sie immer noch bedienbar sind (und auch von Screenreadern angesagt werden).
Und warum ist da ein Rand um der Grafik?
Weil du da img-Elemente ohne src-Attribute hast (was ein Fehler ist) und die werden in Browsern halt als Bilderrahmen dargstellt.
Du müsstest dich entscheiden, ob du die Grafiken als Inhalt (d.h. per img) oder als Hintergrundbilder (der label-Elemente) verwenden willst.
Im ersten Fall müssen die img-Elemente zwingend Alternativtexte (alt-Attribute) haben, bspw.
<label for="…">
<img src="…" alt="Waage"/>
</label>
Wobei „Waage“ dafür nicht der richtige Text ist. Der sollte in dem Fall nicht das Bild beschreiben, sondern die Interaktion, die durch dieses Element ausgelöst wird.
Fürs Umfärben bräuchtest du wohl zwei img-Elemente pro label, von denen jeweils nur eins angezeigt wird.
Im zweiten Fall mit Hinterggrundbild muss auch eine Textalternative vorhanden sein (die visuell versteckt werden kann):
<label>
<span class="visually-hidden">Waage</span>
</label>
mit den oben verlinkten Styles für .visually-hidden.
Mir scheint aber, dass die Verwendung von versteckten Radio-Buttons (Eingabe-Elementen) an sich nicht richtig ist. Was willst du bezwecken?
Zum Auslösen von Aktionen solltest du button-Elemente verwenden.
Ja, data:image ist so schon gewollt.
Echt? Diese verpixelten Bildchen? Das wäre ein typischer Anwendungsfall für Vektorgrafiken.
Auch das Umfärben ist damit kein Problem – ohne dass man dafür zwei Grafiken bräuchte. Beispiel, beschrieben in Teil 1 eines kleinen Tutorials.
In Teil 2 wird gezeigt, wie man alle benötigten Symbole in einem SVG unterbringt.
Weitere Anmerkungen:
<html>
Da fehlt die Angabe der Sprache. Für deutschsprachige Seiten:
<html lang="de">
Und davor muss noch DOCTYPE-Angabe stehen, damit Browser im standardkonformen Modus rendern:
<!DOCTYPE html>
<html lang="de">
<meta http-equiv="content-type" name="viewport" content="width=device-width, user-scalable=no, charset=utf-8" />
user-scalable=no ist keine gute Idee. Nutzern, die Seite vergrößern müssen, um den Text lesen zu können, sollte man diese Möglichkeit nicht wegnehmen. Deshalb ignorieren das etliche Browser auch.
charset=utf-8 ist an der Stelle falsch. Das muss in einem eigenen meta-Element stehen, und zwar am Anfang, also am besten noch vor title:
<!DOCTYPE html>
<html lang="de">
<meta charset="utf-8"/>
<title>…</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css"> <!-- ⋮ --> </style>
Die Auskommentierung <!--/--> ist seit mindestens 10 Jahren überflüssig. Weg damit!
</style> </body>
Nö, an der Stelle ist der head zuende, und der body fängt an:
</style>
</head>
<body>
Das </body>-End-Tag kommt vor </html>
😷 LLAP
@@Gunnar Bittersmann
Meine Quelle: https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Gestaltung_mit_CSS#Radio-Buttons_verstecken
Im SELFHTML-Wiki steht viel Gutes, aber leider auch noch viel Unsinn. Du bist bei Unsinn gelandet.
Ich hab mir mal angesehen, was man an dem Tutorial ändern könnte, und bin zu dem Schluss gekommen, dass von oben bis unten Änderungsbedarf besteht. Es lohnt nicht, da punktuell zu überarbeiten; das Tutorial müsste völlig neu geschrieben werden.
Kann man da bitte die bestehende Seite entfernen?
😷 LLAP
@@Gunnar Bittersmann
Oh, ich hatte vergessen zu erwähnen, das SELFHTML die allerbeste Quelle im ganzen Internet ist. Was da drinsteht, ist Gesetz und darf nicht angezweifelt werden. Und schon gar nicht kritisiert. Und wenn da mal was Falsches steht (was ja an sich nicht sein kann, aber mal hypothetisch), dann ist SELFHTML immer noch die allerbeste Quelle im ganzen Internet und darf nicht kritisiert werden.
So gesehen ist der Minuspunkt für mein blasphemisches Posting natürlich völlig berechtigt.
😷 LLAP
Hallo,
So gesehen ist der Minuspunkt für mein blasphemisches Posting natürlich völlig berechtigt.
ich will dem Minuspunkt, der übrigens nicht von mir ist, mal eine Stimme geben: Mag sein, dass du inhaltlich recht hast. Aber bevor du pauschal forderst: "Weg damit!", solltest du erstmal etwas Besseres anbieten.
Meine ich jedenfalls.
Live long and pros healthy,
Martin
@@Der Martin
Aber bevor du pauschal forderst: "Weg damit!", solltest du erstmal etwas Besseres anbieten.
Meine ich jedenfalls.
Das meine ich nicht. Die Reihenfolge sollte andersrum sein.
Es ist besser, kein Tutorial anzubieten als eins, das von oben bis unten mangelhaft ist.
Wie man sieht, gibt es ja Leute, die sich daran ein schlechtes Beispiel nehmen.
😷 LLAP
Hallo,
Die Reihenfolge sollte andersrum sein.
Das ist zu pauschal.
Es ist besser, kein Tutorial anzubieten als eins, das von oben bis unten mangelhaft ist.
Das mag zutreffen, wenn bei 0 steht. Wenn aber bereits etwas vorhanden ist, ist das keine Option mehr.
Gruß
Kalk
@@Tabellenkalk
Es ist besser, kein Tutorial anzubieten als eins, das von oben bis unten mangelhaft ist.
Das mag zutreffen, wenn bei 0 steht. Wenn aber bereits etwas vorhanden ist, ist das keine Option mehr.
Warum nicht?
😷 LLAP
Hallo,
Warum nicht?
Ach Gunnar, seitdem du deinen Hammer gegen eine Planierraupe getauscht hast, ist alles, was vorher wie ein Nagel aussah, plötzlich ein Kieswerk?
Es hat mindestens eine Person Arbeit in das Tutorial investiert. Das sollte man respektieren.
Gruß
Kalk
@@Tabellenkalk
Ach Gunnar, seitdem du deinen Hammer gegen eine Planierraupe getauscht hast, ist alles, was vorher wie ein Nagel aussah, plötzlich ein Kieswerk?
Es hat niemand von dir verlangt, das Auftauchen des Begriffs „Polemik“ im Titel zum Anlass zu nehmen … 😉
Es hat mindestens eine Person Arbeit in das Tutorial investiert. Das sollte man respektieren.
Verstehe. Du bewertest die Zeit, die in da eingeflossen ist, höher als den inhaltlichen Gehalt, der dabei herausgekommen ist.
Ich mag deiner Sichtweise nicht folgen.
😷 LLAP
Hallo,
Verstehe. Du bewertest die Zeit, die in da eingeflossen ist, höher als den inhaltlichen Gehalt, der dabei herausgekommen ist.
Nein. Ich habe mir weder den Entstehungszeitraum noch den Inhalt angeschaut. Ich bewerte auch nicht.
Ich sage, es ist ein Unterschied, ob ein Tutorial existiert oder eben noch nicht.
Gruß
Kalk
Moin Gunnar,
Ich hab mir mal angesehen, was man an dem Tutorial ändern könnte, und bin zu dem Schluss gekommen, dass von oben bis unten Änderungsbedarf besteht.
Es ist ein Wiki, dort kann und soll jede:r seine Expertise einbringen.
Viele Grüße
Robert
@@Robert B.
Es ist ein Wiki, dort kann und soll jede:r seine Expertise einbringen.
Leider nein.
Ich habe im ersten Anwendungsbeispiel Code ergänzt.[1] In der Vorschau ändert sich dadurch nichts.
Wenn es um Codebeispiele geht, kann eben nicht jede:r seine Expertise einbringen.
😷 LLAP
Nicht, dass das die wichtigste notwendige Änderung gewesen wäre. ↩︎
Hallo Gunnar,
Es ist ein Wiki, dort kann und soll jede:r seine Expertise einbringen.
Leider nein.
Ich habe im ersten Anwendungsbeispiel Code ergänzt.[1] In der Vorschau ändert sich dadurch nichts.
Wenn es um Codebeispiele geht, kann eben nicht jede:r seine Expertise einbringen.
wie lange bist du schon dabei? Der Quelltext in Wiki-Beispiel ist nicht der, der ausgeführt wird. Du musst das an beiden Stellen ändern. Das ist oft lästig, aber wenn du eine bessere Idee hast, her damit.
Gruß
Jürgen
PS Falls du noch kein Recht hast, Beispiele zu editieren, Mail an den Vorstand reicht.
Nicht, dass das die wichtigste notwendige Änderung gewesen wäre. ↩︎
@@JürgenB
Der Quelltext in Wiki-Beispiel ist nicht der, der ausgeführt wird. Du musst das an beiden Stellen ändern. Das ist oft lästig, aber wenn du eine bessere Idee hast, her damit.
Andere Wiki-Software?
PS Falls du noch kein Recht hast, Beispiele zu editieren, Mail an den Vorstand reicht.
Was das Problem, dass nicht jede:r seine Expertise einbringen kann, nicht löst.
😷 LLAP
Tach!
Der Quelltext in Wiki-Beispiel ist nicht der, der ausgeführt wird. Du musst das an beiden Stellen ändern. Das ist oft lästig, aber wenn du eine bessere Idee hast, her damit.
Andere Wiki-Software?
Das grundlegende Problem an Code, der von allen geändert werden kann, löst sich nicht durch eine andere Wiki-Software. Das ist kein technisches Problem, sondern ein soziales. Was missbraucht werden kann, wird auch früher oder später missbraucht. Auch bei MediaWiki ließe sich einschalten, dass beliebiger HTML-Code in eine Seite eingefügt werden kann.
dedlfix.
@@dedlfix
Das grundlegende Problem an Code, der von allen geändert werden kann, löst sich nicht durch eine andere Wiki-Software. Das ist kein technisches Problem, sondern ein soziales. Was missbraucht werden kann, wird auch früher oder später missbraucht.
Wie lösen CodePen oder W3Schools das Problem?
😷 LLAP
Hallo Gunnar,
Das grundlegende Problem an Code, der von allen geändert werden kann, löst sich nicht durch eine andere Wiki-Software. Das ist kein technisches Problem, sondern ein soziales. Was missbraucht werden kann, wird auch früher oder später missbraucht.
Wie lösen CodePen oder W3Schools das Problem?
ich vermute, da weder Server noch Betreiber in Deutschland sitzen, haben sie kein Problem.
Gruß
Jürgen
Tach!
Wie lösen CodePen oder W3Schools das Problem?
Sag du es uns, wenn du es herausgefunden hast.
Ich kann mir als Lösung grad nur vorstellen, dass ein Parser mit Listen für erlaubte und verbotene Elemente infrage kommt. Das ist aber eine Lösung, die ich mir nicht zutraue, sie sicher hinzubekommen. Sollte es eine andere Wiki-Software geben, die sowas sicher kann, ist vor allem der Umstellungsaufwand dem Nutzen gegenüberzustellen.
dedlfix.
Hallo Gunnar,
ich bin inhaltlich bei Dir, das Beispiel ist nicht das, was man anbieten sollte. Allein die fehlende Tastaturbedienbarkeit ist ein KO.
Magst Du neuen Beispielcode als Codepen vorbereiten? Oder ist das, was der Wiki-TEXT jetzt zeigt, schon ok? Man braucht ja auch etwas, um den Tastaturfokus darzustellen, wenn die Radiobuttons verborgen sind.
Ich bin zur Zeit im Urlaub und kann daher nicht versprechen, dass ich den Artikel diese Woche überarbeite. Dazu müsste Salzburg sein Versprechen vom Schnürlregen einlösen.
Im Text muss auch darauf hingewiesen werden, dass man richtig verstecken muss, man sollte es nicht nur einfach tun, sondern auch auf die richtig aussehenden, aber nicht richtig bedienbaren Falschalternativen hinweisen. CSS bietet vieles an, aber man kann es falsch verwenden, wenn man nicht weiß, was man tut.
Rolf
Hallo Rolf, hallo Gunnar,
ich habe das Kapitel jetzt einmal überarbeitet. In Gestaltung mit CSS habe ich den ehemaligen Singleton „Wartungsfreundliches CSS am Beispiel eines Buttons“ integriert. Interessant: Lea Verou hatte einen Button gestylt, auf die Formatierung von
button:focus,
button:hover {
...
}
jedoch verzichtet. Das ist in der Pädagogik als „Isolierung der Schwierigkeiten“ gang und gäbe, sollte bei SELFHTML aber natürlich nicht vorkommen.
Die Beispiele der Ghost- und Bonbon-Buttons habe ich entsprechend angepasst.
Könntet ihr da noch mal drüberschauen?
Die toggle-Buttons werde ich überarbeiten und zu den Radio-Buttons_und_Checkboxen packen.
Danach müsste man schauen, ob man die Kapitel des Kurses anders sortieren sollte.
Ich bin zur Zeit im Urlaub und kann daher nicht versprechen, dass ich den Artikel diese Woche überarbeite. Dazu müsste Salzburg sein Versprechen vom Schnürlregen einlösen.
Genieß die Zeit!
Herzliche Grüße
Matthias Scharwies
@@Matthias Scharwies
ich habe das Kapitel jetzt einmal überarbeitet. In Gestaltung mit CSS habe ich den ehemaligen Singleton „Wartungsfreundliches CSS am Beispiel eines Buttons“ integriert.
Ich bin nicht sicher, ob dies das Tutorial besser macht. Was mir fehlt: ein klares Ziel, was genau eigentlich in dem Tutorial vermittelt werden soll.
Die Beispiele der Ghost- und Bonbon-Buttons habe ich entsprechend angepasst.
Den Begriff „Ghost-Button“ hab ich anderswo noch nie gehört. Sagt man™ das so?
Um die Technik der „Bonbon-Buttons“ zu erklären, braucht man auch nicht eine ganze Palette – es sind ja keine Smarties. Da reichen zwei. Und schon wird aus „Diese Bonbon-Buttons dienen eher dazu, die Möglichkeiten von CSS3 aufzuzeigen, als dass sie praktisch anwendbar wären“ ein konkreter Anwendungsfall: unterschiedliche Gestaltung von call to action und zweitrangigen Buttons.
(So wie man es bei den Dingern sieht, wo man seine Zustimmung geben soll, sich im Web verfolgen und ausschnüffeln zu lassen. Wobei „zweitrangig“ die Sicht der Anbieter ist. Als Nutzer clickt man da besser auf die unscheinbaren Buttons, nicht auf die vom Anbieter gewollten calls to action.)
Könntet ihr da noch mal drüberschauen?
Den Abschnitt „Radio-Buttons verstecken“ hast du komplett entsorgt?
Das Beispiel mit den Labels, die wie Buttons aussehen, war ja auch Quatsch. Es macht keinen Sinn, Eingabe-Elemente wie Elemente zum Auslösen einer Aktion aussehen zu lassen.
Das Beispiel mit den Schiebeschalten hingegen war eigentlich nicht schlecht; das kann man machen. Man sollte die Dinger bloß nicht „Toggle-Buttons“ nennen – das ist was anderes.
Und einen Anwendungsfall gibt es noch, System-Radiobuttons (bzw. -Checkboxen) zu verstecken: stattdessen eigene Radiobuttons/Checkboxen anzuzeigen
😷 LLAP
Hallo,
Die Beispiele der Ghost- und Bonbon-Buttons habe ich entsprechend angepasst.
Den Begriff „Ghost-Button“ hab ich anderswo noch nie gehört. Sagt man™ das so?
keine Ahnung, der Ausdruck ist mir auch neu. Aber nachdem ich mal nachgelesen habe, weiß ich auch, dass ich vom Einsatz in freier Wildbahn abraten würde. Das sind die Dinger, über die ich mich auch als Nutzer mit normal ausgeprägtem Sehvermögen[1] schon des öfteren wegen der schlechten Erkennbarkeit geärgert habe. Da gerät die Bedienung der Seite (oder auch einer Native Application, Microsoft Office ist ein treffendes Beispiel) zum Suchspiel.
Um die Technik der „Bonbon-Buttons“ zu erklären, braucht man auch nicht eine ganze Palette – es sind ja keine Smarties. Da reichen zwei.
Zumal sie ja von der Sache her nichts Besonderes sind, sondern nur ...
die Möglichkeiten von CSS3 aufzeigen
... sollen.
(So wie man es bei den Dingern sieht, wo man seine Zustimmung geben soll, sich im Web verfolgen und ausschnüffeln zu lassen. Wobei „zweitrangig“ die Sicht der Anbieter ist. Als Nutzer clickt man da besser auf die unscheinbaren Buttons, nicht auf die vom Anbieter gewollten calls to action.)
Häufig treffe ich auf derartige Abfragen, wo ich nur den "I Agree"-Button sehe, und die übrigen Möglichkeiten gar nicht. Vielleicht Ghost-Buttons mit Weiß auf Weiß. 😉
Live long and pros healthy,
Martin
Von der Kurzsichtigkeit mal abgesehen ↩︎
Servus!
Den Abschnitt „Radio-Buttons verstecken“ hast du komplett entsorgt?
Nein, ich habe bei den ursprünglichen Münz-Beispielen angefangen und dort die Tastatur-Zugänglichkeit erklärt, dafür den Hinweis auf die XHTML-Schreibweise checked="checked" entfernt.
Das Beispiel mit den Labels, die wie Buttons aussehen, war ja auch Quatsch. Es macht keinen Sinn, Eingabe-Elemente wie Elemente zum Auslösen einer Aktion aussehen zu lassen.
Es gibt im SELF-Wiki einige Anwendungsbeispiele, die dieses Prinzip verwenden:
Das Beispiel mit den Schiebeschalten hingegen war eigentlich nicht schlecht; das kann man machen. Man sollte die Dinger bloß nicht „Toggle-Buttons“ nennen – das ist was anderes.
Ich habe die Erklärungen Deinen Verbesserungen angepasst.
Und einen Anwendungsfall gibt es noch, System-Radiobuttons (bzw. -Checkboxen) zu verstecken: stattdessen eigene Radiobuttons/Checkboxen anzuzeigen
Danke, ich arbeite, wenn wieder Zeit ist, mal Inclusively Hiding & Styling Checkboxes and Radio Buttons von Sara Soueidan durch.
Herzliche Grüße
Matthias Scharwies
Das, was ich da am zusammenfuddeln bin, nennt sich ja "Fuddel App". Das ist eine Web-App die auf einem Handy OHNE Internetzugang in einem Vollbildbrowser läuft. Die muss nicht barrierefrei sein, sie soll nicht zoombar sein, und am Ende soll es nur eine einzige .html-Datei werden. Daher auch die "data:img" Grafiken. Die App soll mir und 4 weiteren Arbeitskollegen das errechnen und speichern von Gewichten zu bestimmten Sorten erleichtern. Die benötigen eine einzige Datei die sich sich abspeichern. Jetzt treten die Kollegen aber mit Ideen an mich ran die ich in der Form einer Web-App nicht umsetzen kann. Zum Beispiel einem anderen Kollegen eine Info über ein Gewicht zukommen zu lassen. Weil mindestens 1 Handy hat keinen Internetzugang! Und aus einer Web-App habe ich keine Möglichkeit zB eine simple SMS zu verschicken, um die auf dem Empfängerhandy auszuwerten.
Ich habe mal nachgesehen und festgestellt, das ich mich zuletzt 2013(!) mit html, php und JS beschäftigt habe. Und da frag ich mich jetzt welchen Weg ich einschlagen soll. Soll ich html & Co auf den Stand der Dinge neu lernen, oder das Projekt so wie es ist einfrieren, und ganz bei Null starten. Und dann eine Native App mit Java (kenne ich nicht) oder Kotlin (kenne ich auch nicht) versuchen. Eine Native App würde ja auch nicht im PlayStore von Google landen. Die würde ich ja auch per Hand weiterreichen. Da lese und gucke ich mich gerade schlau. Mittlerweile tendiere ich aber zu Native App.
Ich danke schon mal für die Hilfe, auch wenn mein umschwenken jetzt etwas frustrierend sein könnte 😉
@@Tatauiert
Die muss nicht barrierefrei sein,
Jede ist situationsbedingt sehbehindert, wenn sie mit ihrem Handy im Sonnenlicht steht.
Jeder ist temporär motorisch behindert, wenn er einen Gipsarm hat.
Jeder kann durch einen Unfall einen permanenten Schaden davontragen.
Auch du und deine 4 Arbeitskollegen.
Soll deine Webapp dann unbenutzbar sein?
Die Einschätzung „muss nicht barrierefrei sein“ ist auch bei einem eng begrenzten Nutzerkreis falsch.
Es ist auch widersinnig, bei der Entwicklung zwischen „muss barrierefrei sein“ und „muss nicht barrierefrei sein“ zu unterscheiden. Man baut nicht künstlich Barrieren ein, sondern verwendet immer die richtigen Techniken, d.h. die passenden HTML-Elemente, Alternativtexte für Bilder usw.
und am Ende soll es nur eine einzige .html-Datei werden. Daher auch die "data:img" Grafiken.
Genau das kannst du mit SVG auch erreichen. Du hast dir wenigstens mein verlinktes Beispiel mal angesehen?
Und aus einer Web-App habe ich keine Möglichkeit zB eine simple SMS zu verschicken
Nicht?
Oder doch?
Und das geht auch mit <form action="sms:+498932168&body=">.
😷 LLAP
Hallo Gunnar,
Und das geht auch mit
<form action="sms:+498932168&body=">.
ich wollte schon meckern, dass du so ungefragt fremde Telefonnummern veröffentlichst ... aber da herrscht ja sowieso schon Konjunktur die ganze Nacht. 😀
Live long and pros healthy,
Martin
@@Der Martin
Und das geht auch mit
<form action="sms:+498932168&body=">.ich wollte schon meckern, dass du so ungefragt fremde Telefonnummern veröffentlichst ... aber da herrscht ja sowieso schon Konjunktur die ganze Nacht. 😀
Ein Skandal!!1
😷 LLAP
@@Der Martin
ich wollte schon meckern, dass du so ungefragt fremde Telefonnummern veröffentlichst ...
Für Beispiele vorgesehene Telefonnummern, die nicht vergeben werden, wie bei den Amis mit ihren 555er Nummern gibt’s bei uns nicht, oder?
😷 LLAP
Hallo,
ich wollte schon meckern, dass du so ungefragt fremde Telefonnummern veröffentlichst ...
Für Beispiele vorgesehene Telefonnummern, die nicht vergeben werden, wie bei den Amis mit ihren 555er Nummern gibt’s bei uns nicht, oder?
ähm, jein. Ich weiß, dass die Bundesnetzagentur in jedem Vorwahlbezirk (AFAIK auch in den Mobilfunk-Netzen) einige Nummern reserviert, die auf keinen Fall vergeben werden. Solche Nummern können dann verwendet werden, wenn in einem Film mal beiläufig eine Kontaktnotiz oder ein Eintrag im Terminkalender im Bild gezeigt werden soll.
Vorteil gegenüber dem US-Konzept: Diese Nummern sehen völlig normal aus und fallen nicht gleich als fake auf.
Mir ist aber nicht bekannt, ob es eine öffentlich zugängliche Liste dieser Nummern gibt oder ob man die bei Bedarf konkret bei der BNetzA anfragen muss.
Live long and pros healthy,
Martin