CSSConf.asia 2015 メモと感想 - dev.jgs.me

会社に支援いただいて 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 セレクタでバンド名を表現する芸をやってたのが面白かった

(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 があるやん、と思って聞いてた

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

http://jennz0r.github.io/2000

Emails are evil

design
code
resources

hotpads.com

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

http://csstriggers.com/

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/

http://perfaudit.com/

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

original: http://dev.jgs.me/2015/11/18/cssconf-asia-2015
#20151118 #1118

すごいガンバって書いてんな... #20190205