Wirklich einfach: Wie kann ich am genauesten testen, ob ein Browser Unterstützung für einen bestimmten CSS-Selektor bietet?
Ich habe derzeit einen CSS-Code, der die Seite ein wenig interaktiver macht, indem ich den :checked Selektor in CSS verwende, aber ich möchte ein Fallback-Skript erstellen, das dasselbe mit JavaScript macht, aber nur wenn der Browser des Benutzers es hat Keine Unterstützung für den :checked Selektor.
Meine Frage ist, wie kann ich am genauesten testen, ob der Browser des Benutzers einen bestimmten CSS-Selektor unterstützt?
Hier ist der Code, auf den ich ihn gerne anwenden möchte:
HTML:
%Vor%CSS:
%Vor%PS: Ich würde es vorziehen, nicht nur bedingte Kommentare zu verwenden, weil ich dem Standard der Erkennung von Funktionen statt Browsern folgen möchte.
Workaround für Ihren Fall:
%Vor%css:
%Vor%Prüfverfahren: js
%Vor% Sie könnten querySelector :
Sie können es so testen:
%Vor% Siehe diese andere Frage für weitere Informationen zu querySelector .
Aus einigen Recherchen konnte ich verschiedene Websites finden, die Ihren Browser testen können, um die Unterstützung zu sehen.
Diese Website ist hilfreich zu finden, was unterstützt, aber nicht Ihren aktuellen Browser testen.
Diese Website wird Ihren Browser testen und wenn Sie modernizr nicht verwenden möchten, können Sie von ihrem Skript lernen.
Diese letzte Webseite scheint eine großartige Arbeit zu leisten und ist sehr genau auf die Unterstützung. Ich bin mir auch ziemlich sicher, dass ich das Skript gefunden habe, das das so macht Ich sagte, du kannst daraus lernen, wie andere Webseiten das machen.
Quellcode (Ansichtsquelle hinzufügen: Quelle anzeigen, Verknüpfung mit SO nicht möglich)
Um zu verstehen, wie das funktioniert, müssen Sie verstehen, wie ihre Skripte funktionieren. Die unteren drei scheinen für die Funktion am kritischsten zu sein.
%Vor%Dies sind nur einige Optionen, die ich gefunden habe und die Ihren Bedürfnissen entsprechen. Viel Glück und hoffentlich war das hilfreich.
Ein kürzerer Weg wäre, einfach den Abfrage-Selektor auszuprobieren, falls er einen Fehler erzeugt, true false, sonst true, wie folgt:
%Vor%Ich habe es auf IE9 Windows und Chrome Mac (V43.0.2357.130), Win (V39.0.2171.95m), FireFox Win (V38.0.5) überprüft, und es funktioniert gut mit testSelector ("form: ungültig") , die nicht vom IE9, sondern von allen anderen implementiert wird.
Tags und Links javascript css cross-browser css-selectors internet-explorer-8