Heim > Web-Frontend > CSS-Tutorial > Einfache progressive Verbesserungen in CSS

Einfache progressive Verbesserungen in CSS

Susan Sarandon
Freigeben: 2024-12-18 20:19:15
Original
516 Leute haben es durchsucht

Simple progressive enhancements in CSS

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.

Besserer Text mit Textumbruch: hübsch und Textumbruch: Ausgewogenheit

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

Demo

Der Rückfall

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.


Automatisch wachsende Formularfelder mit field-sizing: content

Waren Sie jemals frustriert darüber, dass