Kann jemand erklären, wie Fallbacks in CSS arbeiten? Ich versuche, es für vh und vw einzurichten und klar ich bekomme es nicht ...Wie schreibe ich css Fallbacks für vh vw
Hier ist meine versuchte Lösung, die nicht funktioniert. Die Höhe Eigenschaft wird jedes Mal genommen.
CSS:
-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* The Fallback */
an Ihrem ursprünglichen Code sucht, habe ich ein paar Kommentare:
-webkit-height: 5.2vh;
-moz-height: 5.2vh;
-ms-height: 5.2vh;
-o-height: 5.2vh;
height: 41px; /* The Fallback */
Die Präfixe, die -webkit- bit, gelten nur, wenn gibt es eine Präfix-Eigenschaft mit diesem Namen. Die Höhe hat keine vorangestellte Eigenschaft, daher ignorieren die Browser diese Deklarationen einfach.
(Tipp: Sie können so etwas wie MDN überprüfen, um zu sehen, welche Eigenschaften vorhanden sind.)
In diesem Fall haben wir den Vorteil der Tatsache nehmen, dass, wenn Browser stoßen auf eine Eigenschaft oder ein Wert, den sie nicht verstehen, ignorieren sie und ziehen weiter. Also, was Sie suchen ist so etwas wie:
height: 41px;
height: 5.2vh;
Der Browser sieht height: 41px, wie erwartet. Es analysiert das und weiß, was damit zu tun ist. Dann sieht es height: 5.2vh. Wenn der Browser das vh Gerät versteht, wird es anstelle von 41px verwenden, genau wie color: blue; color: red; wäre am Ende rot. Wenn es die Einheit vh nicht versteht, ignoriert es sie, und da wir den Fallback zuerst definiert haben, spielt die Tatsache, dass der Browser die Einheit vh ignoriert, keine Rolle.
Sinn machen?
Legen Sie fallen wieder über andere Werte. Wenn die übergeordneten Werte in einem Browser nicht funktionieren, wird der erste Wert verwendet.
height: 41px; /* The Fallback */
height: 5.2vh;
Die Eigenschaften -moz-height, -webkit-height, -o-height und -ms-height sind keine gültigen Erweiterungseigenschaften, sind sie durch eine der UA-Implementierungen nicht definiert.
Sie erhalten height: 41px als den gewinnenden Wert, weil -webkit-height (in Chrome oder Safari) überhaupt nicht erkannt wird, aber height: 41px ist.
Sie wollen diese verwenden:
height: 41px;
height: 5.2vh;
... mit diesem Code, Browser wird zunächst height: 41px erkennen, dann, wenn sie height: 52.vh erkennen, die angewendet werden, sonst werden sie zum letzten zurückkehren "guter" Wert: 41px.
Bitte entfernen Sie den ersten Teil Ihrer Antwort, oder fügen Sie ihm "Ihren Code" voran, wie es auf den ersten Blick aussieht, als wäre das erste Code-Snippet die akzeptierte Antwort. Was mich als px "The Fallback" verwirrt, sollte vor vh liegen, wie du später in deiner Antwort beschreibst. – redfox05
Ich mag deine Bearbeitung; Sobald ich herausfinden kann, wie man es benutzt, oder es wird von genug Leuten überprüft, geht es mir gut. –
Ich habe erst nach dem Durcharbeiten meiner Profilstatistik festgestellt, dass, obwohl SIE den Schnitt mochten, er von anderen Leuten total abgelehnt wurde, weil 'diese Bearbeitung den Beitrag nicht noch ein bisschen einfacher zu lesen, einfacher zu finden, genauer oder Einfacher zugänglich. Änderungen sind entweder völlig überflüssig oder beeinträchtigen die Lesbarkeit aktiv. "Und" seine Bearbeitung sollte den Autor des Beitrags ansprechen und macht keinen Sinn als Bearbeitung. Es hätte als Kommentar oder Antwort geschrieben werden sollen. Seufz, kann nicht gewinnen, können wir: P Prost für die Vertrauensabstimmung tho. – redfox05