Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザのシェアと傾向と対策 2018改
Search
もりてつ
November 24, 2018
Technology
0
310
ブラウザのシェアと傾向と対策 2018改
2018/11/24「FRONTEND CONFERENCE 2018」アンカンファレンスでのセッション「ブラウザのシェアと傾向と対策 2018改」のスライドです。
もりてつ
November 24, 2018
Tweet
Share
More Decks by もりてつ
See All by もりてつ
ブラウザ対応の傾向と対策 2020 / Browser compatibility trends and countermeasures 2020
m_n_t_p
0
950
PC同様の情報量と使い勝手をモバイルで確保するために / To keep the same amount of information and usability on mobile as PC
m_n_t_p
0
480
ブラウザのシェアと傾向と対策2018
m_n_t_p
0
140
40代からのフロントエンドエンジニアリング Ver.3
m_n_t_p
0
150
Vue.jsトリビア(Vue.jsのコードネーム)
m_n_t_p
0
1k
単位をあやつる
m_n_t_p
2
860
グリッドレイアウト これまでとこれから
m_n_t_p
1
830
IE9を斬ってFlexboxを使い始めたらサクサク捗った件
m_n_t_p
1
890
CSS Talk vol.2 Flexbox予告編
m_n_t_p
0
130
Other Decks in Technology
See All in Technology
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
120
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.1k
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.5k
フルカイテン株式会社 採用資料
fullkaiten
0
36k
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
590
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130
プロポーザルのつくり方 〜個人技編〜 / How to come up with proposals
ohbarye
1
110
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
120
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.7k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
202
24k
Music & Morning Musume
bryan
46
6.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Why Our Code Smells
bkeepers
PRO
334
57k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
4 Signs Your Business is Dying
shpigford
180
21k
The Invisible Side of Design
smashingmag
297
50k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Facilitating Awesome Meetings
lara
49
6k
Measuring & Analyzing Core Web Vitals
bluesmoon
1
41
Designing for Performance
lara
604
68k
Transcript
ϒϥβͷγΣΞͱͱରࡦվ Ӭฏ Γͯͭ '30/5&/%$0/'&3&/$&
'30/5&/%$0/'&3&/$& ࠓճͷ༰ w ͡Ίʹ w ϒϥβγΣΞ 1$ฤ w
*&ͷݱࡏͷγΣΞͱαϙʔτঢ়گ w 1$ͷϒϥβରԠΛͲ͏͖͔͢ w ϒϥβγΣΞ εϚϗฤ w "OESPJEͱJ04ɺͦΕͧΕͷόʔδϣϯผγΣΞ w εϚϗͷϒϥβରԠΛͲ͏͖͔͢ w ·ͱΊ
'30/5&/%$0/'&3&/$& ࣗݾհ ˒ Γͯͭ Ӭฏ ˒ גࣜձࣾάϥουΩϡʔϒ ϓϩμΫτ։ൃνʔϜΤϯδχΞ
˒ ిػϝʔΧʔ ˠιϑτΣΞϝʔΧʔ ˠ݄͔Βݱ৬ ˒ ྸɿ໌ޙͰࡀ ˒ झຯɿίϯτϥόεɺύζϧɺήʔϜ ˒ ͖ͳͷɿϥʔϝϯɺᰤࢠɺ'MFYCPY ˒ 5XJUUFSɿ!N@O@U@Q
'30/5&/%$0/'&3&/$& ͡Ίʹ ϒϥβԿΛ ͍ͬͯ·͔͢ʁ
'30/5&/%$0/'&3&/$& ϒϥβͷγΣΞ ੲ*&ׂ͕ΛΊ͍ͯͨ࣌͋ͬͨ ʜʜࠓͲ͏ͳͷ͔ʁ ʁ
'30/5&/%$0/'&3&/$& ϒϥβͷγΣΞ ༷ʑͳௐࠪػ͕ؔσʔλΛൃද͍ͯ͠Δ ࠓճ4UBU$PVOUFS ΞΠϧϥϯυ ͷ σʔλΛࢀর͠·͢ IUUQHTTUBUDPVOUFSDPN
'30/5&/%$0/'&3&/$& 1$ͷϒϥβγΣΞ શੈք ݄ $ISPNF 'JSFGPY *&
4BGBSJ
'30/5&/%$0/'&3&/$& 1$ͷϒϥβγΣΞ ຊ ݄ $ISPNF 'JSFGPY *&
4BGBSJ
'30/5&/%$0/'&3&/$& εϚϗͷϒϥβγΣΞ ຊͰ*&͕ڧ͔ͬͨ ͔͠͠ɺ݄ʹ $ISPNF͕ٯస ࠩͲΜͲΜ։͍͍ͯΔ
'30/5&/%$0/'&3&/$& *&ͷݱࡏͷࠃγΣΞ ͔͠͠ͳ͕Βɺ͍·ͩʹγΣΞ ͔͕ͨɺ͞ΕͲ 8FCαΠτ੍࡞8FCΞϓϦ։ൃͰ ࠷৽8FCٕज़ͷେΛ αϙʔτ͍ͯ͠ͳ͍ *&ͷαϙʔτΛܧଓ͖͔͢ʁ ˞*&͕ɺ*&Ҏલ͕
'30/5&/%$0/'&3&/$& *&ͷαϙʔτΛΔͱʜ *&ΛΔ͜ͱʹΑͬͯ ؆୯ʹ͑ΔΑ͏ʹͳΔٕज़͕ ֨ஈʹ૿͑·͢ ݮʹܨ͕Δ߹ʂ
'30/5&/%$0/'&3&/$& *&ΛΕ͑Δ)5.- UFNQMBUFλά <table id="producttable"> <thead> <tr> <td>UPC_Code</td> <td>Product_Name</td>
</tr> </thead> <tbody> <!-- 必要に応じて既存のデータをここに含められます。 --> </tbody> </table> <template id="productrow"> <tr> <td class="record"></td> <td></td> </tr> </template>
'30/5&/%$0/'&3&/$& *&ΛΕ͑Δ$44 $44(SJE-BZPVU ৽༷ main{ display: grid; grid-template-columns: 100px
100px 100px; grid-template-rows: 100px 100px; gap: 6px; } w *&ͩͱϕϯμʔϓϨϑΟοΫεΛ͚ͭͯ͞Βʹ چ༷ͷಡΈସ͕͑ඞཁ ˞"VUPQSJpYFSΛ௨ͤҰԠมՄೳ͕ͩ ɹͻͱख͔͔ؒΔˍίʔυ͕૿͑Δ
'30/5&/%$0/'&3&/$& *&ΛΕ͑Δ+BWB4DSJQU &4Ҏ߱ w MFUDPOTU w Ξϩʔؔ w DMBTTߏจ
FUDʜ
'30/5&/%$0/'&3&/$& *&ͷαϙʔτΛܧଓ͖͔͢ جຊతʹࢭΊΔ΄͏͕͍͍ w ࠓޙ৽ن։ൃ͢ΔҊ݅ ˠαϙʔτର֎ʹ͢Δ w ैདྷ͔Βଓ͍͍ͯΔҊ݅ ˠόʔδϣϯΞοϓ࣌ʹର͔Β֎͍ͯ͘͠
্෦ΫϥΠΞϯτͷ߹Ͱ֎ͤͳͦ͞͏ͳ߹ʜ ಓʹࠜճ͍ͯͩ͘͠͠͞ ˞ࢲઈࢍࠜճ͠தͰ͢ ྦ
'30/5&/%$0/'&3&/$& εϚϗͷϒϥβγΣΞ શੈք ݄ $ISPNF 6$#SPXTFS 4BGBSJ
'30/5&/%$0/'&3&/$& εϚϗͷϒϥβγΣΞ ຊ ݄ 4BGBSJ $ISPNF
'30/5&/%$0/'&3&/$& εϚϗͷϒϥβγΣΞ w ࠃʹΑͬͯେ͖͕͘มΘΔ w ઌਐࠃ4BGBSJ͕ɺ৽ڵࠃ$ISPNF͕ڧ͍ w ͨͩ͠ɺຊ΄Ͳ4BGBSJ͕ڧ͍ࠃଞʹͳ͍
w ٯʹΠϯυͰ4BGBSJͷγΣΞ
'30/5&/%$0/'&3&/$& εϚϗͷϒϥβαϙʔτ ߟ͑ํ $ISPNFͱ4BGBSJ͚ͩͰߟ͑ΔͳΒ ϒϥβผΑΓ 04ͷόʔδϣϯผͰ ߟ͍͑ͯ͘΄͏͕ྑ͍
'30/5&/%$0/'&3&/$& εϚϗͷ04όʔδϣϯผγΣΞ "OESPJE IUUQTEFWFMPQFSBOESPJEDPNBCPVUEBTICPBSET ·Ͱɿ ɿ Ҏ߱ɿ ݄·Ͱͷؒ
'30/5&/%$0/'&3&/$& 04όʔδϣϯผαϙʔτ "OESPJE w ·Ͱ9Ҏ߱ͷஈ֊Ͱϒϥβͷ ͕มΘ͖͍ͬͯͯΔ w ·Ͱͷʮ"OESPJEඪ४ϒϥβʯ͕Ͱഇ ࢭɺ$ISPNF͕σϑΥϧτʹ
w Ͱ8FC7JFXίϯϙʔωϯτ͕04͔ΒΓ ͞ΕΔ
'30/5&/%$0/'&3&/$& 04όʔδϣϯผαϙʔτ "OESPJE w ·Ͱͷඪ४ϒϥβͩͱ 'MFYCPYϕϯμʔϓϨϑΟοΫε͕ඞཁ $44(SJE-BZPVU͕αϙʔτ͞Ε͍ͯͳ͍
&4͕μϝ w Ҏ߱Ͱ͋Ε$ISPNFΛ࠷৽൛ʹ͓͚ͯ͠ͳ ͍ͣ w ͨͩ͠ɺ8FC7JFX͕04͔ΒΓ͞Ε͍ͯͳ͍ ͨΊͦͪΒΛ͏߹ཁҙ ·Ͱͷαϙʔτൣғಉ༷ͱߟ͑ͯྑ͍
'30/5&/%$0/'&3&/$& εϚϗͷ04όʔδϣϯผγΣΞ J04 IUUQTEFWFMPQFSBQQMFDPNTVQQPSUBQQTUPSF ·Ͱɿ ɿ ɿ
'30/5&/%$0/'&3&/$& 04όʔδϣϯผαϙʔτ J04 w 'MFYCPYɿ·ͰϕϯμʔϓϨϑΟοΫεඞ ཁɺҎ߱ͳ͠ w $44(SJE-BZPVUɿ·Ͱର֎ͳͷͰҙ w
&4ɿҎ߱Ͱαϙʔτ
'30/5&/%$0/'&3&/$& Ͳͷόʔδϣϯ·Ͱαϙʔτ͖͔͢ ݁ہ1$ͱಉ͡ w ࠓޙ৽ن։ൃ͢ΔҊ݅ ˠݹ͍όʔδϣϯαϙʔτର֎ʹ͢Δ w ैདྷ͔Βଓ͍͍ͯΔҊ݅ ˠόʔδϣϯΞοϓ࣌ʹݹ͍ͷΛ֎͍ͯ͘͠
্෦ΫϥΠΞϯτͷ߹Ͱ֎ͤͳͦ͞͏ͳ߹ʜ ಓʹࠜճ͍ͯͩ͘͠͠͞
'30/5&/%$0/'&3&/$& ·ͱΊ w ϒϥβͷγΣΞɺόʔδϣϯผγΣΞʑมԽ ͍ͯ͠Δ w ϒϥβɺόʔδϣϯʹΑͬͯͲͷΑ͏ͳٕज़Λα ϙʔτ͍ͯ͠Δ͔ΛϦαʔν͓ͯ͘͠ඞཁ͋Γ w
ͲͷϒϥβɺόʔδϣϯΛαϙʔτ͢Δ͔ͷஅ త֬ʹ͍ͬͯ͘ඞཁ͕͋Δ w ϢʔβʔઢͰߟ͑·͠ΐ͏ w *&ͷαϙʔτͦΖͦΖࢭΊ·͠ΐ͏ ʜʜͱ͍͏͔ࢭΊ͍ͨ
ऴ ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ