CSS でのシンプルなプログレッシブ機能強化

CSS はここ数年で大きく変わりました。今では毎月新しい機能が追加されているような気がします。新機能は充実していますが、完全にサポートされているものや安全に使用できるものに追いつくのは困難です。

プログレッシブ拡張機能 を入力します。サポートされていないブラウザーでユーザーが Web サイトにアクセスした場合に安全なフォールバックを提供するコード機能と構文です。

ここでは、安全に使用できる簡単な CSS プロパティとテクニックをいくつか紹介します。一部のユーザーにとってはエクスペリエンスが向上しますが、他のユーザーにとっては満足のいくフォールバックが提供されます。

text-wrap: きれいなテキストと text-wrap: バランスを使用したより良いテキスト

すべてのブラウザがテキストラップ値のバランスと美しさをサポートしているわけではありませんが、安全使用できます。

これらの値に慣れていない場合は、テキストを (ご想像のとおり) より美しく、よりバランスのとれたものに「修正」する方法です。

テキストの段落の最後の単語が新しい行に折り返され、最後に単独で残るという「孤立した」単語の問題が大幅に解決されます。 pretty は、最後の単語に別の単語が付加されることを保証します。これは 見出し に最適です (注: 最適な結果を計算するために低速のアルゴリズムが使用されるため、本文テキストの大部分には使用しないでください)。

text-wrap に関する MDN ドキュメント: かなり

バランスは、各行の文字数のバランスが取れるようにテキストが折り返されるように段落を調整し、レイアウトの品質と読みやすさを向上させます。これは、特定の長さの段落に便利です。バナー内の先頭テキストまたはマーケティングコピー。 (注: 本文内のすべての

タグでこれを使用しないでください。文字数に基づいて完璧なバランスを計算すると計算コストがかかるため、ブラウザではテキスト行に基づいてこの機能に制限が設けられています。 Chromium の場合は 6 以下、Firefox の場合は 10 以下)

テキストラップ: バランスに関する MDN ドキュメント

デモ

フォールバック

ブラウザがこれらの機能をサポートしていない場合に起こる唯一のことは、テキストが孤立したり、希望どおりにバランスがとれなかったりすることです。それで大丈夫です。私たちは 30 年間 Web ブラウジングをこれとともに生きてきたので、サポートされていないブラウザーを使用するユーザーのエクスペリエンスが損なわれることはありません。

---

フィールドサイズ設定による自動拡張フォームフィールド: コンテンツ

に書き込んでも自動的に拡張されないことにイライラしたことはありませんか?まあ、それは field-sizing: content で最終的に修正されつつあります。</p> <p>このプロパティと値は、<input>、<select> を行います。または <textarea>コンテンツに基づいて自動的に成長します。 <textarea> に使用することをお勧めします。特に、MDN によって「実験的」とマークされていますが、現在でも安全に使用できます。</p> <p>フィールドサイジングに関する MDN ドキュメント</p> <h3> デモ </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> フォールバック </h3> <p>これに対するフォールバックは単純です。ブラウザがこの機能をサポートしていない場合、フィールドは拡張されません。それもOKです!</p> <hr> <h2> 疑似要素 ::marker および ::placeholder </h2> <p><ul> のリスト項目のディスク インジケーターのスタイルを設定したい、<ol> の数字の色を変更したい、または <input> のプレースホルダーのスタイルを設定したいですか? ::marker や ::placeholder などの擬似セレクターを使用すると、それが可能です。</p> <p>このセレクターで機能するプロパティは少数しかないため、::marker 要素は奇妙なものであることに注意してください:</p> <ul> <li> すべてのフォントのプロパティ</li> <li> ホワイトスペースプロパティ</li> <li>カラー </li> <li> text-combine-upright、unicode-bidi、および方向プロパティ</li> <li> コンテンツ プロパティ</li> <li> すべてのアニメーションとトランジションのプロパティ</li> </ul> <p>詳細については、こちらをご覧ください:::marker の MDN ドキュメント</p> <p>::placeholder の場合、色、フォントの太さ、フォントファミリーなどを変更するなど、通常のテキストでできることはほとんど何でもできますが、入力のプレースホルダーは依然として <em> </em> はプレースホルダーのように見えますが、入力にすでに値が入力されているようには見えません。</p> <p>::placeholder の MDN ドキュメント</p> <h3> デモ </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> フォールバック </h3> <p>これらはすべてのブラウザまたはブラウザのバージョンで機能するわけではありませんが、使用しても何も損なわれることはなく、完全なプログレッシブ拡張機能となります。ディスクや数字などのマーカーはリスト項目のテキストと同じ色にフォールバックされ、プレースホルダーにはブラウザーの組み込みスタイルが適用されます。</p> <hr> <h2> 結論は </h2> <p>ベースライン (webstatus.dev より) と caniuse.com では、特定のブラウザー バージョンで何かが利用可能かどうかのみが示されており、セレクターが使用された場合に UI に何が起こるかについては示されていないため、CSS で安全に使用できるものを把握するのは困難です。 、プロパティまたは値はサポートされていません。</p> <p>実験的な機能やあまりサポートされていない機能によってどのようなフォールバックが生じるかを常に把握してください。</p> <p>以上がCSS でのシンプルなプログレッシブ機能強化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。</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>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="フルハイトのレイアウトでフレックスボックスと垂直スクロールを効果的に組み合わせるにはどうすればよいですか?" href="https://m.php.cn/ja/faq/1796726115.html">フルハイトのレイアウトでフレックスボックスと垂直スクロールを効果的に組み合わせるにはどうすればよいですか?</a></span><span>次の記事：<a class="dBlack" title="フルハイトのレイアウトでフレックスボックスと垂直スクロールを効果的に組み合わせるにはどうすればよいですか?" href="https://m.php.cn/ja/faq/1796726134.html">フルハイトのレイアウトでフレックスボックスと垂直スクロールを効果的に組み合わせるにはどうすればよいですか?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="https://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</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/ja/faq/841.html" title="CSSを書くときにBorderについて注意すべきことまとめ" class="aBlack">CSSを書くときにBorderについて注意すべきことまとめ</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/961.html" title="複数のスタイル選択とスタイルのリアルタイム切り替えを実現する方法_体験交流" class="aBlack">複数のスタイル選択とスタイルのリアルタイム切り替えを実現する方法_体験交流</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/1345.html" title="マーキーの詳細な使用状況分析" class="aBlack">マーキーの詳細な使用状況分析</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/faq/269082.html" title="CSSタイトル行の実装（行削除効果による行削除）" class="aBlack">CSSタイトル行の実装（行削除効果による行削除）</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ja/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>福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！</p></div><div class="footermid"><a href="https://m.php.cn/ja/about/us.html">私たちについて</a><a href="https://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="https://m.php.cn/ja/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>