Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Browser oh browser browser

2,971 views

Published on

Code HAIKU 2012の資料です。
http://atnd.org/events/33788

Published in: Technology
  • Be the first to comment

Browser oh browser browser

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

×