Embed Size (px)
DESCRIPTION
Code HAIKU 2012の資料です。 http://atnd.org/events/33788
Citation preview
Browser oh browser browser
@teppeisCode HAIKU 2012/12/16
自己紹介•佐藤鉄平•@teppeis•サイボウズ株式会社 東京•出身は新潟（米と雪のみ）•サーバーからフロントまで
WEB+DB PRESSでJS連載中！
CSSの話
普通のCSS
.color { color: #F00;}
第一句
:root .color { color: #F00\9;}
答え: IE9だけで動作
:root .color { color: #F00\9;}
CSS Hack!
第二句: IE6以下で動作
// Star hack* html .target { color: red;}
第三句: FF3.5以上で動作
body:not(:-‐moz-‐handler-‐blocked) .target { color: red;}
ところで
俳句は句会が一番楽しいらしい。
句会での俳句の選び方
•特選: 一番いい俳句•正選: いい俳句•逆選: 文句をつけたい俳句!
今までの句はす べ て逆選!
Why should notwe use CSS Hack?
Syntax InvalidReadabilityCompatibility
Syntax Invalid•正しい文法ではない•Syntax Validatorが使えない
:root .color { color: #F00\9;}
Readability•一目で読めない•それ、意図して書いてるの？
body:not(:-‐moz-‐handler-‐blocked) .target { color: red;}
Compatibility•未来のバージョンで使えるの？•他のブラウザではどうなるの？
\9 hack
•かつてはIE8用のCSSハックだった。•IE9がリリースされたあと、IE9でも影響することが発覚。
•既存のハックは書き換えるハメに。
.color { color: #F00\9;}
未知のブラウザ•全てのブラウザを検証することは不可能•○×全部把握できますか？
http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack02/01.html
http://www.nintendo.co.jp/3ds/hardware/features/features04.html
3DSは？
TVでは？
http://dev.opera.com/articles/view/building-applications-for-the-opera-tv-store-ja/
ではどうするのか？
ConditionalComment (IE)
正選: 条件付きコメント// HTML<!DOCTYPE html><!-‐-‐[if lt IE 7]> <html class="lt-‐ie9 lt-‐ie8 lt-‐ie7"> <![endif]-‐-‐><!-‐-‐[if IE 7]> <html class="lt-‐ie9 lt-‐ie8"> <![endif]-‐-‐><!-‐-‐[if IE 8]> <html class="lt-‐ie9"> <![endif]-‐-‐><!-‐-‐[if gt IE 8]><!-‐-‐> <html> <!-‐-‐<![endif]-‐-‐> <head> ...
// in CSS.lt-‐ie8 .target { color: red;}
http://html5boilerplate.com/
HTML5 Boilerplate
技術的にはOKだけど、そもそも、なぜブラウザごとの実装が必要なのか？
http://www.flickr.com/photos/daniel_gies/4878159931
Pixel Perfect
全てのブラウザで1pxのズレも無く同じ見え方を目指すという考え方
全てってどこまで？製品の動作対象ブラウザ？対象外ならいいの？
多様性の拡大
http://www.flickr.com/photos/clevercupcakes/2981399236
違いを受け入れる
•Webの拡大によって、UserAgentの多様性も拡大。
•ユーザーは異なるブラウザの表示の違いを見比べたりはしない。
•「すべていっしょ」は制作側のエゴ
UserAgentによって変わってはいけないものは何か？
コンテンツファースト
•まずユーザーに提供するコンテンツの本質的な価値から考える
•本質的でない機能はあとで考える
モバイルファースト
•PCよりも先にモバイルのUIを前提に設計する
•モバイルの制約を逆に利用してコンテンツファーストを推進する
Progressive Enhancement
•まず本質的な価値を提供するコンテンツや機能を幅広い環境に提供。
•さらに、リッチな環境には、より便利、より美しい機能を提供。
例) kintone
IE8IE8 IE9IE9
.target { border-‐radius: 5px;}
JavaScriptの話
例) Geolocation位置情報を読み取ってみよう。
逆選: ブラウザ検出
if ($.browser.mozilla) { var location = navigator.geolocation.getCurrentPosition( success, error);}
ブラウザ検出のダメなとこ
•IE8時代に書いた=> IEだって9からは動くよ！
•動作環境じゃない？=> Chromeだって動くのに！
if ($.browser.mozilla) { navigator.geolocation.getCurrentPosition( success, error);}
正規表現の失敗
jQueryでもサポート終了
ではどうするのか？
正選: 機能検出// OK!: Feature Detectif (navigator.geolocation) { var location = navigator.geolocation.getCurrentPosition( success, error);}
// NG! Browser Detectif ($.browser.mozilla) { var location = navigator.geolocation.getCurrentPosition( success, error);}
機能検出(Feature Detect)なら
•素直な実装「この機能が使えるなら使ってね」
•どのブラウザのどのバージョンがどの機能を使えるのかこちらが全て把握しないでも良い。
•未知のブラウザにも対応できる。
Modernizrの例
// With Modernizrif (Modernizr.dragndrop){ // Code for drag & drop.}
// Without Modernizrvar div = document.createElement('div');var dragndrop = ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);if (dragndrop) { // Code for drag & drop.}
ここまでの前提
Webとブラウザの世界が標準に向かっていくこと
http://www.netmagazine.com/news/opera-confirms-webkit-prefix-usage-121923
Web標準の失敗(?)事例
私たち開発者にできることはWeb標準に準拠したキレイなコードを書くこと
特選
Your code for the better future.
http://www.flickr.com/photos/busy-pochi/4080378483
Thanks!
