新しい CSS 機能の 3 つの例を共有する-CSSチュートリアル-php.cn

新しい CSS 機能の 3 つの例を共有する

零下一度

リリース： 2017-05-12 14:16:04

オリジナル

1222 人が閲覧しました

これは翻訳された記事です。原文は: 3 New CSS features to Learn in 2017 です。翻訳があまり良くありません。ご不明な点がございましたら、ご指摘ください。

新年には、新しいことを学ぶことが連続しています。 CSS には多くの新機能がありますが、私が学ぶのが最も楽しみな機能が 3 つあります。

1. 機能クエリ

この前に、私が最も望んでいる CSS 機能の 1 つである機能クエリについての記事を書きました。さあ、ここです！現在、IE ブラウザを除くすべての主要なブラウザが機能クエリ (Opera Mini を含む) をサポートしています。機能クエリでは、@supports ルールを使用して、条件領域に CSS ルールを記述することができます。この CSS コードブロックは、現在のユーザーのブラウザが特定の CSS

プロパティ

値のペアをサポートしている場合にのみ有効になります。簡単な例を挙げると、次のコードでは、ブラウザが

display

をサポートしている場合にのみ使用されます。フレックスボックススタイルは、フレックス時にのみ適用されます。

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

ログイン後にコピー

さらに、and や not などのいくつかの

演算子

を使用して、より複雑な特徴クエリを作成することもできます。たとえば、ブラウザが古いバージョンの Flexbox 構文をサポートしているかどうかを識別できます。

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

ログイン後にコピー

ブラウザは

拡張機能

機能クエリをサポートしています

Javascript

Interface: CSS.supports()もサポートしています。また、使用方法を確認するには上記の例を使用してください:

if ( CSS.supports( &#39;(display: flex)&#39;) ) {
    console.log(&#39;支持flex&#39;)
} else {
    console.log(&#39;不支持flex&#39;)
}

if ( CSS.supports( &#39;(display: flexbox)&#39; ) ) {
    console.log(&#39;支持flexbox&#39;)
} else {
    console.log(&#39;不支持flexbox&#39;)
}

ログイン後にコピー

2. グリッドレイアウト)

CSS Grid Layout モジュールは、グリッドベースのレイアウトを作成するためのシステムを定義します。これはフレックスボックスレイアウトモジュールに似ていますが、グリッドレイアウトは

ページレイアウト

用に特別に設計されているため、多くの異なる機能があります。明示的なアイテムの配置

グリッドシステムは、グリッドコンテナー (グリッドコンテナー、表示: グリッド作成）とグリッドアイテム（グリッドアイテム）。 CSS では、マークアップ内のレイアウトとは関係なく、グリッド項目のレイアウトと順序を簡単かつ明示的に整理できます。

たとえば、私の記事「CSS グリッドを使用した聖杯レイアウト」では、グリッドレイアウトモジュールを使用して聖杯レイアウトを作成する方法を説明しています。

新しい CSS 機能の 3 つの例を共有するメイン HTML コード:

<body class="hg">
    <header class="hgheader">Title</header>
    <main class="hgmain">Content</main>
    <aside class="hgleft">Menu</aside>
    <aside class="hgright">Ads</aside>
    <footer class="hgfooter">Footer</footer>
</body>

ログイン後にコピー

メイン CSS コード:

.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 グリッドモジュールでは、新しい長さ単位である fr 単位が導入され、グリッドコンテナー空間部分の残りの長さを表します。

グリッドコンテナーの利用可能なスペースに応じて、グリッドアイテムの高さと幅を割り当てることができます。たとえば、Holy Grail レイアウトでは、メインコンテナが両側のコンテナを除くすべてのスペースを占めるようにしたいと考えています。この効果を実現するには、次のコードを記述するだけです:

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

ログイン後にコピー

要素間の間隔

具体的に定義できます。グリッドレイアウト要素間のギャップについては、grid-row-gap、grid-column-gap、および Grid-gap 属性が値としてデータ型

を受け入れます。サイズに対応するパーセンテージ。

たとえば、5% のギャップがある場合は、次のように書くことができます:

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

ログイン後にコピー

ブラウザのサポート

CSS グリッドモジュールは、早ければ今年 3 月にブラウザで (デフォルトのサポートで) 利用できるようになります。

今すぐ体験したい場合はどうすればよいですか？

私のこの記録を参照してください: さまざまなブラウザーで CSS グリッドレイアウトを有効にする方法。

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 変数にはブラウザー内に常に存在するという利点があります。これは、これらの変数値をオンラインで変更できることを意味します。たとえば、update--theme-colour 属性値を実行するには、次のメソッドを使用できます:

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

ログイン後にコピー

[関連推奨事項]1.

無料 CSS オンラインビデオチュートリアル

2. CSS オンラインマニュアル

3. php.cn Dugu Jiijian (2) - CSS ビデオチュートリアル

以上が新しい CSS 機能の 3 つの例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

新しい CSS 機能の 3 つの例を共有する

1. 機能クエリ

拡張機能

機能クエリをサポートしています

CSS Grid Layout モジュールは、グリッドベースのレイアウトを作成するためのシステムを定義します。これはフレックスボックス レイアウト モジュールに似ていますが、グリッド レイアウトは

CSS グリッド モジュールでは、新しい長さ単位である fr 単位が導入され、グリッド コンテナー空間部分の残りの長さを表します。

具体的に定義できます。グリッド レイアウト 要素間のギャップについては、grid-row-gap、grid-column-gap、および Grid-gap 属性が値として データ型

変数

CSS Grid Layout モジュールは、グリッドベースのレイアウトを作成するためのシステムを定義します。これはフレックスボックスレイアウトモジュールに似ていますが、グリッドレイアウトは

CSS グリッドモジュールでは、新しい長さ単位である fr 単位が導入され、グリッドコンテナー空間部分の残りの長さを表します。

具体的に定義できます。グリッドレイアウト要素間のギャップについては、grid-row-gap、grid-column-gap、および Grid-gap 属性が値としてデータ型