【2018年版】今押さえておきたいフロントエンド関連

個人的に押さえておいたほうがいいと思う情報や最近動向が気になっている情報をまとめました。
短時間調べた程度でザックリ書いてますので、掲載している情報に間違いなどありましたら、
ご指摘いただけると助かります。

現時点でWorking Draft,Editor's Draftの情報もありますし、ブラウザ側でほとんど実装されてないプロパティ（業務ではあまり使えない系）も積極的に載せていっているので、対応状況についてはCan I useやMDNで調べてください。
途中まで載せてたけど多すぎてあきらめた...

HTML

Resource Hints(dns-prefetch, preconnect, prefetch, prerender)

指定しておくことで、ページ遷移時に名前解決・接続・リソースの取得・レンダリングを早めることができる。
Link types - HTML | MDN

Preload

該当ページで使用するリソースを先読みすることができる。
Preloading content with rel="preload" - HTML | MDN

Resource Hints,Preloadについては、以下の記事でもまとめています。
HTMLからはじめるWebパフォーマンス

noopener,noreferrer

noopener

window.openerでリンク元のドキュメントを変更できないようにする。

noreferrer

HTTPヘッダーでリファラーを送信しないようにする。

上記を組み合わせることで、target="_blank"を利用したフィッシング詐欺に対策することが可能になる。
以下の記事で詳しく解説されています。
リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io

CSS

@support

ブラウザが特定のCSSに対応しているか判定できる。

@supports - CSS | MDN

CSS

@supports (position: sticky) {
  .sticky-nav {
    position: sticky;
  }
}

@supports not (position: sticky) {
  .sticky-nav {
    position: fixed;
  }
}

上記のnot以外にandやorで複数記述することも可能。

本来とは異なる使い方ではあるが、IEはこの@ルールに対応していないのを利用して、
IEとそれ以外のブラウザという切り分けでハックとして適用することもできる。

CSS

.hack-target {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

@supports (top: 0) { /* IE以外 */
  .hack-target {
    background-color: #ff0;
  }
}

@document

URLやドメイン判定でスタイルを当てることが出来る。

@document - CSS | MDN

CSS

@-moz-document url-prefix("https://www2.example.com/") {
  body:after {
    content: 'ステージング';
    position: fixed;
    top: 0;
    left: 0;
    padding: 2px 6px;
    color: #333;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 10000;
  }
}

今のところFirefoxのみで、ベンダープレフィクスが必要。
使えそうな場面としては、ステージング環境と本番を分かりやすくする目的でスタイルを書く場合か。
制作者なら比較的Chrome,Firefoxを使っている場合が多いので実装されたらすぐ導入できそう。

@viewport

これまでMETAタグで定義していたviewportをCSSで書けるようになる。
例えば、以下の記述は

HTML

<meta name="viewport" content="initial-scale=1.0">

CSS

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

このように書けるらしい。
user-scalableはuser-zoomが該当するようです。

position: sticky;

要素がひっつくような配置が可能になる。
position - CSS | MDN

JSで実装していたものがCSSのみで再現できるため、使い勝手良さそうに思えるが
親要素や祖先でoverflow: hidden/auto;を指定していると、それだけでstickyしなくなるため使い所が難しい。

display: grid; (display: inline-grid;)

gridレイアウトが可能になりますが、散々既出なのでこの記事では取り上げません。
正直、以下に続くminmax(),fit-content(), display: subgrid;,display: contents;を取り上げるための布石として書いた。

minmax(),fit-content()

どちらもgridレイアウトのgrid-template-columns,grid-template-rowsで使用できる。

minmax() は最小値最大値を指定できるようになる。
minmax() - CSS | MDN

fit-content() は大きい場合は引数の値で固定しつつ、それより小さい場合はautoになる。
fit-content() - CSS | MDN

gridのみの限定ではあるが、Element Queriesっぽいこともできるようだ。
CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる | コリス

display: subgrid;

親要素がdisplay: grid;のとき、グリッドモデルに従って配置する。
display - CSS | MDN

↓display: subgrid;の実装例
https://codepen.io/scottgruber/pen/dXymZN

display: contents;

指定した要素自身はボックスを生成しないが、子要素や疑似要素にその役割を継承させる。

What’s so great about display: contents? – CSStuff – Medium

上記のようにdisplay: contents;を活用することで、display: grid;の要素の直下がulになっているにもかかわらず、要素を存在しないことにしてliをグリッドにすることができる。
直下の要素にしか効かないようなプロパティをある程度融通利かせることが可能になる。

display: flow-root;

いわゆるclearfixの代わりになる。
display - CSS | MDN

以下の記事で詳しく解説されています。
clearfixの必要がなくなる新しいプロパティをW3Cが定義、一部のブラウザでもう使える！ | コリス

↓display: flow-root;の実装例
https://codepen.io/rachelandrew/pen/RKgevX

font-display

フォントの表示設定。
Webフォント読み込み時に一瞬だけテキストが表示されない状態を防げる。
font-display - CSS | MDN

以下の記事で詳しく解説されています。
[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」 | コリス

font-feature-settings

フォントの字詰めが可能になる。
font-feature-settings - CSS | MDN

font-variation-settings

フォントの軸名が設定できる。
Variable Fontを使用すると柔軟なフォント表示が可能になる。

以下の記事で詳しく解説されています。
Variable Fontについて - console.blog(self);

conic-gradient

radial-gradientと異なり、中心からの角度(deg,%)でグラデーションが可能になる。
円グラフやチェック柄を簡単に再現することが可能で、radial-gradientと併用できるっぽい。
radial-gradientと組み合わせる場合は、背景色で中抜きするとドーナツ型の円グラフが簡単に出来そう。

CSS mask

画像によるマスクが可能になる。
mask - CSS | MDN

CSS Shapes

シェイプに沿ったテキストの配置が可能になる。
CSS Shapes - CSS | MDN

scroll-behavior

JSを使わずにスムーススクロールを実装することが可能になる。
残念ながら今のところeasingは設定できないっぽい。
scroll-behavior - CSS | MDN

CSS Scroll Snap Points

コンテンツをスクロール時にスナップさせることが可能になる。
CSS スクロールスナップ - CSS | MDN

前述のscroll-behaviorと組み合わせて使用しても、今のところスナップ時にスムーススクロールしたりはしないっぽい。

Column combinator,:nth-column(),:nth-last-column()

Column combinator

colタグの該当範囲のセレクタにスタイルを指定できる。
通常colタグによる列経由でスタイルを変更する場合、background,widthなど一部のスタイルしか適用できないが、Column combinatorを利用することで、該当セルにスタイルが適用できるようになる。

HTML

<table>
  <col span="2">
  <col class="selected">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td colspan="2">D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>F</td>
    <td colspan="2">G</td>
  </tr>
</table>

CSS

col.selected {
  background: gray;
  color: white;
  font-weight: bold;
}

colタグに直接指定する場合、この場合C,E,Gが所属する列に対してbackground: gray;のみ適用されるが、

CSS

col.selected || td {
  background: gray;
  color: white;
  font-weight: bold;
}

Column combinatorを使って指定する場合C,E,Gのセルに対してbackground: gray; color: white; font-weight: bold;が適用される。

:nth-column(),:nth-last-column()

tableの指定列にスタイルを適用できる。

:matches(),:has(),:is()

:matches()

セレクタをまとめられる。今のところ:anyを使用することで再現できる。

CSS-Tricksの解説を見るとわかりやすい。

:matches() | CSS-Tricks

CSS

:matches(section, article, aside, nav) h1 {
  color: #BADA55;
}

/* Same thing as this... */
section h1,
article h1, 
aside h1,
nav h1 {
  color: #BADA55;
}

:has()

親要素や前の要素に対してスタイルを当てることが出来る。
ねもうす疑似クラス。

CSS

a:has(> img)

直下にimgタグを含むaタグに対してスタイルを当てる。

CSS

dt:has(+ dt)

dtタグが後ろに隣接しているdtタグに対してスタイルを当てる。

:is()

詳細度に影響を与えずにスタイルを指定できるらしい。（さらに:matches()の同じ構文や機能を備える）

:focus-within,:target-within

:focusした際に、紐付けた要素にスタイルが当たる。（:target-withinは:targetバージョン）

:focus-visible(:-moz-focusring)

"focus ring"のスタイルを変更する。
https://drafts.csswg.org/selectors-4/#focus-visible-pseudo

outline: noneをやめよう、focus-ringを使おう - yuhei blog

JavaScript

ES6 module

scriptタグにtype="module"を設定することで、import,exportを利用できるようになる。
現状はネストやモジュールの数が増えた場合、パフォーマンス面がネックになっているようだ。

ES6 In Depth: Modules – Mozilla Hacks – the Web developer blog
JavaScript モジュールの現状 | プロダクト・サービス | POSTD

EventListenerOptions API

addEventListener/removeEventListenerの第3引数にオプションが指定できる。

JavaScript

target.addEventListener('type', listener, {
  capture: true,
  once: true,
  passive: true
});

• capture: useCaptureの代替
• once: 1回だけ実行
• passive: preventDefault()が含まれないこと示す。スクロールのパフォーマンスの改善などに利用できる

EventTarget.addEventListener - Web API インターフェイス | MDN
EventTarget.removeEventListener - Web API インターフェイス | MDN

Intersection Observer API

Viewportと要素の交点を検知するAPI。
scrollイベントでスクロール位置や要素の出現位置を監視する必要がなくなる。

Intersection Observer API - Web API インターフェイス | MDN

Visual Viewport API

Viewportの幅や高さ拡大等を取得できるAPI。
position: stiky;と同じようなことや、特定箇所のみピンチインで拡大させないようにするなどの対応が
今までより簡単に実装できるようになる。

VisualViewport - Web APIs | MDN

requestIdleCallback API

フレーム終了時がアイドル状態だった場合に実行される関数をキューに登録できる。
DOM変更時のFPS改善などに利用できる。

requestIdleCallback - Web API インターフェイス | MDN

Payment Request API

高速で一貫性のある決済フローを実現するAPI。

Payment Request API - Web APIs | MDN

Paint Timing API

ページ読み込み時のpaintが発生する時間を取得できるAPI。
First Paint,First Contentful Paintを取得可能だが、
First Meaningful Paintは取得できないぽい。

https://w3c.github.io/paint-timing/
PerformancePaintTiming - Web APIs | MDN

Long Tasks API

ユーザーエクスペリエンスを妨げる長いタスクを検出するAPI。

Device Memory API

デバイスのメモリを取得するAPI。

Image format

APNG(Animated Portable Network Graphics)

アニメーション表示が可能なPNG。
GIFアニメーションと異なり、アルファチャンネル（半透明）でのアニメーションが可能で、アンチエイリアスの表現が滑らかになる。
Safariに続きChromeが対応したことによって、大抵のブラウザで使えるようになった。
Animated PNG graphics - Mozilla | MDN

WebP

Googleが開発している画像ファイル形式。
アルファチャンネルをサポートしており、アニメーション表示も可能で、
従来のJPEG/PNGなどと比べ25-30%程度の軽量化が期待できる。
A new image format for the Web  |  WebP  |  Google Developers