2017 年に学ぶ価値のある 3 つの新しい CSS 機能 (推奨)

height: 1.76em;">多くの CSS の新機能の中で、今年採用された 3 つの新機能が、私を興奮を抑えきれなくさせてくれます。

1. 機能クエリ

少し前に、私は One CSS を書きました私が本当に楽しみにしている機能は、機能クエリに関するもので、基本的には既に存在していると言えます。Internet Explorer (Opera Mini を含む) を除く主流のブラウザーをサポートしています。

機能クエリは、@supports ルールを使用して許可されています。条件ブロック内の CSS。この条件ブロックは、現在のユーザー エージェントが CSS property キーと値のペアをサポートしているかどうかを確認します。サポートされている場合、コンテンツは有効になります。これは、ブラウザーが Flexbox をサポートしている場合の単純な例です。 : flex -

@supports ( display: flex ) {
  .foo { display: flex; }
}

さらに、operators like and not を使用すると、たとえば、ブラウザが古いフレックスボックス構文のみをサポートしているかどうかを検出することもできます -

@supports ( display: flexbox ) 
          and 
          ( not ( display: flex ) ) {
  .foo { display: flexbox; }
}

Support

。

2. TablesLayout

CSS テーブル レイアウト モジュールは、テーブル ベースのレイアウトを作成するためのシステムを定義しますが、ページ レイアウト 専用に設計されています。

項目の位置を明確にする

グリッドは、CSS 内のテーブル コンテナー (display:grid によって作成) とテーブル項目 (子コンポーネント) で構成されており、テーブル項目の位置と順序を明確に整理できます。 、タグに関係なく (HTML タグを参照)

たとえば、この記事で示されている聖杯レイアウトに CSS テーブルを使用して記事を書きました。このモジュールを使用して有名な「聖杯レイアウト」を作成します。

その背後にある CSS はわずか 31 行です -

.hgheader { grid-area: header; }
.hgfooter { grid-area: footer; }
.hgmain { grid-area: main; }
.hgleft { grid-area: navigation; }
.hgright { grid-area: ads; }

.hg {
    display: grid;
    grid-template-areas: "header header header"
                         "navigation main ads"
                         "footer footer footer";
    grid-template-columns: 150px 1fr 150px;
    grid-template-rows: 100px 
                        1fr
                        30px;
    min-height: 100vh;
}

@media screen and (max-width: 600px) {
    .hg {
        grid-template-areas: "header"
                             "navigation"
                             "main"
                             "ads"
                             "footer";
        grid-template-columns: 100%;
        grid-template-rows: 100px 
                            50px 
                            1fr
                            50px 
                            30px;
    }
}

柔軟な長さ

CSS グリッド モジュールでは、テーブル コンテナーの残りのスペースを均等に分割する新しい長さ単位が導入されています。たとえば、聖杯レイアウトで、メイン パーティションが 2 つのサイドバーの間のすべてのスペースを占めるようにするための簡単なコードを書きました。 this -

.hg {
    grid-template-columns: 150px 1fr 150px;
}

Gap

grid-row-gap、grid-column-gap、grid-gap プロパティを使用して、これらのプロパティの間隔を明示的に定義できます。値は データ型

、これはコンテンツ領域のサイズのパーセンテージです

たとえば、%5の間隔が必要な場合は、次のように記述できます -

.hg {
    display: grid;
    grid-column-gap: 5%;
}

サポート最も初期のCSSグリッドモジュールでした。今年の 3 月にブラウザでサポートされました。

3. ネイティブ

変数

最後にお話したいのは、ネイティブ CSS 変数です。このモジュールでは、作成者

が CSS プロパティのような値を割り当てることができる変数

を定義する方法を紹介します。 たとえば、テーマカラーがスタイルシートの多くの場所で使用されている場合、実際の値を直接何度も書き込む代わりに、テーマカラーを抽象化して変数に保存し、その変数を参照できます。

:root {
  --theme-colour: cornflowerblue;
}

h1 { color: var(--theme-colour); }  
a { color: var(--theme-colour); }  
strong { color: var(--theme-colour); }

これらのことは現在、SASS などの CSS プリプロセッサで可能ですが、CSS 変数はブラウザーでアクティブになります。つまり、それらの値はリアルタイムで更新することができます。たとえば、上の例の --theme-color 属性の値を変更するには、これを実行するだけです -

const rootEl = document.documentElement;  
rootEl.style.setProperty('--theme-colour', 'plum');

サポート

サポートはどうですか?

ご覧のとおり、現時点ではどの機能もすべてのブラウザーでサポートされていません。そのため、本番環境で安心して使用するにはどうすればよいでしょうか?答えは「プログレッシブ・エンハンスメント」です。昨年、私はフロンティア カンファレンスで、CSS に関連する進歩的な拡張を行うことについて話しました。今、ここに置きます -

以上が2017 年に学ぶ価値のある 3 つの新しい CSS 機能 (推奨)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。