2017年、CSSでこれをやりたかったが実現できる新しい3つのテクニック
Post on:2017年1月19日
sponsors
CSSには数多くの新しい機能が準備されています。その中でも2017年の今年に学んで、身につけておきたい3つのテクニックを紹介します。
3つはすべて有用で、Webサイトやアプリを作成する際に必ず役立つと思います。
3 New CSS Features to Learn in 2017
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
@supportsを使った条件付きCSS
@supportsを使用したCSS Feature Queries（W3C）は、特定のCSSのスタイルを指定したユーザーエージェントに対してのみ適用することができる条件付きのCSSを利用できます。
簡単な例だとFlexbox（display: flex）が利用できるブラウザのみスタイルを適用する場合は、下記のようになります。
|
1 2 3 |
@supports ( display: flex ) { .foo { 適用するスタイル } } |
さらにandやnotなどの演算子を使用することで、複雑なクエリを作成できます。例えば、ブラウザがFlexboxの古い構文のみをサポートしているかどうかも検出できます。
|
1 2 3 4 5 |
@supports ( display: flexbox ) and ( not ( display: flex ) ) { .foo { display: flexbox; } } |
ブラウザの対応状況
各ブラウザの対応状況は、下記の通りです。
IEを除く、すべてのモダンブラウザにサポートされています。
すべてのブラウザにサポートされていない場合の対応方法は下記をご覧ください。
Float, Flexboxの後継者「CSS Grid Layout」
ページのグリッドは何で実装していますか？ FlexboxやFlaotの人が多いと思いますが、グリッドレイアウトを作成するための「CSS Grid Layout（W3C）」がそう遠くない将来に利用できるかもしれません。基本的には、Flexboxのボックスレイアウトモジュールに類似しており、さらにページレイアウトのための機能が備わっています。
アイテムの明示的な配置
CSS Grid Layoutでは、グリッドはグリッドコンテナ（display: gridで作成）とグリッドアイテム（子要素）で構成されています。CSSではマークアップでの配置とは無関係に、グリッドアイテムの配置と順番を簡単かつ明示的に組織化できます。
例えば、CSS Grid Layoutを使用した聖杯レイアウトに関する私の記事では、このモジュールを使用して難しい「聖杯レイアウト」を作成する方法を紹介しました。
The Holy Grail Layout with CSS Grid
翻訳版: CSSの新しいレイアウトモジュール「CSS Grid Layout」を使って、レスポンシブ対応の3カラムレイアウトを実装するチュートリアル
これはわずか31行のCSSで実装できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.hg__header { grid-area: header; } .hg__footer { grid-area: footer; } .hg__main { grid-area: main; } .hg__left { grid-area: navigation; } .hg__right { 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 Grid Layoutには「fr」という新しい長さの単位が導入されています。「fr」はfraction（割合）の略で、利用可能なスペースを補助単位で分割した「1」つ分の領域が割り当てられます。
この単位を使うことで、グリッドコンテナの空きスペースに応じて、グリッドアイテムの高さと幅を配分することができます。例えば、聖杯レイアウトではメインセクションが2つのサイドバーの後に残っているすべてのスペースを満たすように、全体から150px+150pxをマイナスした分になります。
|
1 2 3 |
.hg { grid-template-columns: 150px 1fr 150px; } |
溝の指定も簡単
グリッドの溝を指定するのもCSS Grid Layoutでは、専用のプロパティが用意されています。grid-row-gap, grid-column-gap, grid-gapです。
これらのプロパティは<length-percentage>データ型を値として指定でき、パーセント指定はコンテンツエリアのサイズに対応します。例えば、溝を5%に指定したい時は、下記のように記述するだけです。
|
1 2 3 4 |
.hg { display: grid; grid-column-gap: 5%; } |
ブラウザの対応状況
各ブラウザの対応状況は、下記の通りです。
CSS Grid Layoutは早くて今年の3月からブラウザで利用できるようになります。
プロパティを変数で指定
最後は、ネイティブのCSS変数（W3C）です。このカスケード変数モジュールでは、制作者が定義した変数をCSSのプロパティに値として割り当てることができます。
例えば、スタイルシートのいくつかの要素に適用しているテーマカラーがある場合に実際のカラー値を何度も記述するのではなく、変数に定義して、各要素のプロパティにその変数を記述して利用することができます。
|
1 2 3 4 5 6 7 |
:root { --theme-colour: #6495ed; } h1 { color: var(--theme-colour); } a { color: var(--theme-colour); } strong { color: var(--theme-colour); } |
これはSassなどのCSSプリプロセッサでもできますが、CSS変数はブラウザがサポートしているという利点があります。これはその値をライブで更新できることを意味します。例えば、--theme-colourプロパティを変更するには下記のように記述します。
|
1 2 |
const rootEl = document.documentElement; rootEl.style.setProperty('--theme-colour', '#8E4585'); |
ブラウザの対応状況
各ブラウザの対応状況は、下記の通りです。
IEを除く、すべてのモダンブラウザにサポートされています。
すべてのブラウザにサポートされていない場合の対応方法は下記をご覧ください。
すべてのブラウザにサポートされていない場合
ここで紹介した3つの機能は、すべてのブラウザで完全にサポートされていません。そんな時は、プログレッシブエンハンスメントです！
わたしは昨年、Fronteers ConferenceでCSSに関するプログレッシブエンハンスメントを適用する方法について講演しました。その模様は動画でご覧ください。
プログレッシブエンハンスメントについては、動画の09:30あたりからです。
あなたが、2017年に学ぶべきCSSの機能は何ですか？
sponsors
