5つのまったく使用されていないCSSプロパティ

あまり知られていないCSS属性をマスターし、Webデザインのスキルを向上させます！この記事では、すべての最新のブラウザで機能する5つの実用的ではあるがめったに使用されないCSSプロパティを紹介し、トリッキーなWebデザインの課題を解決するのに役立ちます。

多くのCSS属性があり、いくつかの珍しく使用されている属性は簡単に忘れられます。ここに5つの実用的だがあまり知られていないCSSプロパティがあります：

1. テキストケース変換（テキストトランスフォーム）：このプロパティは、HTML要素テキストのケースを変更するために使用され、HTMLコードを変更せずにデザイナーがスタイルを簡単に調整できるようにします。主な値には、capitalize（capsular）、lowercase（小文字）、uppercase（capsular）、none（変更なし）が含まれます。 IEブラウザーがfont-variantに設定されている場合、small-caps値のパフォーマンスは異なる場合があることに注意してください。 none

2. 文字間隔と単語間隔： HTMLでページテキストを書くことは、メンテナンスが容易であり、SEOを助長します。 キャラクター間隔（Px、em、ex、％など）を調整できます。たとえば、letter-spacingh2 { letter-spacing: 0.1em; }類似していますが、単語間隔に作用します。 word-spacing

例：

広い文字間隔のタイトル（0.1em）
狭い文字間隔のタイトル（-0.1em）

3. Text-Indent：テキストブロックの最初の行の左インデント（またはtext-indentが「rtl」に設定されているときの右インデント）を定義します。たとえば、direction。 p { text-indent: 10px; }も同様の効果を達成することができますが、paddingは要素の幅に影響を与えず、以下などのIE互換メニューなどのシナリオで非常に役立ちます。 text-indent

ul#menu li a {
    display: block;
    width: 100%; /* IE hasLayout applied */
    text-indent: 10px;
}

4. テーブル幅（テーブルレイアウト）を修正：

   テーブルは引き続きテーブルデータに使用されますが、ブラウザがデフォルトで「auto」になると、列の幅をスタイリングするのが難しい場合があります。セルのテキストがより多くのスペースを必要とする場合、自動アルゴリズムが指定したテーブル幅を上書きする場合があります。ブラウザが指定したテーブル幅に準拠するように強制するようにを「固定」に設定します。 table-layout table-layout

5. ホワイトスペースの取り扱い：

   ブラウザがHTMLで白人をどのようにレンダリングするかを決定します。クロスブラウザーのサポートは不均一ですが、次のプロパティは良好なプロパティと互換性があります：（ホワイトスペースは単一の文字に折りたたまれ、必要に応じてニューラインは単一の文字に折りたたまれますが、ラインブレークは抑制されます）、white-space normal nowrap pre コードスニペットをレンダリングするときは

が不可欠ですが、他の状況でも役立ちます。たとえば、「固定」に設定されている

のテーブルで：

white-space table-layout

すべての行を一貫したテキストにしたい場合（たとえば、JSプロンプトボックスを使用してフルテキストを表示する）、CSSの高さをtrまたはtd要素の設定は無効ですが、white-space：

ul#menu li a {
    display: block;
    width: 100%; /* IE hasLayout applied */
    text-indent: 10px;
}

リファレンス：

オペラママプロジェクト（Web構造検索エンジン）
• FAQ これらの属性を理解することで、ユニークなスタイルとエフェクトを提供するWeb開発スキルを大幅に向上させることができ、共通の属性が解決できない設計上の問題を解決し、より魅力的なWebサイトを作成します。

CSSの「CH」ユニットとそれを使用する方法は何ですか？ ユニットは、現在のフォントの「0」文字の幅を表し、テキストサイズでスケーリングする幅またはマージンを設定するために使用されます。

• CSSの「calc（）」はどのように機能しますか？

  関数を使用すると、計算を実行してCSS属性値を決定できます。

• CSSの「CurrentColor」キーワードとの使用方法は何ですか？ ch

  キーワードは、要素の現在の色値を指します。これは、要素の
属性値に相当します。

• calc()

  CSSの「オブジェクトフィット」属性はどのように機能しますか？
• プロパティは、コンテナに合うように画像またはビデオのサイズ変更方法を指定します。

  currentColorcolorCSSの「ライティングモード」属性との使用方法は何ですか？

プロパティブロック内のテキストの流れの方向を指定します。これは、垂直テキストを作成したり、左から左の執筆言語でテキストの方向を変更するために使用されます。

• object-fit

  CSSの「タブサイズ」属性はどのように機能しますか？
• 属性タブ文字の幅を指定し、デフォルト値は8スペースです。

  writing-mode

  CSSの「サイズ」属性とそれを使用する方法は何ですか？
• 属性により、ユーザーは要素のサイズを変更できます。

  tab-size

  CSSの「アウトラインオフセット」属性はどのように機能しますか？
• プロパティアウトラインと要素のエッジまたは境界線の間のスペースを指定します。

  resize

  CSSの「すべて」属性とそれをどのように使用するか？
• プロパティは、すべてのCSSプロパティをリセットする略語プロパティです（

  およびを除く）。 outline-offset

以上が5つのまったく使用されていないCSSプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。