今後のCSSの革新

CSSワーキンググループとGoogle Chromeチームのメンバーであるタブアトキンスは、先週の水曜日に行ったプレゼンテーションにスライドを投稿しました 。



このプレゼンテーションでは、4つの比較的新しい概念を示します。 ：



変数

varコンストラクトを介して変数を宣言し、その名前、値、および色から長さ、回転、関数までを指定することで、ページで使用されるすべてのCSSからアクセスできます。



ローカルコンストラクトを通じて、ローカル変数もサポートされます

@var paragraph-size length 12px; @var paragraph-color color rgba(0,0,0,0); p {   color: var(paragraph-color);   font-size: var(paragraph-size); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

不純物

不純物は、デフォルト値を設定する機能を備えた必要なプロパティでルールを拡張することを可能にします。

 @mixin error {  background: #fdd;  color: red;  font-weight: bold; } div.error {  border: thick solid red;  padding: .5em;  @mixin error; } span.error {  text-decoration: underline;  @mixin error; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

添付ルール

特にクラスやidを使用しない現在のCSS添付ファイルは苦痛です。 この構造は、これを簡素化するために提示されています。 現在のルールの子孫に適用され、その名前を継承します。 これで、この構造をより明確にすることができます。

 header {  color: red;  @this a {    color: blue;  } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

モジュール

いいえ、CSS 3を構成するモジュールではありません。モジュールは、変数と不純物の通常の名前空間です。 変数と不純物は、モジュール名を独自の名前の先頭に書き込むか、use構文を使用して定義できます。

 @module foo {  @var bar color red;  @mixin baz { color: blue; } } .foo {  color: var(bar); //   } .bar {  @use foo;  color: var(bar); //  } .baz {  @mixin foo|baz; //  }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在のコードはシドニーのいくつかのマシンでのみ利用可能ですが、Googleはこの四半期に初期仕様を公開し、年末までにイノベーションを実装する予定です。 これらの可変プランも不純プランもwwwスタイルの電子メールサブスクリプションでは一般的ではなかったことを考えると、他のブラウザがどのように変更を受け入れるかを見るのは興味深いでしょう。 数年前の同様の議論は、これらはかなり意見の異なるかなり物議を醸す問題であることを示しました。



プレゼンテーションスライド