気の向くままに辿るIT/ICT/IoT
CSS / Cascading Style Sheets / スタイルシート

CSS VERSION LEVEL スタイルシートバージョンレベル

ホーム前へ次へ
スタイルシートのバージョンとは?

CSS VERSION LEVEL スタイルシートバージョンレベル

CSSスタイルシートのバージョン

 CSSバージョンには、CSS1/CSS2(CSS 2.0/CSS 2.1)/CSS3があり、現在、W3C勧告済みで且つブラウザ対応含め広く使われているのはCSS2です(が、CSS 2.1勧告前に策定されているCSS3はCSS 2.1勧告をベースとした仕様となる予定です)。

 CSSは、CSSのコンセプトによりCSS2からHTMLXHTMLといったマークアップ言語との完全分離を目指し、構造化はHTML/XHTML、スタイル装飾はCSSという明確な目的を持って改訂されています。

 また、CSS2を含め、CSS 2.1とCSS3では、CSSの一つの仕様でHTMLとXMLもサポートする事になっており、更にCSS2で既に想定されていたPC閲覧用途以外のテレビや音声、映像、プリンタ、携帯電話、PDAなど多様なメディアへの実質的な対応をすべくW3CでCSS3の2010年(->2012年->2014年)の勧告、実用化に向けて仕様策定中(、CSS 2.1は提案勧告)です。

 尚、提案勧告であったCSS 2.1は2011/06/07に勧告となり、当初の予定通り、CSS 2.0は、CSS 2.0のバグ解消とCSS3への基盤となる拡張がなされたCSS 2.1に集約され、CSS2と言えばCSS 2.1を指します。

 ちなみに現行CSSがカバーしきれていない部分は次期CSSでフルサポートされる予定になっています。

CSSスタイルシートバージョン

CSS Version Level勧告日
CSS3 / Cascading Style Sheets Level 32014年 ?
CSS2 / CSS 2.1 / Cascading Style Sheets Level 2 Revision 12011/06/07
CSS2 / Cascading Style Sheets, level 21998/03/12
CSS1 / Cascading Style Sheets, level 11996/12/17

CSSスタイルシートバージョン表記

 W3C仕様書を眺めてみるとCSSバージョンの表記については、正式名称と略称でそれぞれ特徴があります。

 まず、正式名称の方は、[ Cascading Style Sheets ]、先頭文字エルが小文字の[ level ]または先頭文字エルが大文字の[ Level ]にスペースに続けて数字一文字から成る、いわゆるメジャーバージョン、また、存在する場合[ Revision ]にスペースに続けて数字一文字から成る、いわゆる改訂版、マイナーバージョンという単語や数字で構成されています。

 各単語の区切りは全てスペースですが、level 1 と 初期のlevel 2 では、先頭文字エルが小文字の[ level ]であると共に[ Cascading Style Sheets ]の直後にカンマ[ , ]が入り、[ Cascading Style Sheets, ]となっています。

 次に略称の方は、[ Cascading Style Sheets ]の略である[ CSS ]、スペースを入れず直後にメジャーバージョンが入り、[ CSS1 ][ CSS2 ][ CSS3 ]のようになっています。

 但し、これまで唯一マイナーバージョン(Revision)が付いている[ CSS 2.1 ]については、仕様書編集上の都合なのか、[ CSS ]と[ 2.1 ]の間にスペースが入るようです。

 前述の通り、CSS2といえばCSS 2.1を指すわけですが、当サイトでは、初期のCSS2とCSS 2.1が区別しやすくなるだろうという発想で初期のCSS2を敢えてCSS 2.0、CSS2として差し替えられるCSS 2.1もそのままCSS 2.1と表記している場合があります。

CSSスタイルシートによる書式設定

 CSS1での書式設定にはCSSインライン設定CSSのHTML/XHTMLファイル内設定といった方法がありましたが、CSS2からは外部ファイルを標準化すべく策定されています。

CSSスタイル設定した外部ファイルを指定

 という事でHTML 4.0 / HTML 4.01やXHTMLでこれからホームページを作る、まだホームページを作り始めたばかりという方は、比較的初期の段階でHTML/XHTML内ではなくCSS専用ファイルでスタイル設定した上でHTML/XHTMLファイルに、その外部CSSファイルを読み込んで利用した方がいいでしょう。

 既にHTML 4.0 / HTML 4.01やXHTMLとCSS1やCSS2で出来上がったサイトであれば、XMLとXSLXSLTでHTMLをXHTMLに、HTML4をHTML5に、CSS設定も外部ファイルに構造変換・・・正規表現を利用して編集するという事も・・・。

 今のところCSSは利用する際にメディアタイプ(下記)などでバージョン指定をする必要がありませんから新しいバージョンのCSS指定を記述する事ができますが、極々稀に過去のCSSで可能なCSS指定がW3C非推奨となっているケースもあります(し、次期バージョンで復活しない保証もない)ので完全対応する為には、またそれによる影響を受ける場合には、それらを削除または変更を要するケースもあり得ます。

 HTMLに関して言えばもちろん後方互換性という考え方もあり、大は小を兼ねるということもあり、旧HTMLや旧CSSで作ったサイトが新しい技術によって全く使えなくなるというわけではなく、これまで通りには使う事ができますが、稀な例外に遭遇する可能性の他、新しい機能を搭載できない可能性があるという事です。


◆HTML/XHTMLのメディアタイプ(<head></head>内で指定)

・htmlの場合
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="xxx.css" type="text/css">


・xhtmlの場合
<meta http-equiv="Content-Style-Type" content="text/css"/>
<link rel="stylesheet" href="xxx.css" type="text/css"/>

 CSSではCSS2からメディアタイプ指定に[@media]や[@import]による[@media]指定を含むCSSファイルの取り込みといった指定も利用できるようになり、この指定を推奨していくようです(CSS @ルールと規則集合)。

 理由としては、メディアタイプを指定しなくても最近のブラウザは解析してくれてしまうという事も相まってメディアタイプの設定、記述がまちまちだったり、なくても利用できてしまっている(旧タイプのブラウザでは利用できない可能性もある)事があるようです。

CSSバージョンにおけるブラウザ対応

 CSS1当初からそうですが、W3Cで勧告されたとはいえ実際にCSSが適用されたページの閲覧にはブラウザを利用します。

 ブラウザは、文字や静止画像閲覧用途以外にも動画、映像再生、音楽再生という機能も持ち合わせており、テキストブラウザというものもあります。

 このブラウザは相当数あり、それぞれにバージョンがあり、時代の流れとともに必然的に以降の新しい規格に対応しておらずベンダーによるサポートも終了したブラウザというものも含まれます。

 更にこれまでは各主要ベンダー間でサポート状況が異なるという事もしばしばでしたが、地デジが現実的になり、テレビとネットの融合が現実のものとなり、その過渡期において標準規格に足並みを揃えていなければブラウザベンダーとしての地位を失いかねませんし、標準化団体W3Cで次期HTML5/CSS3を策定しているチームのメンバーは主要ブラウザを擁する各ベンダーのメンバーなので過去のようなマイナス要因は激減すると思います。

 現在、各主要ベンダーが提供している最新のブラウザはCSS1及びCSS2まではフルサポート、CSS 2.1/CSS3は部分的にサポートしているようです >> CSS1/CSS2(CSS 2.0/CSS 2.1)とCSS3の基本プロパティ(CSS2全プロパティにopacityを1つ追加)まではフルサポートされていますが、CSS3においては拡張モジュールの形で追加できるようになっており、SVGやMath3.0を含め、こうした拡張プロパティにおける各ブラウザにおける対応状況については、この限りではありません(2012年07月現在)。

 また、CSSのコンセプトとして仕様外の設定を無視します(但し、設定の仕方によってはどの範囲までを無視するかが違ってくる場合があります)。

 これによってラッパーで閲覧ページを分岐するなど旧タイプのブラウザ利用者への配慮がいらなくなるわけではありません。

 一方でCSSに関してもブラウザを超えた実装を意味するクロスブラウザ対策が暫定的かつ個々に行われ、それらのテクニックは、CSSフィルタとかCSSハックと呼ばれていたりもしますが、各ブラウザのシェアやバグへの対応状況等、時の経過と共に不要となる対策、むしろ、その際にはレイアウトに影響が出てしまうという可能性もあるので利用する際には注意が必要です。

映像・音楽などメディア対応

 CSS3及びその過程にあるCSS 2.1では、これら閲覧機能だけでなくその他機能の大幅な利便性アップも考慮しています。

 例えばやはり次期規格のマークアップ言語HTML5では、Windows環境でいえばQuickTime、RealPlayer、MediaPlayer等の外観を持つ事ができる<video>や<audio>タグの提供を予定しており、これらタグの子要素として<source>タグに映像ファイルや音楽ファイルを指定するだけで前述の各種プレーヤーがインストールされていなくても映像や音楽再生ができるという優れモノの仕様です。

 このHTML5仕様でCSS3が予定しているのが例えば音の強弱であるボリューム機能などです。

 こうした点でも構造として準備するのはHTML(HTML5)、これに機能を付けたり、映像モニターやプレーヤーの位置設定など外観の装飾をするのがCSS(CSS3)といった明確な切り分けの下、仕様が策定されています。

CSS/スタイルシート情報

ホーム前へ次へ