Einfache progressive Verbesserungen 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 s nicht automatisch größer werden, wenn Sie darin schreiben? Nun, das wird endlich behoben, mit field-sizing: content.</p> <p>Diese Eigenschaft und dieser Wert machen Ihre <Eingabe>, <Auswahl> oder <textarea> wächst automatisch basierend auf seinem Inhalt. Ich empfehle Ihnen, es für <textarea> zu verwenden. Vor allem, und es ist heute sicher zu verwenden, auch wenn es von MDN als „experimentell“ gekennzeichnet ist.</p> <p>MDN-Dokumentation zur Felddimensionierung</p> <h3> Demo </h3> <p><iframe height="600" src="https://codepen.io/havardob/embed/GgKNxVx?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy"> </iframe> </p> <h3> Der Rückfall </h3> <p>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!</p> <hr> <h2> Die Pseudoelemente ::marker und ::placeholder </h2> <p>Möchten Sie die Disc-Anzeigen für Listenelemente in einem <ul> formatieren, die Farben der Zahlen in einem <ol> ändern oder den Platzhalter eines <input> formatieren? Sie können Pseudoselektoren wie ::marker und ::placeholder verwenden.</p> <p>Beachten Sie, dass das Element ::marker seltsam ist, da es nur eine Handvoll Eigenschaften gibt, die mit diesem Selektor funktionieren:</p> <ul> <li>Alle Schrifteigenschaften</li> <li>Die Leerraumeigenschaft</li> <li> Farbe </li> <li>Text-Combine-Upright-, Unicode-Bidi- und Richtungseigenschaften</li> <li>Die Inhaltseigenschaft</li> <li>Alle Animations- und Übergangseigenschaften</li> </ul> <p>Lesen Sie hier mehr darüber: MDN-Dokumentation für ::marker</p> <p>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 <em> sein sollte sehen aus wie</em> ein Platzhalter, nicht so, als ob bereits ein Wert in die Eingabe eingegeben wurde.</p> <p>MDN-Dokumentation für ::placeholder</p> <h3> Demo </h3> <p><iframe height="600" src="https://codepen.io/havardob/embed/RNboOqq?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy"> </iframe> </p> <h3> Der Rückfall </h3> <p>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.</p> <hr> <h2> Abschließend </h2> <p>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.</p> <p>Finden Sie immer heraus, welche Fallbacks die experimentelle oder weniger unterstützte Funktionalität mit sich bringt.</p> <p>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!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">firefox</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">less</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">while</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">auto</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Length</a> <a href="javascript:void(0);">finally</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">cap</a> <a href="javascript:void(0);">copy</a> <a href="javascript:void(0);">number</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">transition</a> <a href="javascript:void(0);">animation</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">ul</a> <a href="javascript:void(0);">ui</a> <a href="javascript:void(0);">word</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Wie kann ich Flexbox und vertikales Scrollen in einem Layout voller Höhe effektiv kombinieren?" href="https://m.php.cn/de/faq/1796726115.html">Wie kann ich Flexbox und vertikales Scrollen in einem Layout voller Höhe effektiv kombinieren?</a></span><span>Nächster Artikel：<a class="dBlack" title="Wie kann ich Flexbox und vertikales Scrollen in einem Layout voller Höhe effektiv kombinieren?" href="https://m.php.cn/de/faq/1796726134.html">Wie kann ich Flexbox und vertikales Scrollen in einem Layout voller Höhe effektiv kombinieren?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/841.html" title="Zusammenfassung dessen, worauf Sie beim Schreiben von CSS bezüglich Border achten müssen" class="aBlack">Zusammenfassung dessen, worauf Sie beim Schreiben von CSS bezüglich Border achten müssen</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/961.html" title="So realisieren Sie die Auswahl mehrerer Stile und den Echtzeitwechsel von Stilen. Erleben Sie den Austausch" class="aBlack">So realisieren Sie die Auswahl mehrerer Stile und den Echtzeitwechsel von Stilen. Erleben Sie den Austausch</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1345.html" title="Detaillierte Nutzungsanalyse von Marquee" class="aBlack">Detaillierte Nutzungsanalyse von Marquee</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/269606.html" title="CSS3中优雅降级和渐进增强的区别" class="aBlack">CSS3中优雅降级和渐进增强的区别</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>