Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IE9を斬ってFlexboxを使い始めたらサクサク捗った件

もりてつ
January 28, 2017
Programming
1
910

 IE9を斬ってFlexboxを使い始めたらサクサク捗った件

2017年1月28日「CSS Talk vol.2」でのセッション「IE9を斬ってFlexboxを使い始めたらサクサク捗った件」のスライドです。

もりてつ

January 28, 2017
Tweet

More Decks by もりてつ

See All by もりてつ
ブラウザ対応の傾向と対策 2020 / Browser compatibility trends and countermeasures 2020
m_n_t_p
0
970
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
500
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
330
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
140
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
160
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
1k
単位をあやつる
m_n_t_p
2
880
グリッドレイアウト これまでとこれから
m_n_t_p
1
850
CSS Talk vol.2 Flexbox予告編
m_n_t_p
0
130

Other Decks in Programming

See All in Programming
創造的活動から切り拓く新たなキャリア 好きから始めてみる夜勤オペレーターからSREへの転身
yjszk
1
130
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
140
ゆるやかにgolangci-lintのルールを強くする / Kyoto.go #56
utgwkk
2
400
各クラウドサービスにおける.NETの対応と見解
ymd65536
0
110
103 Early Hints
sugi_0000
1
230
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
500
PSR-15 はあなたのための ものではない？ - phpcon2024
myamagishi
0
140
Go の GC の不得意な 部分を克服したい
taiyow
3
800
Recoilを剥がしている話
kirik
5
6.8k
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
180
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
5
740
Exploring: Partial and Independent Composables
blackbracken
0
100

Featured

See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
38
7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Building Your Own Lightsaber
phodgson
103
6.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Mobile First: as difficult as doing things right
swwweet
222
9k
A designer walks into a library…
pauljervisheath
204
24k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k

Transcript

  1. *&Λ࢐ͬͯ'MFYCPYΛ࢖͍࢝ΊͨΒ αΫαΫḿͬͨ݅ ೥݄೔ ৿Ӭ఩ฏ $445BMLWPM

  2. ಺༰ ࣗݾ঺հ  'MFYCPYͱ͸  ࡢࠓͷϒϥ΢βࣄ৘  *&͸࢐Δ͔ʁ  Ͱɺ*&Λ࢐ͬͨΒͲ͏ͳ͔ͬͨ

     ࣮ྫ  ߟ࡯  ·ͱΊ

  3. ࣗݾ঺հ w ৿Ӭ఩ฏ ΋Γͯͭ  w גࣜձࣾάϥουΩϡʔϒ
 ϓϩμΫτ։ൃνʔϜΤϯδχΞ
 ˞ओʹϑϩϯτΤϯυΛ୲౰ w

    Ҏલ͸๭ిػϝʔΧʔͰιϑτ΢ΣΞ։ൃ w ೥ྸɿࡀ w ͱ͖Ͳ͖ίϯτϥόε஄͍ͨΓήʔϜͨ͠Γ

  4. 'MFYCPYͱ͸

  5. 'MFYCPYͱ͸ w ਖ਼໊ࣜশɿ$44'MFYJCMF#PY-BZPVU.PEVMF
 8$%SBGUɿIUUQTXXXXPSH53DTTqFYCPY w ਌ཁૉ qFYDPOUBJOFS ͱࢠཁૉ qFYJUFN Ͱߏ੒

    qFYDPOUBJOFS qFYJUFN qFYJUFN qFYJUFN

  6. 'MFYCPYͱ͸ Ͱ͖Δ͜ͱ w਌ཁૉͷαΠζ͕มԽͨ࣌͠ͷࢠཁૉͷ഑ஔ wࢠཁૉͷߴ͕͞ҧ͏࣌ͷ্ἧ͑தԝἧ͑Լἧ͑ wࢠཁૉͷॱ൪ೖΕସ͑ɺαΠζௐ੔ wFUDʜ ϨΠΞ΢τ͕ॊೈʹ qFYJCMF ߦ͑Δ̇

  7. 'MFYCPYͱ͸ ରԠϒϥ΢β ʊਓਓਓਓਓਓʊ ʼɹ*&ඇରԠɹʻ ʉ:?:?:?:?:ʉ

  8. *&ʜ഑ྀ͢΂͖͔൱͔ʁ

  9. ࡢࠓͷϒϥ΢βࣄ৘

  10. ࡢࠓͷϒϥ΢βࣄ৘ ͜ͷͱ͜Ζ1$༻ϒϥ΢βͷ γΣΞ͸$ISPNFڧ ೥݄ͷੈքγΣΞ $ISPNFɿ 'JSFGPYɿ *&ɿ 4BGBSJɿ &EHFɿ ˞σʔλࢀরɿIUUQHTTUBUDPVOUFSDPN

  11. ࡢࠓͷϒϥ΢βࣄ৘ ͜ͷͱ͜Ζ1$༻ϒϥ΢βͷ γΣΞ͸$ISPNFڧ ೥݄ͷੈքγΣΞ $ISPNFɿ 'JSFGPYɿ *&ɿ 4BGBSJɿ &EHFɿ *&Ҏ֎Ͱׂ௒͑

    *&΋΄ͱΜͲ͕ *&͸ ࣮࣭ ʹαϙʔτऴྃ ΋͏'MFYCPYΛ ී௨ʹ࢖͍͍ͬͯΑͶʁ

  12. ࡢࠓͷϒϥ΢βࣄ৘ ΋͏'MFYCPYΛ ී௨ʹ࢖͍͍ͬͯΑͶʁ ͔͠͠ʜʜ ΞΫηεղੳ͢Δͱ *&΋Ұఆͷׂ߹͋Γ ۀ຿ͰͷαΠτ࡞੒͸ ͜Ε·Ͱ*&΋αϙʔτର৅ͩͬͨ

  13. ͋͞Ͳ͏͢Δʁ

  14. *&͸࢐Δ͔ʁ

  15. ΋͏Ұ౓͜ͷεϥΠυΛ ͜ͷͱ͜Ζ1$༻ϒϥ΢βͷ γΣΞ͸$ISPNFڧ ೥݄ͷੈքγΣΞ $ISPNFɿ 'JSFGPYɿ *&ɿ 4BGBSJɿ &EHFɿ *&Ҏ֎Ͱׂ௒͑

    *&΋΄ͱΜͲ͕ *&͸ ࣮࣭ ʹαϙʔτऴྃ ΋͏'MFYCPYΛ ී௨ʹ࢖͍͍ͬͯΑͶʁ

  16. ΋͏'MFYCPYΛ ී௨ʹ࢖͍͍ͬͯΑͶʁ

  17. ͱ͍͏͔

  18. 'MFYCPYΛ࢖͍͍ͨὑ

  19. ͱ͍͏͜ͱͰ *&Λαϙʔτ֎ʹ͍͍͔ͯ͠ ଧ਍ͯ͠Έ·ͨ͠

  20. ͢ΜͳΓ0,

  21. None

  22. Ͱɺ*&Λ࢐ͬͨΒͲ͏ͳ͔ͬͨ

  23. ΊͬͪΌḿͬͨʂ ƅ˲ƅ

  24. *&Λ࢐ͬͨΒḿͬͨ qPBU Ґஔἧ͑ ෯ɺߴ͞ NBSHJO QBEEJOH 'MFYCPYͰ ؆୯ʹͳΔέʔεଟ਺ ͜Ε·Ͱ೰ΜͰ͖ͨ໰୊ ޻਺୹ॖʂ

  25. ࣮ྫ

  26. έʔε άϩʔόϧφϏ EJW VM MJBISFGlIPHFϝχϡʔBMJ ɹɹɹɹɿ MJBISFGGVHBϝχϡʔBMJ VM EJW ϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔ

  27. έʔεɿάϩʔόϧφϏ EJW VM MJBISFGlIPHFϝχϡʔBMJ ɹɹɹɹɿ MJBISFGGVHBϝχϡʔBMJ VM EJW ैདྷͩͱ ਌ཁૉͷXJEUIΛઃఆ

    ࢠཁૉ MJ ʹEJTQMBZJOMJOFCMPDL ࢠཁૉͷ෯ɺNBSHJOQBEEJOHʜ 'MFYCPYͩͱ ਌ཁૉʹEJTQMBZqFY ਌ཁૉʹKVTUJGZDPOUFOUࢦఆ ਌ཁૉͷXJEUIΛઃఆ ࢠཁૉ͸໘౗ͳઃఆඞཁͳ͠ʂ ϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔ

  28. έʔε தԝἧ͑ ਌ཁૉͷྖҬͷ தԝʹࢠཁૉΛ ഑ஔ͍ͨ͠

  29. έʔεɿதԝἧ͑ ࢠཁૉ͕ϒϩοΫཁૉͩͱʜʜ ਌ཁૉ QPTJUJPOSFMBUJWF ࢠཁૉ QPTJUJPOBCTPMVUF MFGU SJHIU UPQ CPUUPN

    NBSHJOBVUP

  30. έʔεɿதԝἧ͑ 'MFYCPYΛ࢖͏ͱʜʜ ਌ཁૉ EJTQMBZqFY KVTUJGZDPOUFOUDFOUFS BMJHOJUFNTDFOUFS ࢠཁૉ͸໘౗ͳࢦఆෆཁʂ

  31. έʔε ΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷ͸ͻ;΁΄ ·ΈΉΊ΋΍ɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ

  32. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷ͸ͻ;΁΄ ·ΈΉΊ΋΍ɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ਌ཁૉ ࢠཁૉ ࠨ ࢠཁૉ

    ӈ

  33. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷ͸ͻ;΁΄ ·ΈΉΊ΋΍ɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ਌ཁૉ EJTQMBZqFY ࢠཁૉ ࠨ

    ͷҐஔ KVTUJGZDPOUFOU BMJHODPOUFOU Λ࢖͑͹্Լࠨӈࣗ༝ࣗࡏ ࢠཁૉ ࠨ Λғ͏EJWʹEJTQMBZqFY

  34. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷ͸ͻ;΁΄ ·ΈΉΊ΋΍ɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ εϚϗͰ͸ࢠཁૉͭΛॎฒͼʹ͍ͨ͠ ਌ཁૉ !NFEJBTDSFFOBOE NBYXJEUIQY

    \ EJWQBSFOU\ qFYEJSFDUJPODPMVNO ^ ^

  35. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷ͸ͻ;΁΄ ·ΈΉΊ΋΍ɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷ͸ͻ;΁΄ ·ΈΉΊ΋΍ɾΏɾΑ

    ΕΓΔΕΖΘɾɾɾΛ Ͱ͸ɺॱ൪Λٯʹ͍ͨ͠৔߹͸ʁ 1$ εϚϗ

  36. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷ͸ͻ;΁΄ ·ΈΉΊ΋΍ɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷ͸ͻ;΁΄ ·ΈΉΊ΋΍ɾΏɾΑ

    ΕΓΔΕΖΘɾɾɾΛ 1$ εϚϗ ਌ཁૉ !NFEJBTDSFFOBOE NBYXJEUIQY \ EJWQBSFOU\ qFYEJSFDUJPODPMVNOSFWFSTF ^ ^

  37. ʊਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹͪΐͬͱ଴ͬͨ͋ͬʂʂɹʻ ʉ:?:?:?:?:?:?:?:?:?:ʉ

  38. έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷ͸ͻ;΁΄ ·ΈΉΊ΋΍ɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ࠓͷੈͷத͸ϞόΠϧϑΝʔετ ϞόΠϧͷ࣌Λجຊʹ$44Λ૊Ή 1$ͷ࣌ʹ਌ཁૉʹ !NFEJBTDSFFOBOE

    NJOXJEUIQY \ EJWQBSFOU\ EJTQMBZqFY ^ ^ ͱ͢Δํ͕͍͍ͷͰ͸ʁ

  39. ݸਓతݟղ !NFEJBTDSFFOBOE NBYXJEUIQY !NFEJBTDSFFOBOE NJOXJEUIQY ͲͪΒ΋ਖ਼ղɻ Ҋ݅ʹΑͬͯ࢖͍෼͚·͠ΐ͏ ˞ͨͩɺࠓޙ͸NJOXJEUIΛ࢖͏ํ͕ओྲྀʹͳΓͦ͏

  40. ࠓճ঺հ͢Δ࣮ྫ͸Ҏ্Ͱ͢ɻ

  41. None

  42. ଞͷϓϩύςΟ qFYHSPX qFYCBTJTͳͲ ͸ʜʁ

  43. ࠓճͷҊ݅Ͱ͸ ͜͜·Ͱڍ͛ͨέʔεͰ
 ΄΅ํ͕͍ͭͨͷͰ
 ଞͷϓϩύςΟ͸࢖͍ͬͯ·ͤΜ

  44. ࠓճͷҊ݅Ͱ͸ ͜͜·Ͱͷ࣮ྫ͸ 'MFYCPYͷػೳͷ͘͝Ұ෦ ͔͜͠͠Ε͚ͩͰ΋
 ίʔσΟϯά͸͔ͳΓָʹͳΓ·ͨ͠

  45. ߟ࡯

  46. 'MFYCPYΛ࢖ͬͨ݁Ռ ίʔυྔ ޻਺ ͔֬ʹ࡟ݮͰ͖ͨ

  47. ͔͠͠൓ল఺΋ ·ͩ·ͩ ࢖͍͜ͳ͍ͤͯͳ͍ ϑϨʔϜϫʔΫ΍ ϥΠϒϥϦͱͷ૬ੑ

  48. 'MFYCPYͷࠓޙ͸ʁ ˒ ʹ*&͕ ࣮࣭ αϙʔτऴྃͳ ͷͰͦΕҎ߱Ұؾʹ޿·ΔՄೳੑେ ˒ $44(SJE-BZPVU͕ීٴ͖ͯͨ͠Β Ͳ͏ͳΔʁ ڞଘʁ

    फڭઓ૪ʁ

  49. 'MFYCPY࢖༻্ͷ஫ҙ ϒϥ΢βʹΑͬͯ͸όά͋Γ ಛʹ*& ·ͱΊϖʔδʮ'MFYCVHTʯ IUUQTHJUIVCDPNQIJMJQXBMUPOqFYCVHT

  50. ิ଍ *&͕େਓͷࣄ৘ͰࣺͯΒΕͳ͍৔߹ w qFYJCJMJUZKTΛ࢖͏ Ұ෦ػೳ࢖༻ෆՄ  w ͖͋ΒΊͯ'MFYCPYҎ֎ͷํ๏ͰؤுΔ

  51. ·ͱΊ

  52. 'MFYCPY͸ ͍͍ͧ

  53. ͦͯ͠΋͏Ұݴ

  54. 'MFYCPY Ϛελʔʹ Զ͸ͳΔʂʂ

  55. ऴ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ