CSS Nite Shift14「ウェブデザイン行く年来る年」に登壇しました。

ブラウザの進化は速く、CSSの便利な機能はどんどん追加されています。これまで当たり前だと思っていた手法を見直すと、より効率的に素早くウェブ開発ができます。

2020年は、CSSをとりまく環境が大きく改善した年です。

1月にChromium版Edgeが登場し、Google Chrome・Firefox・Safari・Edgeの全モダンブラウザで使えるCSSは一気に増えました。各モダンブラウザは更新の頻度が早く、使える新機能はその後も増え続けています。ほんの一例を挙げれば、スクロール時の要素位置を固定できる「position: sticky;」、CSSだけでマスクをかけられる「mask」プロパティ、子要素のフォーカスを検知できる「focus-within疑似クラス」、CSS Gridの文書構造を保ったままレイアウトできる「display: contents;」、要素配置の新しい手法「CSS論理プロパティ」などがあります。一方、CSS開発のネックになっていたIE11のシェアは減り、多くのサイトでIE11のサポートを終了するなど、徐々にIE11の存在感が減っています。

ブラウザの事情が大きく変わった現在において、「いま、開発の現場ではどのようなCSSが使えるのか？」「新しいCSSはこれまでの開発をどうラクにしてくれるのか？」を学ぶことは、これからのウェブ制作を進めていく上での武器になることでしょう。

本セッションでは、2020年に全モダンブラウザで使えるようになったCSSの便利な機能について紹介します。CSSの便利機能を知りたい人、新しい知識を取り入れて自身の市場価値を高めたい人にオススメのセッションです。