Zeigen div auf Radio-Button-Check mit JS Fallback

Question

Ich baue eine Website, von denen die Desktop-Version 10 Bilder auf einmal (5x2) zeigt, die offensichtlich nicht gut aussieht auf einem kleinen Smartphone-Display. Um dieses Problem zu lösen, habe ich 10 Optionsfelder erstellt (die nur auf der mobilen Version der Website angezeigt werden) und nur das Bild anzeigen, das dem aktivierten Optionsfeld beiliegt. Das war sehr einfach, mit HTML und CSS3 wie folgt umzusetzen:

HTML:

<input type="radio" name='pdr' id="pdr1"><label for="pdr1"> Click here</label> 
<div class="populardevice" id="populardevice1">stuff in this div</div> 

CSS:

.populardevice { 
    display: none; 
} 
input#pdr1:checked ~ #populardevice1 { 
    display: inline; 
} 

Das Problem ist, dass ältere Browser unterstützen nicht die ausgewählt Wähler. Meine Idee war, die CSS3-Methode zu verwenden, um das div anzuzeigen, wenn es unterstützt wird, und JavaScript als Fallback zu verwenden, wenn nicht. Ich habe bereits this gefunden, was ich grundsätzlich will. Das einzige Problem ist, wie erkenne ich, ob Unterstützung für den: checked Selector vorhanden ist? Ich dachte an Modernizr, aber es scheint, als würde alles, was ich tun würde, eine zusätzliche Klasse in meinem CSS erstellen, die "nicht überprüft" (richtig?) Sagt, was mir nichts nützen würde, da ich ein Stück von JS laufen lassen möchte Fall. Oder wäre für diesen Fall Modernizr fit sein, es so etwas wie diese Verwendung (Pseudo-Code - ich habe keine Ahnung, wie das noch zu schreiben, aber wenn es die Lösung ist, werde ich herausfinden, wie):

if (Modernizr.:checked supported) { 
    use that and terminate this function; 
} else { 
    Execute the JavaScript function from the link above; 
} 

Oder Ihr rät mir, etwas völlig anderes zu implementieren?

Vielen Dank im Voraus.

Answer 1

Vom Modernizr website:

Mit Modernizr mit JavaScript

Das Modernizr Objekt

Modernizr verfolgt die Ergebnisse von all seine Funktion Erkennungen über das Modernizr Objekt. Das bedeutet, dass für jeden Test eine entsprechende Eigenschaft hinzugefügt wird. Sie müssen nur für Truthiness in Ihrem Code testen, um herauszufinden, was Sie

if (Modernizr.awesomeNewFeature) { 
    showOffAwesomeNewFeature(); 
} else { 
    getTheOldLameExperience(); 
} 

So Ihre Pseudo-Code ziemlich nah war tun wollen!