Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
もりてつ
January 28, 2017
Programming
1
720
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
2017年1月28日「CSS Talk vol.2」でのセッション「IE9を斬ってFlexboxを使い始めたらサクサク捗った件」のスライドです。
もりてつ
January 28, 2017
Tweet
Share
More Decks by もりてつ
See All by もりてつ
ブラウザ対応の傾向と対策 2020 / Browser compatibility trends and countermeasures 2020
m_n_t_p
0
700
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
230
ブラウザのシェアと傾向と対策 2018改
m_n_t_p
0
180
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
120
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
150
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
750
単位をあやつる
m_n_t_p
2
660
グリッドレイアウト これまでとこれから
m_n_t_p
1
550
CSS Talk vol.2 Flexbox予告編
m_n_t_p
0
130
Other Decks in Programming
See All in Programming
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
Spring BootとKubernetesで実現する今どきのDevOps入門
xblood
0
340
tidy_rpart
bk_18
0
580
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
210
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
390
フロントエンドで 良いコードを書くために
t_keshi
3
1.6k
Listかもしれない
irof
0
160
SHOWROOMの分析目的を意識した伝え方・コミュニケーション
hatapu
0
230
ポケモンで学ぶiOS 16弾丸ツアー 🚅
giginet
PRO
1
610
Ruby Pattern Matching
bkuhlmann
0
610
Rによる大規模データの処理
s_uryu
2
620
Swift Observation
shiz
3
270
Featured
See All Featured
Embracing the Ebb and Flow
colly
75
3.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1.1M
Art, The Web, and Tiny UX
lynnandtonic
284
18k
The Cult of Friendly URLs
andyhume
68
5.1k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
Gamification - CAS2011
davidbonilla
75
4.1k
Infographics Made Easy
chrislema
235
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
Building Adaptive Systems
keathley
27
1.3k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
Side Projects
sachag
451
37k
Transcript
*&Λͬͯ'MFYCPYΛ͍࢝ΊͨΒ αΫαΫḿͬͨ݅ ݄ Ӭฏ $445BMLWPM
༰ ࣗݾհ 'MFYCPYͱ ࡢࠓͷϒϥβࣄ *&Δ͔ʁ Ͱɺ*&ΛͬͨΒͲ͏ͳ͔ͬͨ
࣮ྫ ߟ ·ͱΊ
ࣗݾհ w Ӭฏ Γͯͭ w גࣜձࣾάϥουΩϡʔϒ ϓϩμΫτ։ൃνʔϜΤϯδχΞ ˞ओʹϑϩϯτΤϯυΛ୲ w
ҎલిػϝʔΧʔͰιϑτΣΞ։ൃ w ྸɿࡀ w ͱ͖Ͳ͖ίϯτϥόε͍ͨΓήʔϜͨ͠Γ
'MFYCPYͱ
'MFYCPYͱ w ਖ਼໊ࣜশɿ$44'MFYJCMF#PY-BZPVU.PEVMF 8$%SBGUɿIUUQTXXXXPSH53DTTqFYCPY w ཁૉ qFYDPOUBJOFS ͱࢠཁૉ qFYJUFN Ͱߏ
qFYDPOUBJOFS qFYJUFN qFYJUFN qFYJUFN
'MFYCPYͱ Ͱ͖Δ͜ͱ wཁૉͷαΠζ͕มԽͨ࣌͠ͷࢠཁૉͷஔ wࢠཁૉͷߴ͕͞ҧ͏࣌ͷ্ἧ͑தԝἧ͑Լἧ͑ wࢠཁૉͷॱ൪ೖΕସ͑ɺαΠζௐ wFUDʜ ϨΠΞτ͕ॊೈʹ qFYJCMF ߦ͑Δ̇
'MFYCPYͱ ରԠϒϥβ ʊਓਓਓਓਓਓʊ ʼɹ*&ඇରԠɹʻ ʉ:?:?:?:?:ʉ
*&ʜྀ͖͔͢൱͔ʁ
ࡢࠓͷϒϥβࣄ
ࡢࠓͷϒϥβࣄ ͜ͷͱ͜Ζ1$༻ϒϥβͷ γΣΞ$ISPNFڧ ݄ͷੈքγΣΞ $ISPNFɿ 'JSFGPYɿ *&ɿ 4BGBSJɿ &EHFɿ ˞σʔλࢀরɿIUUQHTTUBUDPVOUFSDPN
ࡢࠓͷϒϥβࣄ ͜ͷͱ͜Ζ1$༻ϒϥβͷ γΣΞ$ISPNFڧ ݄ͷੈքγΣΞ $ISPNFɿ 'JSFGPYɿ *&ɿ 4BGBSJɿ &EHFɿ *&Ҏ֎Ͱׂ͑
*&΄ͱΜͲ͕ *& ࣮࣭ ʹαϙʔτऴྃ ͏'MFYCPYΛ ී௨ʹ͍͍ͬͯΑͶʁ
ࡢࠓͷϒϥβࣄ ͏'MFYCPYΛ ී௨ʹ͍͍ͬͯΑͶʁ ͔͠͠ʜʜ ΞΫηεղੳ͢Δͱ *&Ұఆͷׂ߹͋Γ ۀͰͷαΠτ࡞ ͜Ε·Ͱ*&αϙʔτରͩͬͨ
͋͞Ͳ͏͢Δʁ
*&Δ͔ʁ
͏Ұ͜ͷεϥΠυΛ ͜ͷͱ͜Ζ1$༻ϒϥβͷ γΣΞ$ISPNFڧ ݄ͷੈքγΣΞ $ISPNFɿ 'JSFGPYɿ *&ɿ 4BGBSJɿ &EHFɿ *&Ҏ֎Ͱׂ͑
*&΄ͱΜͲ͕ *& ࣮࣭ ʹαϙʔτऴྃ ͏'MFYCPYΛ ී௨ʹ͍͍ͬͯΑͶʁ
͏'MFYCPYΛ ී௨ʹ͍͍ͬͯΑͶʁ
ͱ͍͏͔
'MFYCPYΛ͍͍ͨὑ
ͱ͍͏͜ͱͰ *&Λαϙʔτ֎ʹ͍͍͔ͯ͠ ଧͯ͠Έ·ͨ͠
͢ΜͳΓ0,
None
Ͱɺ*&ΛͬͨΒͲ͏ͳ͔ͬͨ
ΊͬͪΌḿͬͨʂ ƅ˲ƅ
*&ΛͬͨΒḿͬͨ qPBU Ґஔἧ͑ ෯ɺߴ͞ NBSHJO QBEEJOH 'MFYCPYͰ ؆୯ʹͳΔέʔεଟ ͜Ε·ͰΜͰ͖ͨ ॖʂ
࣮ྫ
έʔε άϩʔόϧφϏ EJW VM MJBISFGlIPHFϝχϡʔBMJ ɹɹɹɹɿ MJBISFGGVHBϝχϡʔBMJ VM EJW ϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔ
έʔεɿάϩʔόϧφϏ EJW VM MJBISFGlIPHFϝχϡʔBMJ ɹɹɹɹɿ MJBISFGGVHBϝχϡʔBMJ VM EJW ैདྷͩͱ ཁૉͷXJEUIΛઃఆ
ࢠཁૉ MJ ʹEJTQMBZJOMJOFCMPDL ࢠཁૉͷ෯ɺNBSHJOQBEEJOHʜ 'MFYCPYͩͱ ཁૉʹEJTQMBZqFY ཁૉʹKVTUJGZDPOUFOUࢦఆ ཁૉͷXJEUIΛઃఆ ࢠཁૉ໘ͳઃఆඞཁͳ͠ʂ ϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔɹϝχϡʔ
έʔε தԝἧ͑ ཁૉͷྖҬͷ தԝʹࢠཁૉΛ ஔ͍ͨ͠
έʔεɿதԝἧ͑ ࢠཁૉ͕ϒϩοΫཁૉͩͱʜʜ ཁૉ QPTJUJPOSFMBUJWF ࢠཁૉ QPTJUJPOBCTPMVUF MFGU SJHIU UPQ CPUUPN
NBSHJOBVUP
έʔεɿதԝἧ͑ 'MFYCPYΛ͏ͱʜʜ ཁૉ EJTQMBZqFY KVTUJGZDPOUFOUDFOUFS BMJHOJUFNTDFOUFS ࢠཁૉ໘ͳࢦఆෆཁʂ
έʔε ΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ
έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ཁૉ ࢠཁૉ ࠨ ࢠཁૉ
ӈ
έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ཁૉ EJTQMBZqFY ࢠཁૉ ࠨ
ͷҐஔ KVTUJGZDPOUFOU BMJHODPOUFOU Λ্͑Լࠨӈࣗ༝ࣗࡏ ࢠཁૉ ࠨ Λғ͏EJWʹEJTQMBZqFY
έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ εϚϗͰࢠཁૉͭΛॎฒͼʹ͍ͨ͠ ཁૉ !NFEJBTDSFFOBOE NBYXJEUIQY
\ EJWQBSFOU\ qFYEJSFDUJPODPMVNO ^ ^
έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ
ΕΓΔΕΖΘɾɾɾΛ Ͱɺॱ൪Λٯʹ͍ͨ͠߹ʁ 1$ εϚϗ
έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ
ΕΓΔΕΖΘɾɾɾΛ 1$ εϚϗ ཁૉ !NFEJBTDSFFOBOE NBYXJEUIQY \ EJWQBSFOU\ qFYEJSFDUJPODPMVNOSFWFSTF ^ ^
ʊਓਓਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹͪΐͬͱͬͨ͋ͬʂʂɹʻ ʉ:?:?:?:?:?:?:?:?:?:ʉ
έʔεɿΧϥϜ ͍͋͏͓͔͖͚͑͘͜ ͤͦͨͪͭͯ͢͞͠ͱ ͳʹ͵Ͷͷͻ;΄ ·ΈΉΊɾΏɾΑ ΕΓΔΕΖΘɾɾɾΛ ࠓͷੈͷதϞόΠϧϑΝʔετ ϞόΠϧͷ࣌Λجຊʹ$44ΛΉ 1$ͷ࣌ʹཁૉʹ !NFEJBTDSFFOBOE
NJOXJEUIQY \ EJWQBSFOU\ EJTQMBZqFY ^ ^ ͱ͢Δํ͕͍͍ͷͰʁ
ݸਓతݟղ !NFEJBTDSFFOBOE NBYXJEUIQY !NFEJBTDSFFOBOE NJOXJEUIQY ͲͪΒਖ਼ղɻ Ҋ݅ʹΑ͍͚ͬͯ·͠ΐ͏ ˞ͨͩɺࠓޙNJOXJEUIΛ͏ํ͕ओྲྀʹͳΓͦ͏
ࠓճհ͢Δ࣮ྫҎ্Ͱ͢ɻ
None
ଞͷϓϩύςΟ qFYHSPX qFYCBTJTͳͲ ʜʁ
ࠓճͷҊ݅Ͱ ͜͜·Ͱڍ͛ͨέʔεͰ ΄΅ํ͕͍ͭͨͷͰ ଞͷϓϩύςΟ͍ͬͯ·ͤΜ
ࠓճͷҊ݅Ͱ ͜͜·Ͱͷ࣮ྫ 'MFYCPYͷػೳͷ͘͝Ұ෦ ͔͜͠͠Ε͚ͩͰ ίʔσΟϯά͔ͳΓָʹͳΓ·ͨ͠
ߟ
'MFYCPYΛͬͨ݁Ռ ίʔυྔ ͔֬ʹݮͰ͖ͨ
͔͠͠ল ·ͩ·ͩ ͍͜ͳ͍ͤͯͳ͍ ϑϨʔϜϫʔΫ ϥΠϒϥϦͱͷ૬ੑ
'MFYCPYͷࠓޙʁ ˒ ʹ*&͕ ࣮࣭ αϙʔτऴྃͳ ͷͰͦΕҎ߱Ұؾʹ·ΔՄೳੑେ ˒ $44(SJE-BZPVU͕ීٴ͖ͯͨ͠Β Ͳ͏ͳΔʁ ڞଘʁ
फڭઓ૪ʁ
'MFYCPY༻্ͷҙ ϒϥβʹΑͬͯόά͋Γ ಛʹ*& ·ͱΊϖʔδʮ'MFYCVHTʯ IUUQTHJUIVCDPNQIJMJQXBMUPOqFYCVHT
ิ *&͕େਓͷࣄͰࣺͯΒΕͳ͍߹ w qFYJCJMJUZKTΛ͏ Ұ෦ػೳ༻ෆՄ w ͖͋ΒΊͯ'MFYCPYҎ֎ͷํ๏ͰؤுΔ
·ͱΊ
'MFYCPY ͍͍ͧ
ͦͯ͠͏Ұݴ
'MFYCPY Ϛελʔʹ ԶͳΔʂʂ
ऴ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ