Browser oh browser browser
•
6 likes•2,434 views
Code HAIKU 2012の資料です。 http://atnd.org/events/33788
Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (20)
Similar to Browser oh browser browser
Similar to Browser oh browser browser (20)
More from Teppei Sato
More from Teppei Sato (20)
Recently uploaded
Recently uploaded (10)
Browser oh browser browser
- 1. Browser oh browser browser @teppeis Code HAIKU 2012/12/16
- 2. 自己紹介 • 佐藤鉄平 • @teppeis • サイボウズ株式会社 東京 • 出身は新潟（米と雪のみ） • サーバーからフロントまで
- 4. CSSの話
- 5. 普通のCSS .color { color: #F00; }
- 6. 第一句 :root .color { color: #F009; }
- 7. 答え: IE9だけで動作 :root .color { color: #F009; }
- 8. CSS Hack!
- 9. 第二句: IE6以下で動作 // Star hack * html .target { color: red; }
- 10. 第三句: FF3.5以上で動作 body:not(:-‐moz-‐handler-‐blocked) .target { color: red; }
- 11. ところで
- 12. 俳句は句会が 一番楽しいらしい。
- 13. 句会での俳句の選び方 •特選: 一番いい俳句 •正選: いい俳句 •逆選: 文句をつけたい俳句!
- 14. 今までの句は す べ て 逆選!
- 15. Why should not we use CSS Hack?
- 17. Syntax Invalid • 正しい文法ではない • Syntax Validatorが使えない :root .color { color: #F009; }
- 18. Readability • 一目で読めない • それ、意図して書いてるの？ body:not(:-‐moz-‐handler-‐blocked) .target { color: red; }
- 20. 9 hack .color { color: #F009; } • かつてはIE8用のCSSハックだった。 • IE9がリリースされたあと、 IE9でも影響することが発覚。 • 既存のハックは書き換えるハメに。
- 21. 未知のブラウザ • 全てのブラウザを検証することは不可能 • ○×全部把握できますか？ http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack02/01.html
- 22. 3DSは？ http://www.nintendo.co.jp/3ds/hardware/features/features04.html
- 23. TVでは？ http://dev.opera.com/articles/view/building-applications-for-the-opera-tv-store-ja/
- 24. ではどうするのか？
- 26. 正選: 条件付きコメント // 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; }
- 27. HTML5 Boilerplate http://html5boilerplate.com/
- 29. Pixel Perfect http://www.flickr.com/photos/daniel_gies/4878159931
- 32. 多様性の拡大 http://www.flickr.com/photos/clevercupcakes/2981399236
- 38. 例) kintone .target { border-‐radius: 5px; } IE8 IE9
- 39. JavaScriptの話
- 41. 逆選: ブラウザ検出 if ($.browser.mozilla) { var location = navigator.geolocation.getCurrentPosition( success, error); }
- 42. ブラウザ検出のダメなとこ • IE8時代に書いた => IEだって9からは動くよ！ • 動作環境じゃない？ => Chromeだって動くのに！ if ($.browser.mozilla) { navigator.geolocation.getCurrentPosition( success, error); }
- 43. 正規表現の失敗
- 44. jQueryでもサポート終了
- 45. ではどうするのか？
- 46. 正選: 機能検出 // OK!: Feature Detect if (navigator.geolocation) { var location = navigator.geolocation.getCurrentPosition( success, error); } // NG! Browser Detect if ($.browser.mozilla) { var location = navigator.geolocation.getCurrentPosition( success, error); }
- 47. 機能検出(Feature Detect)なら • 素直な実装 「この機能が使えるなら使ってね」 • どのブラウザのどのバージョンが どの機能を使えるのか こちらが全て把握しないでも良い。 • 未知のブラウザにも対応できる。
- 48. Modernizr http://modernizr.com/
- 49. Modernizrの例 // Without Modernizr var div = document.createElement('div'); var dragndrop = ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div); if (dragndrop) { // Code for drag & drop. } // With Modernizr if (Modernizr.dragndrop){ // Code for drag & drop. }
- 50. ここまでの前提
- 52. Web標準の失敗(?)事例 http://www.netmagazine.com/news/opera-confirms-webkit-prefix-usage-121923
- 54. 特選 Your code for the better future.
- 55. Thanks! http://www.flickr.com/photos/busy-pochi/4080378483