12のあまり知られていないCSS事実-CSSチュートリアル-php.cn

12 Little-Known CSS Facts

12のあまり知られていないCSS事実

CSSは過度に複雑な言語ではありません。しかし、あなたが長年CSSを書いていたとしても、あなたはおそらくあなたが使用したことのないプロパティ、あなたが考慮したことのない価値、またはあなたが知らなかった仕様の詳細にまだ新しいことに出くわします。私の研究では、私は常に新しい小さな情報に出くわしたので、この投稿でそれらのいくつかを共有すると思いました。確かに、この投稿のすべてが即座に実用的な価値を持っているわけではありませんが、後で使用するためにこれらの一部を精神的にファイルすることができるかもしれません。

キーテイクアウト

CSSの色プロパティは、テキストだけではありません。また、不足している画像のALTテキストの色、リスト要素の境界線、順序付けられていないリストの箇条書き、順序付きリストの番号マーカー、およびHR要素にも影響します。

CSSの可視性プロパティは、「崩壊」するように設定できます。この値は、テーブルの行、テーブルロウグループ、テーブル列、テーブル列グループを除くすべての要素の「隠された」のように機能し、「表示：なし」に似たものです。ただし、「崩壊」のブラウザの処理は一貫性がありません

CSSのクリッププロパティは、絶対に配置された要素でのみ機能します。クリップを適用する要素は、絶対に配置するか、固定する必要があります。
以下のデモをご覧ください：
CodepenのSitePoint（@SitePoint）のペンCTWFGを参照してください

不足している画像に表示されたaltテキスト

リスト要素の境界線

順序付けられていないリストの弾丸（またはマーカー）

順序付きリストの数値

HR要素

興味深いことに、HR要素はデフォルトで色プロパティの値を継承しませんが、境界線 - 継承を使用して強制するように強制しなければなりませんでした。これは私にとって奇妙な振る舞いです。
これはすべて、仕様：

このプロパティは、要素のテキストの前景色を説明しています
コンテンツ。さらに、潜在的な間接値を提供するために使用されます
…色の値を受け入れる他のプロパティの場合

視認性プロパティの3番目のめったに使用されない値は崩壊します。これは、テーブル行、テーブル行のグループ、テーブル列、テーブル列グループを除くすべての要素に隠されたものと同じように機能します。これらのテーブルベースの要素の場合、崩壊の値はディスプレイと同様に機能するはずです。なしでは、崩壊した行/列が占めるスペースが他のコンテンツで占めることができます。

CSS-Tricks Almanacは、ブラウザの矛盾のために、これを使用しないことをアドバイスします。私の観察から

chromeでは、崩壊または非表示を適用しても違いはありません（このバグレポートとコメントを参照）

CSS2.1では、バックグラウンドショートサンドのプロパティには、背景色、背景画像、背景回復、背景攻撃、および背景ポジションの5つのロングハンド値が含まれていました。 CSS3以降では、合計で最大8つの場合、さらに3つが含まれています。値のマップは次のとおりです。
フォントの速記と国境と境界線の書き込みと同様に、フォワードスラッシュに注意してください。スラッシュを使用すると、ブラウザをサポートするポジションの後、バックグラウンドサイズの値を含めることができます。さらに、バックグラウンドオリジンとバックグラウンドクリップについて最大2つのオプションの宣言もあります。

codepenのSitePoint（@sitepoint）によるペンの新しい背景の値を参照してください。

ブラウザのサポートに関しては、これらの新しい値はすべての最新のブラウザで正常に動作しているようですが、優雅に劣化するため、サポートされていないブラウザに良いフォールバックを提供する必要がある可能性があります。

4。クリッププロパティは、絶対に配置された要素

でのみ機能します

バックグラウンドクリップといえば、以前にクリップも見たことがあります。このように見えます：

<span>background: [background-color] [background-image] [background-repeat]
</span>            [background-attachment] [background-position] <span>/ [ background-size]
</span>            [background-origin] [background-clip]<span>;</span>

ログイン後にコピー

これは、指定された場所で要素を「クリップ」します（ここで説明します）。唯一の注意点は、クリップを適用する要素を絶対に配置する必要があることです。したがって、これを行う必要があります：

<span><span>.example</span> {
</span>  <span>background: aquamarine <span>url(img.png)</span>
</span>              no-repeat
              scroll
              center center <span>/ 50%
</span>              content-box content-box<span>;
</span><span>}</span>

ログイン後にコピー

下のデモでクリップがどのように無効になっているかを見ることができます。

CodepenのSitePoint（@SitePoint）のペンSifjuを参照してください

要素を位置に設定することもできます。固定。仕様に応じて、固定位置要素は「絶対に配置された」要素としても資格があるためです。

5。垂直パーセンテージは、高さではなく、コンテナ幅に関連しています

これは最初は少し混乱していますが、前に書いたことです。コンテナの幅に基づいて幅の割合が計算されることはわかっているかもしれませんが、上部と下部のパディングや上部と下のマージンなどのプロパティの割合は、高さではなくコンテナの幅に基づいて計算されます。

範囲スライダーで調整できる例を次に示します。そのため、効果を確認できます。

CodepenのSitePoint（@SitePoint）のペンQLNPMを参照してください

内側のボックス（上部と下部のパディング、および下のマージン）に3つの「垂直」パーセントが宣言されていることに注意してください。スライダーが移動すると、コンテナの幅のみが変更されます。しかし、ページの出力が示すように、他の値はこれに応じて変化し、これらの値は、パーセンテージとして宣言された場合、コンテナ幅に基づいていることを示しています。

6。国境の財産は、一種の開始

のようなものです

ある時点でこれをすべて行いました：

国境の財産は、国境スタイル、国境幅、および国境色を設定する速記の財産です。すべてが1回の宣言です。

しかし、国境特性が表す各プロパティそれ自体が速記のプロパティであることを忘れないでください。したがって、境界線のみを宣言できます：

これにより、4つの境界のそれぞれに異なる幅が設定されます。そして、このひどいデモに示されているように、ボーダーカラーやボーダースタイルにも同じことが当てはまります：

CodepenのSitePoint（@SitePoint）によるペンの複数のボーダーの速記を参照してください。さらに、これらの各プロパティは、国境左スタイル、ボーダートップワイド、ボーダーボトムカラーなど、さらに分解できます。

しかし、キャッチは、通常の境界の速記を使用して異なる側面に異なる値を設定できないということです。だから、それは速記の内側の速記の内側ですが、正確ではありません。

7。テキスト装飾プロパティは現在、速記

になりました

私はこのリストに何かがあなたの心を吹き飛ばすことを知っていました。

これは、仕様に従って標準になりました：

<span>background: [background-color] [background-image] [background-repeat]
</span>            [background-attachment] [background-position] <span>/ [ background-size]
</span>            [background-origin] [background-clip]<span>;</span>

ログイン後にコピー

このプロパティは、3つのプロパティを表しています。テキストデカレーションライン、テキストデカールカラー、テキストデカレーションスタイル。

残念ながら、Firefoxはこれらの新しいプロパティをサポートする唯一のブラウザであり、（後方の互換性のために、私はまだ速記していないと仮定しています。

firefox：

で以下のデモを試してください

CodepenのSitePoint（@SitePoint）のペンHAPGBを参照してください。

デモは、これを行うためにロングハンド値を使用しています。これは最終的には厳しいものになります。現在、テキスト装飾に追加の値を見ているブラウザは、宣言全体を無効にします。これは明らかに後方互換性に適していません。

8。 Border-Widthプロパティは、キーワード値

を受け入れます

正確には地球の粉砕ではなく、これは新しいものではありませんが、標準の長さの値（5pxまたは1EMなど）に加えて、境界線のプロパティは3つのキーワード値を受け入れます。

実際、国境幅のプロパティの初期値は「中」です。以下のデモでは、「厚い」：

を使用しています

CodepenのSitePoint（@SitePoint）による「厚い」ペンの境界線キーワードを参照してください。

ブラウザがこれらのキーワード値をレンダリングする場合、仕様は特定の長さの値にマッピングする必要はありませんが、私が見ることができるものから、すべてのブラウザは1px、3px、および5pxを使用しているようです。

9。ボーダーイメージを使用していません

私はしばらく前にSitePointでCSS3 Border-Imageプロパティについて書きました。この機能は、IE10以下を除くすべての最新のブラウザでサポートされています。しかし、誰かが気にしますか？

それは本当にきちんとした機能のようで、流動的なボーダー画像を作成できるようにします。このデモのサイズ変更ハンドルを使用してテストします。

CodepenのSitePoint（@SitePoint）によるPEN BORDER-IMAGEデモを参照してください。

残念ながら、ボーダーイメージは、多くの人が使用していない斬新なもののようです。しかし、多分私は間違っています。実際のプロジェクトで使用されているボーダーイメージの例を知っている場合、または使用した場合は、コメントでお知らせください。私が間違っていたことを喜んで認めます。

10。空のセルのプロパティ

があります

これはIE8を含むどこでもサポートがあり、次のようになります：

<span>background: [background-color] [background-image] [background-repeat]
</span>            [background-attachment] [background-position] <span>/ [ background-size]
</span>            [background-origin] [background-clip]<span>;</span>

ログイン後にコピー

おそらくあなたが理解したように、それはHTMLテーブルに使用されます。それは、内容のないテーブルセルを表示するか非表示にするかをブラウザに伝えます。このデモのトグルボタンを試して、空セルプロパティの値を変更する効果を確認してください。

codepenのSitePoint（@SitePoint）によるペンの空セルのデモを参照してください。

この場合、私は境界線が見えるようにし、崩壊しないようにしなければならなかったので、細胞の境界の間にいくつかの間隔を追加する必要がありました。場合によっては、このプロパティには視覚的な効果はありません。これは、違いを生むためにテーブルに何かが表示される必要があるためです。

11。フォントスタイルのプロパティは、「斜め」の値を受け入れます

フォントスタイルのプロパティを見るたびに、「通常」または「斜体」の値で使用されます。しかし、あなたはそれに「斜め」の価値を与えることもできます：

codepenのSitePoint（@sitepoint）によるペンの斜体vs.斜めを参照してください。

しかし、それは正確に何を意味しますか？そして、なぜそれは斜体と同じように見えるのですか？

スペックは、値が「斜め」…

であると説明しています

「…斜めの顔としてラベル付けされたフォント、またはそうでない場合は斜体の顔を選択します。」

仕様内の「イタリック」の説明は基本的に同じです。「斜め」という言葉は、基本的には斜めのテキストを表すが、真の斜体ではないタイポグラフィの用語です。

CSSが斜めのテキストを処理する方法により、使用されているフォントに（仕様が説明されているように）斜めと識別されない場合を除き、イタリックと交換可能です。

実際に斜めの顔を持っているフォントを聞いたことがありませんが、私は間違っているかもしれません。私が行った研究から、フォントがイタリックと斜めの両方の顔を提供することは間違っているようです。なぜなら、斜めは真の斜体を持っていないフォント上のイタリックの偽物であると考えられているからです。

だから、私が間違っていない場合、これが意味するのは、フォントに真の斜体の顔がない場合、CSSをフォントスタイルに設定する：イタリックは実際にフォントをフォントスタイルとして表示する：斜め。

12。ワードラップは、オーバーフローラップ

と同じです

Word-wrapプロパティはあまり頻繁に使用されませんが、特定の状況では非常に役立ちます。よく使用される例の1つは、コンテナから脱出するのではなく、長い間壊れていないテキストの文字列（URLなど）が包むのを助けることです。例を次に示します：

これはもともとMicrosoftの作成であったため、このプロパティはIE5.5に戻るInternet Explorerを含むすべてのブラウザでサポートされています。

クロスブラウザーと、私が見ることができるものから、一貫したサポートにもかかわらず、W3CはWord-wrapをオーバーフローラップに置き換えることを決定しました。 Overflow-wrapはWord-wrapと同じ値を持ち、Word-wrapはオーバーフローラップの「代替構文」と見なされます。

いくつかの新しいブラウザはオーバーフローラップをサポートしていますが、古いブラウザはWord-wrapを正常に処理するため、気にすることは無意味に思えます。

すべての使用中のブラウザの自動更新時にオーバーフローラップの使用を開始できますが、それまでは、古い構文から変更するポイントはありません。

これらのうち何人があなたにとって新しいものでしたか？

この投稿から何かを学びましたか？そうだといい。おそらく経験豊富なCSS開発者は、上記のポイントのすべてではないにしても多くのことを知っていました。しかし、おそらくCSSに新しいものがこれらの恩恵を受けるでしょう。

これらのポイントのうちどれが読者に新しいかを見るのは興味深いでしょう。下にコメントを投稿してください（6/12、4/12など）という新しい数を教えてください。

ピックアップは、学習可能なメンバーシップを使用して、より多くのCSSヒントとヒントをロードします。

ジャンプスタートCSS

、

The CSSアンソロジーなどのベストセラーなど、数十冊の本やコースにアクセスできます。 CSS に関するよくある質問（FAQ） 一般的に知られていないCSSのユニークな特性は何ですか？CSS、またはカスケードスタイルのシートには、一般的に知られていないいくつかのユニークな特性があります。たとえば、CSSには「calc」と呼ばれるプロパティがあり、計算を実行してCSSプロパティ値を決定できます。これは、レスポンシブデザインに非常に役立ちます。あまり知られていないもう1つのプロパティは「CH」です。これは、文字を表し、使用されているフォントの「0」文字の幅の幅やその他の測定を設定するために使用できます。 CSSの「アニメーション」プロパティを使用すると、ほぼすべてのプロパティをアニメーション化できます。期間、タイミング機能、遅延、反復カウント、方向、充填モード、アニメーションの状態を制御できます。これは、Webサイトでのユーザーエクスペリエンスを強化するための強力なツールになります。

CSSの「継承」値は、プロパティが親要素から値を継承する必要があることを指定するために使用されます。これは、要素間で一貫性を確保したい場合、または冗長性を減らすことでCSSコードを簡素化する場合に役立つ場合があります。

CSSの「Z-index」プロパティの目的は何ですか？

CSSの「Z-Index」プロパティは、要素の積み重ね順序を制御するために使用されます。「Z-Index」値が高い要素は、「Z-Index」値が低い要素の上に表示されます。これは、複雑なレイアウトなどの重複する要素を扱う場合やモーダルまたはドロップダウンメニューを作成する場合に特に役立ちます。 CSSを使用して、テキストフィールド、チェックボックス、ラジオボタン、およびその他のフォーム入力の外観を制御できます。これは、ウェブサイト上のフォームのユーザビリティと美学を強化するための強力なツールになります。デフォルトでは、要素の幅と高さにはパディングと境界が含まれません。ただし、「ボックスサイジング」プロパティを「ボーダーボックス」に設定することにより、幅と高さの計算にパディングと境界を含めることができます。これは、画像の周りにテキストラップを作成したり、マルチコラムレイアウトを作成したりするのに役立ちます。 CSSの「VW」（ViewPort幅）および「VH」（ビューポートの高さ）ユニットを、ビューポートに比べてサイズ要素に使用できます。これは、さまざまな画面サイズに適応するレスポンシブなデザインを作成するのに特に役立ちます。