posted at 2017-12-22

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

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

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

HTML

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

指定しておくことで、ページ遷移時に名前解決・接続・リソースの取得・レンダリングを早めることができる。
https://developer.mozilla.org/ja/docs/Web/HTML/Link_types

Preload

該当ページで使用するリソースを先読みすることができる。
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

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

`noopener`,`noreferrer`

`noopener`

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

`noreferrer`

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

上記を組み合わせることで、target=_blankを利用したフィッシング詐欺に対策することが可能になる。
以下の記事で詳しく解説されています。
https://blog.jxck.io/entries/2016-06-12/noopener.html

CSS

`@support`

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

https://developer.mozilla.org/ja/docs/Web/CSS/@supports

CSS

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

@supports not (position: sticky) {
  .stiky-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やドメイン判定でスタイルを当てることが出来る。

https://developer.mozilla.org/ja/docs/Web/CSS/@document

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: stiky;`

要素がひっつくような配置が可能になる。
https://developer.mozilla.org/ja/docs/Web/CSS/position

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

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

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

`minmax()`,`fit-content()`

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

minmax()は最小値最大値を指定できるようになる。
https://developer.mozilla.org/ja/docs/Web/CSS/minmax

fit-content()は大きい場合は引数の値で固定しつつ、それより小さい場合はautoになる。
https://developer.mozilla.org/ja/docs/Web/CSS/fit-content

gridのみの限定ではあるが、Element Queriesっぽいこともできるようだ。
http://coliss.com/articles/build-websites/operation/css/how-to-use-minmax.html

`display: subgrid;`

親要素がdisplay:gridのとき、グリッドモデルに従って配置する。
https://developer.mozilla.org/ja/docs/Web/CSS/display

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

`display: contents;`

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

https://medium.com/csstuff/whats-so-great-about-display-contents-ce5628ebce86

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

`display: flow-root;`

いわゆるclearfixの代わりになる。
https://developer.mozilla.org/ja/docs/Web/CSS/display

以下の記事で詳しく解説されています。
http://coliss.com/articles/build-websites/operation/css/the-end-of-the-clearfix.html

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

`font-display`

フォントの表示設定。
Webフォント読み込み時に一瞬だけテキストが表示されない状態を防げる。
https://developer.mozilla.org/ja/docs/Web/CSS/@font-face/font-display

以下の記事で詳しく解説されています。
http://coliss.com/articles/build-websites/operation/css/about-font-display.html

`font-feature-settings`

フォントの字詰めが可能になる。
https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings

`font-variation-settings`

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

以下の記事で詳しく解説されています。
http://sadah.hatenablog.com/entry/variablefont

`conic-gradient`

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

https://www.w3.org/TR/css-images-4/#funcdef-conic-gradient

CSS mask

画像によるマスクが可能になる。
https://developer.mozilla.org/en-US/docs/Web/CSS/mask

CSS Shapes

シェイプに沿ったテキストの配置が可能になる。
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes

`scroll-behavior`

JSを使わずにスムーススクロールを実装することが可能になる。
残念ながら今のところeasingは設定できないっぽい。
https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior

CSS Scroll Snap Points

コンテンツをスクロール時にスナップさせることが可能になる。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Scroll_Snap_Points

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

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

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

https://drafts.csswg.org/selectors-4/#table-pseudos

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の指定列にスタイルを適用できる。

https://drafts.csswg.org/selectors-4/#table-pseudos

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

`:matches()`

セレクタをまとめられる。今のところ:anyを使用することで再現できる。
CSS-Tricksの解説を見るとわかりやすい。

https://drafts.csswg.org/selectors-4/#matches-pseudo

: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()`

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

https://drafts.csswg.org/selectors-4/#has-pseudo

CSS

a:has(> img)

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

CSS

dt:has(+ dt)

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

`:is()`

https://drafts.csswg.org/selectors-4/#has-pseudo

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

`:focus-within`,`:target-within`

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

https://drafts.csswg.org/selectors-4/#focus-within-pseudo

`: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を利用できるようになる。
現状はネストやモジュールの数が増えた場合、パフォーマンス面がネックになっているようだ。

https://hacks.mozilla.org/2015/08/es6-in-depth-modules/
http://postd.cc/the-state-of-javascript-modules/

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
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
EventTarget.removeEventListener - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener

Intersection Observer API

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

Intersection Observer API - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API

Visual Viewport API

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

VisualViewport - Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport

requestIdleCallback API

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

requestIdleCallback - Web API インターフェイス | MDN
https://developer.mozilla.org/ja/docs/Web/API/Window/requestIdleCallback

Payment Request API

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

Payment Request API - Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API

Paint Timing API

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

https://w3c.github.io/paint-timing/
https://developer.mozilla.org/en-US/docs/Web/API/PerformancePaintTiming

Long Tasks API

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

https://www.w3.org/TR/longtasks/

Device Memory API

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

https://w3c.github.io/device-memory/

Image format

APNG(Animated Portable Network Graphics)

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

WebP

Googleが開発している画像ファイル形式。
アルファチャンネルをサポートしており、アニメーション表示も可能で、
従来のJPEG/PNGなどと比べ25-30%程度の軽量化が期待できる。
https://developers.google.com/speed/webp/

HTML
CSS
JavaScript
Image format
- APNG(Animated Portable Network Graphics)
- WebP

@sawadays0118

制作会社でマークアップエンジニアとして勤務後、フリーランスのフロントエンドエンジニアをしています。(｀・ω・´) 文系出身なのでプログラムは苦手ですが、効率化は大好きです。 HTML,CSS,JS（jQuery）,Sass,Slim,Gulpなどフロントエンド関連技術のTipsを中心に発信していく予定。コーディング歴8年、メインエディタはSublime text。好きな食べ物は鶏の唐揚げ。

Toot

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

HTML

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

Preload

noopener,noreferrer

noopener

noreferrer

CSS

@support

@document

@viewport

position: stiky;

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

minmax(),fit-content()

display: subgrid;

display: contents;

display: flow-root;

font-display

font-feature-settings

font-variation-settings

conic-gradient

CSS mask

CSS Shapes

scroll-behavior

CSS Scroll Snap Points

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

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

:matches()

:has()

:is()

:focus-within,:target-within

:focus-visible(:-moz-focusring)

JavaScript

ES6 module

EventListenerOptions API

Intersection Observer API

Visual Viewport API

requestIdleCallback API

Payment Request API

Paint Timing API

Long Tasks API

Device Memory API

Image format

APNG(Animated Portable Network Graphics)

WebP

Report article

Feedback

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

`noopener`,`noreferrer`

`noopener`

`noreferrer`

`@support`

`@document`

`@viewport`

`position: stiky;`

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

`minmax()`,`fit-content()`

`display: subgrid;`

`display: contents;`

`display: flow-root;`

`font-display`

`font-feature-settings`

`font-variation-settings`

`conic-gradient`

`scroll-behavior`

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

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

`:matches()`

`:has()`

`:is()`

`:focus-within`,`:target-within`

`:focus-visible`(`:-moz-focusring`)