CS

カスケード スタイル シート (CSS)

CSS3のアイコン[1]
CSSソースコードの例
ファイル名拡張子	.css
インターネットメディアの種類	テキスト/css
統一型識別子 (UTI)	パブリック.css
開発者	ワールドワイドウェブコンソーシアム(W3C)
初回リリース	1996年12月17日; 28年前 ( 1996-12-17 )
最新リリース	CSS 3 は複数の個別のモジュールとして開発されています。定期的なスナップショットでそのステータスをまとめています。2023 年 12 月 7 日; 12 か月前 ( 2023-12-07 )
フォーマットの種類	スタイルシート言語
コンテナ用	HTML 要素(タグ)のスタイル ルール
含まれるもの	HTMLドキュメント
オープンフォーマット?	はい
Webサイト	w3.org/TR/CSS/#css

カスケードスタイルシート（CSS）は、 HTMLやXML （ SVG、MathML、XHTMLなどのXML方言を含む）などのマークアップ言語で書かれた文書の表示とスタイルを指定するために使用されるスタイルシート言語です。 ^[2] CSSは、HTMLやJavaScriptと並んで、ワールドワイドウェブの基礎となる技術です。^[3]

CSSは、レイアウト、色、フォントなど、コンテンツとプレゼンテーションを分離できるように設計されています。^[4]この分離により、プレゼンテーションを気にせずにコンテンツを記述できるため、コンテンツのアクセシビリティが向上します。また、プレゼンテーション特性の指定において柔軟性と制御性が向上し、関連するCSSを別の.cssファイルに指定することで複数のWebページで書式を共有できるようになり、構造コンテンツの複雑さと繰り返しが軽減されます。さらに、.cssファイルをキャッシュできるため、ファイルとその書式を共有するページ間のページ読み込み速度が向上します。

フォーマットとコンテンツを分離することで、画面上、印刷、音声（音声ベースのブラウザまたはスクリーンリーダー経由）、点字ベースの触覚デバイスなど、異なるレンダリング方法に合わせて、同じマークアップページを異なるスタイルで表示することが可能になります。CSSには、コンテンツがモバイルデバイスでアクセスされる場合の代替フォーマットのルールもあります。^[5]

カスケードという名前は、プロパティの複数の宣言が特定の要素に一致する場合にどの宣言を適用するかを決定するために指定された優先順位スキームに由来しています。このカスケード優先順位スキームは予測可能です。

CSS仕様はワールドワイドウェブコンソーシアム（W3C）によって管理されています。インターネットメディアタイプ（MIMEタイプ）は、RFC 2318（1998年3月）によってCSSで使用するために登録されています。W3CはCSSドキュメントのtext/css無料CSS検証サービスを運営しています。 ^[6]

HTML に加えて、XHTML、プレーン XML、SVG、XULなどの他のマークアップ言語でも CSS の使用がサポートされています。 CSS はGTK ウィジェット ツールキットでも使用されます。

CSS は構文がシンプルで、さまざまなスタイル プロパティの名前を指定するために多数の英語のキーワードを使用します。

スタイル シートはルールのリストから構成されます。各ルールまたはルール セットは、1 つ以上のセレクタと宣言ブロックから構成されます。

CSS では、セレクターは、マークアップ自体のタグと属性を一致させることによって、スタイルが適用されるマークアップの部分を宣言します。

セレクターは以下に適用できます。

• 特定のタイプのすべての要素、例: 第2レベルのヘッダーh2
• 属性によって指定された要素、特に:
  • id : ドキュメント内で一意の識別子。セレクタ言語ではハッシュプレフィックスで表されます。例:#id
  • クラス: ドキュメント内の複数の要素に注釈を付けることができる識別子。ドットプレフィックスで示されます.classname(「CSS クラス」というフレーズは時々使用されますが、誤った名称です。要素クラス ( HTML のクラス属性で指定) は、ブラウザーの CSS サブシステムや関連する W3C/WHATWG 標準のドキュメント スタイルとは異なるマークアップ機能です。Webコンテンツ モデルの「クラス」システムの起源については、RDFとマイクロフォーマットを参照してください)。
• 要素は、ドキュメント ツリー内の他の要素との相対的な配置に応じて異なります。

クラスと ID は大文字と小文字が区別され、文字で始まり、英数字、ハイフン、アンダースコアを含めることができます。クラスは、任意の要素の任意の数のインスタンスに適用できます。ID は 1 つの要素にのみ適用できます。

疑似クラスは、ドキュメント ツリーに含まれていない情報に基づいた書式設定を許可するために CSS セレクターで使用されます。

広く使用されている疑似クラスの 1 つの例は です。これは、ユーザーが可視要素を「ポイント」したとき (通常はマウス カーソルを要素の上に置く)のみコンテンツを識別します。これは または のようにセレクターに追加されます。 :hovera:hover#elementid:hover

疑似クラスは、またはなどの文書要素を分類しますが、疑似要素は、またはなどの部分的な要素で構成される可能性のある選択を行います。^[7]疑似要素に使用される二重コロン表記と疑似クラスに使用される単一コロン表記の違いに注意してください。 :link:visited::first-line::first-letter

複数の単純なセレクターをコンビネータで結合し、要素を場所、要素タイプ、ID、クラス、またはそれらの組み合わせで指定することができます。^[8]セレクターの順序は重要です。たとえば、はdiv要素内にあるクラスmyClassのすべての要素に適用されますが、はクラスmyClassの要素内にあるすべてのdiv要素に適用されます。これは、クラスmyClassのdiv要素に適用されるなどの連結された識別子と混同しないでください。 div .myClass {color: red;}.myClass div {color: red;}div.myClass {color: red;}

次の表は、セレクタ構文の使用法とそれを導入したCSSのバージョンの概要を示しています。^[9]

{}宣言ブロックはセミコロンで区切られた宣言のリストを囲む一対の中括弧（）で構成される。^[10]

各宣言自体は、プロパティ、コロン（:）および値で構成されています。読みやすくするために、宣言ブロック、宣言、コロン、およびセミコロンの周囲に任意の空白を入れることができます。^[11]

プロパティはCSS標準で指定されています。各プロパティには可能な値のセットがあります。一部のプロパティはあらゆるタイプの要素に影響を与えますが、他のプロパティは特定の要素グループにのみ適用されます。^{[12] [13]}

値は、「center」や「inherit」などのキーワード、または200px(200 ピクセル)、50vw(ビューポート幅の 50 パーセント)、80% (親要素の幅の 80 パーセント) などの数値になります。

色の値は、キーワード（例： " red"）、16進数値（例：、略称：）、0～255のスケールのRGB値（例：）、色とアルファ透明度の両方を指定するRGBA値（例：）、またはHSL値またはHSLA値（例：、）で指定できます。^[14]#FF0000#F00rgb(255, 0, 0)rgba(255, 0, 0, 0.8)hsl(0 100% 50%)hsl(0 100% 50% / 0.8)

線形測定を表す非ゼロの数値には、長さの単位を含める必要があります。長さの単位は、 または のようにアルファベットのコードまたは略語、200pxまたは50vwのようにパーセント記号です80%。一部の単位cm(センチメートル)、in(インチ)、mm(ミリメートル)、pc(パイカ)、pt(ポイント)は絶対単位であり、レンダリングされた寸法はページの構造に依存しません。その他の単位em( em )、ex( ex )、px(ピクセル) ^{[明確化が必要]}は相対単位であり、親要素のフォントサイズなどの要因がレンダリングされた測定値に影響を与える可能性があります。これらの 8 つの単位は CSS 1 ^[15]の機能であり、その後のすべての改訂で保持されています。提案されている CSS 値と単位モジュール レベル 3 は、W3C 勧告として採用された場合、さらに 7 つの長さの単位を提供します。ch; Q; rem; vh; vmax; vmin; およびvw。^[16]

CSS 以前は、HTML ドキュメントのほぼすべての表示属性が HTML マークアップ内に含まれていました。すべてのフォントの色、背景スタイル、要素の配置、境界線、サイズは、HTML 内で明示的に、多くの場合繰り返し記述する必要がありました。CSS を使用すると、作成者はその情報の多くを別のファイル (スタイル シート) に移動できるため、HTML が大幅に簡素化されます。さらに、レスポンシブ Web ページにアクセスできるデバイスが増えるにつれて、さまざまな画面サイズやレイアウトが登場し始めます。デバイスのサイズごとに Web サイトをカスタマイズするのはコストがかかり、ますます困難になっています。CSS のモジュール性により、スタイルはサイトのさまざまな部分やサイト間で再利用でき、一貫性と効率が向上します。

たとえば、見出し (h1要素)、サブ見出し ( h2)、サブサブ見出し ( ) などは、HTML を使用して構造的に定義されます。印刷時や画面上では、これらの要素のフォント、サイズ、色、強調h3の選択はプレゼンテーションによって決まります。

CSS 以前は、文書作成者が、たとえばすべての見出しにこのようなタイポグラフィ特性を割り当てたい場合、h2その見出しタイプの出現ごとに HTML プレゼンテーション マークアップを繰り返す必要がありました。これにより、文書はより複雑で大きくなり、エラーが発生しやすくなり、保守が困難になりました。CSS では、プレゼンテーションと構造を分離できます。CSS では、色、フォント、テキストの配置、サイズ、境界線、間隔、レイアウト、その他の多くのタイポグラフィ特性を定義でき、画面表示と印刷表示で独立して定義できます。CSS では、音声テキスト リーダーの読み取り速度や強調など、視覚的でないスタイルも定義します。W3C では、現在、すべてのプレゼンテーション HTML マークアップの使用を廃止しています。 ^[17]

たとえば、CSS 以前の HTML では、赤いテキストで定義された見出し要素は次のように記述されます。

< h1 >< font  color = "red" >第1章。</ font ></ h1 >

CSS を使用すると、同じ要素を HTML プレゼンテーション属性の代わりにスタイル プロパティを使用してコーディングできます。

< h1  style = "color: red;" >第1章。</ h1 >

この利点はすぐには明らかではないかもしれませんが、スタイル プロパティを内部スタイル要素に配置するか、またはさらに良いことに、外部 CSS ファイルに配置すると、CSS の威力がより明らかになります。たとえば、ドキュメントに次のスタイル要素が含まれているとします。

<スタイル> 
h1 {色:赤; } </スタイル>     
         
    

h1すると、明示的なコードを必要とせずに、ドキュメント内のすべての要素が自動的に赤くなります。作成者が後でh1要素を青にしたい場合は、スタイル要素を次のように変更します。

<スタイル> 
h1 {色:青; } </スタイル>     
         
    

h1面倒な作業でドキュメントを調べて、個々の要素 ごとに色を変更する必要はありません。

スタイルは、以下で説明するように外部 CSS ファイルに配置し、次のような構文を使用して読み込むこともできます。

< link  href = "path/to/file.css"  rel = "stylesheet"  type = "text/css" >

これにより、HTML ドキュメントからスタイル設定がさらに分離され、共有された外部 CSS ファイルを編集するだけで複数のドキュメントのスタイルを変更できるようになります。

CSS (カスケーディング スタイル シート) は、ブラウザーのデフォルト、ユーザー設定、または Web デザイナーから派生したスタイルを使用して、Web コンテンツのスタイルを柔軟に指定する方法を提供します。これらのスタイルは、HTML ドキュメント内でインラインで適用することも、外部の .css ファイルを使用して適用して一貫性を高めることもできます。これにより、再利用性と保守性が向上して Web 開発が簡素化されるだけでなく、ブラウザーがキャッシュできる専用の .css ファイルにスタイルをオフロードできるため、サイトのパフォーマンスも向上します。さらに、スタイルを読み込めない場合や無効になっている場合でも、この分離によりコンテンツのアクセシビリティと読みやすさが維持され、障がいのあるユーザーを含むすべてのユーザーがサイトを使用できるようになります。セレクターの特異性、ルールの順序、メディア タイプなどを考慮する多面的なアプローチにより、Web サイトはさまざまなデバイスやユーザーのニーズに対して視覚的に一貫性があり適応性があり、設計の意図とユーザーのアクセシビリティのバランスが取れています。

複数のスタイルシートをインポートできます。使用する出力デバイスに応じて異なるスタイルを適用できます。たとえば、画面バージョンは印刷バージョンとはまったく異なる可能性があるため、作成者は各メディアに合わせてプレゼンテーションを適切に調整できます。

最も優先度の高いスタイルシートがコンテンツの表示を制御します。最も優先度の高いソースで設定されていない宣言は、ユーザー エージェント スタイルなどの優先度の低いソースに渡されます。このプロセスはカスケーディングと呼ばれます。

CSS の目標の 1 つは、ユーザーがプレゼンテーションをより細かく制御できるようにすることです。赤い斜体の見出しが読みにくいと感じる人は、別のスタイル シートを適用できます。ブラウザーと Web サイトに応じて、ユーザーはデザイナーが提供するさまざまなスタイル シートから選択することも、追加されたスタイルをすべて削除してブラウザーの既定のスタイルを使用してサイトを表示することも、他の属性を変更せずに赤い斜体の見出しスタイルのみを上書きすることもできます。StylishやStylusなどのブラウザー拡張機能は、このようなユーザー スタイル シートの管理を容易にするために作成されています。大規模なプロジェクトの場合、開発者が競合する優先順位を持つサードパーティのスタイルを統合するときに、カスケードを使用してどのスタイルの優先順位が高いかを判断し、それらの競合をさらに解決することができます。さらに、カスケードはテーマ別のデザインを作成するのにも役立ちます。これにより、デザイナーは全体的なレイアウトを損なうことなく、デザインのさまざまな側面を微調整できます。

詳細度は、さまざまなルールの相対的な重みを指します。^[18]複数のルールが適用される可能性がある場合に、どのスタイルが要素に適用されるかを決定します。仕様に基づくと、単純なセレクタ（例：H1）の詳細度は1、クラスセレクタの詳細度は1,0、IDセレクタの詳細度は1,0,0です。詳細度の値は10進法のように引き継がれないため、カンマを使用して「数字」を区切ります^[19]（11個の要素と11個のクラスを持つCSSルールの詳細度は11,11であり、121ではありません）。

したがって、次のルールのセレクターは、示された詳細度をもたらします。

次の HTML フラグメントを検討してください。

<!DOCTYPE html> 
< html > 
    < head > 
        < meta  charset = "utf-8" > 
        < style > 
# xyz { color : blue ; } </ style > </ head > < body > < p id = "xyz" style = "color: green;" >特異性を示すため</ p > </ body > </ html >                
        
    
    
          
    

上記の例では、style属性の宣言の方が詳細度が高いため、要素の宣言が上書きされ<style>、段落が緑色で表示されます。

継承は CSS の重要な機能です。継承は祖先と子孫の関係に依存して機能します。継承とは、プロパティが特定の要素だけでなくその子孫にも適用されるメカニズムです。^{[18]継承はドキュメント ツリーに依存します。ドキュメント ツリーは、ネストに基づくページ内の}XHTML要素の階層です。子孫要素は、それを囲む祖先要素から CSS プロパティ値を継承できます。一般に、子孫要素はテキスト関連のプロパティを継承しますが、ボックス関連のプロパティは継承されません。継承できるプロパティは、color、font、letter spaces、line-height、list-style、text-align、text-indent、text-transform、visibility、white-space、word-spacing です。継承できないプロパティは、background、border、display、float と clear、height、width、margin、min- and max-height、-width、outline、overflow、padding、position、text-decoration、vertical-align、z-index です。

継承を使用すると、スタイルシート内で特定のプロパティを何度も宣言する必要がなくなり、CSS を短くすることができます。

CSSにおける継承は、クラスベースのプログラミング言語における継承とは異なります。クラスベースのプログラミング言語では、クラスBを「クラスAに似ているが、変更が加えられている」と定義することができます。^{[20] CSSでは、「クラスAに変更が加えられている」}要素にスタイルを設定することができます。しかし、そのようなCSSクラスBを定義することはできません。クラスBを使用して、変更を繰り返さずに複数の要素にスタイルを設定することができます。

次のスタイルシートがあるとします。

p {色:ピンク; } 
    

内部に強調要素 ( <em>) を持つ ap 要素があるとします。

< p >これは< em >継承
を説明するため < / em >
   です</ p >

em 要素に色が割り当てられていない場合、強調された単語「illustrate」は親要素 p の色を継承します。スタイル シート p の色はピンクなので、em 要素も同様にピンクになります。

プロパティとセレクタ間の空白は無視されます。このコード スニペット:

本文{オーバーフロー:非表示;背景: #000000 ;背景画像: url ( images/bg.gif );背景繰り返し:繰り返しなし;背景位置:左上; } 

機能的には次のものと同等です:

本文{オーバーフロー:非表示;背景色: #000000 ;背景画像: url ( images/bg.gif );背景繰り返し:繰り返しなし;背景位置:左上; } 
    
    
    
    
     

CSSを読みやすくフォーマットする一般的な方法の1つは、各プロパティをインデントして独自の行にすることです。読みやすくするためにCSSをフォーマットすることに加えて、ショートカットプロパティを使用すると、コードをより速く記述でき、レンダリング時にもより速く処理されます。^[21]

本文{オーバーフロー:非表示;背景: #000 url ( images/bg.gif )繰り返しなし左上; } 
    
        

場合によっては、複数のプロパティ値が独自の行にインデントされることがあります。

@ font-face {フォントファミリー: 'Comic Sans' ;フォントサイズ: 20px ; src : url ( 'first.example.com' ), url ( 'second.example.com' ), url ( 'third.example.com' ), url ( 'fourth.example.com' ); } 
    
    
    
        
        
        

CSS 2.1 では、次の 3 つの配置スキームが定義されています。

通常の流れ

インライン項目は、テキスト内の単語の文字と同じようにレイアウトされ、使用可能なスペースに 1 文字ずつ順番に配置され、スペースがなくなると下に新しい行が始まります。ブロック項目は、段落や箇条書きリストの項目のように垂直に積み重ねられます。通常のフローには、ブロック項目またはインライン項目とランイン ボックスの相対的な配置も含まれます。

フロート

フロートされたアイテムは通常のフローから外れ、利用可能なスペース内で可能な限り左または右に移動します。その後、他のコンテンツはフロートされたアイテムの横に流れます。

絶対位置指定

絶対配置されたアイテムは、他のアイテムの通常の流れには含まれず、また、他のアイテムの通常の流れにも影響を与えません。他のアイテムとは独立して、コンテナ内の割り当てられた位置を占めます。^[22]

プロパティには 5 つの値がありますposition。アイテムが 以外の方法で配置されている場合はstatic、オフセットと位置を指定するために、追加のプロパティtop、bottom、left、 が使用されます。位置が静的である要素は、、 、の各 プロパティrightの影響を受けません 。 topbottomleftright

デフォルト値は、アイテムを通常のフローに配置します。

アイテムは通常のフロー内に配置され、その後その位置からシフトまたはオフセットされます。後続のフロー アイテムは、アイテムが移動されていないかのようにレイアウトされます。

絶対配置を指定します。要素は、最も近い非静的な祖先を基準に配置されます。

文書の残りの部分がスクロールされても、アイテムは画面上の固定位置に絶対的に配置される^[22]

このfloatプロパティには、3 つの値のいずれかを指定できます。絶対配置または固定された項目はフロートできません。他の要素は、プロパティによってフロートが禁止されていない限り、通常、フロートされた項目の周囲に配置されますclear。

左

アイテムは、表示されるはずの行の左側にフロートします。他のアイテムは、その右側を迂回して流れる場合があります。

右

アイテムは、本来表示されるはずの行の右側にフロート表示され、他のアイテムは左側に回り込む場合があります。

クリア

要素を左（）、右（）、または両側（）のフロート要素の下（「クリア」）に表示するように強制します。^{[22] [23]}clear:leftclear:rightclear:both

CSSは1994年10月10日にHåkon Wium Lieによって初めて提案されました。^[24]当時、LieはCERNでTim Berners-Leeと働いていました。^[25]ウェブ用の他のスタイルシート言語も同時期にいくつか提案され、公開メーリングリストやワールドワイドウェブコンソーシアム内での議論の結果、1996年に最初のW3C CSS勧告（CSS1）^{[26]がリリースされました。特に、} Bert Bosの提案は影響力があり、彼はCSS1の共同著者となり、CSSの共同作成者と見なされています。^[27]

スタイルシートは、1980年代のSGML（Standard Generalized Markup Language）の始まり以来、何らかの形で存在しており、CSSはWeb用のスタイルシートを提供するために開発されました。 ^[28] Webスタイルシート言語の要件の1つは、スタイルシートがWeb上のさまざまなソースから取得されることでした。したがって、DSSSLやFOSIなどの既存のスタイルシート言語は適していませんでした。一方、CSSでは、「カスケード」スタイルを通じて、ドキュメントのスタイルが複数のスタイルシートの影響を受けるようにしました。^[28]

HTML が発展するにつれ、ウェブ開発者の要求を満たすために、より多様なスタイル機能が含まれるようになりました。この進化により、デザイナーはサイトの外観をより細かく制御できるようになりましたが、その代償として HTML はより複雑になりました。ViolaWWWやWorldWideWebなどのウェブブラウザの実装のバリエーション^[29]により、一貫したサイトの外観が難しくなり、ユーザーはウェブコンテンツの表示方法をあまり制御できませんでした。ティム・バーナーズ＝リーが開発したブラウザ/エディタには、プログラムにハードコードされたスタイルシートがありました。そのため、スタイルシートをウェブ上の文書にリンクすることはできませんでした。^{[25]同じく CERN の}Robert Cailliauは、構造とプレゼンテーションを分離して、異なるスタイルシートで印刷、画面ベースのプレゼンテーション、エディタの異なるプレゼンテーションを記述できるようにしたいと考えました。^[29]

ウェブプレゼンテーション機能の向上は、ウェブコミュニティの多くの人々の関心事であり、www-style メーリングリストでは 9 つの異なるスタイルシート言語が提案されました。^[28]これらの 9 つの提案のうち、2 つが CSS の原型に特に影響を与えました。Cascading HTML Style Sheets ^[24]と Stream-based Style Sheet Proposal (SSP) です。^{[27] [30]} 2 つのブラウザーが最初の提案のテストベッドとして機能しました。Lie は Yves Lafon と協力して、Dave RaggettのArenaブラウザーに CSS を実装しました。^{[31] [32] [33]} Bert Bos は、独自の SSP 提案をArgoブラウザーに実装しました。^[27]その後、Lie と Bos は協力して CSS 標準を開発しました (これらのスタイルシートは HTML 以外のマークアップ言語にも適用できるため、名前から 'H' が削除されました)。^[25]

リーの提案は、1994年にイリノイ州シカゴで開催された「Mosaic and the Web」カンファレンス（後にWWW2と呼ばれる）で発表され、1995年にはバート・ボスとともに再び発表された。^[25]この頃、W3Cはすでに設立され、CSSの開発に興味を示していた。そのため、スティーブン・ペンバートンを議長とするワークショップが組織された。その結果、W3CはHTML編集レビュー委員会（ERB）の成果物にCSSに関する作業を追加することになった。リーとボスはプロジェクトのこの側面における主要な技術スタッフであり、マイクロソフトのトーマス・リアドンを含む追加メンバーも参加した。1996年8月、ネットスケープ・コミュニケーション社はJavaScriptスタイルシート（JSSS）と呼ばれる代替スタイルシート言語を発表した。^[25]この仕様は完成せず、非推奨となっている。^[34] 1996年末までに、CSSは公式になる準備が整い、12月にCSSレベル1勧告が公開された。

HTML、CSS、DOMの開発はすべて、HTML Editorial Review Board (ERB) という 1 つのグループで行われていました。1997 年の初めに、ERB は 3 つのワーキング グループに分割されました。W3CのDan Connollyが議長を務めるHTML ワーキング グループ、 SoftQuadの Lauren Wood が議長を務める DOM ワーキング グループ、 W3C のChris Lilleyが議長を務めるCSS ワーキング グループです。

CSS ワーキング グループは、CSS レベル 1 では対処されなかった問題に取り組み始め、1997 年 11 月 4 日に CSS レベル 2 を作成しました。これは、1998 年 5 月 12 日に W3C 勧告として公開されました。1998 年に開始された CSS レベル 3 は、2014 年現在も開発中です^{[アップデート]}。

2005 年、CSS ワーキング グループは標準の要件をより厳格に適用することを決定しました。これは、CSS 2.1、CSS 3 セレクター、CSS 3 テキストなどのすでに公開されている標準が、候補勧告レベルからワーキング ドラフト レベルに引き下げられたことを意味します。

CSS 1仕様は1996年に完成しました。その年、MicrosoftのInternet Explorer 3 ^[25]がリリースされ、限定的にCSSをサポートしました。IE 4とNetscape 4.xではさらにサポートが追加されましたが、通常は不完全で、多くのバグがあったためCSSが実用的に採用されることはありませんでした。Webブラウザが仕様のほぼ完全な実装を達成するまでには3年以上かかりました。 2000年3月に出荷されたMacintosh版Internet Explorer 5.0は、完全な（99パーセント以上）CSS 1サポートを備えた最初のブラウザであり、^{[35] 15か月前にCSSサポートを導入して以来リーダーであった}Operaを追い抜きました。他のブラウザもすぐに追随し、その多くはCSS 2の一部も実装しました。

しかし、その後の「バージョン 5」の Web ブラウザーが CSS のかなり完全な実装を提供するようになったときでさえ、それらは特定の領域ではまだ不正確でした。それらは矛盾、バグ、およびその他の癖に満ちていました。Windows版の Microsoft Internet Explorer 5. x は、まったく異なるMacintosh 版の IEとは対照的に、 CSS 標準と比較するとCSS ボックス モデルの実装に欠陥がありました。このような矛盾と機能サポートのばらつきにより、デザイナーはCSS ハックやフィルターと呼ばれる回避策を使用せずに、ブラウザーやプラットフォーム間で一貫した外観を実現することが困難でした。IE Windows ボックス モデルのバグは非常に深刻であったため、Internet Explorer 6がリリースされたとき、Microsoft は、代替の修正された「標準モード」とともに、CSS 解釈の下位互換性モード (「癖モード」) を導入しました。Microsoft 以外の他のブラウザーも、モード切り替え機能を提供しました。そのため、HTMLファイルの作成者は、CSS が標準に準拠して正しく解釈されることを意図しており、現在は廃止されたIE5/Windows ブラウザー向けではないことを示すために、特別な「標準準拠の CSS を意図」マーカーをHTML ファイルに含めることが必要になりました。このマーカーがないと、「互換モード」切り替え機能を持つ Web ブラウザーは、CSS 標準に従うのではなく、Windows 上の IE 5 と同じように Web ページ内のオブジェクトのサイズを変更します。

CSS の不完全な採用と元の仕様のエラッタの問題により、W3C は CSS 2 標準を CSS 2.1 に改訂し、HTML ブラウザーの現在の CSS サポートの作業スナップショットに近づきました。ブラウザーで正常に実装されていない一部の CSS 2 プロパティは削除され、いくつかのケースでは、定義された動作が変更されて、標準が既存の主要な実装と一致するようになりました。CSS 2.1 は 2004 年 2 月 25 日に勧告候補になりましたが、2005 年 6 月 13 日にワーキング ドラフトの状態に戻され、^[36] 2007 年 7 月 19 日にようやく勧告候補の状態に戻りました。^[37]

これらの問題に加えて、この拡張子はPowerPointファイルをコンパクトスライドショーファイルに.css変換するソフトウェア製品で使用されていたため^[38] 、 一部のウェブサーバーでは^{[39]すべてを}MIMEタイプ^[40]ではなくとして提供していました。 .css application/x-pointplustext/css

個々のブラウザベンダーは、標準化や普遍化に先立って新しいパラメータを導入することがありました。将来の実装を妨げないように、ベンダーはパラメータに固有の名前を付加しました。たとえば、Mozilla Firefox-moz-の場合はApple Safariのブラウジングエンジンにちなんで名付けられ、Opera ブラウザの場合はMicrosoft Internet ExplorerおよびEdgeHTML を使用するMicrosoft Edgeの初期バージョンの場合はそのように名付けられました。 -webkit--o--ms-

-moz-radial-gradient場合によっては、やなどのベンダープレフィックス付きのパラメータは、-webkit-linear-gradientベンダープレフィックスなしのパラメータと比べて構文が若干異なる場合があります。^[41]

プレフィックス付きプロパティは標準化の時点では時代遅れになっています。古いブラウザ用にプレフィックスを自動的に追加したり、プレフィックス付きパラメータの標準化バージョンを示すプログラムが利用可能です。プレフィックスはブラウザの小さなサブセットに限定されているため、プレフィックスを削除すると他のブラウザで機能を確認できるようになります。例外は、-webkit-Web上で非常に一般的で永続的であるため、他のブラウザファミリーが互換性のためにサポートすることを決定した、特定の時代遅れのプレフィックス付きプロパティです。 ^[42]

CSSには様々なレベルとプロファイルがあります。各レベルのCSSは前のレベルに基づいて構築され、通常は新しい機能が追加され、通常^[43] CSS 1、CSS 2、CSS 3、CSS 4と表記されます。プロファイルは通常、特定のデバイスまたはユーザーインターフェイス用に構築された1つ以上のレベルのCSSのサブセットです。現在、モバイルデバイス、プリンター、テレビ用のプロファイルがあります。プロファイルは、CSS 2で追加されたメディアタイプと混同しないでください。

公式のW3C勧告となった最初のCSS仕様は、1996年12月17日に公開されたCSSレベル1である。Håkon Wium LieとBert Bosが最初の開発者としてクレジットされている。^{[44] [45]}その機能の中には、

• 書体や強調などのフォントプロパティ
• テキスト、背景、その他の要素の色
• 単語、文字、行間の間隔などのテキスト属性
• テキスト、画像、表、その他の要素の配置
• ほとんどの要素のマージン、境界線、パディング、配置
• 属性グループの一意の識別と一般的な分類

W3CはもはやCSS 1勧告を維持していない。^[46]

CSSレベル2仕様はW3Cによって開発され、1998年5月に勧告として公開されました。CSS1のスーパーセットであるCSS2には、要素の絶対、相対、固定の配置やz-index、メディアタイプの概念、聴覚スタイルシート（後にCSS3音声モジュールに置き換えられました）^[47]と双方向テキストのサポート、影などの新しいフォントプロパティなど、多くの新しい機能が含まれています。

W3CはもはやCSS 2勧告を維持していない。^[48]

CSS レベル 2 リビジョン 1 は、しばしば「CSS 2.1」と呼ばれ、CSS 2 のエラーを修正し、サポートが不十分な機能や相互運用性が不十分な機能を削除し、すでに実装されているブラウザ拡張機能を仕様に追加します。技術仕様を標準化するための W3C プロセスに準拠するため、CSS 2.1 は長年にわたりワーキング ドラフトの状態と勧告候補の状態の間を行ったり来たりしていました。CSS 2.1 は 2004 年 2 月 25 日に最初に勧告候補になりましたが、2005 年 6 月 13 日にさらなるレビューのためにワーキング ドラフトに戻されました。2007 年 7 月 19 日に勧告候補に戻り、2009 年に 2 回更新されました。しかし、変更と明確化が行われたため、2010 年 12 月 7 日に再び最終ワーキング ドラフトに戻りました。

CSS 2.1は2011年4月12日に勧告案となった。^[49] W3C諮問委員会による審査を経て、最終的に2011年6月7日にW3C勧告として公開された。^[50]

CSS 2.1 はレベル 2 の最初の、そして最後の改訂版として計画されていましたが、CSS 2.2 の低優先度の作業は 2015 年に開始されました。

さまざまな機能を定義する大きな単一の仕様である CSS 2 とは異なり、CSS 3 は「モジュール」と呼ばれるいくつかの個別のドキュメントに分かれています。各モジュールは、CSS 2 で定義された新しい機能を追加したり、機能を拡張したりして、下位互換性を維持します。CSS レベル 3 の作業は、元の CSS 2 勧告が公開された頃に開始されました。最も初期の CSS 3 ドラフトは 1999 年 6 月に公開されました。^[51]

モジュール化により、モジュールごとに安定性やステータスが異なります。^[52]

いくつかのモジュールは勧告候補（CR）ステータスを持ち、中程度に安定していると考えられています。CR段階では、実装ではベンダープレフィックスを削除することが推奨されます。^[53]

CSS4仕様は、単一の統合された仕様は存在しません。^[55]仕様は、独立したレベルの多くの個別のモジュールに分割されているためです。

CSSレベル2を基に構築されたモジュールはレベル3から始まりました。そのうちのいくつかはすでにレベル4に到達しているか、すでにレベル5に近づいています。Flexbox [56]などの完全に新しい機能を定義する他のモジュールはレベル¹に指定されており、そのうちのいくつかはレベル2に近づいています。

CSSワーキンググループは、ブラウザ開発者が実装できるほど安定していると考えられるモジュール全体や他のドラフトの一部をまとめた「スナップショット」を公開することがあります。これまでに、2007年、^[57] 2010年、^[58] 2015年、^[59] 2017年、^[60] 2018年に5つの「現在のベストプラクティス」文書がノートとして公開されています。 ^[61]

これらの仕様スナップショットは主に開発者向けであるため、Can I Use... ^[62]やMDN Web Docs ^[63 ]などのサイトで文書化されている相互運用可能な実装の状態を示す、著者を対象とした同様のバージョン管理されたリファレンスドキュメントの需要が高まっています。このようなリソースについて議論し定義するために、2020年初頭にW3Cコミュニティグループが設立されました。^{[64]実際の}バージョン管理の種類も議論の余地があり、作成されたドキュメントは「CSS4」とは呼ばれない可能性があります。

各ウェブブラウザはレイアウトエンジンを使用してウェブページをレンダリングしますが、CSS機能のサポートはブラウザ間で一貫していません。ブラウザはCSSを完全に解析しないため、回避策（一般にCSSハックまたはCSSフィルターと呼ばれる）を備えた特定のブラウザを対象とした複数のコーディング手法が開発されています。主要なブラウザでのサポート不足により、CSSの新機能の採用が妨げられる可能性があります。たとえば、Internet Explorerは多くのCSS 3機能のサポートを追加するのに時間がかかり、それらの機能の採用が遅れ、開発者の間でのブラウザの評判が損なわれました。さらに、filter一部のバージョンでは、ベンダープレフィックスのないプロパティに独自の構文が使用されていました。^[65]ユーザーに一貫したエクスペリエンスを提供するために、ウェブ開発者は複数のオペレーティングシステム、ブラウザ、ブラウザバージョンでサイトをテストすることが多く、開発時間と複雑さが増しています。BrowserStackなどのツールは、これらの環境を維持する複雑さを軽減するために構築されています。

これらのテストツールに加えて、CanIUseやMDN Web Docs@supportsなど、多くのサイトでは特定のCSSプロパティのブラウザーサポートのリストが管理されています。さらに、CSS 3では機能クエリが定義されており、開発者が特定の機能をサポートするブラウザーをCSS内で直接ターゲットにできるディレクティブが提供されています。 ^[66]古いブラウザーでサポートされていないCSSは、JavaScriptポリフィルを使用してパッチを当てることもできます。これは、ブラウザーの動作を一貫してするように設計されたJavaScriptコードの一部です。これらの回避策とフォールバック機能のサポートの必要性により、開発プロジェクトが複雑になる可能性があるため、企業はサポートするブラウザーバージョンとサポートしないブラウザーバージョンのリストを頻繁に定義しています。

ウェブサイトが古いブラウザと互換性のない新しいコード標準を採用すると、これらのブラウザはウェブ上の多くのリソースにアクセスできなくなる可能性があります（時には意図的に）。^[67]インターネット上で最も人気のあるサイトの多くは、CSSのサポートが不十分なために古いブラウザでは視覚的に劣化するだけでなく、主にJavaScriptやその他のウェブテクノロジーの進化により、まったく機能しません。

CSS の現在の機能に関する注目すべき制限には、次のものがあります。

z-index などのプロパティのスコープ ルールは、position: absolute または position: relative 属性を持つ最も近い親要素を探します。この奇妙な結合は望ましくない効果をもたらします。たとえば、要素の位置を強制的に調整する必要がある場合、新しいスコープを宣言することを避けることは不可能であり、親要素の目的のスコープを使用できなくなります。

CSSは、条件付きで代替スタイルを適用することで、ある程度のユーザーフィードバックを可能にする擬似クラスを実装しています。CSS擬似クラスの1つである「」は動的（JavaScriptの「onmouseover」に相当）であり、誤用される可能性があります（例：カーソル近接ポップアップの実装）^[68]が、CSSにはクライアントがそれを無効にしたり（「disable」のようなプロパティがない）、その効果を制限したり（各プロパティに「nochange」のような値がない）する機能がありません。 :hover

CSS ルールに名前を付ける方法はありません。名前を付けると、セレクタが変更されても、たとえばクライアント側のスクリプトがルールを参照できるようになります。

CSSスタイルは、望ましい効果を得るために複数のルールで複製しなければならないことが多く、追加のメンテナンスとより徹底したテストが必要になります。この問題を解決するためにいくつかの新しいCSS機能が提案されましたが、その後放棄されました。^{[69] [70]代わりに、作成者は}Sass、Less、StylusなどのCSSにコンパイルされるより洗練されたスタイルシート言語を使用することでこの機能を得ることができます。

疑似要素のほかに、プレースホルダー要素を使用せずに特定の範囲のテキストをターゲットにすることはできません。 ::first-letter

CSS は、さまざまな公称パラメータに基づいてスタイルを調整することで、コンテンツを複数のプレゼンテーション形式で公開することを容易にします。これらのパラメータには、明示的なユーザー設定 (テーマやフォント サイズなど)、さまざまな Web ブラウザーとの互換性、コンテンツの表示に使用するデバイスの種類 (デスクトップ、タブレット、モバイル デバイスなど)、画面解像度、ユーザーの地理的位置、その他多くの変数が含まれます。CSS はレスポンシブ デザインも可能にし、コンテンツがさまざまな画面サイズや向きに動的に適応し、さまざまな環境でアクセシビリティとユーザー エクスペリエンスを向上させます。

CSS を継承と「カスケーディング」の点で効果的に使用すると、グローバル スタイル シートを使用してサイト全体の要素に影響を与え、スタイルを設定できます。要素のスタイルを変更または調整する必要がある場合は、グローバル スタイル シートのルールを編集することで変更できます。CSS が登場する前は、このようなメンテナンスはより困難で、コストがかかり、時間がかかりました。

内部または外部のスタイルシートは、、タイプ、または他の要素との関係によって選択された HTML 要素の範囲に対してスタイルを一度指定しますclass。これは、要素が出現するたびにスタイル情報をインラインで繰り返すよりもはるかに効率的です。外部スタイルシートは通常、ブラウザ キャッシュに保存されるため、再読み込みせずに複数のページで使用でき、ネットワーク経由のデータ転送がさらに削減されます。

1 行を変更するだけで、同じページに異なるスタイル シートを使用できます。これにより、アクセシビリティが向上するだけでなく、ページやサイトをさまざまな対象デバイスに合わせてカスタマイズできるようになります。さらに、スタイルを理解できないデバイスでも、コンテンツは表示されます。

CSS がない場合、Web デザイナーは通常、視覚障害のあるユーザーのアクセシビリティを妨げる HTML テーブルなどの手法を使用してページをレイアウトする必要があります ( 「テーブルレス Web デザイン § アクセシビリティ」を参照)。

CSSフレームワークは、カスケーディングスタイルシート言語を使用して、Webページのスタイルをより簡単に、より標準に準拠したものにするために用意されたライブラリです。CSSフレームワークには、 Blueprint、Bootstrap、Foundation、Materializeなどがあります。プログラミング言語ライブラリやスクリプト言語ライブラリと同様に、CSSフレームワークは通常、HTMLで参照される外部.cssシートとして組み込まれます。Webページのデザインとレイアウトのための既製のオプションが多数用意されています。これらのフレームワークの多くは公開されていますが、一部の作成者は主にラピッドプロトタイピングや学習のために使用しており、サイトのスタイルに多くの未使用の機能を持たせることによるデザイン、メンテナンス、ダウンロードのオーバーヘッドなしに、公開された各サイトに適したCSSを「手作り」することを好みます。^[71]<head>

プロジェクトで使用される CSS リソースのサイズが大きくなると、開発チームはそれらを整理するために共通の設計方法論を決定する必要が出てきます。その目標は、開発の容易さ、開発中のコラボレーションの容易さ、そしてブラウザに展開されたスタイルシートのパフォーマンスです。一般的な方法論には、OOCSS (オブジェクト指向 CSS)、ACSS (アトミック CSS)、CSS (オーガニック カスケード スタイル シート)、SMACSS (CSS のスケーラブルでモジュール化されたアーキテクチャ)、BEM (ブロック、要素、修飾子) などがあります。^[72]

• スタイル設定されていないコンテンツのフラッシュ

• 公式サイト