Tatauiert: Toggle-Buttons und background-image

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.

<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>
  1. Moin,

    suchst du CSS-Pseudoklassen wie checked?

    Viele Grüße
    Robert

    1. 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.

  2. @@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

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    1. @@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

      --
      “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
      1. @@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

        --
        “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
        1. 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

          --
          Hunde, die bellen, beißen nicht.
          Jedenfalls nicht gleichzeitig.
          1. @@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

            --
            “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
            1. 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

              1. @@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

                --
                “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                1. 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

                  1. @@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

                    --
                    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                    1. 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

      2. 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

        1. @@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

          --
          “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon

          1. Nicht, dass das die wichtigste notwendige Änderung gewesen wäre. ↩︎

          1. 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.


            1. Nicht, dass das die wichtigste notwendige Änderung gewesen wäre. ↩︎

            1. @@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

              --
              “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
              1. 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.

                1. @@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

                  --
                  “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                  1. 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

                  2. 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.

      3. 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

        --
        sumpsi - posui - obstruxi
        1. 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

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
          1. @@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

            --
            “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
            1. 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

              --
              Hunde, die bellen, beißen nicht.
              Jedenfalls nicht gleichzeitig.

              1. Von der Kurzsichtigkeit mal abgesehen ↩︎

            2. 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

              --
              Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    2. 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 😉

      1. @@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&amp;body=">.

        😷 LLAP

        --
        “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
        1. Hallo Gunnar,

          Und das geht auch mit <form action="sms:+498932168&amp;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

          --
          Hunde, die bellen, beißen nicht.
          Jedenfalls nicht gleichzeitig.
          1. @@Der Martin

            Und das geht auch mit <form action="sms:+498932168&amp;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

            --
            “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
          2. @@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

            --
            “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
            1. 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

              --
              Hunde, die bellen, beißen nicht.
              Jedenfalls nicht gleichzeitig.