Penambahbaikan progresif mudah dalam CSS

CSS telah banyak berubah dalam beberapa tahun kebelakangan ini. Nampaknya kami mendapat ciri baharu setiap bulan sekarang. Ciri baharu adalah baik dan semuanya, tetapi sukar untuk mengikuti apa yang disokong sepenuhnya atau selamat untuk digunakan.

Masukkan penambahbaikan progresif: ciri kod dan sintaks yang memberikan anda sandaran yang selamat sekiranya pengguna anda melawat tapak web anda dalam penyemak imbas yang tidak mempunyai sokongan.

Berikut ialah beberapa sifat dan teknik CSS mudah yang selamat digunakan; meningkatkan pengalaman untuk sesetengah pengguna, tetapi memberikan sandaran yang memuaskan untuk orang lain.

Teks yang lebih baik dengan pembalut teks: cantik dan pembalut teks: keseimbangan

Bukan semua penyemak imbas menyokong keseimbangan nilai balutan teks dan cantik, tetapi ia selamat untuk digunakan.

Jika anda tidak biasa dengan nilai ini, ia adalah cara untuk "membetulkan" teks anda supaya kelihatan (anda telah menekanya) lebih cantik atau lebih seimbang.

cukup membetulkan masalah dengan perkataan "yatim piatu", apabila perkataan terakhir perenggan teks dibalut ke baris baharu, meninggalkan semuanya bersendirian di bahagian bawah. pretty memastikan bahawa perkataan terakhir disertakan dengan perkataan lain, yang bagus untuk tajuk (NOTA: Jangan gunakannya untuk bahagian teks badan yang lebih besar, kerana ia menggunakan algoritma yang lebih perlahan untuk mengira hasil terbaik).

Dokumentasi MDN untuk pembalut teks: cantik

imbangan melaraskan perenggan anda supaya teks dibalut dengan cara yang mengimbangi bilangan aksara pada setiap baris, meningkatkan kualiti reka letak dan kebolehbacaan. Ia berguna untuk perenggan dengan panjang tertentu, mis. teks terkemuka atau beberapa salinan pemasaran di dalam sepanduk. (NOTA: Jangan gunakan ini pada semua teg

dalam teks kandungan anda. Pengiraan baki sempurna berdasarkan bilangan aksara adalah mahal dari segi pengiraan, jadi penyemak imbas mempunyai had pada ciri ini berdasarkan baris teks: enam atau kurang untuk Chromium, dan sepuluh atau kurang untuk Firefox)

Dokumentasi MDN untuk pembalut teks: baki

Demo

The fallback

Satu-satunya perkara yang berlaku jika penyemak imbas tidak menyokong ciri ini ialah teks akan mempunyai anak yatim atau mungkin tidak seimbang seperti yang anda mahukan. Dan itu OK; kami telah hidup dengan ini selama 30 tahun menyemak imbas web, jadi ia tidak membahayakan pengalaman pengguna dengan penyemak imbas yang tidak disokong.

---

Medan borang berkembang secara automatik dengan saiz medan: kandungan

Pernah kecewa kerana s tidak berkembang secara automatik apabila anda menulis di dalamnya? Nah, itu akhirnya dibetulkan, dengan saiz medan: kandungan.</p> <p>Harta dan nilai ini akan menjadikan <input> anda, <pilih> atau <textarea> berkembang secara automatik berdasarkan kandungannya. Saya syorkan anda menggunakannya untuk <textarea> terutamanya, dan ia selamat digunakan hari ini, walaupun ia ditandakan sebagai "percubaan" oleh MDN.</p> <p>Dokumentasi MDN untuk saiz medan</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>Sandaran untuk ini adalah mudah: medan tidak akan berkembang jika penyemak imbas tidak menyokong ciri tersebut. Dan itu OK juga!</p> <hr> <h2> Unsur psuedo ::marker dan ::placeholder </h2> <p>Ingin menggayakan penunjuk cakera pada item senarai dalam <ul>, tukar warna nombor dalam <ol>, atau gayakan pemegang tempat <input>? Anda boleh, menggunakan pemilih psuedo seperti ::marker dan ::placeholder.</p> <p>Ambil perhatian bahawa elemen ::penanda adalah satu yang pelik, kerana hanya terdapat segelintir sifat yang akan berfungsi dengan pemilih ini:</p> <ul> <li> Semua sifat fon</li> <li> Sifat ruang putih</li> <li> warna </li> <li> teks-gabung-tegak, unicode-bidi dan sifat arah</li> <li> Harta kandungan</li> <li> Semua sifat animasi dan peralihan</li> </ul> <p>Baca lebih lanjut mengenainya di sini: dokumentasi MDN untuk ::marker</p> <p>Untuk ::placeholder anda boleh melakukan hampir semua perkara yang anda boleh lakukan dengan teks biasa, menukar warna, font-weight, font-family dsb., tetapi sila ingat bahawa pemegang tempat input masih perlu <em> kelihatan seperti</em> pemegang tempat, bukan kelihatan seperti sudah ada nilai yang ditaip ke dalam input.</p> <p>Dokumentasi MDN untuk ::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>Ini tidak berfungsi dalam setiap penyemak imbas atau versi penyemak imbas, tetapi menggunakannya juga tidak akan merosakkan apa-apa, menjadikannya peningkatan progresif yang sempurna. Penanda seperti cakera dan nombor akan berundur untuk mempunyai warna yang sama dengan teks item senarai, manakala pemegang tempat akan mempunyai gaya terbina dalam penyemak imbas.</p> <hr> <h2> Kesimpulannya </h2> <p>Sukar untuk mengikuti apa yang selamat untuk digunakan dalam CSS, kerana Baseline (dari webstatus.dev) dan caniuse.com hanya menyatakan jika sesuatu tersedia dalam versi penyemak imbas tertentu, bukan perkara yang akan berlaku kepada UI anda jika pemilih , harta atau nilai tidak disokong.</p> <p>Sentiasa fikirkan kelemahan yang akan dihasilkan oleh fungsi percubaan atau kurang disokong.</p> <p>Atas ialah kandungan terperinci Penambahbaikan progresif mudah dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</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>Kenyataan：</span><div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div></div></div><div class="nphpSytBox"><span>Artikel sebelumnya：<a class="dBlack" title="Bagaimanakah Saya Boleh Menggabungkan Flexbox dan Tatal Menegak dengan Berkesan dalam Susun Atur Tinggi Penuh?" href="https://m.php.cn/ms/faq/1796726115.html">Bagaimanakah Saya Boleh Menggabungkan Flexbox dan Tatal Menegak dengan Berkesan dalam Susun Atur Tinggi Penuh?</a></span><span>Artikel seterusnya：<a class="dBlack" title="Bagaimanakah Saya Boleh Menggabungkan Flexbox dan Tatal Menegak dengan Berkesan dalam Susun Atur Tinggi Penuh?" href="https://m.php.cn/ms/faq/1796726134.html">Bagaimanakah Saya Boleh Menggabungkan Flexbox dan Tatal Menegak dengan Berkesan dalam Susun Atur Tinggi Penuh?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Artikel berkaitan</h2><em><a href="https://m.php.cn/ms/article.html" class="bBlack"><i>Lihat lagi</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/ms/faq/841.html" title="Ringkasan perkara yang perlu anda perhatikan tentang Border semasa menulis CSS" class="aBlack">Ringkasan perkara yang perlu anda perhatikan tentang Border semasa menulis CSS</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/961.html" title="Bagaimana untuk merealisasikan pemilihan berbilang gaya dan penukaran masa nyata gaya_Pertukaran pengalaman" class="aBlack">Bagaimana untuk merealisasikan pemilihan berbilang gaya dan penukaran masa nyata gaya_Pertukaran pengalaman</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/1345.html" title="Analisis penggunaan terperinci marquee" class="aBlack">Analisis penggunaan terperinci marquee</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/faq/269082.html" title="CSS标题线（删除线贯穿线效果）实现" class="aBlack">CSS标题线（删除线贯穿线效果）实现</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ms/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>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p></div><div class="footermid"><a href="https://m.php.cn/ms/about/us.html">Tentang kita</a><a href="https://m.php.cn/ms/about/disclaimer.html">Penafian</a><a href="https://m.php.cn/ms/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>