Schedule

JavaScriptではECMAScript 2015、HTMLあたりではWeb ComponentsやServiceWorkerなど楽しそうなものが出てきています。でもCSSはどうでしょうか。Sassなどのプリプロセサ、BEMなどの使うノウハウは出てしばらく経ちましたが、CSS自体は進んでいるのでしょうか。暗くなるかもしれませんがそこらへんをお話しします。

Web Components、Shadow DOMの世界において、CSS設計はどうなるのでしょうか。まだ実例が少ないテーマですが、よくあるコンポーネントをWeb Components的に設計・実装してみたらどうなるかお話します。

• CSS3 プロパティを使ってなにか作ります

  @herablog

• CSS Polyfill Preprocessor

  @pocotan001

• position: fixed;を上手に飼う方法

  石橋 啓太

• 5分でわかるflexbox

  @a_t

• Yet Another CSS Preprocessor

  @morishitter_

※順不同

新しい技術がどんどんブラウザに実装されている昨今、受託の世界では、ようやくIE8以上を対象にしてWebサイトを作れるようになってきました。そんなIE8からまともに利用できるCSSの機能に、display: inline-blockがあります。何気なく使っているこのインラインブロックですが、よくよく考えると、このインラインブロックを初め、文中に配置される画像や、displayがinlineである要素群がどのようにレイアウトされるのか、はっきりと理解していないことに私は気づきました。

行の中で行われるレイアウトがどのように決定されるのか、正確に仕様を理解することで、私のモヤっとした悩みはいくつか解消されました。まったくもって目新しい内容ではありませんが、普段何気なく使っているCSSの機能を詳しく確認してみます。

何千行もあるCSS、複数人で開発するCSS、3ヶ月前に書いた自分のCSS、これらのコードを常にどんな状態か把握していますか？それを解決するために必要なのがStyleStatsです。本セッションではStyleStatsの開発背景や使い方を説明し、よりよいCSSを書くための道標として使ってもらえれば幸いです。