CSSは黒魔術ではありません

すべてのWebプログラマーは、時々CSSを作成する必要があります。 CSSに初めて出会ったとき、CSSを理解するのはナンセンスであることに気付くでしょう。 そして真実は-彼らは境界線を追加し、そこで色を変えました... JavaScriptは本当に複雑なものです。 CSSはそれに比べておもちゃです。







ただし、Web開発が進むにつれて、CSSに対する軽薄な態度は過去のものになります。 なんとも言えない奇妙なことに直面すると、CSSがどのように機能するか、その奥底で何が行われているかを正確に想像することができないことに気付くでしょう。 似たようなことが私にもありました。 勉強してから最初の数年、私はフルサイクルのJavaScript開発に従事し、時にはCSSに触れました。 私はいつも自分のパンがJavaScriptであると考えていました。



たとえば、 JavaScript Jabberに関する議論に参加しました。 昨年、私はフロントエンドに焦点を合わせることにしましたが、そのときから、例えば、JSコードと同じ方法でスタイルシートをデバッグすることができないことに気付きました。



CSSはしばしば冗談を言っていますが、十分に真剣に理解して理解しようとした人はほとんどいません。 ブラウザがCSSを処理する方法を考えて、問題に直面したときに意図的にエラーを検索したのは誰ですか？ 代わりに、Stack Overflowで利用可能な最初の回答からコードを取得し、さまざまな種類のハッキングを軽daしないでください。または、単に問題を無視してください。



その結果、ブラウザがスタイルで奇妙なことをするとき、開発者はあまりにも頻繁に手をすくめるだけです。 CSSは黒魔術に似ていると考える時です。 ただし、プログラマーはコンピューターが人間が作成したコマンドを解析および実行するマシンであることを知っています。この点で、CSSは私たちのお気に入りのJSと違いはありません。 もしそうなら、CSSは有意義かつ生産的に認識され、使用されます。



CSSの内部メカニズムの知識は、さまざまな状況で役立ちます。 たとえば、深刻なデバッグとWebページのパフォーマンスの最適化。 多くの場合、彼らはCSSについて話したり書いたりするとき、一般的な問題の解決に焦点を合わせます。 これがどのように機能するかについてお話したいと思います。

DOMとCSSOM

まず、ブラウザには、他のサブシステムの中でもJavaScriptエンジンとレンダリングエンジンがあることを理解することが重要です。 この場合、後者に興味があります。 たとえば、WebKit（Safari）、Blink（Chrome）、Gecko（Firefox）、およびTrident / EdgeHTML（IE / Edge）に関連する詳細について説明します。



ブラウザは、Webページを表示するプロセスで、ドキュメントオブジェクトモデル（DOM、ドキュメントオブジェクトモデル）およびスタイルシートのオブジェクトモデル（CSSOM、CSSオブジェクトモデル）の構築につながる一連のアクションを実行します。 簡略化されたこの一連のアクションは、次のように表すことができます。

• 変換 ：HTMLおよびCSSバイトをディスクから読み取るか、ネットワークからダウンロードします。
  
  
  
  
• トークン化 ：入力データストリームをフラグメントに分割し（例：開始タグ、終了タグ、属性名、属性値）、スペースや改行などの不要な文字を削除します。
  
  
  
  
• Lexing ：この手順はトークン化に似ていますが、ここでは各トークンのタイプが決定されます（たとえば、このトークンは数値であり、文字列リテラルであり、別のトークンは等値演算子です）。
  
  
  
  
• 解析 ：ここでは、システムは字句解析後にトークンのストリームを受け入れ、特定の文法を使用してトークンを解釈し、このストリームを抽象構文ツリーに変換します。

CSSおよびHTMLのこのようなツリー構造を作成した後、レンダリングエンジンは、それらに基づいて、レンダリングツリーと呼ばれるものを形成します。 これは、ドキュメントレイアウトを作成するプロセスの一部です。



レンダリングツリーは、ドキュメントの視覚的表現のモデルであり、ドキュメントのグラフィック要素を正しい順序で表示できます。 レンダリングツリーの構築は、次のアルゴリズムに従って実行されます。

• DOMツリーのルートから開始して、表示されているすべてのノードをトラバースします。
  
  
• 非表示のノードをスキップします。
  
  
• 表示されているノードごとに、CSSOMで対応するルールを見つけて適用します。
  
  
• コンテンツおよびスタイル用に計算された可視ノードを生成します。
  
  
• 最後に、画面に表示されるすべてのページ要素について、コンテンツとスタイルに関する情報の両方を含むレンダリングツリーを作成します。
  
  

CSSOMはレンダーツリーに大きな影響を与えることができますが、DOMツリーには影響しません。

レンダリング

レンダリングツリーとページレイアウトが作成された後、ブラウザは画面上に要素の表示を開始できます。 これが、このプロセスの外観です。

• ページレイアウトを作成します 。 このステップでは、要素のサイズと画面上の要素の位置を計算します。 親要素は子要素に作用できます。 時々、子供は親に影響を与えることができます。
  
  
  
  
• レンダリング 。 この段階で、レンダリングツリーは画像に変換されます。これは、画面に表示されるものの基礎となります。 これには、テキスト、色、画像、境界線、影の出力が含まれます。 通常、レンダリングは複数のレイヤーで実行され、ページのJavaScriptコードがDOMに影響する場合、ページを何度も再描画できます。
  
  
  
  
• レイヤーを平坦化します 。 この段階で、レイヤーがマージされて最終的な画像が形成され、画面に表示されます。 同時に、ページ要素は異なるレイヤーに表示できるため、レイヤーを正しい順序でまとめる必要があります。
  
  

ページのレンダリング時間は、レンダリングツリーの機能によって異なります。 さらに、要素の幅と高さが大きいほど、レンダリング時間が長くなります。



さまざまな効果を追加すると、ページのレンダリング時間が長くなる可能性があります。 要素のグラフィック表現は、オーバーレイコンテキストに従って、要素が相互に関連して配置されている順序で出力されます。 最初に、それらの要素は下に配置され、次に-上に配置されます。 後で、 z-index



プロパティについて説明しますが、これについて詳しく説明します。 視覚情報をよく理解している人のために、ページのグラフィカル表現を作成するプロセスの優れたデモを以下に示します。



ブラウザのページのグラフィック表現の出力については、グラフィックのハードウェアアクセラレーションもよく言及されます。 そのような場合、通常は層の縮小の加速を指します。 ビデオカードのリソースを使用して、Webページのコンテンツの出力を準備することについて話している。



ハードウェアアクセラレーションを使用してレイヤーを平坦化すると、プロセッサのみを使用する従来のアプローチと比較して、レンダリング速度が大幅に向上します。 これらすべてに関連して、 will-change



CSSプロパティを思い出すしかありません。CSSプロパティを上手に使用すると、ページの出力が高速化されます。 たとえば、CSS変換を使用する場合、 will-change



プロパティを使用すると、DOM要素が近い将来に変換されることをブラウザーに伝えることができます。 will-change: transform



ように見えます。 これにより、GPUはレイヤーのレンダリングと平坦化の操作を転送できるようになり、多くのアニメーション要素を含むページのパフォーマンスが大幅に向上します。 will-change: scroll-position



、 will-change: contents



、 will-change: opacity



、 will-change: left, top



を使用して、 will-change: scroll-position



パフォーマンスを改善できます。



一部のプロパティではページレイアウトが変更され、他のプロパティでは再描画しかできないことを理解することが重要です。 もちろん、パフォーマンスの観点からは、レイアウトを変更せずにページを再描画するだけで取得できるとより良いでしょう。



たとえば、要素の色を変更してもレイアウトは変更されず、要素の再描画のみが行われます。 ただし、要素の位置を変更すると、レイアウトが変更され、要素自体、その子、および場合によっては関連する要素が再描画されます。 DOMノードを追加すると、レイアウトの再カウントとページの再描画も行われます。 HTML要素のフォントサイズを大きくするなどの大きな変更により、レイアウトが変更され、レンダリングツリー全体が再描画されます。



あなたが私のような人なら、おそらくCSSOMよりもDOMに精通しているので、CSSOMに注意を向けましょう。 デフォルトでは、CSSはレンダリングをブロックするリソースとして扱われることに注意することが重要です。 これは、CSSOMの準備ができるまでブラウザがレンダリングしないことを意味します。



さらに、DOMとCSSOMの間に完全な対応関係がないことを理解する必要があります。 これらの構造の違いは、DOMに不可視要素、スクリプト、メタタグ、画面に表示されないサービス情報を含むタグなどが存在するためです。 CSSOMを構築する場合、ページのグラフィック表示には影響しないため、これらすべては考慮されません。



DOMとCSSOMのもう1つの違いは、CSSがコンテキストに依存しない文法を解析することです。 つまり、HTMLを解析してDOMを作成する場合のように、CSSを受け入れ可能な形式にするレンダリングエンジンにはコードがありません。



HTML要素を形成する文字を分析するとき、ブラウザは周囲の文字を考慮することを余儀なくされます。マークアップの一部の要素が欠落している可能性があるため、言語仕様だけでなく、エンジンを推測する必要があります。ページ。 したがって、より複雑なデータ処理アルゴリズムの必要性。



レンダリングについての議論を終えて、サーバーに保存された一連のバイトからデータ構造へのWebページのパスを簡単に検討し、それに基づいてそのグラフィカル表現が形成されます。



ブラウザーは、サーバーからページを要求するHTTP要求を作成します。 Webサーバーは応答を送信します。 ブラウザは、サーバーから受け取ったデータをトークンに変換し、トークンはDOMツリーとCSSOMツリーのノードに変換されます。 これらのツリーの準備ができたら、レンダリングツリーが構築され、それに基づいてページレイアウトが形成され、要素のレイヤーごとの描画とレイヤーのフラット化が実行されます。 結果は、画面に表示されるWebページです。

セレクターの特異性

ブラウザの仕組みを理解したところで、開発者が混乱する最も一般的なポイントをいくつか見てみましょう。 まず、セレクターの特異性について話しましょう。



非常に単純化されたセレクターの特異性は、カスケードCSSルールを正しい順序で適用することを意味します。 ただし、CSSセレクターを使用してタグを選択するには多くの方法があり、ブラウザーには特定のタグに割り当てるスタイルを決定する方法が必要です。 ブラウザも同様の決定を行い、各セレクタの特異度値を計算します。



セレクターの特異性インジケーターの計算は、多くのJavaScript開発者にとって混乱を招くため、これについて詳しく説明します。 次の例を使用します。 クラスcontainer



持つdiv



タグがあります。 別のdiv



このタグに埋め込まれ、そのid



はmain



です。 main



内には、aタグを含むp



タグがあります。

 <div class="container"> <div id="main">   <p>     <a href="">Hello!</a>   </p> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、答えを見ずに、以下のCSSを分析しa



タグ内のリンクテキストの色を言ってみてください。

 #main a { color: green; } pa { color: yellow; } .container #main a { color: pink; } div #main pa { color: orange; } a { color: red; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

たぶん赤？ それとも緑？ いや リンクは、1,1,1の特異性値を持つピンク色になります。 残りの結果は次のとおりです。

• div #main pa: 1,0,3
  
  
  
  
• #main a: 1,0,1
  
  
  
  
• pa: 2
  
  
  
  
• a: 1
  
  
  
  

これらの数値を見つけるには、次の計算を実行する必要があります。

• 最初の番号 ：IDセレクターの数。
  
  
  
  
• 2番目の番号 ：クラスセレクター、属性セレクター（例： [type="text"]
  
  
  
  、 [rel="nofollow"]
  
  
  
  ）および擬似クラス（ :hover, :visited
  
  
  
  ）の数。
  
  
  
  
• 3番目の数値 ：タイプセレクターと疑似要素の数（ ::before, ::after
  
  
  
  ）
  
  

たとえば、次のようなセレクターを見てください。

 #header .navbar li a:visited
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その特異性の値は1,2,2です。 1つのID、1つのクラス、1つの擬似クラス、および2つの要素タイプセレクター（ li



およびa



）があります。 この値は、1,2,2-122の代わりに、コンマがないように読み取ることもできます。コンマは、3桁の10進数ではなく、3桁の数字があることを強調するためのものです。 これは、0,1,13のような理論的に可能な結果にとって特に重要です。 これを0113に書き換えると、元の状態に戻す方法が明確になりません。

要素の配置

次に、ポジショニングについてお話します。 これまで見てきたように、要素の配置とページレイアウトの作成は密接に関連しています。



レイアウトの構築は、スタイルのグローバルな変更の結果としてレンダリングツリー全体に対して、またはツリーの一部のみに対して、変更が再描画が必要な特定の要素にのみ影響する場合に呼び出すことができる再帰プロセスです。 レンダリングツリーに目を向け、それが絶対配置を使用していることを想像することで、興味深い観察結果が得られます。 このアプローチでは、ページレイアウトの構築元のオブジェクトは、DOMツリーと同じ場所のレンダリングツリーに配置されません。



フレックスボックスとフロートの長所と短所についてよく聞かれます。 もちろん、フレックスボックスは、使いやすさの観点から、同じ要素に適用すると、フレックスボックスでのレイアウトは約3.5ミリ秒でレンダリングされますが、フロートでのレイアウトのレンダリングには約14ミリ秒かかります。 したがって、小さいが重要な詳細を考慮するために、JS開発者はCSSの知識をJavaScriptの知識と同じ良好な状態に保つことが理にかなっています。

Z-indexプロパティ

最後に、 z-index



プロパティについてお話します。 一見すると何も話すことはないようです。 HTMLドキュメントの各要素は、他の要素の前または後ろに配置できます。 さらに、これは配置された要素に対してのみ機能します。 位置が明示的に指定されていない要素にz-index



プロパティを設定しても、何も変わりません。



z-index



問題を見つけて修正するための鍵は、オーバーレイコンテキストの概念を理解することです。 トラブルシューティングは、常にオーバーレイコンテキストのルート要素から始まります。 オーバーレイコンテキストは、モニターの前のユーザーに対して、特にZ軸に沿って、3次元空間にHTML要素を配置する概念です。 つまり、共通の親を持つ要素のグループであり、Z軸に沿って一緒にユーザーに近づくか、ユーザーから遠ざかります。



各オーバーレイコンテキストには、ルート要素として1つのHTML要素があります。 ポジショニングプロパティとz-index



プロパティを使用しない場合、要素の相互作用のルールは単純です。 要素のスタック順は、HTMLに表示される順序に対応しています。



ただし、 z-index



以外のプロパティを使用して新しいオーバーレイコンテキストを作成できますが、ここではすべてがより複雑になります。 その中には、この値が1より小さい場合のopacity



プロパティ、このプロパティの値がnone



と異なる場合のfilter



、および値がnormal



はないmix-blend-mode



があります。 実際、これらのプロパティは新しいオーバーレイコンテキストを作成します。 念のために、ブレンドモードでは、特定のレイヤーのピクセルがこのレイヤーの下にあるレイヤーの表示ピクセルと相互作用する方法を指定できることを思い出してください。



また、 transform



プロパティは、 none



と異なる場合に新しいオーバーレイコンテキストを作成します。 たとえば、 scale(1)



およびtranslate3d(0,0,0)



。 繰り返しますが、 scale



プロパティを使用して要素のサイズを変更し、 translate3d



を使用すると、CSSトランジションにGPUを使用して、アニメーションの品質を向上させることができます。

まとめ

この資料がCSSをマスターするための最初のステップであった場合、スタイルの問題を自分で解決する方法をすぐに学んでいただければ幸いです。 また、 ここでは、知識を深め、広げるのに役立つ追加資料のリストを見つけることができます。



親愛なる読者！ CSSをよく知っている場合は、CSSをどのように扱ったか教えてください。 あなたの経験を共有してください。 多くの人に役立つと確信しています。