IE CSS Checked Opacity

[MalKie]

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

[Matthias Apsel]

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

[MalKie]

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]

[Matthias Apsel]

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

[MalKie]

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

https://jsfiddle.net/9f98m2hh/

[Matthias Apsel]

Hallo MalKie,

https://jsfiddle.net/9f98m2hh/

Mein IE11 ändert die Deckkraft der Bildchen.

Bis demnächst
Matthias

[j4nk3y]

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

[Matthias Apsel]

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

[Gunnar Bittersmann]

@@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 🖖

[Matthias Apsel]

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

[Gunnar Bittersmann]

@@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 🖖

[Auge]

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

[Gunnar Bittersmann]

@@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 🖖

[marctrix]

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

[j4nk3y]

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

[j4nk3y]

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

[Gunnar Bittersmann]

@@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 🖖