中小企業のどんな悩みにも寄り添って一緒に解決する愛知県の経営コンサルタント

メニュー

W3CのCSS3に関する仕様書を全部読んでリファレンスとしてまとめてみた

最終更新日:

公開日:2014年07月30日

HTML

どうも、くーへいです。

この記事は、CSS3のモジュールをW3Cの仕様書に基づいてまとめています。
CSS2までは1つの仕様書になっていたのですが、CSS3からは個々の機能ごとにモジュール化され、ブラウザはそれぞれのモジュール機能を搭載するかしないかを選べるようになっています。

そんな状況ですので、CSS3とは何かがいまいち明確になっていませんし、各仕様書も10年前に作業終了したものから未だに作業中のものまで多岐にわたっています。
そこで、この記事でまとめてしまおうというわけです。

詳細については各記事を公開次第、この記事にもリンクを作成します。
この記事も随時更新しますので、お楽しみに。

※各タイトルの日本語名は筆者によるもの。カッコ内の英語名は仕様書のまま。
※各仕様書の策定状況は記事公開時点(2014年7月◯日)とします。状況確認次第、お知らせします。
※ブラウザ対応状況は「Can I use…」を参照しています。
※「Can I use…」にて明記されていない場合は、実際に実行したり他のサイトの情報を参考にすることで埋めています。

W3Cにおけるステータスについて

策定状況

※2014年8月18日更新
W3Cの策定プロセスが、2014年8月5日より変更になっていますので、更新しました。
端的にいえば、最終草案が勧告候補に組み込まれた形です。

W3Cでは、各仕様書の策定状況をいくつかの言葉で表しています。
一般的な遷移は以下の通り。

「初期草案(First Public Working Draft)」

「作業草案(Working Draft)」

「勧告候補(Candidate Recommendation)」

「勧告案(Proposed Recommendation)」

「勧告(Recommendation)」

草案段階では仕様が変わることはよくあります。
後のプロセスに行けばいくほど、変更するために必要な手続きが多くなっていきます。

勧告されたからと言って絶対に変更がないわけではありませんが、大きな仕様変更はまずないと思って問題ないでしょう。

モジュールの状態

勧告の状況とは別にモジュールの状態も記載されています。

  • 完了(Com­pleted)
  • 安定(Stable)
  • テスト中(Testing)
  • 精査中(Refining)
  • 改訂中(Revising)
  • 調査中(Exploring)
  • 書き換え中(Rewriting)
  • 放棄(Abandoned)

それぞれが意味するところは日本語の通りですが、勧告候補となっていても「改訂中」となっていれば、今後変更が予測されるとわかります。

メディアクエリ(Media Queries)

仕様の策定状況

2012年6月19日 勧告

モジュールの状態

完了

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × ×

関連記事

レスポンシブなサイトをつくりたい!実装方法はじめの一歩

概要

CSS2でもメディアクエリ自体は存在していましたが、その名の通り、メディアに応じてCSSの内容を変化させるだけでした。
CSS3のメディアクエリではこれを拡張し、「幅」「高さ」「色」などに応じてCSSを変化させることができます。

レスポンシブデザインの場合は必要不可欠なモジュールですね。

IE8以下では未対応ですので、JS等による対応が必要になります。

セレクター(SELECTORS LEVEL 3)

仕様の策定状況

2011年9月29日 勧告

モジュールの状態

完了

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
×

※IE7、IE8は[attr^=val]、[attr$=val]、[attr*=val]のみ対応

概要

CSSを適用する際に使用するセレクターを拡張しています。
「E:nth-child(n)」などが有名でしょうか。

CSS Template Layout Module

仕様の策定状況

2011年11月29日 作業草案

モジュールの状態

調査中

ブラウザ対応状況

全ブラウザで未対応

概要

displayプロパティで行列のようにレイアウトを定義した後、各要素にpositionプロパティで位置づけします。

body { display:	"aaa"
				"bcd" }
#head { position: a }
#nav { position: b }
#adv { position: c }
#body { position: d }

便利そうなモジュールですが、実装しているブラウザは無いようです。
策定も途中でストップしていますね。
おそらくですが、同様の事ができる「CSS Grid Layout Module Level 1」にシフトしたのではないでしょうか?

CSS AURAL STYLE SHEETS

仕様の策定状況

削除

モジュールの状態

不明

ブラウザ対応状況

全ブラウザで未対応

概要

音声系のモジュールでしたが、W3Cのリストからも削除されています。
今後策定される可能性はないでしょう。

背景とボーダー(CSS Backgrounds and Borders Module Level 3)

※2014年9月10日更新
border-radiusに関する計算方法、canvasにおける背景の取り扱いを変更したうえで、再び勧告候補に格上げ

仕様の策定状況

2014年9月9日 勧告候補

モジュールの状態

テスト中

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × ◯(△?)

※IE9、IE10はborder-image各種には未対応
※Safariはbackground-sizeの一部機能に未対応(未確認)

概要

言わずと知れた、backgroundとborderプロパティのCSS3向け拡張モジュールです。

複数の背景、background-clip、background-origin、background-size、border-radius、border-image各種、box-shadowなどが追加されています。

ユーザーインターフェイス(CSS Basic User Interface Module Level 3 (CSS3 UI))

仕様の策定状況

2012年2月17日 最終草案

モジュールの状態

改訂中

ブラウザ対応状況

box-sizing

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× ×

※Firefox以外は、border-box値のみをサポートし、padding-box値をサポートしません。

resizeプロパティ

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × × × × × ×

cursorプロパティ(追加された値についてのみ)

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × ×

※IE(全バージョン)ではalias、cell、copy、ew-resize、ns-resize、nesw-resize、nwse-resize、context-menuにおけるcursorは非対応

※疑似要素については未検証
※nav-index、nav-up、nav-right、nav-down、nav-leftプロパティは対応ブラウザが無い様子
※ime-modeプロパティはIEおよびFirefoxで対応している様子

概要

下記が追加されています。

疑似要素・・・:indeterminate、:default、:valid、:invalid、:in-range、:out-of-range、:required、:optional、:read-only、:read-write、::value、::choices、::repeat-item、::repeat-index
icon関連・・・contentプロパティにおけるicon値、iconプロパティ
box-sizingプロパティ
outline関連・・・outline、outline-width、outline-style、outline-color、outline-offsetプロパティ
リサイズ・オーバーフロー関連・・・resize、text-overflowプロパティ
ポインティングデバイス・キーボード関連・・・cursor、nav-index、nav-up、nav-right、nav-down、nav-left、ime-modeプロパティ

多岐にわたっていますね。

それぞれ全く性質が違いますし、ブラウザのサポート状況もバラバラです。

ボックスモデル(CSS basic box model)

仕様の策定状況

2007年8月9日 作業草案

モジュールの状態

書き換え中

概要

CSSの基本となるボックスモデルについて仕様が定められています。

CSSでもいくつかのプロパティや値が追加されていますが、詳細はそれぞれの項にゆだねます。

CSS EXTENDED BOX MODEL

仕様の策定状況

削除

モジュールの状態

不明

概要

上のボックスモデルを拡張するモジュールでしたが、詳細な仕様策定には至っていません。

マーキー(CSS Marquee Module Level 3)

仕様の策定状況

2008年12月5日 勧告候補

モジュールの状態

テスト中

概要

ガラケー時代には流行した、文字が横に流れるアレです。

HTML5ではmarquee要素は削除されましたので、現在ではCSS3で仕様が勧告される予定でしたが、勧告候補で止まってしまっています。
対応ブラウザもまばらで古いバージョンに偏り気味なようです。

今後は削除される可能性もありますので、注意してください。

CSS Cascading and Inheritance Level 3

仕様の策定状況

2013年10月3日 勧告候補

モジュールの状態

テスト中

ブラウザ対応状況

未調査ですが、多くのブラウザで「all」プロパティと「unset」値には未対応の様子

概要

CSSの基本であるカスケーディングと継承について、仕様を策定しています。

CSS3では、全てのプロパティを示す「all」と値の設定を解除する「unset」が用意されています。

便利なように見えますが、残念ながら策定は途中でストップしてしまっています。

CSS Color Module Level 3

仕様の策定状況

2011年6月7日 勧告

モジュールの状態

完了

ブラウザ対応状況

HSL、RGBの数値指定およびrgba()、hsla()の色指定

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × ×

opacityプロパティ

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox

※IE8以前はopacityと同様の機能を「filter」で表現できる。

currentColor値、appearance値

詳細不明

概要

従来の16進数の指定方法に加え、HSL(色相、彩度、明度)、RGBを数値で指定できる方法が追加され、rgba()やhsla()で透過度が指定できるようになりました。
他に、opacityプロパティ、currentColor値、appearance値が追加されています。

フォント(CSS Fonts Module Level 3)

仕様の策定状況

2013年10月3日 勧告候補

モジュールの状態

テスト中

ブラウザ対応状況

未調査

概要

下記のプロパティが追加になりました。多岐にわたっていますね。

  • font-stretch
  • font-size-adjust
  • font-synthesis
  • font-feature-settings
  • font-kerning
  • font-variant(機能拡張)
  • font-variant-ligatures
  • font-variant-position
  • font-variant-caps
  • font-variant-numeric
  • font-variant-alternates
  • font-variant-east-asian
  • font-language-override

「font-stretch」は、文字を横に引き延ばしたり縮めたりできます。

「font-size-adjust」は、フォントの種類が変わった際でもフォントサイズが変わらないように調整ができます。

「font-synthesis」は、太字や斜体を持たないフォントでも強制的に太字や斜体で表示するように指定できます。

「font-feature-settings」は、OpenTypeフォントの持つ各機能の有効無効を設定できます。

「font-kerning」は、カーニングが設定できます。欧文フォントかつカーニング情報を持っているフォントでしか機能しません。

「font-variant-~~」および「font-language-override」は、フォントについて細かな指定が行えるようですが、利用するケースはかなり限られます。また、フォント側の仕様把握も必要です。

CSS Generated Content for Paged Media Module

仕様の策定状況

2014年5月13日 作業草案

モジュールの状態

調査中

ブラウザ対応状況

ほとんどのブラウザで非対応

概要

印刷媒体向けのモジュールです。
タブやリーダーといった機能を提供しています。

主なプロパティや値は以下の通り。

  • string-setプロパティ
  • positionプロパティのrunning値
  • contentプロパティのelement()値、leader()値
  • floatプロパティのfootnote値
  • footnote-displayプロパティ
  • footnote-policyプロパティ
  • bookmark-levelプロパティ
  • bookmark-labelプロパティ
  • bookmark-stateプロパティ

CSS PAGE FLOATS

仕様の策定状況

仕様書なし

モジュールの状態

調査中

ブラウザ対応状況

なし

概要

印刷時のフロート指定。
詳細は未策定。

CSS3 Generated and Replaced Content Module

仕様の策定状況

2003年5月14日 作業草案

モジュールの状態

書き換え中

ブラウザ対応状況

未調査

概要

要素の自由な配置のためのモジュール。
2003年以降全く更新はない。

詳細は省略。

CSS3 Hyperlink Presentation Module

仕様の策定状況

2004年2月24日 作業草案

モジュールの状態

破棄

ブラウザ対応状況

未調査

概要

ハイパーリンクの機能拡張モジュール。
破棄されたため、策定されることはなさそう。

CSS3 module: line

仕様の策定状況

2002年5月15日 作業草案

モジュールの状態

書き換え中

ブラウザ対応状況

未調査

概要

ラインフォーマットを拡張するためのモジュール。
2002年以降、全く更新なし。

詳細は省略。

リスト(CSS Lists and Counters Module Level 3)

仕様の策定状況

2014年3月20日 作業草案

モジュールの状態

調査中

ブラウザ対応状況

未調査

概要

  • displayプロパティのinline-list-item値
  • list-style-typeプロパティ・・・@counter-styleで指定したスタイルが使用できる
  • counter-setプロパティ・・・counter-incrementとの違いは「0」から始まるか「1」から始まるか?

list-style-positionプロパティのhanging値の採用は見送られたようです。

CSS MATH

仕様の策定状況

未策定

モジュールの状態

不明

ブラウザ対応状況

なし

概要

数式のスタイルを定義するモジュールです。
策定作業は進んでいません。

マルチカラムレイアウト(CSS Multi-column Layout Module)

仕様の策定状況

2011年4月12日 勧告候補

モジュールの状態

テスト中

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × ×

※IE以外はベンダープレフィックスでの対応
※IE以外はbreak-before、break-after、break-insideに対応しない
※Chrome、Safari、Android標準ブラウザでは、独自に-webkit-column-break-before、-webkit-column-break-after、-webkit-column-break-insideが使用できる

概要

マルチカラムレイアウトに関するモジュール。

  • column-width・・・幅でカラム数を設定できる
  • column-count・・・カラム数を直接設定できる
  • columns・・・column-widthとcolumn-countを同時に設定できる
  • column-gap・・・カラム間の間隔
  • column-rule-color・・・カラム間の区切り線の色(色だけを指定しても何も表示されない。スタイルの設定が必要)
  • column-rule-style・・・カラム間の区切り線のスタイル
  • column-rule-width・・・カラム間の区切り線の幅(幅だけを指定しても何も表示されない。スタイルの設定が必要)
  • column-rule・・・column-rule-color、column-rule-style、column-rule-widthをまとめて設定できる
  • break-before、break-after、break-inside・・・カラムレイアウトを特定の位置で解除できる

名前空間(CSS Namespaces Module Level 3)

仕様の策定状況

2011年9月29日勧告、2014年3月20日変更

モジュールの状態

完了

ブラウザ対応状況

未調査

概要

名前空間に関するモジュールです。
詳細は省略します。

CSSOM(CSS Object Model)

仕様の策定状況

2013年12月5日 作業草案

モジュールの状態

調査中

概要

CSSOMに関する仕様。

いわゆるDOMのようなものですが、CSSらしからぬ複雑さのため説明は省略。

CSSOM View Module

仕様の策定状況

2013年12月17日 作業草案

モジュールの状態

改訂中

概要

CSSOMから派生した、見た目の解析・操作を提供する仕様。

CSSOMと同様に説明は省略。

CSS Paged Media Module Level 3

仕様の策定状況

2013年3月14日 作業草案

モジュールの状態

改訂中

ブラウザ対応状況

未調査

概要

ページボックスを定義します。
印刷時のスタイルとして用いるケースが多いようです。

詳細は省略。

CSS POSITIONED LAYOUT LEVEL 3

仕様の策定状況

2012年2月7日 作業草案

モジュールの状態

調査中

概要

positionプロパティのCSS3版でしたが、現在はリストから削除されています。

CSS3 module: Presentation Levels

仕様の策定状況

2003年8月13日 作業草案

モジュールの状態

調査中(現在活動なし)

ブラウザ対応状況

全て未対応

概要

presentation-levelプロパティが定義されています。

プレゼンテーションレベルに応じたCSSの適用ができる仕様ですが、策定は進んでいません。

The CSS ‘Reader’ Media Type

仕様の策定状況

2004年2月24日 作業草案

モジュールの状態

不明

概要

メディアタイプ’Reader’に関する仕様です。

策定は進んでいません。

ルビ(CSS Ruby Module Level 1)

※2014年8月18日更新
草案が更新され、いくつかの仕様が変更されましたが、プロパティ名や値に変更は出ていません。

仕様の策定状況

2014年8月5日 作業草案

モジュールの状態

調査中

ブラウザ対応状況

IEでは対応していますが、それ以外の主要ブラウザでは未対応のようです。

概要

ルビに関する仕様です。

HTML5ではルビに関する要素が大量に策定されましたが、それのCSS版という感じでしょうか。
(ルビに関しては策定の際に色々な事情があったようですが、この記事では触れません)

  • displayプロパティのruby、ruby-base、ruby-text、ruby-base-container、ruby-text-containerの各値
  • ruby-positionプロパティ
  • ruby-mergeプロパティ
  • ruby-alignプロパティ

CSS SCOPING

仕様の策定状況

2014年4月3日 作業草案

モジュールの状態

調査中

概要

@の影響範囲についての仕様のようですが、詳細は不明です。

グリッドレイアウト(CSS Grid Layout Module Level 1)

仕様の策定状況

2014年5月13日 作業草案

モジュールの状態

改訂中

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × × × × × × × × ×

※IE10、IE11はベンダープレフィックスでの対応

概要

要素の自由な配置のための仕様です。

グリッドレイアウトで出来ることは、マルチカラム・テンプレートレイアウト・フレキシブルボックスレイアウト・リージョンと重なりますが、それらを置き換えるものではないそうです。

2014年7月現在、リストからは外れていますが、策定状況としては非常に活発です。
しかし、活発であるため、仕様の変更も頻繁で、完全に搭載するブラウザは今のところありません。
今後の動向を見守りましょう。

2014年7月時点のプロパティと値

  • displayプロパティのgrid、inline-grid値
  • grid-template-columns、grid-template-rowsプロパティ
  • grid-template-areasプロパティ
  • grid-templateプロパティ
  • grid-auto-columns、grid-auto-rowsプロパティ
  • grid-auto-flowプロパティ
  • gridプロパティ
  • grid-row-start、grid-column-start、grid-row-end、grid-column-endプロパティ
  • grid-row、grid-columnプロパティ
  • grid-areaプロパティ

リージョン(CSS Regions Module Level 1)

仕様の策定状況

2014年2月18日 作業草案

モジュールの状態

調査中

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × × × × × × × ×

※IEはiframe内、かつベンダープレフィックスでの対応
※Safariはベンダープレフィックスでの対応
※Chromeはデフォルトで無効。有効後はベンダープレフィックスにて対応

概要

要素の配置の流れを特定の要素に沿って行うモジュール・・・と理解しましたが、自身がありません。
詳細は調査します。

  • flow-intoプロパティ
  • flow-fromプロパティ
  • break-beforeプロパティ
  • break-afterプロパティ
  • break-insideプロパティ
  • region-fragmentプロパティ

音声(CSS Speech Module)

仕様の策定状況

2012年3月20日 勧告候補

モジュールの状態

テスト中

ブラウザ対応状況

主要な視覚系ブラウザでは対応していません。

音声ブラウザでは対応している可能性がありますが、未調査です。

概要

HTMLを音声で表現するためのモジュール。
下記のプロパティおよび値を定義しています。

  • voice-volume
  • voice-balance
  • speak
  • speak-as
  • pause-before
  • pause-after
  • pause
  • rest-before
  • rest-after
  • rest
  • cue-before
  • cue-after
  • cue
  • voice-family
  • voice-rate
  • voice-pitch
  • voice-range
  • voice-stress
  • voice-duration

CSS Style Attributes

仕様の策定状況

2013年11月7日 勧告

モジュールの状態

完了

概要

HTML4.01やXML1.0では、「style属性」が定義されていないため、ここで代わりに定義しています。
よって、この仕様書にはプロパティ等は含まれていません。

CSS Syntax Module Level 3

仕様の策定状況

2014年2月20日 勧告候補

モジュールの状態

精査中

概要

CSSの文法について定めています。
プロパティ等の定義は一切ありません。

テーブル(CSS TABLES MODULE)

仕様の策定状況

CSS2.1と変更がないため、新たな策定無し

モジュールの状態

調査中

概要

CSS2.1とは変更点がないため、CSS3向けに策定はされていません。

テキスト(CSS Text Module Level 3)

仕様の策定状況

2013年10月10日 最終草案

モジュールの状態

精査中

ブラウザ対応状況

tab-size

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × × × ×

※Firefoxはベンダープレフィックスでの対応

line-break

未調査

word-break

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox

※Chrome、Safari、Android標準ブラウザはbreak-all値のみ対応。keep-all値には非対応

hyphens

未調査

overflow-wrap(word-wrap)

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox

※IEおよびFirefoxは「word-wrap」にて対応。それ以外は「overflow-wrap」で対応

text-alignのstart、end、、match-parent、start end、文字列の各値

未調査

text-align-last

未調査

text-justify

未調査

hanging-punctuation

未調査

概要

文字に関する定義を行っています。

新しいプロパティおよび値は以下の通り。

  • tab-sizeプロパティ・・・タブの大きさを指定できる
  • line-breakプロパティ・・・行の折り返しの厳密さを指定します。Photoshop等で言うと、禁則処理にあたるでしょうか(未検証)
  • word-breakプロパティ・・・単語単位で折り返すかどうかを指定します。Photoshop等でいうと、文字組みでしょうか(未検証)
  • hyphensプロパティ・・・ハイフネーションを指定します
  • overflow-wrap(word-wrap)プロパティ・・・長い単語の場合にボックスをはみ出すか、単語の途中で折り返すかを指定します。策定の途中でプロパティの名称が変わりました
  • text-alignプロパティのstart、end、、match-parent、start end、文字列の各値、initialはstartに変更
  • text-align-lastプロパティ・・・テキストの最終行の位置を指定できます
  • text-justifyプロパティ・・・均等割り付けの方式を指定できます。text-alignプロパティがjustifyの場合のみ有効です
  • hanging-punctuationプロパティ・・・句読点をボックスの外側にはみ出して表示するかどうかを指定できます

新しく追加されたプロパティ等では、今まで自由の利かなかった文字組み等に関して、拡充されています。
IEが先行して搭載したプロパティも多くあります。

CSS Writing Modes Level 3

仕様の策定状況

2014年3月20日 勧告候補

モジュールの状態

テスト中

ブラウザ対応状況

未調査

概要

こちらも文字に定義を行っているモジュールです。

  • unicode-bidiプロパティのplaintext、isolate、isolate-override値
  • writing-modeプロパティ・・・要素の配置の流れを決めます。ブロック要素も含まれるのが特徴
  • text-orientationプロパティ・・・縦書き時の文字の回転を決めます。初期では日本語は回転なし、英語は右に90度回転しています
  • caption-sideプロパティのblock-start、block-end値
  • text-combine-uprightプロパティ・・・日本語の縦書き時に含まれる数字を、横書きで1文字に含まれるようにします

ライングリッド(CSS LINE GRID)

仕様の策定状況

2014年4月3日 作業草案

モジュールの状態

調査中

概要

2014年4月に草案が作成されたばかりのプロパティです。

テキストのグリッド配置に関する仕様が定義されています。

含まれるプロパティは以下の通り。

  • line-gridプロパティ・・・新たにライングリッドを作成できます
  • line-snapプロパティ・・・ラインのグリッドをどこにスナップするか設定します
  • line-slackプロパティ・・・ラインのグリッドへのスナップを緩めます
  • box-snapプロパティ・・・ボックスのグリッドをどこにスナップするか設定します

まだまだ日本語の情報が少なく、詳細がわかりませんが、追って調査します。

値と単位(CSS Values and Units Module Level 3)

仕様の策定状況

2013年7月30日 勧告候補

モジュールの状態

調査中

ブラウザ対応状況

rem

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × ×

vw、vh、vmin、vmax

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × ×

※IE9ではvminの代わりにvmが使われる
※IEではvmaxをサポートしない
※iOS Safariではvhにバグがある

calc()

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × ×

※未対応のIEでは代わりにexpression()が使用できるが、関数の評価回数が多いため、工夫が必要。また、バグも多い
※IE9ではcalc()をbackground-positionの値に使うとクラッシュする

attr()

未調査

toggle()

未調査

概要

CSSにおける値や設定値について定義しています。

CSS2.1からいくつかの追加がされています。
確認したかぎりでは以下の通り。

  • ch(単位)・・・現在のフォントの0の幅を1とする単位
  • rem(単位)・・・root emという意味で、ルート要素のフォントサイズを1とする単位
  • vw(単位)・・・ビューポートの幅の1%を1とする単位
  • vh(単位)・・・ビューポートの高さ1%を1とする単位
  • vmin(単位)・・・ビューポートの幅もしくは高さの小さいほうの1%を1とする単位
  • vmax(単位)・・・ビューポートの幅もしくは高さの大きいほうの1%を1とする単位
  • calc()・・・値を演算する
  • attr()・・・要素を指定すると、その属性値を取得できます
  • toggle()・・・属性値を複数指定すると、指定された要素の子孫に対し、属性値順にスタイルを適用していきます

Behavioral Extensions to CSS

仕様の策定状況

2007年10月19日 作業草案

モジュールの状態

破棄

概要

他の言語(XBLなど)でのCSS利用に関するモジュールと思われます。
破棄されたため、策定はないでしょう。

フレキシブルレイアウト(CSS Flexible Box Layout Module Level 1)

仕様の策定状況

2014年3月25日 最終草案

モジュールの状態

テスト中

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × ×

※IE10ではベンダープレフィックスが必要。また、2012年時点での仕様を採用しているため、プロパティが異なる
※各旧バージョンにおける対応は様々で、旧仕様を採用している場合もあるので、細心の注意を払う必要がある

関連記事

CSS3の「フレキシブルレイアウト」使い方まとめ

概要

フレキシブルレイアウトに関するモジュール。

  • 要素の配置方向を自由に決められる
  • 要素の配置順序を自由に決められる
  • 要素の折り返し方法を設定できる
  • 要素のサイズを伸縮自在にできる(余った空間すべてをある要素に割り当てる、など)
  • 要素を整列させられる

などの機能があります。

  • displayプロパティのflex、inline-flex値
  • flex-directionプロパティ
  • flex-wrapプロパティ
  • flex-flowプロパティ(ショートハンド)
  • orderプロパティ
  • flexプロパティ(ショートハンド)
  • flex-growプロパティ
  • flex-shrinkプロパティ
  • flex-basisプロパティ
  • justify-contentプロパティ
  • align-itemsプロパティ
  • align-selfプロパティ
  • align-contentプロパティ

以上のプロパティや値が追加されています。

画像(CSS Image Values and Replaced Content Module Level 3)

仕様の策定状況

2012年4月12日 勧告候補

モジュールの状態

テスト中

ブラウザ対応状況

dppx

未調査

image()

未調査

linear-gradient()、radial-gradient()、repeating-linear-gradient()、repeating-radial-gradient()

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × ×

object-fit、object-position

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × × × × × × × × ×

image-resolution

未調査

image-orientation

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × × × × × × × × ×

概要

画像に関するモジュール。
追加されたのは以下の通り。

  • dppx(単位)・・・dot per px であらわされる単位
  • image()記法・・・url()で画像を指定する方法に加えて、image()が追加されました。image()ではsvgなどを指定した際に、詳細なプロパティを指定できました
  • linear-gradient()記法・・・直線的なグラデーションを表現できます
  • radial-gradient()記法・・・曲線的なグラデーションを表現できます
  • repeating-linear-gradient()およびrepeating-radial-gradient()記法・・・繰り返したをグラデーション表現できます
  • object-fitプロパティ・・・包括する要素の幅や高さに合わせるかどうかを指定します
  • object-positionプロパティ・・・要素内のどこに位置するかを指定します
  • image-resolutionプロパティ・・・画像の解像度を指定します
  • image-orientationプロパティ・・・画像の角度を指定します

フラグメンテーション
(CSS Fragmentation Module Level 3
Breaking the Web, one fragment at a time)

仕様の策定状況

2014年1月16日 作業草案

モジュールの状態

精査中

ブラウザ対応状況

未調査

概要

ページ、カラム、リージョンの各レイアウトにおける区切りを設定できます。

  • break-before、break-after、break-insideプロパティ・・・印刷の際の区切り方法を指定します。break-beforeはボックスの前、break-afterはボックスの後、break-insideはボックス途中の区切り方法を指定します。CSS2.1まででは「page-break-~」で定義されていましたが、プロパティ名が変更され、値が追加されています
  • box-decoration-breakプロパティ・・・ボックスが改行する際のボックスのつながりについて設定します

変形(CSS Transforms Module Level 1)

仕様の策定状況

2013年11月26日 作業草案

モジュールの状態

精査中

ブラウザ対応状況

transform、transform-origin

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × ×

※IE9、Safari、iOS Safari、Android標準ブラウザ、Android Chromeはベンダープレフィックスが必要

transform-style、perspective、perspective-origin、backface-visibility

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × ×

※Safari、iOS Safari、Android標準ブラウザ、Android Chromeはベンダープレフィックスが必要
※IE10、IE11ではtransform-styleプロパティのpreserve-3d値に対応していないため、子要素すべてに手入力で変形値を入力する必要があります

概要

2次元および3次元の空間で要素を変形します。

  • transformプロパティ・・・様々な変形を指定できます
  • transform-originプロパティ・・・変形における原点を指定します
  • transform-styleプロパティ・・・変形を2Dとするか、3Dとするかを指定します
  • perspectiveプロパティ・・・3Dの際に遠近感を指定します
  • perspective-originプロパティ・・・遠近感におけるユーザの視点の位置を指定します
  • backface-visibilityプロパティ・・・3Dの際に、裏面を表示するかどうかを指定します

トランジション(CSS Transitions)

仕様の策定状況

2013年11月19日 作業草案

モジュールの状態

精査中

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × ×

関連記事

CSS3でアニメーション!transitionとanimationまとめ

概要

CSSでトランジション(簡易的なアニメーション)を実装できます。

下記のアニメーションとの違いは、

  • トランジションが:hoverなどのきっかけが必要なのに対し、アニメーションは設定が可能
  • トランジションでは実行後に元のプロパティ値に戻る
  • アニメーションでは細かい設定が可能

などが挙げられます。

プロパティは以下の通り。

  • transition-propertyプロパティ・・・トランジションを適用するプロパティを指定します
  • transition-durationプロパティ・・・トランジションにかける時間を指定します
  • transition-timing-functionプロパティ・・・トランジション実行中の変更速度を指定できます
  • transition-delayプロパティ・・・トランジション実行やプロパティ変更の際の待ち時間を指定します
  • transitionプロパティ(ショートハンド)・・・上記4プロパティのショートハンドです

意外と多くのブラウザが標準対応していますね。

アニメーション(CSS Animations)

仕様の策定状況

2013年2月19日 作業草案

モジュールの状態

精査中

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × ×

※Chrome、Safari、Android標準ブラウザではベンダープレフィックスが必要
※Android標準ブラウザではバージョン2系や3系でバグがあるので注意

関連記事

CSS3でアニメーション!transitionとanimationまとめ

概要

CSSでアニメーションを実装できます。

上記のトランジションとの違いは、

  • トランジションが:hoverなどのきっかけが必要なのに対し、アニメーションは設定が可能
  • トランジションでは実行後に元のプロパティ値に戻る
  • アニメーションでは細かい設定が可能

などが挙げられます。

プロパティは以下の通り。

  • animation-nameプロパティ・・・アニメーションを識別するための名前を指定できます
  • animation-durationプロパティ・・・アニメーションにかける時間を指定します
  • animation-timing-functionプロパティ・・・アニメーション実行中の変更速度を指定できます
  • animation-iteration-countプロパティ・・・アニメーションの実行回数を指定できます
  • animation-directionプロパティ・・・アニメーション実行の方向を指定できます
  • animation-play-stateプロパティ・・・アニメーションが実行中か停止中かを判定および指定できます
  • animation-delayプロパティ・・・アニメーション実行の待ち時間を指定します
  • animation-fill-modeプロパティ・・・アニメーション実行の前や後の要素の状態(スタイル)を指定します
  • animationプロパティ(ショートハンド)・・・上記のプロパティを一度に指定できます

CSS Conditional Rules Module Level 3

仕様の策定状況

2013年4月4日 勧告候補

モジュールの状態

テスト中

概要

@mediaおよび@supportに対する拡張が加えられています。

viewport(CSS Device Adaptation)

仕様の策定状況

2011年9月15日 作業草案

モジュールの状態

調査中

関連記事

レスポンシブなサイトをつくりたい!実装方法はじめの一歩

概要

@viewportに関する仕様が策定されています。

CSS Exclusions Module Level 1

仕様の策定状況

2013年5月28日 作業草案

モジュールの状態

調査中

ブラウザ対応状況

未調査

概要

フロート要素周辺の除外について定義しています。(詳細は調査中)

  • wrap-flow・・・フロート要素の除外を設定します
  • wrap-through・・・除外された要素の折り返しを設定します

CSS Shapes Module Level 1

仕様の策定状況

2014年3月20日 勧告候補

モジュールの状態

テスト中

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × × × × × × × × × × ×

現在のところ対応ブラウザはありませんが、次世代のブラウザには採用される予定です。

概要

テキストが任意の形状に合わせて折り返します。(詳細は調査中)

  • shape-outside・・・形状を指定します
  • shape-image-threshold・・・画像の透過部分に関するしきい値を設定します
  • shape-margin・・・形状からの間隔を指定します

Compositing and Blending Level 1

仕様の策定状況

2014年2月20日 勧告候補

モジュールの状態

精査中

ブラウザ対応状況

mix-blend-mode

未調査

isolation

未調査

background-blend-mode

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × × × × × × ×

概要

※正式にはCSS3に含まれる仕様ではありません

下記プロパティが定義されています。(説明に関しては正確ではない可能性があります)

  • mix-blend-mode・・・混色モードを決める
  • isolation・・・要素を隔離する?
  • background-blend-mode・・・背景の混色モードを決める

フィルター(Filter Effects Module Level 1)

仕様の策定状況

2013年11月26日 作業草案

モジュールの状態

調査中

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × × × × ×※ ×

※PC版Firefoxでは基本的にサポートしませんが、url()のみサポート
※Chrome、Safari、Android標準ブラウザではベンダープレフィックスが必要

概要

要素に対してフィルターをかけます。

もともとIEが実装していたものを標準化した仕様になります。

  • filterプロパティ
  • flood-colorプロパティ
  • flood-opacityプロパティ
  • color-interpolation-filtersプロパティ
  • lighting-colorプロパティ
  • grayscaleショートハンド
  • sepiaショートハンド
  • saturateショートハンド
  • hue-rotateショートハンド
  • invertショートハンド
  • opacityショートハンド
  • brightnessショートハンド
  • contrastショートハンド
  • blurショートハンド
  • drop-shadowショートハンド
  • customショートハンド

マスキング(CSS Masking Module Level 1)

※2014年9月9日更新
2014年8月26日に勧告候補となりました。
最終草案からmask-sizeの初期値が変更になっています。
また、状態がテスト中に格上げされました。

仕様の策定状況

2014年8月26日 勧告候補

モジュールの状態

テスト中

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × × × ×

※FirefoxはインラインSVGに対してのみ有効
※Chrome、Safari、Android標準ブラウザでは、mask-imageおよびmask-box-imageプロパティのみに対応
※Chrome、Safari、Android標準ブラウザでは、ベンダープレフィックスが必要

概要

マスキングに関する仕様です。
詳細は調査中。

  • clip-pathプロパティ
  • clip-ruleプロパティ
  • mask-imageプロパティ
  • mask-modeプロパティ
  • mask-repeatプロパティ
  • mask-positionプロパティ
  • mask-clipプロパティ
  • mask-originプロパティ
  • mask-sizeプロパティ
  • mask-compositeプロパティ
  • maskプロパティ(ショートハンド)
  • mask-border-sourceプロパティ
  • mask-border-modeプロパティ
  • mask-border-sliceプロパティ
  • mask-border-widthプロパティ
  • mask-border-outsetプロパティ
  • mask-border-repeatプロパティ
  • mask-borderプロパティ
  • mask-typeプロパティ
  • clipプロパティ

CSS Box Alignment Module Level 3

仕様の策定状況

2013年5月14日 作業草案

モジュールの状態

改訂中

概要

フレキシブルレイアウトと重複する部分が多いため、割愛します。

テキスト装飾(CSS Text Decoration Module Level 3)

仕様の策定状況

2013年8月1日 勧告候補

モジュールの状態

テスト中

ブラウザ対応状況

text-shadow

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × ×

その他未調査

概要

  • ショートハンドプロパティtext-decorationにtext-decoration-skipおよびtext-underline-positionプロパティを追加
  • text-emphasis-styleプロパティ・・・東アジア向けの強調表示機能
  • text-emphasis-colorプロパティ・・・東アジア向けの強調表示機能
  • text-emphasisプロパティ(ショートハンド)・・・text-emphasis-styleおよびtext-emphasis-colorを指定可能
  • text-emphasis-positionプロパティ・・・東アジア向けの強調表示機能
  • text-shadowプロパティ・・・テキストに対してシャドウを指定できる

CSS Intrinsic & Extrinsic Sizing Module Level 3

仕様の策定状況

2012年9月27日 作業草案

モジュールの状態

調査中

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × × × ×

※いずれのブラウザもベンダープレフィックスが必要
※SafariやAndroid標準ブラウザの旧バージョンではほとんど対応していないので注意

概要

width、min-width、max-width、height、min-height、max-heightプロパティに下記の値を追加

  • fill-available
  • max-content
  • min-content
  • fit-content

また、min-width、min-heightプロパティにはさらに下記の値を追加

  • contain-floats

column-widthプロパティに下記の値を追加

  • min-content
  • max-content
  • fill-available
  • fit-content’

CSS Counter Styles Level 3

※2014年9月9日更新
2014年8月26日に再び最終草案として更新されました。
大幅な改定が加わっています。
状態は調査中から精査中に格上げになっています。

仕様の策定状況

2013年8月26日 最終草案

モジュールの状態

精査中

ブラウザ対応状況

未調査

概要

カウンターに関する仕様。

詳細は未調査

CSS Custom Properties for Cascading Variables Module Level 1

仕様の策定状況

2014年5月6日 最終草案

モジュールの状態

精査中

ブラウザ対応状況

PC iOS Android
IE6 IE7 IE8 IE9 IE10 IE11 Firefox Chrome Safari Safari 標準
ブラウザ
Chrome Firefox
× × × × × × × × × × × ×

概要

CSSにおける変数の定義に関するモジュール。

CSS Overflow Module Level 3

仕様の策定状況

2013年4月18日 作業草案

モジュールの状態

調査中

ブラウザ対応状況

未調査

概要

詳細未調査。

CSS Display Module Level 3

※2014年11月28日更新
2014年9月11日に作業草案が更新されました。
プロパティ名の修正や機能の追加が行われています。
・display-boxプロパティをbox-suppressプロパティ、display-extrasプロパティをdisplay-listプロパティに改名
・contents値をbox-suppressプロパティからdisplay-outsideプロパティへ移動
・box-suppressプロパティにhide値を追加
・blockificationルールとinlinificationルールを追加
・displayプロパティにrun-in値を追加

仕様の策定状況

2014年9月11日 作業草案

モジュールの状態

調査中

ブラウザ対応状況

未調査

概要

display関連のプロパティを拡張しているモジュール。

  • display-inside
  • display-outside
  • display-list
  • box-suppress

最近登場したモジュール。
詳細は未調査。

CSS Font Loading Module Level 3

仕様の策定状況

2014年5月22日 最終草案

モジュールの状態

調査中

概要

フォントのロードに関するモジュール。

CSS WILL CHANGE MODULE LEVEL 1

仕様の策定状況

仕様書なし

モジュールの状態

調査中

概要

アニメーションやトランジションなどに代表される要素の変更に関連するモジュールのようですが、詳細な仕様書は見当たりません。

Non-element Selectors Module Level 1

仕様の策定状況

2014年6月3日 作業草案

モジュールの状態

調査中

概要

詳細未調査。

Geometry Interfaces Module Level 1

仕様の策定状況

2014年9月18日 作業草案
(2014年11月25日 勧告候補?)

モジュールの状態

調査中

概要

詳細未調査。

関連記事

ご相談受付中です IT・DX・SEO・経営・・・幅広く中小企業のお悩みに寄り添います

スポンサードリンク