【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