Simple progressive enhancements in CSS

CSS has changed a lot in the last couple of years. It feels like we're getting new features monthly now. New features are well and all, but it's hard to keep up with what's fully supported or safe to use.

Enter progressive enhancements: code features and syntax that provides you with safe fallbacks in case your users visits your website in a browser that lacks support.

Here are a few simple CSS properties and techniques that are safe to use; enhancing the experience for some users, but provides satisfying fallbacks for others.

Better text with text-wrap: pretty and text-wrap: balance

Not all browsers support the text-wrap values balance and pretty, but they are safe to use.

If you're not familiar with these values they are ways to "fix" your text to look (you've guessed it) prettier or more balanced.

pretty fixes the problem with "orphan" words, when the last word of a paragraph of text wraps to a new line, leaving it all alone at the bottom. pretty ensures that the last word gets accompanied by another, which is great for headings (NOTE: Don't use it for larger portions of body text, as it uses a slower algorithm to calculate the best outcome).

MDN documentation for text-wrap: pretty

balance adjusts your paragraphs so that the text is wrapped in a way that balances the number of characters on each line, enhancing layout quality and legibility. It's useful for paragraphs of a certain length, e.g. leading text or some marketing copy inside a banner. (NOTE: Do not use this on all

tags in your body text. The calculating of the perfect balance based on the number of characters is computationally expensive, so the browsers have a cap on this feature based on lines of text: six or less for Chromium, and ten or less for Firefox)

MDN documentation for text-wrap: balance

Demo

The fallback

The only thing that happens if the browser doesn't support these features is that the text will have orphans or might not be as balanced as you'd prefer. And that's OK; we've lived with this for 30 years of web browsing, so it's not harming the experience of users with not-supported browsers.

---

Auto-growing form fields with field-sizing: content

Ever been frustrated that s doesn't automatically grow when you write in them? Well, that's finally being fixed, with field-sizing: content.</p> <p>This property and value will make your <input>, <select> or <textarea> automatically grow based on its content. I recommend you use it for <textarea> especially, and it is safe to use today, even though it's marked "experimental" by MDN.</p> <p>MDN documentation for field-sizing</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> The fallback </h3> <p>The fallback for this is simple: the fields won't grow if a browser doesn't support the feature. And that's OK, too!</p> <hr> <h2> The psuedo elements ::marker and ::placeholder </h2> <p>Want to style the disc indicators on list items in an <ul>, change the colors of the numbers in an <ol>, or style the placeholder of an <input>? You can, using psuedo selectors like ::marker and ::placeholder.</p> <p>Note that the ::marker element is a weird one, as there's only a handful of properties that will work with this selector:</p> <ul> <li> All font properties</li> <li> The white-space property</li> <li> color </li> <li> text-combine-upright, unicode-bidi, and direction properties</li> <li> The content property</li> <li> All animation and transition properties</li> </ul> <p>Read more about it here: MDN documentation for ::marker</p> <p>For ::placeholder you can do pretty much anything you can do with normal text, change the color, font-weight, font-family etc., but please keep in mind that the placeholder of an input still should <em>look like</em> a placeholder, not look like there's already a value typed into the input.</p> <p>MDN documentation for ::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> The fallback </h3> <p>These doesn't work in every browser or browser versions, but using them won't ruin anything either, making it a perfect progressive enhancement. Markers like discs and numbers will fallback to have the same color as the list item's text, while the placeholder will have the browser's built-in style.</p> <hr> <h2> In conclusion </h2> <p>It's hard to keep up with what's safe to use in CSS, as Baseline (from webstatus.dev) and caniuse.com only states if something is available in a certain browser version, not what will happen to your UI if the selector, property or value isn't supported.</p> <p>Always figure out what fallbacks the experimental or less-supported functionality will yield.</p> <p>The above is the detailed content of Simple progressive enhancements in CSS. For more information, please follow other related articles on the PHP Chinese 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>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="How Can I Effectively Combine Flexbox and Vertical Scrolling in a Full-Height Layout?" href="https://m.php.cn/faq/1796726115.html">How Can I Effectively Combine Flexbox and Vertical Scrolling in a Full-Height Layout?</a></span><span>Next article：<a class="dBlack" title="How Can I Effectively Combine Flexbox and Vertical Scrolling in a Full-Height Layout?" href="https://m.php.cn/faq/1796726134.html">How Can I Effectively Combine Flexbox and Vertical Scrolling in a Full-Height Layout?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</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/faq/841.html" title="Summary of what you must pay attention to about Border when writing CSS" class="aBlack">Summary of what you must pay attention to about Border when writing CSS</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/961.html" title="How to realize multi-style selection and real-time switching of styles_Experience exchange" class="aBlack">How to realize multi-style selection and real-time switching of styles_Experience exchange</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1345.html" title="Detailed usage analysis of marquee" class="aBlack">Detailed usage analysis of marquee</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/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>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/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>