第61回 HTML5とか勉強会『CSS』に参加してきたメモ
第61回 HTML5とか勉強会『CSS』
http://html5j.connpass.com/event/22897/
動画アーカイブ
https://www.youtube.com/playlist?list=PLeFZWzLJpZceZqZzDtewSaGwhqaq1A9IC
■CSS、最近どう？
・公開資料
http://hiloki.github.io/s/css-today/
・CSS Architecture
・最近の主なCSS設計
・OOCSS
・SMACSS
・BEM
・最近出てきたもの
・ITCSS
・RSCSS
・クラス名が長くなりがちなBEMに対する解決策として使う人もいる
http://qiita.com/kk6/items/760efba180ec526903db
・CSSの問題
・全てがグローバル
・依存関係が難しい
・使っていない過去のCSSを消せない
・CSS in JS
・React Style
・JSからStyle属性にCSSを出力する
・ローカルスコープなのでCSS同士が衝突しない
・CSS Modules
・コンポーネントごとにCSSを書く
・JSにそのCSSをインポートする
・JS側でユニークなクラス名を付与してスコープする
・CSS Modulesについて
http://postd.cc/css-modules/
・Shadow DOM
・Web Component
・CSS Framework
・Bootstrap
・DreamweaverがネイティブでBootstrapをサポート
・Bootstrap Studio
・GUIで作れる
・Foundation
・Material Design Lite
・Lightning Design System
・管理画面向け
・Layout
・Flexbox
・display:flex;
・中央配置などの配置系で厄介だったものが簡単にできる
・Grid
・display:grid;
・CSSでグリッドレイアウトが作れる。闇を感じる。
・SVG
・Icon Font vs SVG
・フォントデータが読み込まれていないとOS側で勝手に別のフォントを当てる
・Icon FontからSVGに移行しようと言う風潮になってきている
・SVG Sprite
・IEではSVG用のライブラリが必要
・Bootstrap v4ではIcon FontからSGV Iconに移行する流れ
■まあまあ最近のCSSあたり
・CSSの担当範囲
・ページのレイアウト
・部品のレイアウト
・コンテンツの装飾
・UIまわりの挙動
・CSSの仕様
・標準化は順調に進んでいるか？
・フィードバック待ち
・実装待ち
・テストスイート待ち
・細かいとこをを詰めている
・CSS Level 4
・:match()の実装
・not()の強化
・backdrop-filterの実装
・曇りガラスのような背景効果が可能
・CSS Houdini
・CSS Houdini MTGのレポート記事
http://vivliostyle.co.jp/wp/2015/02/sydney/
・CSS Houdiniについての動画（42分）
https://www.youtube.com/watch?v=uw_QYFN_1-0
・CSSは拡張しづらく、前進させづらい
・「マジック」が多く、再定義しづらい
・Properties and Values API
・Variablesの発展形。値も決められる。
・CSSのマジックを暴き、ブラウザの中に隠されていたものを暴いていこう。その上で開発者がハックしていこうというのがHoudini Project
・Painting API
・Canvasを使って描画処理を定義
・Canvas要素を使って行っていたことがCSS側で可能になる
・マテリアルデザインの波紋のようなものができたりする
・吹き出しの三角をCSSで作ると、普通だとシャドウを付けるのが面倒だが、それが簡単にできる
・Typed OM
・jQueryでCSSを当てるときに、.css('background-color': '#000')というイケてない感じの事を書いていたが、
構造化されたオブジェクトとして渡せたり、取り出せたりする。
・CSSもメンテされるけど、Houdiniも今後のCSSのひとつ
・scroll-snap-* Properties
・ブラウザのネイティブのスクロールを活かしたまま、「この要素まで来たら止める」等のスナップを効かせられる
http://codepen.io/potch/pen/VLygWG
（FireFoxの最新版で閲覧推奨）
■PostCSsとcssnext
・公開資料
https://speakerdeck.com/morishitter/postcss-and-cssnext
・PostCSSとは
・GitHubで☆7000を超えている勢いのあるプロジェクト
・CodePenがPostCSSをサポート
・Bootstrapの開発者がv5ではSassからPostCSSへ乗り換えると言っていた
・元々はAutoprefixerのために作られた
・プリプロセッサーとしてはRuby Sassの26倍以上早い
・ベンダープレフィックス付与ツールとしてはCompassより50倍以上早い
・PostCSSで作られたツール
・Autoprefixer
・「Can I Use」というサイトのデータを参照してベンダープレフィックスを自動で付与する
・PreCSS
・PostCSS製のプリプロセッサー
・CSS Modules
・CSSのスタイルの影響範囲をコンポーネント内で閉じようとする試み
・CSSfmt
・未来のCSSの記法、SCSS記法に対応
・PostCSSのプラグイン
・http://postcss.parts/
・cssnext
・ブラウザが未実装のCSSの記法を今のブラウザが解釈できるようにするツール
・いくつかのPostCSSプラグインからできている
・プロパティやセレクタを変数に格納して使い回せる
・他のプリプロセッサーと同様に、出力後のCSSを意識して書く必要がある
・JSのBabel感覚で使用すると危険
■CSS Element Queries
・公開資料
http://geckotang.github.io/presentation-css-element-queries/
・CSS Element Queriesとは
・要素の幅や高さに応じたスタイルを適用できるようするためのJavaScriptライブラリ
・レスポンシブやスマートフォンサイトでコンテンツが一定の幅や高さになったときにJSで対応していたようなことをサポートしてくれる
・Media Queriesでやりたいことはできているので利用シーンはあまりないかもしれない。
・できること
・要素の幅に応じてスタイルを変更する
・要素の高さに応じてスタイルを変更する
・要素の幅や高さが変更したことを検知する
・あとから要素を追加する際の注意
・あとから追加された要素には、適用されない。
・あとから要素を追加する場合は ElementQueries.update(); を使用する。
■CSSの検証ツール
・CSS検証の問題点
・JSで更新されたDOMのスタイルに対して検証できない
・計算されたスタイルに対して検証できない
・スタイルとスタイルの組み合わせに対して検証できない
・Style Validator
http://style-validator.github.io/Style-Validator/
・計算後のスタイルを検証
・スタイルとスタイルの組み合わせの良し悪しを検証
・DOM変更を監視した検証（JS実行後やメディアクエリでも検証可能）
