diff options
Diffstat (limited to 'files/ja/archive/css3')
| -rw-r--r-- | files/ja/archive/css3/index.html | 1089 |
1 files changed, 1089 insertions, 0 deletions
diff --git a/files/ja/archive/css3/index.html b/files/ja/archive/css3/index.html new file mode 100644 index 0000000000..f0e8fd232a --- /dev/null +++ b/files/ja/archive/css3/index.html @@ -0,0 +1,1089 @@ +--- +title: CSS3 +slug: Archive/CSS3 +tags: + - CSS + - Reference +translation_of: Archive/CSS3 +--- +<p><span class="seoSummary"><strong>CSS3</strong> とは、 <em>Cascading Style Sheets</em> 言語の最新の発展版で、 CSS2.1 の拡張を目的としています。 CSS3 は、角丸、影、<a href="/ja/docs/Web/Guide/CSS/Using_CSS_gradients" title="Using CSS gradients">グラデーション</a>、<a href="/ja/docs/Web/Guide/CSS/Using_CSS_transitions" title="CSS transitions">トランジション</a>、<a href="/ja/docs/Web/Guide/CSS/Using_CSS_animations" title="CSS animations">アニメーション</a>などの長く待望されていた数多くの新機能、また、<a href="/ja/docs/Web/Guide/CSS/Using_multi-column_layouts" title="Using CSS multi-column layouts">段組み</a>、<a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">フレックスボックス</a>、グリッドレイアウトなどの新しいレイアウトをもたらします。</span>実験的な部分にはベンダー接頭辞がついており、本番環境で使用することを避けるか、構文や意味がどちらも将来的に変更される可能性があるので、細心の注意を払いながら使用するかすべきです。</p> + +<h2 id="Modules_and_the_standardization_process" name="Modules_and_the_standardization_process">モジュールと標準化プロセス</h2> + +<p>CSS レベル 2 が勧告ステータスに至るまで、 2002 年 8 月から 2011 年の 6 月までの 9 年間が必要でした。これは、いくつかの 2 次的な機能が仕様全体を堰き止めたためです。問題のない機能の仕様の標準化を加速させるために、 W3C の <a class="external" href="http://www.w3.org/blog/CSS/" title="http://www.w3.org/blog/CSS/">CSS 作業グループ</a>は、<a class="external" href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules" title="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules">北京ドクトリン</a>と呼ばれる決定に従い、 CSS を<em>モジュール</em>と呼ばれる小さなコンポーネントに分割しました。現在、それぞれのモジュールは言語の独立したパートで、それぞれのペースで標準化に向かっています。いくつかのモジュールが既に W3C 勧告になっている一方で、まだ早期の Working Draft であるものもあります。必要性が認められた時は、新しいモジュールも追加されています。</p> + +<p><a href="/@api/deki/files/6120/=CSS_Modules_and_Snapshots.png" title="CSS_Modules_and_Snapshots.png"><img alt="CSS Modules and Snapshots as defined since CSS3" class="internal lwrap" src="/files/3623/CSS_Modules_and_Snapshots.png" style="float: left; width: 550px;"> </a> 正式には、CSS3 標準<em>自体</em>は存在しません。 それぞれのモジュールは独立して標準化されています。標準の CSS は、完了したモジュールによって改正および拡張された CSS2.1 で成り立っており、すべてが同じレベルの番号である必要はありません。各時点での、 CSS 標準のスナップショットは、 CSS2.1 と成熟したモジュールを列挙することで定義できます。</p> + +<p>W3 コンソーシアムは、<a class="external" href="http://www.w3.org/TR/css-beijing/" title="http://www.w3.org/TR/css-beijing/">2007</a>, <a class="external" href="http://www.w3.org/TR/css-2010/" title="http://www.w3.org/TR/css-2010/">2010</a>, <a href="https://www.w3.org/TR/css-2015/">2015</a>, <a href="https://www.w3.org/TR/css-2017/">2017</a>, <a href="https://www.w3.org/TR/css-2018/">2018</a> のように、定期的にそのようなスナップショットを公開しています。</p> + +<p>現在のところ、レベル 3 以上のモジュールは標準化されていませんが、将来的には変更されます。セレクター 4 や CSS 境界と背景 Level 4 のようないくつかのモジュールは、既に Editor's Draft がありますが、最初の Working Draft を公開するには至っていません。</p> + +<h2 id="CSS_modules_status" name="CSS_modules_status">CSS モジュールの状態</h2> + +<h3 id="完了モジュール">完了モジュール</h3> + +<p>一部の CSS モジュールは、すでに W3C 勧告として標準化されています。これらは基本的に変更されません。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Colors", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Colors") }} 2011年6月7日から</td> + </tr> + <tr> + <td colspan="2"> + <p>{{ cssxref("opacity") }} プロパティ、および {{cssxref("<color>")}} 値を生成する <code>hsl()</code>, <code>hsla()</code>, <code>rgba()</code>, <code>rgb()</code> の各関数が追加されています。有効な色として、 <code>currentColor</code> キーワードも定義されています。</p> + + <p><code>transparent</code> 色は、実際の色になり (アルファチャネルに対応したため)、 <code>rgba(0,0,0,0.0)</code> の別名になりました。</p> + + <p><a href="http://www.w3.org/TR/CSS2/ui.html#system-colors">いずれの本番環境でも使用すべきではない system-color キーワードは</a>、非推奨になりました。</p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Namespaces", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Namespaces") }} 2011年9月29日から</td> + </tr> + <tr> + <td colspan="2"> + <p>' <code>|</code> ' 構文の使用と CSS の {{ cssxref("@namespace") }} @-規則の追加による <em>CSS 修飾名</em>の概念が定義されたことで、 XML 名前空間への対応が追加されました。</p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Selectors") }} 2011年9月29日から</td> + </tr> + <tr> + <td colspan="2"> + <p>追加:</p> + + <ul> + <li>属性セレクターで部分文字列の選択、 <code>E[attribute^="value"]</code>, <code>E[attribute$="value"]</code>, <code>E[attribute*="value"]</code> 。</li> + <li>新しい疑似クラス: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} と {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} と {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} と {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, {{ cssxref(":not") }}</li> + <li>疑似要素はコロン1つではなくコロン2つで表現されるようになりました。 <code>:after</code> は {{ cssxref("::after") }} に、 <code>:before</code> は {{ cssxref("::before") }} に、 <code>:first-letter</code> は {{ cssxref("::first-letter") }} に、 <code>:first-line</code> は {{ cssxref("::first-line") }} になりました。</li> + <li>新しい<em>一般兄弟結合子</em> ( <code>h1~pre</code> )。</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p><a class="external" href="http://dev.w3.org/csswg/selectors4/" title="http://dev.w3.org/csswg/selectors4/">Selectors 仕様書の次のイテレーション</a> はすでに進行していますが、まだ初めての Working Draft を公開する段階には至っていません。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Media Queries", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012</td> + </tr> + <tr> + <td colspan="2"> + <p>元のメディア型 (<code>print</code>, <code>screen</code>, <code>…</code>) を拡張して、 <code>only screen and (color)</code> のような<a href="/ja/CSS/Media_queries" title="en/CSS/Media_queries">端末メディア能力のクエリ</a>を使用できる言語になりました。</p> + + <p>メディアクエリは、 CSS 文書で使用されるだけではなく、 {{ HTMLElement("link") }} 要素の {{ htmlattrxref("media","link") }} 属性のように、いくつかの HTML 要素の属性でも使用されています。</p> + </td> + </tr> + </tbody> +</table> + +<p><a href="http://dev.w3.org/csswg/mediaqueries4" title="http://dev.w3.org/csswg/mediaqueries4">この仕様の次のイテレーション</a>が作業中であり、ウェブサイトがユーザーエージェントのインプットメソッドをカスタマイズできる機能、 <code>hover</code> や <code>pointer</code> のような新しいメディア機能が利用できる予定です。 <code>script</code> メディア機能を使用した EcmaScript 対応の検出機能も提案されています。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Style", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Style") }} 2013年11月7日から</td> + </tr> + <tr> + <td colspan="2">HTML の <a href="/ja/HTML/Global_attributes#attr-style" title="en/HTML/Global_attributes#attr-style"> <code>style</code> </a> グローバル属性の内容の構文が正式に定義されました。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Fonts", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Fonts") }} 2018年9月20日から</td> + </tr> + <tr> + <td colspan="2"> + <p>CSS2.1 フォントマッチングアルゴリズムを実装に近いものに修正します。</p> + + <p>追加:</p> + + <ul> + <li>{{ cssxref("@font-face") }} 規則を通したダウンロードフォントへの対応。</li> + <li>{{ cssxref("font-kerning") }} プロパティを通した文字間のスペースの制御。</li> + <li>{{ cssxref("font-language-override") }} プロパティを通した言語特有の字形の選択。</li> + <li>{{ cssxref("font-feature-settings") }} プロパティを通した特定の OpenType を持つ字形の選択。</li> + <li>{{ cssxref("font-size-adjust") }} プロパティを通した、代替フォントを指定した場合の使用するアスペクト比の制御。</li> + <li>{{ cssxref("font-stretch") }} と {{ cssxref("font-variant-alternates") }}、{{ cssxref("font-variant-caps") }}、{{ cssxref("font-variant-east-asian") }}、{{ cssxref("font-variant-ligatures") }}、{{ cssxref("font-variant-numeric") }}、{{ cssxref("font-variant-position") }} プロパティを使用した代替フォントフェイスの選択。関連する {{ cssxref("font-variant") }} 一括指定プロパティの拡張と {{ cssxref("@font-feature-values") }} 規則 の導入。</li> + <li>{{ cssxref("font-synthesis") }} プロパティを通した、何も見つからない場合の斜体、または太字の自動生成の制御。</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(128,255,128);"><strong>{{ SpecName("CSS3 Basic UI", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Basic UI") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>追加:</p> + + <ul> + <li>{{ cssxref("box-sizing") }} プロパティを使用したボックスモデルの調整機能。<br> + <strong><em>リスク:</em></strong><em> ブラウザーの対応が不十分であるため、 <code>padding-box</code> 値の標準化はこのモジュールの次のイテレーションに延期されるかもしれません。</em></li> + <li>{{ cssxref(":indeterminate") }} と {{ cssxref(":default") }}, {{ cssxref(":valid") }}、{{ cssxref(":invalid") }}、{{ cssxref(":in-range") }}、{{ cssxref(":out-of-range") }}、{{ cssxref(":required") }}、{{ cssxref(":optional") }}, {{ cssxref(":read-only") }}、{{ cssxref(":read-write") }} 疑似クラスと {{ cssxref("::value") }}、{{ cssxref("::choices") }}、{{ cssxref("::repeat-item") }}、{{ cssxref("::repeat-index") }} 疑似要素を使用した、コンテンツに従ったフォームのスタイリングの許可。<br> + <em><strong>リスク:</strong> ブラウザーの対応が不十分であるため、 {{ cssxref("::value") }} と {{ cssxref("::choices") }}、{{ cssxref("::repeat-item") }}、{{ cssxref("::repeat-index") }} 疑似要素の標準化はこのモジュールの次のイテレーションに延期されるかもしれません。</em></li> + <li>{{ cssxref("icon") }} プロパティと {{ cssxref("content") }} プロパティの新しい <code>icon</code> 値によって定義されたアイコンのサポート。<br> + <em><strong>リスク:</strong> ブラウザ実装が不十分なため、{{ cssxref("icon") }} プロパティと <code>icon</code> 値の標準化は CSS4 に延期されるかもしれません。</em></li> + <li>{{ cssxref("outline-offset") }} プロパティにアウトラインの位置のより多くの制御を与えるサポート。</li> + <li>要素の大きさが変更されるべきか、またはどのように変更すべきかを制御できる {{ cssxref("resize") }} プロパティのサポート。</li> + <li>必要な場合、テキストのオーバーフローの仕方を定義する {{ cssxref("text-overflow") }} プロパティのサポート。<br> + <em><strong>リスク:</strong> ブラウザーの対応が不十分であるため、 {{cssxref("<string>")}} 値のサポートと同様に、このプロパティの 2 値構文もこのモジュールの次のイテレーションに延期されるかもしれません。</em></li> + <li><em>{{ cssxref("cursor") }} プロパティを拡張したカーソルの位置の定義や新しい <code>none</code>, <code>context-menu</code>, <code>cell</code>, <code>vertical-text</code>, <code>alias</code>, <code>copy</code>, <code>no-drop</code>, <code>not-allowed</code>, <code>nesw-</code><code>resize</code>, <code>nwse-</code><code>resize</code>, <code>col-resize</code>, <code>row-resize</code>, <code>all-scroll</code>, <code>zoom-in</code>, <code>zoom-out</code> の機能。</em></li> + <li>CSS の {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} プロパティを使用した、シーケンシャルナビゲーションの順序 (すなわち<em>タブの順序</em>) を指定する機能。<br> + <em><strong>リスク:</strong> ブラウザーの対応が不十分であるため、 navigation プロパティの標準化はこのモジュールの次のイテレーションに延期されるかもしれません。</em></li> + <li>CSS の {{ cssxref("ime-mode") }} プロパティを用いた、IME エディタの使用方法を制御する機能。<br> + <em><strong>リスク:</strong> ブラウザーの対応が不十分であるため、{{ cssxref("ime-mode") }} プロパティの標準化はこのモジュールの次のイテレーションに延期されるかもしれません。</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>CSS Basic User Interface Module の次のイテレーションに追加されるもの初期リストが <a class="external" href="http://wiki.csswg.org/spec/css4-ui" title="http://wiki.csswg.org/spec/css4-ui">利用可能</a> です。</p> + +<h3 id="Stable_modules" name="Stable_modules">安定版モジュール</h3> + +<p>いくつかの CSS モジュールは、既にかなり安定しており、 CSSWG の勧告レベル3つ (勧告候補、勧告案、勧告) のうち、いずれかに到達しています。接頭辞なしで使用でき、かなり安定していますが、いくつかの機能は勧告候補段階で削除される可能性があります。</p> + +<p>これらのモジュールは、仕様の中心を構成する CSS2.1 仕様を拡張および修正します。これらはまとめて、 CSS 仕様の現在のスナップショットです。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Backgrounds", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Backgrounds") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>追加:</p> + + <ul> + <li><code>uri()</code> で定義されたものだけでなく、{{cssxref("<image>")}} のあらゆる型に backgorund が対応。</li> + <li>複数の背景画像に対応。</li> + <li>{{ cssxref("background-repeat") }} の <code>space</code> と <code>round</code> 値、およびこの CSS プロパティの2値構文。</li> + <li>{{ cssxref("background-attachment") }} の <code>local</code> 値。</li> + <li>{{ cssxref("background-origin") }} と {{ cssxref("background-size") }}、{{ cssxref("background-clip") }} プロパティ。</li> + <li>{{ cssxref("border-radius") }} と {{ cssxref("border-top-left-radius") }}、{{ cssxref("border-top-right-radius") }}、{{ cssxref("border-bottom-left-radius") }}、{{ cssxref("border-bottom-right-radius") }} プロパティによるカーブした境界線の隅に対応。</li> + <li>{{ cssxref("border-image") }} と {{ cssxref("border-image-source") }}、{{ cssxref("border-image-slice") }}、{{ cssxref("border-image-width") }}、{{ cssxref("border-image-outset") }}、{{ cssxref("border-image-repeat") }} プロパティによる border での {{cssxref("<image>")}} の使用に対応。</li> + <li>{{ cssxref("box-shadow") }} プロパティを使用した要素の影に対応。</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p><a class="external" href="http://dev.w3.org/csswg/css4-background/" title="http://dev.w3.org/csswg/css4-background/">背景と境界線の仕様の CSS4 イテレーション</a>は既に進行していますが、まだ初めての Working Draft を公開する段階には至っていません。この仕様では、 border をクリッピングする機能 (CSS の {{ cssxref("border-clip") }} と {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, {{ cssxref("border-clip-left") }} プロパティ) や、コーナーの border の形の制御 (CSS {{ cssxref("border-corner-shape") }} プロパティの使用) を追加する予定です。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Conditional", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Conditional") }}</td> + </tr> + <tr> + <td colspan="2">ブラウザー、または文書に適用される機能の条件である、スタイルシートの条件処理部分の機能が追加されました。これは主に、 {{ cssxref("@media") }} 内部のネストされた @-規則の許可と新しい @-規則 {{ cssxref("@supports") }} の追加、新しい DOM メソッドの {{domxref("CSS.supports()")}} の追加で構成されています。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Multicol", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Multicol") }}</td> + </tr> + <tr> + <td colspan="2">CSS の {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }} を使用した簡単な段組みレイアウトへの対応を追加。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Values", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Values") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>あらゆる CSS プロパティで <code>initial</code> と <code>inherit</code> キーワードを使えるようにしました。</p> + + <p>文法トークンといくつかのテキストの精度で暗黙的に定義されていた CSS 2.1 のデータ型を正式に定義しました。</p> + + <p>追加:</p> + + <ul> + <li>フォント関連の長さの単位の定義: <code>rem</code> と <code>ch</code>。</li> + <li>viewport関連の長さの単位の定義: <code>vw</code> と <code>vh</code>、<code>vmax</code>、<code>vmin</code>。</li> + <li>実際には絶対的ではないが、<em>reference pixel</em> に関連して定義されている実際の絶対的な長さの単位についての精度。</li> + <li>{{ cssxref("<angle>") }} と {{cssxref("<time>")}}、{{cssxref("<frequency>")}}、{{cssxref("<resolution>")}} の定義。</li> + <li>{{cssxref("<color>")}} と {{cssxref("<image>")}}、{{cssxref("<position>")}} の基本の値の定義。</li> + <li>{{ cssxref("calc", "calc()") }} と{{ cssxref("attr", "attr()")}}、<code>toggle()</code> の関数表記の定義。<br> + <em><strong>リスク:</strong> ブラウザーの対応が不十分であるため、 <code>calc()</code> と <code>attr()</code>、<code>toggle()</code> 関数表記はこのモジュールの次のイテレーションに延期されるかもしれません。</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p><code><ident></code> と <code><custom-ident></code> のようないくつかの型定義は、 CSS Values and Units Module Level 4 に延期されています。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Flexbox", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Flexbox") }}</td> + </tr> + <tr> + <td colspan="2">フレックスボックスレイアウトに CSS の {{ cssxref("display") }} プロパティとそれを制御するいくつかの新しい CSS プロパティ ({{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}) が追加されました。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Cascade", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Cascade") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>追加:</p> + + <ul> + <li>プロパティへの {{ cssxref("initial") }}、 {{ cssxref("unset") }} の値</li> + <li>{{ cssxref("all") }} プロパティ。</li> + <li>スコープメカニズム。</li> + </ul> + + <p>明確化:</p> + + <ul> + <li>メディア依存の @import 文とスタイルシートのロード要件の相互作用。</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Writing Modes", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Writing Modes") }}</td> + </tr> + <tr> + <td colspan="2">横書きと縦書きの書字方向の定義、 {{ cssxref("direction") }} と {{ cssxref("unicode-bidi") }} プロパティが新しい {{ cssxref("text-orientation") }} プロパティに作用する方法の明確化、必要な機能の拡張。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Counter Styles", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Counter Styles") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<h3 id="Testing_モジュール">Testing モジュール</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Images", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Images") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>{{cssxref("<image>")}} データ型の定義。</p> + + <p>メディアフラグメントを使用した image の切り分けをサポートするための <code>url()</code> の拡張。</p> + + <p>追加:</p> + + <ul> + <li>{{cssxref("<resolution>")}} データタイプに <code>dppx</code> 単位。</li> + <li>url から 画像を定義する <code>url()</code> のより柔軟な代替である <code>image()</code> 関数。<br> + <em><strong>リスク:</strong> ブラウザーの対応が不十分であるため、 <code>image()</code> 関数の標準化は、このモジュールの次のイテレーションに延期されるかもしれません。</em></li> + <li><code>linear-gradient()</code> と <code>repeating-linear-gradient()</code>、<code>radial-gradient()、repeating-radial-gradient()</code> への対応。</li> + <li>{{ cssxref("object-fit") }} プロパティを使用した、置き換えた要素がその要素にフィットすべきかどうかを定義する機能。<br> + <em><strong>リスク:</strong> ブラウザーの対応が不十分であるため、 {{ cssxref("object-fit") }} プロパティの標準化は、このモジュールの次のイテレーションに延期されるかもしれません。</em></li> + <li>CSS の {{ cssxref("image-resolution") }} と {{ cssxref("image-orientation") }} プロパティを使用した外部イメージの解像度とオリエンテーションをオーバーライドする機能。<br> + <em><strong>リスク:</strong> ブラウザーの対応が不十分であるため、 {{ cssxref("image-resolution") }} と {{ cssxref("image-orientation") }} プロパティの標準化は、このモジュールの次のイテレーションに延期されるかもしれません。</em></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>CSS Image Level 3 を置き換えるであろう <a href="#Images_(Level_4)">CSS Image Values and Replaced Content Level 4</a> は開発中で、 {{Spec2("CSS4 Images")}} です。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Speech", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Speech") }}</td> + </tr> + <tr> + <td colspan="2"><code>speech</code> メディア型や聴覚フォーマットモデル、スピーチレンダリングユーザーエージェントのための多くのプロパティの定義。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220, 255, 220);"><strong>{{ SpecName("CSS3 Text Decoration", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Text Decoration") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>拡張:</p> + + <ul> + <li>{{ cssxref("text-decoration-line") }}、 {{ cssxref("text-decoration-color") }}、{{ cssxref("text-decoration-style") }} の各プロパティを一括指定できる CSS の {{ cssxref("text-decoration") }} プロパティ。{{ cssxref("text-decoration-skip") }} と {{ cssxref("text-underline-position") }} プロパティの追加。</li> + </ul> + + <p>追加:</p> + + <ul> + <li>CSS の {{ cssxref("text-emphasis") }} と {{ cssxref("text-emphasis-style") }}、{{ cssxref("text-emphasis-color") }}、{{ cssxref("text-emphasis-position") }} プロパティによる東アジアスクリプト強調記号に対応。</li> + <li>{{ cssxref("text-shadow") }} プロパティによる文字列の影に対応。</li> + </ul> + + <p>明確化:</p> + + <ul> + <li>decoration の描画順序。</li> + </ul> + + <p><em><strong>リスク:</strong> ブラウザーの対応が不十分であるため、 <code>text-decoration-skip</code> と行ポジジョンルール、同じテキスト上に強調記号とルビを配置する機能は、このモジュールの次のイテレーションに延期されるかもしれません。</em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Shapes", "", "") }}</strong></td> + <td>{{ Spec2("CSS Shapes") }}</td> + </tr> + <tr> + <td colspan="2">浮動要素に適用することができる幾何学的シェイプを定義。これらのシェイプは、インラインコンテンツが囲みボックスで折り返す代わりに、折り返す領域を記述します。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Masks", "", "") }}</strong></td> + <td>{{ Spec2("CSS Masks") }}</td> + </tr> + <tr> + <td colspan="2">ビジュアル要素の部分を一部、または完全に隠すための方法が定義されました。これは、他のグラフィカル要素または画像を、輝度またはアルファマスクとして使用する方法を提供します。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Fragmentation", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Fragmentation") }}</td> + </tr> + <tr> + <td colspan="2">ウェブページ上でページ区切り、段区切り、1行を残して改ページをしないなどの扱い方を定義します。 + <p>追加：</p> + + <ul> + <li>ボックスが崩されたとき（ページ、または 列、改行）、 {{ cssxref("box-decoration-break") }} プロパティを使用した枠線と背景色やイメージなどの装飾の動作の定義をサポート.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Variables", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Variables") }}</td> + </tr> + <tr> + <td colspan="2">CSS で変数を定義するメカニズムを定義します。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Compositing", "", "") }}</strong></td> + <td>{{ Spec2("Compositing") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Syntax", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Syntax") }}</td> + </tr> + <tr> + <td colspan="2">charset の決定方法を明確化。解釈とトークン化アルゴリズムにマイナーな変更が行われました。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Grid", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Grid") }}</td> + </tr> + <tr> + <td colspan="2">グリッドレイアウトに CSS の <a href="/ja/docs/Web/CSS/display"><code>display</code></a> プロパティを追加し、にグリッドレイアウトとこれを制御するいくつかの新しいプロパティ、 {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} の追加。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Display", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Display") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS Will Change", "", "") }}</strong></td> + <td>{{ Spec2("CSS Will Change") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Media Queries", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Media Queries") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Geometry Interfaces", "", "") }}</strong></td> + <td>{{ Spec2("Geometry Interfaces") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS4 Cascade", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Cascade") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{SpecName("CSS Scroll Snap Points")}}</strong></td> + <td>{{Spec2("CSS Scroll Snap Points")}}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{SpecName('CSS Painting API')}}</strong></td> + <td>{{Spec2('CSS Painting API')}}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{SpecName('CSS Containment')}}</strong></td> + <td>{{Spec2('CSS Containment')}}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{SpecName('CSS4 Writing Modes')}}</strong></td> + <td>{{Spec2('CSS4 Writing Modes')}}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_refining_phase" name="Modules_in_the_refining_phase">リファインフェーズのモジュール</h3> + +<p><em>リファインフェーズ</em>であるとみなされている仕様は、既にかなり安定しています。まだ変更が想定されますが、現在の実装と非互換になるものを作るべきではありません。主に極端な場合の振る舞いを定義しています。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255, 255, 220);"><strong>{{ SpecName("CSS3 Animations", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Animations") }}</td> + </tr> + <tr> + <td colspan="2">{{ cssxref("animation") }}, {{ cssxref("animation-delay") }} と {{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, {{ cssxref("animation-timing-function") }} プロパティ、および {{ cssxref("@keyframes") }} 規則 の追加によって、アニメーション効果の定義ができるようになりました。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("Web Animations", "", "") }}</strong></td> + <td>{{ Spec2("Web Animations") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Text", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Text") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>拡張:</p> + + <ul> + <li>{{ cssxref("text-transform") }} プロパティの <code>full-width</code> 値。</li> + <li>テキストが複数の書字方向を持つ文書のために、{{ cssxref("text-align") }} プロパティの <code>start</code>、 <code>end</code>、 <code>start end</code>、<code>match-parent</code> 値に対応</li> + <li>特定の文字で整列するための {{ cssxref("text-align") }} プロパティの {{cssxref("<string>")}} 値。小数点位置を揃えるのに便利。</li> + <li>両端揃えの柔軟性を制御するために、 {{ cssxref("word-spacing") }} と {{ cssxref("letter-spacing") }} プロパティにおける制約範囲。</li> + </ul> + + <p>追加:</p> + + <ul> + <li>{{ cssxref("text-space-collapse") }} と {{ cssxref("tab-size") }} プロパティを使用したホワイトスペースの表示方法の制御。</li> + <li>{{ cssxref("line-break") }} と {{ cssxref("word-break") }}、{{ cssxref("hyphens") }}、{{ cssxref("text-wrap") }}、{{ cssxref("overflow-wrap") }}、{{ cssxref("text-align-last") }} プロパティを使用した改行と単語の制御。</li> + <li>より多くのスクリプトの種類をサポートするための、{{ cssxref("text-justify") }} プロパティを使用した揃えの発生方法の制御。</li> + <li>{{ cssxref("text-indent") }} と {{ cssxref("hanging-punctuation") }} プロパティを使用した縁の効果の制御。</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p>初期の CSS Text Level 3 draft のいくつかの機能は、<a class="external" href="http://dev.w3.org/csswg/css3-text/#recent-changes" title="http://dev.w3.org/csswg/css3-text/#recent-changes">このモジュールの次のイテレーションに延期されました</a>。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transforms", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Transforms") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>追加:</p> + + <ul> + <li>{{ cssxref("transform") }} と {{ cssxref("transform-origin") }} プロパティを使用していずれかの要素に適用される 2 次元変形に対応。対応する変形: <code>matrix</code><code>()</code> と<code> translate()</code>、<code>translateX()、</code><code>translateY()</code>、<code>scale()、</code><code>scaleX()</code>、<code>scaleY()、</code><code>rotate()、</code><code>skewX()、</code><code>skewY()</code>。</li> + <li>the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }} と {{ cssxref("perspective") }}、{{ cssxref("perspective-origin") }}、{{ cssxref("backface-visibility") }} プロパティの追加、および {{ cssxref("transform") }} プロパティの次の変更による拡張： <code>matrix</code> <code>3d()</code> と <code>translate3d()</code>、<code>translateZ()</code>、<code>scale3d()</code>、<code>scaleZ()、</code><code>rotate3d()、</code><code>rotateX</code><code>()、</code><code>rotateY</code><code>()、</code><code>rotateZ()、</code><code>perspective()</code> によっていずれかの要素に適用される 2 次元変形のサポート。</li> + </ul> + + <p><em><strong>メモ:</strong> この仕様書は CSS 2D-Transforms, CSS 3D-Transforms, SVG transforms を合わせたものです。</em></p> + </td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Transitions", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Transitions") }}</td> + </tr> + <tr> + <td colspan="2">CSS に {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, {{ cssxref("transition-timing-function") }} プロパティを追加し、2つのプロパティ値の間の遷移効果を定義できるようになりました。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Box Alignment", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Box Alignment") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS4 Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Selectors") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Lists", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Lists") }}</td> + </tr> + <tr> + <td colspan="2">リスト作成者がスタイリングでき、ウェブ開発者が新しいリストカウンタースキーマを定義できるように、リストカウンターメカニズムを拡張します。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("Motion Path Level 1", "", "") }}</strong></td> + <td>{{ Spec2("Motion Path Level 1") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS4 Fonts", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Fonts") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>CSS Easing Functions Level 1</strong></td> + <td>Working Draft</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS Logical Properties", "", "") }}</strong></td> + <td>{{ Spec2("CSS Logical Properties") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_revising_phase" name="Modules_in_the_revising_phase">修正フェーズのモジュール</h3> + +<p>修正フェーズのモジュールは、リファインフェーズのものよりも安定度が欠けます。一般的に、構文は検査下にあり、非互換的な方法で多くの改善が行わるかもしれません。代替の構文はテストされて、一般的に実装されています。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Paged Media", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Paged Media") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSSOM View", "", "") }}</strong></td> + <td>{{ Spec2("CSSOM View") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Sizing", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Sizing") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Ruby", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Ruby") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Overflow", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Overflow") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Box", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Box") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS Scrollbars", "", "") }}</strong></td> + <td>{{ Spec2("CSS Scrollbars") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_exploring_phase" name="Modules_in_the_exploring_phase">探求フェーズのモジュール</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: rgb(255,160,100);"><strong>CSS Backgrounds and Borders Level 4</strong></td> + <td>Working Draft</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Device", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Device") }}</td> + </tr> + <tr> + <td colspan="2">初期のコンテナーブロックのベースとして使用される viewport のサイズやズーム倍率、オリエンテーションを指定できる、新しい @-規則が {{ cssxref("@viewport") }} に追加されます。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Exclusions", "", "") }}</strong></td> + <td>{{ Spec2("CSS Exclusions") }}</td> + </tr> + <tr> + <td colspan="2">いずれかのポジションスキームで除外領域を定義するフロートを拡張します。コンテンツがフローすべき形態の概念を追加します。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("Filters 1.0", "", "") }}</strong></td> + <td>{{ Spec2("Filters 1.0") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 GCPM", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 GCPM") }}</td> + </tr> + <tr> + <td colspan="2">ヘッダーやフッターだけでなく、インデックスやテーブルコンテンツのようなテーブルを制御できる様になることで、ドキュメントの印刷バージョンを調整する機能が追加されます。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>CSS Page Floats</strong></td> + <td>Working Draft</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Template", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Template") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Line Grid", "", "") }}</strong></td> + <td>{{ Spec2("CSS Line Grid") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Positioning", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Positioning") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Regions", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Regions") }}</td> + </tr> + <tr> + <td colspan="2">コンテンツが region と呼ばれる非連続で複数の領域を跨いでフローできるように新しいメカニズムを定義します。</td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSSOM", "", "") }}</strong></td> + <td>{{ Spec2("CSSOM") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Font Loading", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Font Loading") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Scope", "", "") }}</strong></td> + <td>{{ Spec2("CSS Scope") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Inline", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Inline") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS4 Images", "", "") }}</strong></td> + <td>{{ Spec2("CSS4 Images") }}</td> + </tr> + <tr> + <td colspan="2"> + <p>拡張:</p> + + <ul> + <li>書字方向に依存する画像を利用できるように、画像の書字方向 (<code>rtl</code> または <code>ltr</code>) を記述する <code>image()</code> 関数表記。</li> + <li>{{ cssxref("image-orientation") }} プロパティに、画像に保存されている EXIF データに従うための <code>from-image</code> キーワードの追加。</li> + </ul> + + <p>追加:</p> + + <ul> + <li>画像の解像度ネゴシエーションができ、同等の画像を異なる解像度で定義できるようにする <code>image-set()</code> 関数表記。</li> + <li>画像のようにページの一部を使用できる <code>element()</code> 関数表記。</li> + <li>2つの画像間を遷移して、それらの間に挿入を定義するとき、中間画像を参照できる <code>cross-fade()</code> 関数表記。</li> + <li>グラデーションの新しいタイプを表現する <code>conic-gradient()</code> と <code>repeating-conic-gradient()</code> 関数表記。</li> + <li>オブジェクトのサイズ変更をどのように行うか定義する {{cssxref("image-rendering")}} プロパティ。</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h3 id="Modules_in_the_rewriting_phase" name="Modules_in_the_rewriting_phase">リライティングフェーズのモジュール</h3> + +<p>リライティングフェーズのモジュールは古くなっており、書き換えが求められています。構文は精査中で、互換性のない方法を含む多くの変更が加えられています。代替の構文はテストされ、多くの場合実装されています。</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F33;"><strong>{{ SpecName("CSS3 Content", "", "") }}</strong></td> + <td>{{ Spec2("CSS3 Content") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> + +<h3 id="Abandoned_modules" name="Abandoned_modules">放棄されたモジュール</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS Non-element Selectors", "", "") }}</strong></td> + <td>{{ Spec2("CSS Non-element Selectors") }}</td> + </tr> + <tr> + <td colspan="2"></td> + </tr> + </tbody> +</table> |