ホームページ > 記事 > ウェブフロントエンド > 2017 年に学ぶ価値のある 3 つの新しい CSS 機能 (推奨)
height: 1.76em;">多くの CSS の新機能の中で、今年採用された 3 つの新機能が、私を興奮を抑えきれなくさせてくれます。
少し前に、私は 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; } }
。
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; }
grid-row-gap、grid-column-gap、grid-gap プロパティを使用して、これらのプロパティの間隔を明示的に定義できます。値は 、これはコンテンツ領域のサイズのパーセンテージです サポート最も初期のCSSグリッドモジュールでした。今年の 3 月にブラウザでサポートされました。 変数 最後にお話したいのは、ネイティブ CSS 変数です。このモジュールでは、作成者 これらのことは現在、SASS などの CSS プリプロセッサで可能ですが、CSS 変数はブラウザーでアクティブになります。つまり、それらの値はリアルタイムで更新することができます。たとえば、上の例の --theme-color 属性の値を変更するには、これを実行するだけです -たとえば、%5の間隔が必要な場合は、次のように記述できます -
.hg {
display: grid;
grid-column-gap: 5%;
}
を定義する方法を紹介します。 たとえば、テーマカラーがスタイルシートの多くの場所で使用されている場合、実際の値を直接何度も書き込む代わりに、テーマカラーを抽象化して変数に保存し、その変数を参照できます。
:root {
--theme-colour: cornflowerblue;
}
h1 { color: var(--theme-colour); }
a { color: var(--theme-colour); }
strong { color: var(--theme-colour); }
const rootEl = document.documentElement;
rootEl.style.setProperty('--theme-colour', 'plum');
以上が2017 年に学ぶ価値のある 3 つの新しい CSS 機能 (推奨)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。