CSS Secret Garden: タブのインデント幅を調整する_html/css_WEB-ITnose

『CSS Secrets』は @Lea Verou による最新の本で、CSS に関する小さな秘密がいくつか説明されています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

ドキュメントやチュートリアルなど、コードの多い Web ページには、スタイル設定に関するさらなる課題があります。 e03b848252eb9375d56be284e690e873 要素と ffbe95d20f3893062224282accb13e8f 要素は、コード ブロックを表示するために使用されます。次のようなデフォルトのスタイルがあります。デフォルトのタブ幅のコードでは

pre, code {    font-family: monospace;}pre {    display: block;    margin: 1em 0;    white-space: pre;}

が表示されますが、これはすべてのコードの表示要件を満たしているわけではありません。最大の問題は、タブはコードのインデントには最適ですが、ブラウザではタブが 8 文字幅で表示されるため、Web では避けられることが多いことです。上に示したように、このような広いインデントによってどれだけのスペースが無駄にされているかを見てください。コードを完全に含めることさえできません。

インデントにタブが使用されるのが好きではありませんか?このトピックは本書の範囲を超えていますが、それについて言及する理由はここで見つけることができます。

解決策

幸いなことに、CSS3 には、これを制御するための新しい CSS プロパティ tab-size があります。引数として数値 (文字) または (まれに) 長さの値を受け入れます。通常、これを 4 (4 文字幅を意味する) または 2 に設定します。これは、インデントを使用する際の最新の傾向であると思われます:

これは、以下の画像で確認できます。

pre {    tab-size: 4;}

かなり読みやすくなりました。 tab-size を 0 に設定してインデントを完全に無効にすることもできますが、これは良い考えではなく、下の画像でその効果を確認できます。

この属性がサポートされていない場合、追加の効果はありません。デフォルトの非常に醜くて幅の広いインデントが依然として得られますが、これは長年見てきたものと同じです。