CSS hat sich in den letzten Jahren stark verändert. Es fühlt sich an, als ob wir jetzt jeden Monat neue Funktionen bekommen. Neue Funktionen sind schön und gut, aber es ist schwierig, mit dem Schritt zu halten, was vollständig unterstützt wird oder sicher zu verwenden ist.
Geben Sie progressive Verbesserungen ein: Codefunktionen und Syntax, die Ihnen sichere Ausweichmöglichkeiten für den Fall bieten, dass Ihre Benutzer Ihre Website in einem Browser besuchen, der nicht unterstützt wird.
Hier sind ein paar einfache CSS-Eigenschaften und -Techniken, die sicher zu verwenden sind; Verbessert das Erlebnis für einige Benutzer, bietet jedoch zufriedenstellende Alternativen für andere.
Nicht alle Browser unterstützen die Textumbruchwerte „Balance“ und „Pretty“, aber sie sind sicher in der Verwendung.
Wenn Sie mit diesen Werten nicht vertraut sind, sind sie Möglichkeiten, Ihren Text zu „reparieren“, damit er (Sie haben es erraten) hübscher oder ausgewogener aussieht.
Behebt ziemlich das Problem mit „verwaisten“ Wörtern, wenn das letzte Wort eines Textabsatzes in eine neue Zeile umgebrochen wird und es am Ende ganz allein bleibt. Pretty stellt sicher, dass das letzte Wort von einem weiteren Wort begleitet wird, was sich hervorragend für Überschriften eignet (HINWEIS: Verwenden Sie es nicht für größere Teile des Textkörpers, da es einen langsameren Algorithmus verwendet, um das beste Ergebnis zu berechnen).
MDN-Dokumentation für Textumbruch: hübsch
Balance passt Ihre Absätze so an, dass der Text so umbrochen wird, dass die Anzahl der Zeichen in jeder Zeile ausgeglichen wird und so die Layoutqualität und Lesbarkeit verbessert wird. Dies ist nützlich für Absätze einer bestimmten Länge, z. B. Leittext oder ein Marketingtext innerhalb eines Banners. (HINWEIS: Verwenden Sie dies nicht für alle
-Tags in Ihrem Fließtext. Die Berechnung der perfekten Balance basierend auf der Anzahl der Zeichen ist rechenintensiv, daher haben die Browser eine Obergrenze für diese Funktion basierend auf Textzeilen: sechs oder weniger für Chromium und zehn oder weniger für Firefox)
MDN-Dokumentation für Textumbruch: Balance
Das Einzige, was passiert, wenn der Browser diese Funktionen nicht unterstützt, ist, dass der Text verwaiste Texte enthält oder möglicherweise nicht so ausgewogen ist, wie Sie es möchten. Und das ist in Ordnung; Wir leben seit 30 Jahren beim Surfen im Internet damit, daher beeinträchtigt es das Erlebnis von Benutzern mit nicht unterstützten Browsern nicht.
Waren Sie jemals frustriert darüber, dass
Diese Eigenschaft und dieser Wert machen Ihre
MDN-Dokumentation zur Felddimensionierung
Der Ausweg hierfür ist einfach: Die Felder werden nicht größer, wenn ein Browser diese Funktion nicht unterstützt. Und das ist auch in Ordnung!
Möchten Sie die Disc-Anzeigen für Listenelemente in einem
Beachten Sie, dass das Element ::marker seltsam ist, da es nur eine Handvoll Eigenschaften gibt, die mit diesem Selektor funktionieren:
Lesen Sie hier mehr darüber: MDN-Dokumentation für ::marker
Für ::placeholder können Sie so ziemlich alles tun, was Sie mit normalem Text tun können, die Farbe, die Schriftstärke, die Schriftfamilie usw. ändern, aber bitte beachten Sie, dass der Platzhalter einer Eingabe immer noch sein sollte sehen aus wie ein Platzhalter, nicht so, als ob bereits ein Wert in die Eingabe eingegeben wurde.
MDN-Dokumentation für ::placeholder
Diese funktionieren nicht in jedem Browser oder in allen Browserversionen, aber ihre Verwendung wird auch nichts ruinieren, was sie zu einer perfekten progressiven Verbesserung macht. Markierungen wie Scheiben und Zahlen haben standardmäßig die gleiche Farbe wie der Text des Listenelements, während der Platzhalter den integrierten Stil des Browsers hat.
Es ist schwierig, den Überblick darüber zu behalten, was in CSS sicher verwendet werden kann, da Baseline (von webstatus.dev) und caniuse.com nur angibt, ob etwas in einer bestimmten Browserversion verfügbar ist, und nicht, was mit Ihrer Benutzeroberfläche passiert, wenn der Selektor aktiviert ist , Eigenschaft oder Wert werden nicht unterstützt.
Finden Sie immer heraus, welche Fallbacks die experimentelle oder weniger unterstützte Funktionalität mit sich bringt.
Das obige ist der detaillierte Inhalt vonEinfache progressive Verbesserungen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!