CSSConf.asia 2015 メモと感想
会社に支援いただいて Devfest.asia に参加できたのでメモと感想をば。
- 3.14 things I didn't know about CSS
- CSS の tips を中心に CSS での XSS など
- Attribute value を使って csrf token を盗んだり、Web font を使って個人情報を盗んだりできるというのが新鮮だった
- あと CSS Expression も初めて知った(知らない方が幸せだった)がまさに evil という感じで最悪
- 最後に CSS セレクタでバンド名を表現する芸をやってたのが面白かった
p, i {
color: black;
}
/* Black <i>'d <p>s */
- In the Year 2000 - Designing responsive emails
- HTML と CSS でデザインされたページを作り上げるのがいかに困難かという話
- メールクライアントはまさに地獄という感じで、Outlook の特定のバージョンは Word でレンダリングされたりするそうで恐怖でしかなかった, Gmail(webkit)も信用ならないとのこと
- また、画像が読み込まれないことも多々あるので、
alt
をちゃんと付ける話とか涙なくては語れぬという感じ - そして、そういう環境下ではテーブルレイアウトが現役という話もまた厳しかった
- ちょくちょく綺麗なメールがくるけど(Vimeoとか)あの陰には犠牲者がいるのだな...と気付かされた
- Moneyball for performance Metrics
- ブラッド・ピット主演で映画化された Moneyball で描かれていたように Metrics をとるのが大事という話と、いかに必要となる Metrics をとるかという話
- ちょいちょい聞いたことのある速度改善で KPI 改善したよみたいな話
- 通信を HAR で計測したりとか、
performance
でレンダリングを計測したりとか - http/2 の話はさらっとという感じ
- Animating SVGs
- みんな大好き SVG のアニメーションの話。自分もここ半年ぐらいだいぶ SVG に取り組んでいるので謎の親近感があった
- なぜ SVG かというと、大概のブラウザでサポートされているし、CSS でスタイル当てられるし、スケーラブル(解像度的な意味で)だから。ひたすら頷くオレ
- その SVG をアニメーションさせるためには 3 通りあって、CSS、SMIL、JS
- SMIL というのが初見だったが、XML の要素として
<animation from="0 0" to="100 100">
みたいな感じで書くとアニメーションできるらしい - ただ、IE や Opera (今では Webkit に変わったから実装されてるのかなあ?)ではサポートされてないし微妙っぽい
- やっぱり JS で制御するのがややこしいアニメーションも制御できるしよさそうだった
- Shape morphing をやるときや、適当なインターフェイスがほしいときはライブラリを使うといいぽい
- PostCSS - aka how to sneak JS into a CSSConf
- 今回のセッションの本丸ぐらいの気でいたが、PostCSS の紹介で終わった
- とはいえ、このあとズラズラと Module CSS ボーイズが語ってくれてたのでちょうどよかったかも?
- PostCSS はパーサで、200を超える plugin 群がそれらを加工する
- PreCSS を使えば mixin や制御構文や変数を使えるので Sass とオサラバできる
- パフォーマンスも上々
- The End of Global CSS
- タイトルの示す通り、Global な CSS を捨ててコンポーネント単位で CSS 書こう屋
- Component って実は新しい概念ではなくて、我々が今まで使ってきていた
<select>
やら<button>
もコンポーネントと見立てることができる - これまでもサードパーティ製のコンポーネント(例えば jQuery UI Date picker)を使ってきたが、画像リソースやら js やらなんやらてんこ盛りだった
- それらのために gulp とかを使ってたけどさ...
- Component 時代のツールは Webpack で落ち着いたみたい, JS 屋の自分からしてみると browserify と適材適所という感覚だが、CSS マン達的には Webpack で FA という雰囲気を感じた
- Components みたいな名前のディレクトリにコンポーネント毎にディレクトリを切って必要なリソースを格納していくスタイル
- その時に名前空間をどうするか、ということで local scope を使うらしい
:local(.class)
みたいな感じでセレクタを書くと、ユニークなハッシュを生成して、そのハッシュを JS で参照するというスタイルのようだ- local scope は Webpack の css-loader で使えるが、PostCSS にも plugin がある模様
- また、
composes
というプロパティを使うことで他の css ファイルからプロパティを呼んできて結合したりもできるそう - 恐らく React をメインターゲットに据えてるとはおもうが、Mercury や Angular でも使えるし、Vanilla でも使えるとのこと
- JS のランタイムはなし(Webpack の分はあるんじゃないかとおもうが)
- これらが CSS Modules として切り出されていろいろ実装が作られているようだ
- The Rise of Modular Style
- 前のセッションに続いて、CSS Module 勢
- JS の歴史の話があって、CommonJS で module を export/import できるようになったのが最高で、これを CSS に持ってきたいという話(何周遅れの話なんだ...)
- それが Interoperable CSS https://github.com/css-modules/icss
- CommonJS よろしく export と import の構文を持っててこれらでモジュール化された CSS を参照するような構造に
- HTML の class に
class="button button-success"
って書くのアホらしくない?って話がなるほど、とおもった - Sass の mixin 使ってもいいけど生成される CSS セレクタが鬼のようにデカくなるので Webpack の composes 使おうねという話
- Future work として CSS on npm という話があって、これはブラウザ界もパッケージとして管理する意向の npm inc. と似た方向の話なんだろうとおもった
- Performance beyond Page load
- ページのレンダリングを改善する話
- パフォーマンス向上のインパクトとしては
- Layout > Paint > Composite らしい
- これらは http://csstriggers.com/ を見ると CSS のプロパティがそれぞれ上の 3 つのうちどれが発火するかひと目で確認できる。これを使って不要なプロパティを消したりして改善していくぞ
- それに当たって Chrome dev tools の FPS meter や paint flashing は便利
- その他
nth-last-child(-n+1)
みたいなセレクタはやめて class や id で参照するだとか、不要な CSS を削るとか、再計算コストを計測するとか - これまで GPU を使うために
transform: translate3d(0, 0, 0);
みたいなことをしてきたが、これからはwill-change
プロパティを使って再計算(主にアニメーションかなあ)コストを最適化できるらしい。https://dev.opera.com/articles/ja/css-will-change-property/ が詳しかった - http://perfaudit.com/ にいろんなサイトの最適化例が載ってる
- Responsive Web Bloopers
- Viki https://www.viki.jp/ という動画サービスの中の人
- 余談だが、i11n もしっかりしてるし国内の TV ドラマもあるし結構いいサービスなのでは
- Viki を改善していくに当たってぶつかったこととその解決
- その1: デザイナとデベロッパの交流が乏しい
- デザイナが張り切って Web で全く作れる気がしないアニメーションを作っちゃったり、巨大な画像をいれちゃってたり、複雑なレイアウトで作業を終える
- デベロッパが作業を開始すると問題だらけでデザイナに突き返したりとかを繰り返してクソの山を積み上げていく
- そしてベータテスト後に巨大なリファクタをしてようやくリリースに漕ぎ着ける、的な
- これを次のように改善した。デザイナはラフの時点ぐらいからデベロッパに渡してしまって、デベロッパはそれを元に(醜くてもいい)プロトタイプを作成する。このプロトタイプを元にデザイナがデザインを詰めて、デベロッパがそれを実装して...というのを繰り返す
- 小さいイテレーションを回すのは僕も経験的に全く同意で、今の仕事ではデザイナではビズの方とやり取りすることが多いのでビズの方のふわっとした話を最初は細かく詰めてから作業に取り掛かっていたが、さっさとプロトタイプを作ってしまってそれのフィードバックをもらって修正した方が手っ取り早いということに気付いてからはそうするようにしている
- その2: 開発計画が乏しい
- コーディングスタイルや、フレームワークが全然決まっていなかった, この辺は整備したらしい
- その3: 実機でデバッグするのが遅かった
- 実機でデバッグするのが開発の最終段階で、それまではシミュレータでしかサイトを確認していないと痛い目に遭う
- これも UI component を作成したら実機で早めに確認するサイクルを回した方がいい
- ghostlab の話をしていたが、オレたちには browser-sync があるやん、と思って聞いてた
- Viki https://www.viki.jp/ という動画サービスの中の人
- Webfonts: Levelup
- 最後のセッションは W3C の人
- PNG の co-author だったり、CSS の仕様周りに携わっている人のようだ
- Character と Glyph の違いから、フォントの未来まで
- CSS3 の Font Module から紹介をしていた
- Font あまり詳しくないのでアレだが、カーニングなど CSS で指定できるみたい
- Javascript で
new FontFace(...)
とすることで Font を読み込むことができるらしい - TransType というフォントのデモをしていたんだけど、よく分からず...文字毎にパーツを組み合わせてパーツ毎に色を変えたりとかもできるみたい
全体的な感想
JS マンとしては全てを JS の支配下に置きたい主義なのだが、CSS マンたちは CSS 独力でなんとかしようとしている(といっても Webpack などが JS を隠蔽しているだけだとおもうが)印象があって少し相容れなそうだった。
面白かったのは Viki の人のセッションで「デザイナがレスポンシブデザインのモックを作ってきたら、小型のデバイスでカラムの順番が互い違いで作ってくる」みたいな話をしてたりして思わず「あるある〜〜〜〜」ってなってしまった。
その他、パフォーマンスや XSS の話もあり、興味深かった。
明日と明後日は JSConf!
以下メモ直貼り。
3.14 things I didn't know about CSS
@mathias Operaの人
!important
よくないよね
->
.foo .bar {
color: red;
}
.bar .bar {
color: green;
}
が !important
と同じ効果がある
Font famiy names in CSS Whitespace in the font family name, it must be quoted <- NO
\34 56bereastreet
Attribute values
a[href=foo] {
background...
}
unquoted attribute values
a[href="foo|bar"] {
background...
}
CSS comments
.some {
/* comment */
}
single line comment もいけるらしい
.some {
// comment
}
HTML tags
- head, bodyは閉じタグなくてもいい
- head, bodyはそもそもなくてもいい
Using CSS without HTML
HTMLなくてもゲームみたいなやつがつくれる
Unicode in CSS
Unicodeの文字ならclassやidに使える...が、CSSではエスケープが必要
#\#id { }
, #\34 04-error
, .\[attr\=\'value\'\]
Escaping CSS selectors
CSS.escape
XSS
CSS Zen garden
evil.css
attribute valueを使ってcsrf tokenを盗める
Webfontを使ってDOMの情報を盗める
CSS Expressions in IE 7- CSSにJSのコードを書けるやつ IE7までだけど、legacy modeでIE7 modeにするとIE10でも使える
- CSSにinjectするときもちゃんとサニタイズする
X-Frame-Options: DENY
- use
<!DOCTYPE html>
Firefoxは background: url(javascript:while(1){})
で殺せる
In the Year 2000 - Designing responsive emails
Emails are evil
design code resources
minimum touchable areaの44x44はiPhoneのガイドラインなので
Emailではtable layoutが最高
<style>
や<head>
をサポートしてないのでinline styleでがんばる
max-widthは500-600程度
画像は表示されないことを考慮してaltやfallbackのstyleをつけるなどする
media query
device pixel ratio
!important
をmedia queryで使う
OutlookはWordでレンダリングしてたりしてつらい webkitといえどもいろいろサポートされてなくてつらい
Moneyball for performance Metrics
npmの人
Moneyball の話を参考にチューニングする
slow websites lose
The state of Javascript on Android is very poor
結構な人がMobile deviceがprimary device
people exepts mobile fast
2G than 4G
パフォーマンスを上げることでconversion, revenueを改善できる(walmart, obama for america)
改善するにはまず計測から
DOM complete, Load
page weight
request/response: new relic, calibre, skylight
focus first usable time
webpagetest
render blocking
find the files that block
PhantomJS
HAR file
round trips
TCP slow start
timing differences
performance.timing
different websites need different measurements
UserTiming API
performance.{mark|measure}
latency
server-side rendering
best practice
concatenate, minification
The Future is now
performance budget
http/2
Animating SVGs
https://github.com/zellwk/CSSConf.Asia-animating-svg
Zellさん
Good browser support, styleable, scalable
animation methods
- CSS
- SMIL
- JS
targeting SVGs(query selector)
transition...
SMIL
- IE, Operaのサポートがいらないとき
- シンプルなアニメーション
<animate>
の属性にアニメーションの設定を書いていく
javascript
complex animations support all browsers
vivusJS snap.svg morphSVG
shape morphing
PostCSS - aka how to sneak JS into a CSSConf
@lcpriest
Ruby and EmberJS
TradeGecko
PostCSS is not preprocessor
PostCSS is just a Parser
Modify Declarations, Modify Rules, Modify Comments
Plugins
200+
PreCSS
Goodbye Sass
RTLCSS https://github.com/MohammadYounes/rtlcss
Discourse: Rails + EmberJS
アラビック向けに左右を反転させる
postcss-imperial postcss-singlish
The End of Global CSS
Documents vs Web apps
Global Scope vs Maintenance
OOCSS, SMACSS, BEM, SUIT...
CSS at scale feels Completely Different
How do we scale interfaces better?
The Age of Components
Web components, Polymer, Angular's directives
REACT!!
Components are nothing new
CSS and images are private to a component
Unless you use third-party components
jQuery UI date picker(sucks)
gulp, sass
tooling for the component age?
webpack
single dependency tree components 下に component 毎に dir を切る
BEM
a block is a component
Block, Element, Modifying Your Javascript components
(webpack) local scope
what does styles eval to?
:local
scope
styles.header
みたいな感じで component からアクセスできる
:local
は hash の unique に変換されて hashmap で参照
no more naming collisions
loader の設定で参照の名前を変えられる
:local(.header)
みたいな感じでもアクセスできるみたい
PostCSS
postcss-local-scope
webpack composition
css を結合できる
.some {
compose: className from "./style.css";
}
React, Mercury, Angular, Backbone, VanillaJS
Javascript dependency => No
The future
CSS modules
The Rise of Modular Style
Human interfaces vs Machine interfaces
September 2008, Attack from IE JavaScript in 2008, windowにnamespaceを生やしてなんとかする V8: Sept 2, 2008
ServerJS
NodeJS: Feb 2009
CommonJS: July 2009
namespace vs commonjs
Browserify: Sep 5, 2011
CSS - Sass, Less, PostCSS
Interoperable CSS: June 21, 2015
ICSS
:import("./some.scc") {
import-alias: some-depend;
}
:export {
normal: ...
}
同名クラスだとしても hash が変わるので名前が衝突しない
CSS Modules
EmojiのクラスでhtmlとCSSを書く もろもろツールを使ってヒューマン、マシン共にリーダブルにしようという話
Modular Style
.button .button-success
みたいなのはダサい
sassで継承させるのはいいけど...生成されるCSSがクソデカくなる なんで webpack compose 使おう
Atomic design Atoms, Molecules, Organisms, Templates, Pages => all component
Future work
- Reusable components w/ CSS on npm
- Non-JS ecosystems
Performance beyond Page load
Javascript style layout paint composite
performance impact of operations: layout > paint > composite
Chrome Dev Tools: FPS meter, paint flashing
CPU vs GPU
must follow understand what impacts rendering performance (Profile) choose your css rules wisely avoid triggering layout / paint operation repeatedly or when animating prefer using transform add opacity changers (trigger only composite operation) for animations
nth-last-child(-n+1)
less performant
remove unused css rules
reduce number of elements being styled
measure your style recalculation cost
debounce input handlers
fixed elements and scrollable elements are repainted by the browsers
transform: translateZ(0);
GIFs and performance
disable animation when not inside the viewport
will-change: transform;
will-change: https://dev.opera.com/articles/ja/css-will-change-property/
Responsive Web Bloopers
@renettarenula
viki の人 https://www.viki.jp/
Working together, writing code, testing site
Lack of collaboration between designers and developers (デザイナとデベロッパの交流が乏しい)
designer limitations: Fancy animations Big images Beautiful, intricate layouts
Mockups Performance, Interaction type(small => touch, large => mouse)?
developer shortcomings Discovered problems late, hasks, shortcuts, library...
previous workflow design mocks -> test validate -> develop and test -> beta test -> big fixes -> rollout
collaborative workflow low fidelity mockups/sketches -> prototype -> feedback -> high fidelity design mockups
prototype not necessary to prototype everything build fast, build ugly
writing code lack of planning on development (開発計画が乏しい)
coding style guides naming conventions, file organizations, nesting levels, media queries BEM, OOCSS, SMACSS
beware of frameworks CSS bloats, Rigid styling, unsuitable frameworks
browser and device issues target browsers and devices, design within constraints, device specific issues
Testing site testing late on devices and relying too mush on emulators
device testing testing interactions, bugs and quirks on mobile
experia のバグ
better workflow build a UI component -> connect local env to device -> repeat ->
localtunnel, proxylocal ghostlab
Webfonts: Levelup
https://github.com/svgeesus/font-level-up
Co-authored PNG CSS WG: Chair, CSS2 co-editor, CSS3 Color co-editor
- Basics
- OpenType features and CSS
- Performance
- The future
Character a codepoint, with properties
Glyph visual representation of characters
Myriad Pro <- Font family Light Roman Bold Italic <- faces
@font-face
はデスクリプタ、セレクタはプロパティ
descriptors descripbe individual font faces
properties requests for styling
Font stacks First font with glyphs for a given character is used Problem: avoiding bad Latin glyphs in Japanese fonts
unicode-range descriptor afor allowed range of unicode characters
unicode-range is really shit
OpenType features optional stylistic controls
Control with CSS fonts vary in features
font-variant preferrerd, but poor support
font-feature-settings cryptic, low-leve, widespread support
font-variant-numeric: proportinal-nums;
分数とかも出せるぞ!
font-synthesis: weight style;
font-kerning: none;
Performance
http://www.fontsquirrel.com/ https://typekit.com/ https://github.com/behdad/fonttools/
WOFF compression adds header, metadata gzips each table
WOFF2 compression excellent font-specific compression WOFF1よりベターらしい
CSS font loading API FF, Chrome, Opera, Android
new FontFace()
The future
From illuminated manuscripts ...to emoji
TransType
svg
CSS4 font-palette CSS4 font-synthesis
emoji, math, fangsong svgeesus