MalKie: IE CSS Checked Opacity

Servus,

ich habe folgendes CSS Code:

label > input[type="radio"] + img{
	opacity: 0.5;
    filter: alpha(opacity=50); 
}

label > input:checked + img{
	opacity: 1;
    filter: alpha(opacity=100); 
}

Zweck soll sein, dass dass Bild was ausgewählt ist zu 100% zu sehen ist, und die nicht, nur zu 50%. Im FF klappt das wunderbar. Doch der IE 11 spielt da nicht mit. Obwohl W3C sagt, dass der IE ab V9 die Klassen kennt. Hat jemand einen Tipp für mich

  1. Hallo MalKie,

    ich habe folgendes CSS Code:

    label > input[type="radio"] + img{
    	opacity: 0.5;
        filter: alpha(opacity=50); 
    }
    
    label > input:checked + img{
    	opacity: 1;
        filter: alpha(opacity=100); 
    }
    

    Doch der IE 11 spielt da nicht mit. Obwohl W3C sagt, dass der IE ab V9 die Klassen kennt.

    Das W3C ist nicht die Institution, die sagt ob irgendein Browser irgendwas kann oder kennt, ich sehe auch keine Klassenselektoren in deinem CSS. Zudem wird die Filter-Eigenschaft seit IE10 nicht mehr unterstützt . Ein Weglassen derselben könnte schon zielführend sein.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. Hallo Matthias,

      er stellt es richtig da. Nur wenn ich ein anderes Bild auswähle verändert er die Klasse nicht. Der FF macht es.

      [Vollzitat entfernt]

      1. Hallo MalKie,

        er stellt es richtig da. Nur wenn ich ein anderes Bild auswähle verändert er die Klasse nicht. Der FF macht es.

        Ich kann in deinem Quelltextschnipsel keine Klassen sehen, kannst du ein online-Beispiel bereitstellen?

        [Vollzitat entfernt]

        Bitte vermeide Vollzitate. Sie stören nur den Lesefluss. Zitiere das, worauf du dich konkret beziehst und mehr nicht.

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. habe es bei jsfiddle eingestellt Glaube jetzt wird klar was ich meine

          https://jsfiddle.net/9f98m2hh/

          1. Hallo MalKie,

            https://jsfiddle.net/9f98m2hh/

            Mein IE11 ändert die Deckkraft der Bildchen.

            Bis demnächst
            Matthias

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          2. Hey,

            habe es bei jsfiddle eingestellt Glaube jetzt wird klar was ich meine

            https://jsfiddle.net/9f98m2hh/

            Oh schön! Ich glaub da gucke ich mir mal was weg, wenn ich darf. Chrome sieht auch gut aus.

            Gruß
            Jo

            1. Hallo j4nk3y,

              Oh schön! Ich glaub da gucke ich mir mal was weg, wenn ich darf.

              Aber nicht zu viel. Ein Label ohne Text ist keine Beschriftung. Ein Bild ohne alt-Attribut ist unvollständig. SVG ist PNG vorzuziehen.

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
              1. @@Matthias Apsel

                Aber nicht zu viel. Ein Label ohne Text ist keine Beschriftung. Ein Bild ohne alt-Attribut ist unvollständig. SVG ist PNG vorzuziehen.

                Und Flaggen stehen nicht für Sprachen.

                LLAP 🖖

                --
                „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
                1. Hallo Gunnar Bittersmann,

                  Und Flaggen stehen nicht für Sprachen.

                  Ja, aber du kannst nicht wissen, ob das nicht vielleicht die Urlaubsländer sein sollen. Oder Währungen.

                  Bis demnächst
                  Matthias

                  --
                  Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                  1. @@Matthias Apsel

                    Und Flaggen stehen nicht für Sprachen.

                    Ja, aber du kannst nicht wissen, ob das nicht vielleicht die Urlaubsländer sein sollen. Oder Währungen.

                    Doch, das kann ich. Und du auch:

                    <input type="radio" name="lang" value="en" />
                    <img src="http://www.globalpiyasa.com/v5/img/flag/us.png">
                    

                    Das g in lang steht für d? Und welches Urlaubsland wäre denn en? Und warum wird dort das Sternenbanner gehisst?

                    LLAP 🖖

                    --
                    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
                    1. Hallo

                      <input type="radio" name="lang" value="en" />
                      <img src="http://www.globalpiyasa.com/v5/img/flag/us.png">
                      

                      Das g in lang steht für d?

                      Offensichtlich.

                      Und welches Urlaubsland wäre denn en?

                      Das ist doch offensichtlich.

                      Und warum wird dort das Sternenbanner gehisst?

                      Und das ja nun erst recht. 51st State.

                      *scnr*

                      Tschö, Auge

                      --
                      Wo wir Mängel selbst aufdecken, kann sich kein Gegner einnisten.
                      Wolfgang Schneidewind *prust*
                      1. @@Auge

                        <input type="radio" name="lang" value="en" />
                        <img src="http://www.globalpiyasa.com/v5/img/flag/us.png">
                        

                        Das ist doch offensichtlich.

                        Au Mann, da hab ich Offensichtliche nicht gesehen …

                        Und das ja nun erst recht. 51st State.

                        … Nach dem Zerfall des Vereinigten Königreiches und der Umzingelung Englands durch die EU in Form von Schottland und (wiedervereinigtem) Irland tritt England den Vereinigten Staaten bei. Und verkauft das so, dass die US wieder englische Kolonie sind.

                        LLAP 🖖

                        --
                        „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
                        1. Hej Gunnar,

                          Und das ja nun erst recht. 51st State.

                          … Nach dem Zerfall des Vereinigten Königreiches und der Umzingelung Englands durch die EU in Form von Schottland und (wiedervereinigtem) Irland tritt England den Vereinigten Staaten bei. Und verkauft das so, dass die US wieder englische Kolonie sind.

                          Außer Kalifornien - die sind dann längst Kanadier. ;-)

                          Marc

              2. Hey Matthias,

                Oh schön! Ich glaub da gucke ich mir mal was weg, wenn ich darf.

                Aber nicht zu viel. Ein Label ohne Text ist keine Beschriftung. Ein Bild ohne alt-Attribut ist unvollständig. SVG ist PNG vorzuziehen.

                Meinte auch mehr die Idee als die Umsetzung.

                Gruß
                Jo

              3. Hallo Matthias,

                Aber nicht zu viel. Ein Label ohne Text ist keine Beschriftung. Ein Bild ohne alt-Attribut ist unvollständig. SVG ist PNG vorzuziehen.

                Da ich gerade etwas Zeit hatte, habe ich das Fiddle mal bearbeitet.

                Gruß
                Jo

                1. @@j4nk3y

                  Da ich gerade etwas Zeit hatte, habe ich das Fiddle mal bearbeitet.

                    <label>Deutsch
                      <input type="radio" name="lang" value="de" checked/>
                      <img src="http://www.globalpiyasa.com/v5/img/flag/de.png" alt="Deutsch">
                    </label>
                  

                  Die doppelte Beschriftung ist aber auch nicht sinnvoll; ein Screenreader würde „Deutsch (…) Deutsch“ vorlesen.

                  Auf das erste „Deutsch“ und dessen visuelles Verstecken mit font-size: 0 kannst du wohl verzichten; der Altenativtext sollte genügen.

                  Oder du verzichtest auf das zweite „Deutsch“ und setzt alt="", evtl. ergänzt durch role="presentation". (Das alt-Attribut muss aber vorhanden sein.)

                  Wenn man nicht weiß, worauf man genau achten muss, ist die jeweils ausgewählte Flagge nicht als solche zu erkennen.

                  Und auch die Verwendung von SVG würde Flaggen als Symbol für Sprachen nicht besser machen.

                  Auch die Verwendung von JSfiddle für CSS-Probleme ist nicht besonders gut.

                  LLAP 🖖

                  --
                  „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe