CSSを梳くテキストは、知識のポイントを知っている必要がある #CSS

この記事では、CSSが知っておくべき主な櫛は、ああ更新を追加していきます！長文注意！おそらく今までで一番長いです。

CSS

導入方法にはどのようなものがありますか？リンクによる紹介と@importによる紹介の違いは何ですか？

CSSの導入方法には、 インライン、埋め込み、外部、インポートの4種類があります。
cssを読み込むだけでなく、rss、rel、その他の属性を定義することができます。
importは cssによって提供され、cssを読み込むためにのみ使用できます。
ページがロードされると、リンクも同時にロードされますが、@importはページがロードされるまで待つ必要があり、その後再度ロードされると、スタイルページがない場合があります。

Styleタグを本文の後に書く場合と、本文の前に書く場合の違いは何ですか？

一般的に、ページはトップダウンで読み込まれます。スタイルを最初に読み込むために、style タグは body に配置されます。
それがbodyタグの後に書かれている場合は、html文書の構文解析の方法によって行にブラウザのために、構文解析時にスタイルシートに書かれた文書の末尾に書き込むには、ブラウザがレンダリングを停止する原因となり、スタイルシートの読み込みと構文解析が再レンダリングを完了するのを待って、FOUCの現象の下でIEのウィンドウで発生する可能性があります。FOUC 現象は、Windows IE で発生する可能性があります、

FOUC（Flash of Unstyled Content）とは？ FOUCを回避する方法

CSSのインポートに@importを使用すると、一部のページでIEで奇妙な現象が発生することがあります。スタイルのないページのコンテンツが一瞬ちらつきながら表示される現象で、「ドキュメントスタイルの一時的な無効化」、略してFOUCとして知られています。
原因: スタイル・シートが構造的な html よりも後に読み込まれると、ページのレンダリングはスタイル・シートが読み込まれた時点で停止します。ページを再レンダリングする前にスタイルシートがダウンロードされ、解析されるのを待つと、短時間のスプラッシュ画面が表示されます。
解決策： 間に or 要素を追加するだけです。

CSS

CSS セレクタは上から下へ、右から左へと解析されます。

継承可能なスタイル：font-size、font-family、color、ul、li、dl、dt、dd；
継承不可能なスタイル： border、padding、margin、width、height

CSSセレクタの種類

id セレクタ
- 指定されたユニークな id 番号に基づいてラベルオブジェクトを素早く取得します。
- ラベルラベルの for 属性として使用される値: userid: は、このラベルラベルがクリックされたとき、userid の id を持つラベルにフォーカスが当たることを示します。
クラスセレクタ
ラベルセレクタ
隣接セレクタ
- 直接隣接要素セレクタ
- 通常の隣接要素セレクタ
サブセレクター
子孫セレクタ...
ワイルドカードセレクタ
属性セレクタ
擬似クラスセレクタ
擬似要素セレクタ
グループ化セレクタ

CSSセレクタの優先順位

優先順位の高い順から!important > インラインスタイル > IDセレクタ > クラスセレクタ > タグセレクタ > ワイルドカードセレクタ > 継承
優先順位付けアルゴリズム
- 要素セレクタの重み
  - 要素タグ:1
  - classセレクタ: 10
  - idセレクタ：001
  - インラインスタイルの最大値：0010
- 継承によって得られるスタイルの優先順位は最も低くなります。
- 同じ重みを持つ複数のCSSセレクタの優先順位を比較すると、定義の位置がすべてを決定します。最高位から最低位まで6段階あります：

 1.  <head/>のタグ<style/>で定義されたCSSが最も優先される。
 2.  <style/>のタグ@import スタイルシートの導入が定義された。
 3.  <link/>タグによって導入されるスタイルシートの定義。
 4.  <link/>タグの中でスタイルシートによって導入された@import スタイルシートの定義をインポートする
 5. ユーザー設定。
 6. ブラウザのデフォルト。

同じ場所で最も近いスタイル定義

CSS擬似クラスと擬似要素

CSS

::selectionは 、ユーザーによって選択された要素の部分を選択します。
:first-line は要素の最初の行を選択します。
:first-letter は要素の最初の文字を選択します。
要素の後に内容を追加します。
beforeは 要素の前に内容を追加します。

CSS

:root ドキュメントのルート要素を選択します。これは html 要素に相当します。
子要素を持たない要素を選択します。
target 現在のアクティビティのターゲット要素を選択します。
not(セレクタ) セレクタ要素以外の要素を選択します。
使用可能 なフォーム要素を選択します。
disabled 無効にするフォーム要素を選択します。
選択されたフォーム要素を選択します。
first-child 現在のセレクタの下にある最初の要素を選択します。
last-childは first-childの逆で、現在のセレクタの下にある最後の要素を選択します。
only-child は、唯一の子要素を選択します。この擬似クラスは、要素の親に子要素が 1 つしかない場合に有効になります。要素に兄弟がある場合、その要素にはこの擬似クラスは適用されません。
only-of-typeは 、特定の型の唯一の要素を選択します。この擬似クラスは、ある要素が、その親要素の中に現在の型の要素を1つだけ持つ場合に有効になります。この擬似クラスは、それ自身と同じでない限り、親要素内に他の要素を持つことを許します。

静的擬似クラス

linkは「ハイパーリンク」にアクセスされていないことを示します。
:visited は、この「ハイパーリンク」が訪問されたことを示します。

動的擬似クラス

:focusは、その要素が入力「フォーカス」を持っていること、つまりキーボード入力を受け付けるか、何らかの方法でアクティブにできることを示します。
:hover は、マウスが要素の上に乗ったときに、それに応じて外観を変更できることを示します。
:activeは、ユーザーがハイパーリンクにカーソルを合わせ、マウスがクリックされるとリンクが "activate "されるなど、ユーザー入力によって要素が "activate "されることを示します。

擬似クラスと擬似要素の基本的な違い

新しい要素を生み出すのでしょうか。
その意味を模倣するという観点から、擬似要素を識別するために新しい要素を追加する必要がある場合、擬似要素は擬似クラスであり、逆に、既存の要素にカテゴリーを追加するだけで済む場合、擬似クラスは擬似クラスです。
擬似要素はセレクタの中で一度だけ、しかも最後だけに出現させることができます。
一方、擬似クラスは、数値的な制限がなく、実際のクラスと同じようにクラスとして機能し、互いに排他的な擬似クラスでない限り、同じ要素で同時に使用することもできます。
擬似クラスは、:first-childにシングルコロンを使い、擬似要素は、::first-lineに2つのコロンを使います（後方互換性のために、擬似要素のセレクタは、シングルコロンとダブルコロンの両方でブラウザで利用できるようになりました）。

CSS

ボックスモデルの分類

IEボックスモデル
- width = border + padding + content
- ボックスの幅= width + margin
W3Cボックスモデル
- width = content
- ボックスの幅= width + padding + border + margin

変換ボックスモデル

CssのデフォルトのボックスモデルはW3Cのボックスモデルです。

box-sizing: content-box; // W3Cボックスモデルの標準
box-sizing: border-box; // IEボックスモデル・スタンダード

幅のあるボックス

clientWidth = width+左右のパディング
offsetWidth = width + 左右のパディング+ 左右ボーダー
scrollWidth: 指定されたラベルのコンテンツレイヤーの真の幅を取得します。

境界線の崩壊

CSSにはマージン・コラプス（margin collapse）、あるいはボーダー・コラプス（border collapse）、ボーダー・オーバーラプス（border overlap）があります。

外余白のマージンは、通常のドキュメントフローにおけるブロックボックスの垂直方向の外余白に対してのみ発生します。インライン・ボックス、フロート・ボックス、絶対配置の間の外側のマージンはマージされません。

横並びDIVの境界線の折りたたみ

横並びの2つのDIVブロックの場合、上のDIVのmargin-bottomと下のDIVのmargin-topは折りたたまれ、上下のDIVのマージンの最大値が表示値となり、マージンは1つだけ設定されます。

要素ボックスの折りたたみ

ソリューション

親ボックスにボーダーを設定し、外側のレイヤーにボーダーを追加しても、実際には親ボックスと子ボックスにフィットしません。
親ボックスにオーバーフローを追加: hidden;
親ボックスのパディング値を設定します；
追加位置：親ボックスに固定；

負の値の役割

Negative marignは、要素の水平方向と垂直方向のセンタリングを行います。
負の記号は、リストの最初と最後にある余分な境界線を隠します。
テキストを隠すための負のテキストインデント
負のz-indexは、文脈のカスケード順序に参加します。
左、右、上、下でのポジショニング

position

static(コモン・ストリーム・ポジショニング（Common Stream Positioning)

デフォルトポジショニング

relative(相対ポジショニング)

この要素をこの要素の左上隅からの相対位置に配置します。この要素は position が relative に設定されている必要があり、top, left, bottom, right はすべて値を持つことができます。
位置決め後に位置が移動することがありますが、この要素は文書の流れから外れることはなく、元のページ空間を占めたままです。

absolute(絶対ポジショニング)

先祖要素に相対配置がない場合は、デフォルトでボディに相対配置されます。
要素は、通常のフローで元々生成されたボックスの種類に関係なく、ブロックレベルのボックスを生成するように配置されます。
絶対位置決めはドキュメントの流れから外れており、位置決めされていない要素の上を押すフロート位置決めと同じ効果があります。

固定

絶対位置決めと似ていますが、ブラウザウィンドウからの相対位置決めです。

inherit

親要素の position 属性の値を継承します。

sticky

float

left（左フロート）とright（右フロート）の2つの値があります。
フローティングボックスは、その外縁が包含ボックスまたは別のフローティングボックスの境界に接するまで、左または右に移動することができます。
フローティングボックスは文書の通常のフローの中にありませんので、文書の通常のフローの中にあるブロックボックスは、フローティングボックスが存在しないかのように動作します。

Pros

floatの最初の利点は、イメージが混在している場合に、イメージの周りのテキストをfloatにできることです。また、要素をフロートさせると、幅を設定できるなど、ブロックレベル要素の特性をいくつか持っていますが、inline-blockとはまだいくつかの違いがあります。1つ目は水平方向のソートについてで、floatはinline-blockの方向が固定されているため、その方向に設定することができます。空白の問題があります。

欠点

最も明らかな欠点は、フローティング要素が文書フローから外れると、親要素を保持できなくなり、親要素の高さが0に崩れる（ボックス・コラプス）可能性があることです。

注意: 要素を float に設定した後、その要素の表示値は block に変わります。

クリアフロート

ボックスのサイズは死ぬまで書き込まれ、各ボックスの幅と高さは収まるまで固定されます。
親要素が高さを設定
親要素トリガーBFC

<div class="parent" style="overflow:hidden"> 
 <div class="f"></div>
</div>

追加タグ

<div class="parent"> //タグを追加し、clear属性を追加する
 <div class="f"></div> 
</div>
<div style="clear:both"></div>

フロートをクリアする擬似クラス・セレクタの作成

// :after 
.parent:after{ 
 content: ''; /* add子要素の内容を空にする*/ 
 display: block; /* add子要素をブロックレベル要素として設定する*/ 
 height: 0; /* 追加した子要素の高さを0にする*/ 
 visibility: hidden; /* 子要素を不可視に追加する設定*/ 
 clear: both; /* clear:bothを設定する*/
}
<div class="parent"> 
 <div class="f"></div>
</div>

display

none	要素は非表示になり、表示されません。
inline	要素はインライン要素として設定されます。
block	要素はブロックレベル要素として設定されます。
inline-block	要素はインライン・ブロックレベル要素として設定され、ブロックレベル要素の行を占有しません。
list-item	要素はリストとして表示されます。
table	要素の前後は改行され、ブロックレベルの表として表示されます。
flex	要素はフレックスレイアウトモードになります。

inlineブロック、ブロック、インラインブロックの3つの領域

blockブロックレベルの機能

ブロックレベルの各要素は新しい行で始まり、それ以降の要素は別の行で始まります。
要素の高さ、幅、行の高さ、上下のマージンを設定できます。
要素の幅は、幅が設定されない限り、それ自身の親コンテナの100%です。

inlineインライン機能：

などが1行にまとめられています；
要素の高さ、幅、上下のマージンが設定されていない場合があります；
要素の幅は、それが含むテキストやイメージの幅であり、変更することはできません。

inline-block

inline-blockインライン・ブロック要素は、インライン要素とブロック要素の両方の特徴を持っています。
などが1行にまとめられています；
要素の高さ、幅、行の高さ、上下のマージンを設定できます。

display:inline-blockを使用することの問題点は何ですか？また、どのように修正できますか？

2つのインラインブロック要素を組み合わせると空白ができます。

空白の理由

要素はインライン要素として配置され、空白文字の要素の間にブラウザによって処理され、対処する方法の空白属性のCSSによると、キャリッジリターン改行で元のHTMLコードは、空白文字に変換され、フォントでは0ではありませんが、空白文字が長く、特定の長さなので、ギャップの要素の間にインラインブロックが表示されます。

ソリューション

子要素タグの終わりを次のタグの始まりと同じ行に書くか、すべての子要素タグを同じ行に書きます。
親要素のフォントサイズを0に設定し、子要素のフォントサイズを正しくリセットします。
子要素のfloat: leftの設定

flex

レイアウトは、コンテナ内のアイテムをより効率的にレイアウトし、整列させ、スペースを割り当てる方法を提供します。

コンテナのプロパティ

flex-direction** スピンドルの方向を決める**

flex-direction：行｜行戻し｜列｜列戻し；

flex-wrap**一方の軸が他方の軸に収まらない場合に改行を定義**。

flex-flow** flex-directionとflex-wrapの短縮形**

flex-flow: flex-direction||flex-wrap；

justify-content**コンテナがスピンドル上でどのように整列するかを定義します**。

justify-content：flex-start｜flex-end｜center｜space-between｜space-around；

align-items**コンテナの横軸の整列方法を定義します**。

align-content**複数の軸の整列を定義します。コンテナに軸が1つしかない場合、このプロパティは機能しません**。

プロジェクトのプロパティ

order 項目の順序を定義します。値が小さいほど順序が高くなり、デフォルトは 0 です。
flex-grow アイテムの拡大率を定義します。
flex-shrink アイテムのスケールを定義します。
flex-basisは 、余分なスペースを割り当てるときに、アイテムがどれだけのスピンドルのスペースを占めるかを定義します。デフォルト値は auto です。
align-selfは、align-items属性をオーバーライドして、個々のアイテムが他のアイテムと異なる配置を持つことを許可します。

flex: none | [ 'flex-grow' 'flex-shrink'? |'flex-basis'] を参照してください。

このプロパティは、2つのショートカット値を持っています: auto(1 1 auto) と none(0 0 auto)。

ブラウザは関連する値を推測するので、3つの別々の属性を書くよりも、この属性を使用することをお勧めします。

overflow

scroll: スクロールバーを表示します。
auto: 子要素の内容が親要素の内容より大きい場合にスクロールバーが表示されます。
visible: オーバーフローの内容が親要素の外側に表示されます。
hiddenオーバーフロー時に非表示

実現方法：1行テキストオーバーフロー＋...

white-space: nowrap; /* まず、テキストを強制的に改行しないようにする；*/ 
overflow: hidden; /*次に、オーバーフローを隠す；*/ 
text-overflow: ellipsis; /*最後に、オーバーフローテキストにはellipsis省略記号を代わりに使おう。*/

フルスクリーンスクロールの仕組みどのようなCSSプロパティが必要ですか？

原則

回転マップと同様に、全体的な要素は、5つのフルスクリーンページが表示される必要があると仮定して、配置されている、高さが500％になりますが、唯一の100％を表示することができ、コンテンツの残りの部分は、トランスフォームを介してY軸の位置決めすることができ、また、マージントップを介して達成することができます。

css属性に関わること

overflow:hidden｜transition:すべて 1000ms ease

BFCブロックレベルのフォーマットコンテキスト

BFCとは？

BFC は、ブロッ）へ直訳します。
W3Cは、BFCを次のように定義しています：浮動要素や絶対位置要素、ブロック-レベル・ボックスでないブロック・コンテナ、"visible "でないオーバーフロー値を持つブロック-レベル・ボックスは、その内容に対して新しいBFCを作成します。
注：BFCは、内部がブロックレベルのボックスで構成された大きな箱と解釈できます。

BFCを発動させるには？

ルート要素 → ルート要素は最大のBFC
positionfixedまたはabsoluteに設定
displayinline-block、table-block、table-captionに設定します。
overflow値は表示されません
floatはnoneの値ではありません

BFCレイアウトのルール

内部ボックスは縦に1つずつ配置されます。
Box間の垂直方向の距離はマージンによって決定されます。同じBFCに属する隣り合う2つのBoxのマージンは重なります。
各要素のマージン・ボックスの左辺は、包含ブロックの左辺に接します。これはフロートがあっても同じです。
BFCの領域は外側のフロートボックスと重なりません。
BFCは、ページ上で孤立した独立したコンテナで、コンテナ内の子要素は外の要素に影響を与えません。逆もまた真です。
BFCの高さを計算する場合、フローティングエレメントも計算に含まれます。

BFCの役割と原則

適応型2カラムレイアウト
内部フロートのクリア
垂直マージンの重なりを防ぐ
BFC 内の要素と BFC 外の要素が互いに影響し合うことはないので、BFC の外側にフロートがあっても、それが BFC 内の Box のレイアウトに影響することはなく、BFC はフロートと重ならずに狭くなります。同様に、BFCの内側にフロートがある場合、外部要素のレイアウトに影響を与えないように、フロートの高さはBFCの高さ計算に含まれます。マージンの重なりを避けるのも同じことです。

IFCインラインフォーマットのコンテキスト

内部ボックスは、含むブロックの頂点から順番に配置されます。
内容が1行に収まらない場合は、「分割」されて次の行に開かれます。
水平マージンだけがボックスに残ります。
パディングとボーダーは行の高さをサポートしていません。

z-indexカスケード・コンテキスト

z-indexは、そのカスケード順序を設定することによって、要素間のオーバーレイ順序の問題を解決します。
要素が配置されていない場合、その要素に設定されたz-indexは無効になります。

要素がカスケードされた場合のカバレッジ関係の基準

同じ親要素と兄弟要素

特定されたz-index値のような、水平ラベリングの明確なカスケードがある場合。
- 大きな z-index は小さな z-index よりも優先されます。
- z-index が同じ場合、DOM フローの後方にあることが前方にあることを上書きします。
どちらの z-index も設定されていない場合、デフォルト値が使用され、一方が配置され、一方が配置されていない場合、配置されていない要素が優先されます。
どちらも位置が重ならない場合、DOMフローでは後ろが前を上書きします。

親子階層要素

親要素が異なれば、親要素が大きければ、子要素の大きさに関係なく、全体が視覚的なポイントに近くなります。
親要素のz-indexが有効な場合、子要素は親要素と同じになり、z-indexが設定されているかどうかに関係なく、親要素より上になります；
親要素のz-indexが失敗した場合、配置された子要素のz-index設定が有効になります。

カスケード・コンテキストの作成

ルートカスケードコンテキスト

これはページのルート要素を指し、スクロールバーのデフォルトの起点要素です。このため、left/topのような値で位置決めされるとき、他の位置決め要素の制約がなければ、絶対位置決めされた要素はブラウザ・ウィンドウに対して相対的に位置決めされます。

伝統的なカスケード・コンテキストによる要素の配置

CSS3とカスケード・コンテキストの新時代

新しいプロパティをもたらしただけでなく、CSS3の登場は過去のルールの多くにも挑戦しました。例えば、CSS3のtransformがposition:fixedポジショニングのオーバーフロー非表示に与える影響などです。そして、ここでは、カスケードコンテキストのピースの影響がより広範かつ大きくなっています。

これがその方法です：

CSSマネジメントプログラム

ITCSS

ITCSS では、スタイルファイルの構成を標準化することで、プロジェクトで増え続けるセレクタの特殊性に対応しています。次の逆三角形をご覧ください。各レイヤーはスタイルの概念構造を表しています：

Settingsグローバル変数、設定スイッチ
Tools: ミックスイン, 関数
Genericグラウンドゼロのスタイル
Baseクラス化されていないHTML要素
Objects: コスメティックを使わないデザインパターン
Componentsデザインされたコンポーネント
Trumps: ヘルパー, オーバーライド

セレクタの特定性が高まる一方で、トップダウンからセレクタが影響する DOM は少なくなっていきます。スタイルの変更は、他のスタイルに影響を与えたり、CSS スタイルの継承が崩れたりすることなく、関連する組織ファイルから簡単に行うことができます。

ネーミング・スキーム

解決策は主に紛争と再利用という2つの問題で、多くの解決策では、絶対的な長所と短所はありません。まだ自分のシナリオと組み合わせて決定する必要があります。

OOCSS

物体と向き合う際のルールは、「構造と外観の分離」「容器と中身の分離」という2つの原則に基づいています。
構造と外観の分離：以下のcssを使用する際のオブジェクトモデルの命名規則やモジュール化規則など、これに関するプロダクトとuiの思考を進めながら、反復可能なデザインユニットを追加します。
コンテナとコンテンツを分離：スタイルの使用が要素の位置に一意に一致しないことを意味し、どの位置でもこのスタイルを使用することができ、スタイルを適用しない場合は、デフォルトのスタイルを維持します。

SMACSS

smaとocssの間には多くの類似点がありますが、主にスタイルの分類において多くの違いがあります。それらは、基本、レイアウト、モジュール、状態、テーマです。
ocssと比較すると、実際には、設計思想のほとんどは同じで、cssのスコープとしてクラスに、他の違いは、皮膚と異なる記述規則の状態のためです。
- ベース：任意の位置に適用することができ、私はまた、グローバルスタイルと呼ばれる
- レイアウト：主にレイアウトの再利用率を向上させるために、レイアウトのさまざまな特性を達成するために使用されます。
- モジュール：設計のモジュール化、再利用可能なユニット、一般的にdom + cssのカップリングバインディング。
- 状態：特殊なパフォーマンスの特定の状態でレイアウトやモジュールを説明し、ここで私は "cssの禅の庭 "をお勧めすると思いますが、ドム構造の場合には変更されないまま、cssのスタイル改訂のスキニングを介して実現することができます。
- テーマ：状態と比較して、よりカスタマイズされ、いくつかの特別なモジュールのためになる、設定のテーマは、色、サイズ、相互作用のシリーズなど、重いデザイン、パラメトリックデザインのためのものです。

BEM

bemはスタイルを記述するためのブロック、エレメント、モディファイアの考え方です。特定のCSS構造を扱うのではなく、CSSの名前の付け方を提案するだけです。

ブロックレベル：属するコンポーネントの名前
Element: コンポーネント内の要素名
修飾子: 要素修飾子に関連付けられた任意のクラス

Style-Components

CSSを捨ててJavaScriptでCSSルールを書きましょう

CSS Modules

JSを使ってネイティブCSSファイルをコンパイルしてモジュール化

オンデマンドでロード

requireを使用.jsオンデマンドでCSSをロード
webpackCSSのオンデマンド読み込みの設定

CSSブラウザの互換性

ブラウザCSSスタイルの初期化

cssのデフォルトスタイルはブラウザごとに異なるため、最も簡単で効果的な初期化方法は、ブラウザによって表示が異なる場合に備えて、すべてのCSSを開始する前にmarinとpaddingの両方を0に設定することです。

ブラウザのプライベートプロパティ

多くの場合、CSSプロパティの前に-webkit-、-moz-、-ms-などの接頭辞を付けますが、これらはブラウザのプライベート属性です。プライベート属性を付ける理由は、HTMLとCSSの標準化団体であるW3Cの動きが非常に遅れているためです。
通常、W3Cの組織のメンバーが新しい属性、例えば角丸のborder-radiusを提案し、誰もがそれを良いと思うのですが、W3Cが標準を策定し、レビューなどの非常に複雑なプロセスを経なければなりません。そして、ブラウザベンダーのマーケティング時間はタイトで、プロパティが十分に成熟していれば、サポートするブラウザに追加されます。

将来、W3Cが標準を発表する際に変更されることを避けるため、-webkit-border-radiusのようなプライベート接頭辞を追加し、新しい属性にあらかじめ対応しておきます。W3Cが標準を発表し、 border-radiusの標準的な書き方が確立されると、新しいバージョンのブラウザは border-radiusをサポートするようになります。よく使われる接頭辞は

-mozはfirefoxブラウザの私有財産です。
-msはInternet Explorer Private Attributeの略です。
-webkitクロムを代表して、サファリ私有地
-oオペラ私有財産を代表して

プライベート属性の書き順には注意し、標準的な書き方を最後に、互換性のある書き方を最初にしてください。

 -webkit-transform:rotate(-3deg); /*クローム/サファリ用*/ 
 -moz-transform:rotate(-3deg); /*Firefox用*/ 
 -ms-transform:rotate(-3deg); /* */ 
 -o-transform:rotate(-3deg); /*オペラのために*/ 
 transform:rotate(-3deg);

CSS hack

異なるブラウザや異なるバージョンに対して、特定のCSSスタイルを記述する必要がある場合があります。このように、異なるブラウザや異なるバージョンに対して適切なCSSコードを記述する作業をCSSハックと呼びますが、その記述方法は、条件付きハック、プロパティレベルハック、セレクタレベルハックの3種類に大別されます。

自動化プラグイン

Autoprefixer はブラウザ接頭辞を自動的に管理するプラグインで、CSS ファイルを解析し、CSS コンテンツにブラウザ接頭辞を追加します。
リソースビルダーにAutoprefixerを追加すると、CSS接頭辞に関することを完全に忘れて、最新のW3C仕様に従って普通にCSSを記述することができます。プロジェクトが古いブラウザをサポートする必要がある場合は、ブラウザのパラメータ設定を変更することができます。
現在、webpack、gulp、grunt用のプラグインがあるので、CSSの互換性で時間を無駄にすることはありません。

一般的なCSS互換性の問題とは

ブラウザによってタグのデフォルトのpadding/marginが異なるため、cssスタイルを初期化することで解決できます *{ margin:0;padding:0px; }。
IE6両建て証拠金BUG
IE6,IE7のheightタグは、overflow:hidden;またはline-heightのline-heightを設定のheightより小さく設定することで、設定のheightより小さくなります。
IE では、カスタム属性を取得するために get regular attribute メソッドを使うか、カスタム属性を取得するために getAttribute() を使うことができます。
ハイパーリンクが訪問された後、hoverスタイルは表示されません。なぜなら、クリックされ訪問されたハイパーリンクスタイルは、もはやhoverとactiveを持たないからです。
IEでは、イベントオブジェクトはx,y属性を持ちますが、pageX, pageY属性は持ちません。

CSS最適化とパフォーマンス向上

CSSファイルをページ上部に配置することで、複数のCSSをマージし、httpリクエストを最小限に抑えることができます。
遷移制約の回避、子孫セレクタの回避、連鎖セレクタの回避、複数型セレクタの回避
不要な名前空間の回避、不要なスタイルの重複の回避、空のCSSルールの削除
意味的に意味のある名前を使用し、コンパクトな構文を使用します。
の使用は避けましょう。!important
可能な限りルールを合理化し、可能な限り異なるクラスの重複するルールを統合し、解析エラーを修正します。
display属性の正しい使い方
- width,height,margin,padding,floatはinlineの後に使ってはいけません。
- inline-blockの後にfloatを付けてはいけません； blockの後にvertical-alignを付けてはいけません。
フロートの乱用禁止、ボックスモデルのルール順守
ウェブフォントを乱用しない、フォントサイズを宣言しすぎない、h1-h6 の定義を重複させない、h1-h6 のスタイルを定義しすぎない。
値が 0 の場合、単位は必要ありません。
各種ブラウザの接頭辞を標準化

WEB標準とW3C

構造上の要件について：

Canonicalタグは、検索エンジンのクロール効率を向上させ、SEOに役立ちます。

閉じるタブ
タグ文字の小文字
タブを任意に入れ子にすることはできません。

CSSとJSのために：

外部リンクされたCSSスタイルシートやJSスクリプトを使用するようにしてください。また、構造、表示、動作を3つのブロックに分け、仕様に準拠します。ユーザーエクスペリエンスを向上させるために、ページのレンダリング速度を上げることも重要です。
構造とパフォーマンスの分離を確実にするために、インラインスタイルの使用を減らすようにしてください。ラベルのidとclass、その他の属性の命名は、ラベルの意味を知るためにテキストを見るために行われるべきであり、ラベルが少ないほど、読み込みが速くなり、ユーザーエクスペリエンスが高くなります。同時に、コードのメンテナンスが容易になり、改修が容易になります。
内容を変更することなくコピーしたまま同じバージョンを印刷することができ、ウェブサイトの使い勝手が向上します。

いくつかの質問

Q1: positionがdisplay、overflow、floatの上に重なった場合はどうなりますか？

display: 要素に生成するボックスの種類を指定します。
position: 要素の配置タイプを指定します。
float: 要素が浮く方向を定義します。

Q2：display:noneとvisibility:hiddenの違いは何ですか？

display:noneは対応する要素を非表示にし、ドキュメントレイアウトにスペースを割り当てなくなります。
visibility:hiddenは対応する要素を非表示にし、ファイルレイアウトの元のスペースを保持します。
前者は要素とその子孫を非表示にします。後者は継承され、子孫は非表示のままですが、個別に visibility: visible に設定することができます。

Q3: border:none;とborder:0;の違いは何ですか？

パフォーマンスの違い：

{border: 0;}: borderを0ピクセルに設定してもページには表示されませんが、borderのデフォルト値によって理解され、ブラウザはborder-width/border-colorをレンダリングします；

互換性の違い：

{border:none;}ボーダーが "none "の場合、IE6/7では無効のようです。ボーダーが "0 "の場合、ボーダーはまだそこにあり、"none "よりも効果的に感じます。ボーダーが "0 "の場合、"none "よりも効果的に感じられ、どのブラウザも一貫してボーダーを非表示にしています。

Q4px| em| REM 何が違うの？?

px

ピクセル。長さの相対単位。ピクセル px はモニタ画面の解像度に対する相対値。

em

em は親要素のフォントサイズを継承します。

bodyセレクタでFont-sizeを宣言=62.5%
元のpx値を10で割り、単位をemに置き換えます；
拡大されたフォントの em 値を再計算します。フォントサイズの重複宣言を避けてください。

rem

HTMLのルート要素だけに相対remを使用します。相対的なサイズと絶対的なサイズの両方の組み合わせの利点は、ルート要素を変更するだけで、すべてのフォントのサイズを比例して調整するだけでなく、レイヤー合成によってフォントサイズの連鎖反応を避けるために行うことができます。

EX

exは相対的な長さの単位で、1exはあるフォントの小文字 "x "の高さと定義されています。したがって、この値はフォントによって異なります。
しかし、多くのブラウザはexの高さの値を内蔵しておらず、単にemの値とその半分をexの値として受け取ります。したがって、一般的にexを長さの単位として使うことは推奨されません。どのフォントの単位を使うかは、プロジェクト次第です。ユーザーが最新のブラウザを使っている場合はremを、互換性が気になる場合はpxを、あるいはその両方を使うことをお勧めします。

Q5: ビューポートの単位 vw, vh, vmin, vmax

vw ビューポートの幅の1/100。
vh ビューポートの高さの1/100。
vmin vw とvhの最小値。
vmax vw とvhの最大値です。

Q6：RGBA()とopacityの違いは何ですか？

opacityは、要素とその中のすべてのコンテンツの透明度に作用します。
rgba() は要素の色または背景色に対してのみ動作します。

Q7: png, jpg, jpeg, bmp, gif これらのイメージフォーマットについて、それぞれどのような場合に使われるか説明してください。webpの知識はありますか？

pngPortable Network Graphicsは、可逆データ圧縮のビットマップファイルフォーマットです。利点は、圧縮率が高い、発色が良いことです。ほとんどの場所で使用できます。
jpgは、写真に使用される歪み圧縮方式で、階調や色の変化を滑らかにするのに適した破壊的圧縮です。www上では、写真の保存と転送に使用されるフォーマット。
gifは8ビットカラーでイメージを忠実に再現するビットマップファイルフォーマットです。アニメーション効果も得られます。
bmpの長所：高品質のイメージ; 短所：大きすぎる; シナリオ：Windowsのデスクトップの壁紙；
webp形式は2010年にGoogleが導入したイメージ形式で、圧縮率はjpgの2/3、サイズはpngより45%小さいです。デメリットは、圧縮に時間がかかること、互換性が良くないことで、現在Googleとoperaがサポートしています。

Q8: 要素を隠したり透明にする方法は？

opacity: 0; //1透明度は0、全体は見えない；
visibility: hidden; //2これは上と似ている；
display: none; //3消え去れ、その地位を占めてはならない；
background-color: rgba(0,0,0,0.2); //4ただ背景色を透明にする

Q9: cssスプライトとは何ですか？どのように使うのですか？

CSSスプライトの基本原理は、サイトで使用するイメージの一部を1つのイメージに統合することで、サイトへのHTTPリクエスト数を減らすことです。
イメージはCSSのbackgroundとbackground-positionプロパティを使ってレンダリングされますが、これはタグが複雑になることを意味し、イメージはタグの代わりにCSSで定義されます。

Q10: プログレッシブ・エンハンスメントとグレースフル・デグラデーションとは何ですか？

作り上げる

これは、基本的な使いやすさから始め、低レベルのブラウザにおけるサイトのページの使いやすさとアクセシビリティを確保し、徐々に機能を追加してユーザー体験を向上させることを意味します。
基本的に、最初にマークアップ言語でページを書き、次にスタイルシートでページのスタイルを制御するといった日常的な開発プラクティスは、インクリメンタル・エンハンスメントの概念です。
その他にも、HTML5やCSS3などの新技術を使用し、高度なブラウザをターゲットとしたページのユーザーエクスペリエンスの豊かさを向上させるなど、より明白な行動が見られます。

エレガントな劣化

つまり、最新のテクノロジーを使って、高度なブラウザのための最もパワフルな機能とユーザー体験をまず構築し、その後、下位レベルのブラウザの制限によってサポートされない機能や体験を徐々に減衰させていくということです。
日常的な開発では、まずChrome用のページをコーディングし、次にIEの例外を修正したり、実装できないIE用の機能を削除したりするのが、スムーズな劣化の典型的な例です。

わけ

この2つの概念的なアプローチは、日常的な開発では以前からありましたが、「プログレッシブ・エンハンスメント（漸進的強化）」と「グレースフル・デグレード（潔い劣化）」という言葉が一般的になったのは、ここ数年のことです。
この2つのコンセプトは、HTML5とCSS3の文脈では特に重要です。新しい、そして進化する技術を、メインストリームのブラウザで基本的に使用可能で、高度なブラウザのエクスペリエンスを向上させるサイトを構築するためにどのように確実に使用するかという考え方は、開発プロセスで明確にする必要があります。

巨人の肩

ラスト

エラーを修正するために歓迎し、速やかに改訂されます参照してください！過去にウォームアップし、うまくいけば、すべてが自分の心に忠実であることができ、思考がそれらに戻ってくるでしょう。