path: root/files/ko/archive/css3/index.html

---
title: CSS3
slug: Archive/CSS3
translation_of: Archive/CSS3
---
<p><span class="seoSummary"><strong>CSS3는 </strong><em>Cascading Style Sheets(CSS)</em> 언어의 가장 최신 버전이고 CSS2.1을 상속하는 것을 목표로  합니다.  CSS3는 개발자들이 오랫동안 기다려온 새로운 기능들을 지원하게 되었습니다. 다중열(</span><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" style="line-height: 1.5;" title="Using CSS multi-column layouts">multi-columns</a>)<span style="line-height: 1.5;">, 유동적인 상자(flexible box), 격자 배치(grid layouts) 뿐만 아니라 둥그런 모서리(</span><span class="seoSummary" style="line-height: 1.5;">rounded corners), 그림자( shadows) , 부드러운 색의 변이(<a href="/en-US/docs/Web/Guide/CSS/Using_CSS_gradients" title="Using CSS gradients">gradients</a>) , 변이(<a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="CSS transitions">transitions</a>), 움직임(<a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations" title="CSS animations">animations</a>) 등도 지원합니다.</span><span style="line-height: 1.5;"> 실험적인 부분(experimental parts)은 브라우저 공급자(vender)의 구현에 따라 다를 수 있고 미래에 문법이나 의미가 변할 수 있습니다. 따라서 환경에 따라 해당 스펙을 사용하는 것을 피하거나, 사용하더라도 매우 신중히 사용해야합니다.  </span></p>

<h2 id="모듈과_표준화_과정(Modules_and_the_standardization_process)">모듈과 표준화 과정<span style="font-size: 2.14285714285714rem;">(Modules and the standardization process)</span></h2>

<p>2002년 8월부터 2011년 6월까지 CSS Level2가 권장(Recommendation)단계에 이르기 까지 총 9년이 걸렸습니다. 이는 몇몇 부차적인 기능들이 전체 명세(specification)의 진행을 더디게 만들었기 때문입니다. W3C의 <a class="external" href="http://www.w3.org/blog/CSS/" style="line-height: 1.5;" title="http://www.w3.org/blog/CSS/">CSS Working Group</a>은 문제를 일으키는 몇몇 기능을 제외한 나머지 기능들의 표준화 작업을 보다 빠르게 진행하기 위하여 <a class="external" href="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules" style="line-height: 1.5;" title="http://fantasai.inkedblade.net/weblog/2011/inside-csswg/modules">Beijing doctrine</a>에 따라 <span style="line-height: 1.5;">CSS를 보다 작은 컴포넌트 단위로 나눴고, 이를 모듈(module)이라 부릅니다. 현재 각각의 모듈은 서로 </span><span style="line-height: 1.5;">독립적으로 표준화 과정을 거치고 있습니다. 이미 몇몇 모듈은 W3C Rocommendations 에 이르렀으나, 나머지는 여진히 Working Drafts 단계에 머물러 있습니다. 또한 새로운 요구사항(needs)이 발생할 때 마다 계속해서 새로운 모듈이 추가되고 있습니다.</span></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 자체 표준은 존재하지 않습니다. 각각의 모듈이 독립적으로 표준화 되고 있고, 표준 CSS는 모듈을 통해 CSS2.1을 수정하여 상속(extends)하는 것으로 구성되어있서 항상 같은 level number를 갖는 것은 아닙니다. 특정 시점의 CSS2.1과 완성된 모듈들로 구성된 CSS표준 스냅샷을 정의할 수 있습니다. W3C는 주기적으로 이런 스냅샷을 발표하고 있습니다. (<a class="external" href="http://www.w3.org/TR/css-beijing/" style="line-height: 1.5;" title="http://www.w3.org/TR/css-beijing/">2007</a><span style="line-height: 1.5;"> / </span><a class="external" href="http://www.w3.org/TR/css-2010/" style="line-height: 1.5;" title="http://www.w3.org/TR/css-2010/">2010</a>)</p>

<p>아직까지 lever 3보다 높은 level을 가진 모듈은 없지만 곧 생길 것입니다. Selector 4나 CSSborder 4, Background 4와 같은 몇몇 모듈은 Working Draft가 공개된적은 없지만 이미 Editor's Draft는 작성되어 있습니다.</p>

<h2 id="sect1" style=""> </h2>

<h2 id="CSS_모듈의_상태(CSS_modules_status)" style="">CSS 모듈의 상태(CSS modules status)</h2>

<h3 id="안정적인_모듈(Stable_modules)">안정적인 모듈(Stable modules)</h3>

<p>몇개의 모듈은 이미 상당히 안정적이고, CSSWG의 recommendation 3단계(Candidate Recommendation, Propesed Recommendation, Recommendation) 중 하나에 도달했습니다. 이 모듈들은 별도의 과정없이도 꽤 안정적으로 사용할 수 있습다. 하지만 몇몇 기능은 여전히 Candidate Recommendation 단계에 머물러 있습니다.</p>

<p>모듈들은 명세(spec)의 핵심이 되는 CSS2.1을 수정, 상속하고 있습니다. 이것을 포함한 모듈들이 CSS3 명세의 스냅샷이 됩니다.</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td class="thirdColumn greenBg"><strong>{{ SpecName("CSS3 Colors", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Colors") }} since June 7th, 2011</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>{{ cssxref("opacity") }} 프로퍼티(property)와 {{cssxref("&lt;color&gt;")}} 밸류를 생성하기 위한 the <code>hsl</code><code>()</code>, <code>hsla()</code>, <code>rgba(),</code> <code>rgb()</code> 함수를 추가합니다. 또한 the <code>currentColor</code> keyword로 유효한 색상을 얻을 수 있습니다.</p>

    <p><code style="font-style: normal; line-height: 1.5;">alpha channel의 지원으로 </code><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">rgba(0,0,0,0.0)의 별칭인 </span><code style="font-style: normal; line-height: 1.5;">transparent를 사용할 수 있습니다.</code></p>

    <p> 더이상 사용해선 안되는 <a href="http://www.w3.org/TR/CSS2/ui.html#system-colors">system-color </a>키워드를 deprecates 합니다.</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") }} since September 29th, 2011</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>다음이 추가되었습니다.</p>

    <ul>
     <li>attribute와 일치하는 부분문자열 selector : <code>E[attribute^="value"]</code> , <code>E[attribute$="value"]</code> , <code>E[attribute*="value"]</code> .</li>
     <li>새로운 pseudo-class : {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.</li>
     <li>Pseudo-elements는 콜론을 하나가 아니라 둘을 사용하도록 함 : <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>general sibling combinator</em> ( <code>h1~pre</code> ).</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p>아직 Working Draft로 공개되진 않았지만, <a class="external" href="http://dev.w3.org/csswg/selectors4/" title="http://dev.w3.org/csswg/selectors4/">셀렉터 명세의 다음 버전</a>이 이미 진행중입니다.</p>

<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") }} since September 29th, 2011</td>
  </tr>
  <tr>
   <td colspan="2">
    <p><em>CSS qualified name</em><span style="line-height: 1.5;">의 개념을 정의하여 </span><span style="line-height: 1.5;">XML Namespaces에 대한 지원이 추가됩니다. </span><span style="line-height: 1.5;"> 이를 위해 ' </span><code style="font-style: normal; line-height: 1.5;">|</code><span style="line-height: 1.5;"> ' 문법을 사용하고 </span><span style="line-height: 1.5;">{{ cssxref("@namespace") }} CSS at-rule을 더합니다.</span></p>
   </td>
  </tr>
 </tbody>
</table>

<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>이전의 media type ( <code>print</code>, <code>screen</code>, <code>…</code> )을 <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;">only screen and (color)와 같이 </span><a href="/en/CSS/Media_queries" style="line-height: 1.5;" title="en/CSS/Media_queries">디바이스의 media capabilities에 대한 질의</a><span style="line-height: 1.5;">가 가능한 full language로 확장합니다.</span></p>

    <p>미디어 쿼리는 CSS 문서에서만 사용되는 것이 아니라 {{ HTMLElement("link") }}의 {{ htmlattrxref("media","link") }}어트리뷰트와 같이 일부 HTML 엘리먼트에서도 사용할 수 있습니다. .</p>
   </td>
  </tr>
 </tbody>
</table>

<p><code style="font-style: normal; line-height: 1.5;"><code style="font-style: normal; line-height: 1.5;">사</code><span style="font-family: open sans,sans-serif; line-height: 1.5;">용자 에이전트의 입력 메소드에 대해 잘 맞는 </span>웹사이트를 제작할 수 있게 해줄</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;"> </span><a href="http://dev.w3.org/csswg/mediaqueries4" style="line-height: 1.5;" title="http://dev.w3.org/csswg/mediaqueries4">이 명세의 다음 버전이</a><span style="line-height: 1.5;"> 진행중입니다.</span><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">hover나</code><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">pointerd와 같은 새로운 미디어 기능을 포함하고 있습니다. </code><code style="font-style: normal; line-height: 1.5;">script</code><span style="line-height: 1.5;"> media features를 이용해 EcmaScript에서도 감지할 수 있도록 제안되었습니다.</span></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") }} since November 7th, 2013</td>
  </tr>
  <tr>
   <td colspan="2">HTML <a href="/en/HTML/Global_attributes#attr-style" title="en/HTML/Global_attributes#attr-style"><code>style</code> </a> 전역 특성(global attribute)의 내용(contents)에 관한 문법을 공식적으로 정의합니다.</td>
  </tr>
 </tbody>
</table>

<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("&lt;image&gt;")}}에 backgrounds를 지원.</li>
     <li>다중 background 이미지를 지원.</li>
     <li>{{ cssxref("background-repeat") }}의 밸류로 <code>space</code> 와 <code>round가 추가.</code></li>
     <li>The {{ cssxref("background-attachment") }} <code>local</code> value.</li>
     <li>The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }},  {{ cssxref("background-clip") }} 프로퍼티</li>
     <li>CSS {{ 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> CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} 프로퍼티를 이용해 {{cssxref("&lt;image&gt;")}}를 테두리로 사용할 수 있음.</li>
     <li> CSS {{ cssxref("box-shadow") }} 프로퍼티를 이용해 엘리먼트에 그림자 효과 부여 가능.</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p> 아직 Working Draft의 초안이 공개되진 않았지만 <a class="external" href="http://dev.w3.org/csswg/css4-background/" title="http://dev.w3.org/csswg/css4-background/">CSS4 Backgrounds 와 Borders 명세의 다음 버전</a>이 이미 진행중입니다. 테두리를 잘라내는 기능(CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}와 {{ cssxref("border-clip-left") }} 프로퍼티를 사용)이나 테투리의 모서리 모양을 조절하는 기능 (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 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") }},  {{ cssxref("break-inside") }}를 이용해 쉽게 다중 열 레이아웃을 만들 수 있습니다.</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width: 100%;">
 <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-rendering에 특화된 수많은 프로퍼티를 내용으로 하는 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 Images", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Images") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>{{cssxref("&lt;image&gt;")}} 데이터 타입을 정의합니다.</p>

    <p>미디어 프래그먼트를 이용해 이미지를 자를 수 있도록 <code style="font-style: normal; line-height: 1.5;">url()</code><span style="line-height: 1.5;"> 을 상속합니다.</span></p>

    <p>다음이 추가되었습니다 :</p>

    <ul>
     <li>{{cssxref("&lt;resolution&gt;")}} 데이터 타입에 대한 단위인 <code style="font-style: normal;">dppx</code>.</li>
     <li><code><font face="Open Sans, sans-serif">url로 부터 이미지를 정의하는 데 있어 </font></code><code>url()</code> 보다 더 유연한 <code style="font-style: normal;">image()</code> 함수.<br>
      <em><strong>주의</strong>  </em><strong><em>:</em> </strong><em>브라우저의 불충분한 지원으로  <code>image()</code> 함수의 표준화는 이 모듈의 다음 버전으로 연기될 수 있습니다.</em></li>
     <li><code>linear-gradient()</code>, <code>repeating-linear-gradient()</code>, <code>radial-gradient()<font face="Open Sans, sans-serif">, </font></code><code>repeating-radial-gradient()을 지원</code>.</li>
     <li>CSS {{ cssxref("object-fit") }} 프로퍼티를 이용해 교체된 엘리먼트가 어떻게 맞춰져야할지 정의할 수 있음.<br>
      <em><em><strong>주의</strong>  </em><strong><em>:</em> </strong><em>브라우저의 불충분한 지원으로  <em>{{ cssxref("object-fit") }}</em>의 표준화는 이 모듈의 다음 버전으로 연기될 수 있습니다.</em> </em></li>
     <li>CSS {{ cssxref("image-resolution") }} 와 {{ cssxref("image-orientation") }} 프로퍼티를 이용해 외부 이미지의 방향과 해상도를 오버라이드 할수 있음<br>
      <em><em><strong>주의</strong>  </em><strong><em>:</em> </strong><em>브라우저의 불충분한 지원으로  <em> {{ cssxref("image-resolution") }} 와 {{ cssxref("image-orientation") }}</em>의 표준화는 이 모듈의 다음 버전으로 연기될 수 있습니다.</em> </em></li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p>CSS Image Level 3를 대체할  <a href="#Images_(Level_4)" style="line-height: 1.5;">CSS Image Values 와 Replaced Content Level 4</a><span style="line-height: 1.5;"> 는 현재 개발중에 있고 {{Spec2("CSS4 Images")}} 입니다.</span></p>

<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><code>initial</code> 키워드와 <code>inherit</code> 키워드를 모든 CSS 프로퍼티에 대해 사용할 수 있습니다.</p>

    <p><span style="line-height: 1.5;">문법적 토큰과 원문의 정도(Precision)의해 </span><span style="line-height: 1.5;">암묵적으로 </span><span style="line-height: 1.5;">정의했던 CSS2.1의 CSS 데이터 타입을 </span><span style="line-height: 1.5;">공식적으로  </span><span style="line-height: 1.5;">정의합니다. </span></p>

    <p>다음이 추가되었습니다 :</p>

    <ul>
     <li>폰트에 상대적인 길이 단위에 대한 정의 : <code>rem</code> , <code>ch</code> .</li>
     <li>뷰포트에 상대적인 길이 단위에 대한 정의: <code>vw</code>, <code>vh</code>, <code>vmax</code>, <code>vmin</code> .</li>
     <li>절대 길이 단위의 실제 사이즈에 대한 정도(Precision). 절대 길이는 실제로는 '절대치'가 아니며 <em>reference pixel</em>에 대하여 상대적으로 정의.</li>
     <li>{{ cssxref("&lt;angle&gt;") }}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;resolution&gt;")}}에 대한 정의.</li>
     <li> {{cssxref("&lt;color&gt;")}}, {{cssxref("&lt;image&gt;")}}, {{ cssxref("&lt;position&gt;") }}의 정의에 대한 규범적인 밸류.</li>
     <li>{{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}에 대한 정의와 <code>toggle()의</code> 표기법<br>
      <em><strong>주의 :</strong><em><em>브라우저의 불충분한 지원으로  <em> </em></em></em><code>calc()</code>, <code>attr()</code>, <code>ooggle()</code> 표기법의 표준화는 이 모듈의 다음 버전으로 연기될 수 있습니다.</em></li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p> <code>&lt;ident&gt;</code> ,<code>&lt;custom-ident&gt;같은 몇몇 정의는 </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") }} 프로퍼티에 flexbox layout과 이것을 제어할 몇몇 새 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 Conditional", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Conditional") }}</td>
  </tr>
  <tr>
   <td colspan="2">스타일 시트의 몇몇 부분을 특정 조건하에 처리하기 위한 기능이 추가되었습니다. 스타일시트가 적용될 문서나 브라우저의 능력에 따라 작동하게 됩니다{{ cssxref("@media") }}의 하위에 들여쓰기된 앳-룰(at-rule)을 사용할 수 있고, 새로운 CSS 앳-룰인 {{ 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 Text-decoration", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Text-decoration") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>Extends:</p>

    <ul>
     <li>the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.</li>
    </ul>

    <p>Adds:</p>

    <ul>
     <li>Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.</li>
     <li>Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.</li>
    </ul>

    <p>Precises:</p>

    <ul>
     <li>The paint order of the decorations.</li>
    </ul>

    <p><em><strong>At risk:</strong> due to insufficient browser support, standardization of the <code>text-decoration-skip</code>, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to </em> <em>the next iteration of this module</em><em>.</em></p>
   </td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(220,255,220);"><strong>{{ SpecName("CSS3 Fonts", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Fonts") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.</p>

    <p>Adds:</p>

    <ul>
     <li>Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.</li>
     <li>The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.</li>
     <li>The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.</li>
     <li>The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.</li>
     <li>The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.</li>
     <li>The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-features-values") }} at-rule.</li>
     <li>The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.</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 Syntax", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Syntax") }}</td>
  </tr>
  <tr>
   <td colspan="2">Precises how charsets are determined; minor changes in parsing and tokenization algorithms.</td>
  </tr>
 </tbody>
</table>

<h3 id="Modules_in_the_refining_phase">Modules in the refining phase</h3>

<p>Specifications that are deemed to be in the <em>refining phase</em> are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255,255,220);"><strong>{{ SpecName("CSS3 Basic UI", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Basic UI") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>Adds:</p>

    <ul>
     <li>The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.<br>
      <strong><em>At risk:</em> </strong> <em> due to insufficient browser support, standardization of the <code>padding</code><code>-box</code> value may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
     <li>Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.<br>
      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
     <li>Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new <code>icon</code> value of the CSS {{ cssxref("content") }} property.<br>
      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the <code>icon</code> value may be postponed to CSS4. </em></li>
     <li>Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.</li>
     <li>Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.</li>
     <li>Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.<br>
      <em><strong>At risk:</strong> due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("&lt;string&gt;")}} values may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
     <li>The ability to define the hotspot of a cursor as well as the new <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>, extending the {{ cssxref("cursor") }} property.</li>
     <li>The ability to specify the sequential navigation order (that is the <em>tabbing order</em> ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.<br>
      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the navigation properties may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
     <li>The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.<br>
      <em><strong>At risk:</strong> due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to </em> <em>the next iteration of this module</em> <em>.</em></li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p>An early list of what could be in the next iteration of the CSS Basic User Interface Module is <a class="external" href="http://wiki.csswg.org/spec/css4-ui" title="http://wiki.csswg.org/spec/css4-ui">available</a>.</p>

<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">Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.</td>
  </tr>
 </tbody>
</table>

<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">Allows the definition of animations effects by adding the CSS {{ 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") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.</td>
  </tr>
 </tbody>
</table>

<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>Adds:</p>

    <ul>
     <li>the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: <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>, and <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") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: <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>, and <code>perspective()</code>.</li>
    </ul>

    <p><em><strong>Note:</strong> this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and 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 Fragmentation", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Fragmentation") }}</td>
  </tr>
  <tr>
   <td colspan="2">Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling.
    <p>Adds:</p>

    <ul>
     <li>Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.</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 Text", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Text") }}</td>
  </tr>
  <tr>
   <td colspan="2">
    <p>Extends:</p>

    <ul>
     <li>the CSS {{ cssxref("text-transform") }} property with the value <code>full-width</code>.</li>
     <li>the CSS {{ cssxref("text-align") }} property with the value <code>start</code>, <code>end</code>, <code>start end</code>, and <code>match-parent</code> for a better support of documents with multiple directionalities of text.</li>
     <li>the CSS {{ cssxref("text-align") }} property with a {{cssxref("&lt;string&gt;")}} value to align on that character. This is useful to align number on the decimal point.</li>
     <li>the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.</li>
    </ul>

    <p>Adds:</p>

    <ul>
     <li>Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.</li>
     <li>Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.</li>
     <li>Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.</li>
     <li>Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<p>A few features present in early CSS Text Level 3 draft have being <a class="external" href="http://dev.w3.org/csswg/css3-text/#recent-changes" title="http://dev.w3.org/csswg/css3-text/#recent-changes">postponed to the next iteration of this module</a> .</p>

<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">Defines a mechanism allowing to define variables in CSS.</td>
  </tr>
 </tbody>
</table>

<h3 id="Modules_in_the_revising_phase">Modules in the revising phase</h3>

<p>Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntax are tested and often implemented.</p>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: rgb(255,160,100);"><strong>{{ SpecName("CSS3 Writing Modes", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Writing Modes") }}</td>
  </tr>
  <tr>
   <td colspan="2">Defines the writing modes of both horizontal and vertical scripts and precises how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.</td>
  </tr>
 </tbody>
</table>

<h3 id="Modules_in_the_exploring_phase">Modules in the exploring phase</h3>

<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>Extends:</p>

    <ul>
     <li>the <code>image()</code> functional notation to describe the directionality of the image (<code>rtl</code> or <code>ltr</code>), allowing for bidi-sensitive images.</li>
     <li>the {{ cssxref("image-orientation") }} property by adding the keyword <code>from-image</code>, allowing to follow EXIF data stored into images to be considered.</li>
    </ul>

    <p>Adds:</p>

    <ul>
     <li>the <code>image-set()</code> functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.</li>
     <li>the <code>element()</code> functional notation allowing the use of part of the page as image.</li>
     <li>the <code>cross-fade()</code> functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.</li>
     <li>the <code>conic-gradient()</code> and <code>repeating-conic-gradient()</code> functional notation describing a new type of gradient.</li>
     <li>the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.</li>
    </ul>
   </td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width: 100%;">
 <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">Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table" style="width: 100%;">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Grid", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Grid") }}</td>
  </tr>
  <tr>
   <td colspan="2">Add a grid layout to the CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" title=""><code>display</code></a> property and several new CSS properties to control it: {{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")}}, and {{cssxref("grid-template-columns")}}.</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">Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.</td>
  </tr>
 </tbody>
</table>

<table class="fullwidth-table">
 <tbody>
  <tr>
   <td style="width: 30%; background-color: #F66;"><strong>{{ SpecName("CSS3 Exclusions and Shapes", "", "") }}</strong></td>
   <td>{{ Spec2("CSS3 Exclusions and Shapes") }}</td>
  </tr>
  <tr>
   <td colspan="2">Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.</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">Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.</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">Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.</td>
  </tr>
 </tbody>
</table>

<p> </p>