ブラウザ対応の傾向と対策 2020 / Browser compatibility trends and countermeasures 2020

2020年1月15日に行われた「Markup Meetup #2 in LINKS UMEDA」での登壇「ブラウザ対応の傾向と対策 2020」のスライドです。

Transcript

1. هٚؗا㵚䑴ס
   ⥝⺸כ㵚瓀
    8FE
   
   .BSLVQ.FFUVQ
   叜姧　䇖 ׵׽יח
   
   

   View Slide

2. ☪㍑ס⫂㳊
    هٚؗاⳂ⺸ 1$
   
    1$榫هٚؗاס㵚䑴
    هٚؗاⳂ⺸ تٌُ
   
    تٌُهٚؗاס㵚䑴
    1$تٌُ⪦鵟ס䗯㕔
    ױכ״
   

   View Slide

3. 舅䄕磆☭
   ˝ 叜姧　䇖 ׵׽יח
   
   ˝ 劔䌋⚡炘ءٚشغ؞ٖ٭ه

   وٞٓ٭ب٘٤礴䦮儖鼧

   وٞرؠعꝧ氦鼧

   نٞ٤عؙ٤غتًبٔٛتع
   ˝ ꧅嚀ْ٭؜٭

   ̜خنعؘْؗؓ٭؜٭

   ̜䇗僖־׼杯绷
   ˝ 塶 ̚鶟丗
   
   ˝ 切䄫妨؛آךؤ٤عٚفت䍧ַיױ׌
   3
   IUUQTTQBJBKQ
   

   View Slide

4. ע׋״מ
   לסهٚؗا؅䘶㲊׊י

   ظاؕ٤ꝧ氦؅

   车זיַױ׌־
   4
   

   View Slide

5. هٚؗاⳂ⺸ 1$
   
   佅ע*OUFSOFU&YQMPSFSס䍚̜☪ע(PPHMF$ISPNFס䍚
   5
   ┩槡ס1$هٚؗابؘؓ 4UBUDPVOUFS鐧׬յ䇗僖
   
   $ISPNF
   *&
   4BGBSJ
   &EHF
   'JSFGPY
   

   View Slide

6. هٚؗاⳂ⺸ 1$
   
   佅ע*OUFSOFU&YQMPSFSס䍚̜☪ע(PPHMF$ISPNFס䍚
   6
   仼儖ס1$هٚؗابؘؓ 4UBUDPVOUFS鐧׬յ䇗僖
   
   $ISPNF
   *&
   4BGBSJ
   &EHF
   'JSFGPY
   仼儖ךעױד*&ֿ

   Ⱏ䍚墦זיַ׾
   

   View Slide

7. هٚؗاⳂ⺸ 1$
   
   䇗僖仼
   $ISPNJVNي٭تס&EHFٛٛ٭ت
   $ISPNJVN $ISPNF&EHF
   ס׈׼ם׾㴛ⶭ
   䇗僖仼
   8JOEPXTئَ٭ع磙▼
   7
   

   View Slide

8. 1$榫هٚؗاס㵚䑴
   ˝ 㓹儖氳מע$ISPNF؅䘶㲊׊י
   ظاؕ٤ꝧ氦؅׊יַׄף荁
   ַֿ'JSFGPY4BGBSJ&EHF׵澬鏀
   ך׀׿ףםֽ荁ַ
   ˝ *&ע☪䏲׈׼ם׾بؘؓ⛥┖ֿ
   ◀䘶׈׿׾
   Ձ☪䏲ס勅♭ךע㵚䑴┘釐כ
   銧זי䄐׊䶹ֻםַ
   8
   

   View Slide

9. 1$榫هٚؗاס㵚䑴
   *&סゖ갭憠
   ˝ )5.-$44+BWB4DSJQUמֽׄ׾僃二䤗软ס墜؆ל؅ئَ٭ع׊
   יַםַ
   )5.-̜UFNQMBUF ؤ٤ط٤صط٤وٝ٭ع
   QJDUVSFםל
   $44̜QPTJUJPOTUJDLZ $44(SJE-BZPVU 二☼喋
   םל
   +BWB4DSJQU̜&4♓꡸ע׮ׯ⪒巶
   ˝ .JDSPTPGU׵*&־׼&EHF׫ס燯车؅䫟㝢׊יַ׾
   IUUQTUFDIDPNNVOJUZNJDSPTPGUDPNUXJOEPXTJUQSPCMPHUIFQFSJMTPG
   VTJOHJOUFSOFUFYQMPSFSBTZPVSEFGBVMUCSPXTFSCBQ
   9
   

   View Slide

10. 1$榫هٚؗاס㵚䑴
    *&מ㵚䑴׌׾㕙⺬סゖ갭憠
    ˝ )5.-$44+BWB4DSJQUמֽׄ׾僃二䤗软ס墜؆ל؅ئَ٭ع
    ׊יַםַ
    10
    ✳ֻ׾䤗软ֿ
    㛻䆋מ⯆꡾
    僃二䤗软ם׼
    哧מך׀׾㵚
    䑴ֿך׀םַ
    䄄丗㘃ⱶ
    

    View Slide

11. 1$榫هٚؗاס㵚䑴
    א׿ך׵*&㵚䑴؅걘㲘־׼姲״׼׿ג㕙⺬
    ̜鹟䥃罈עח
    11
    了׾
    *&ךꞦ鈋ך׀׾ؤ٤ط٤ص؅⯆꡾׌׾
    ⮯乢ꄋך㵚䑴׌׾
    

    View Slide

12. 1$榫هٚؗاס㵚䑴
    *&؅⮉׿ף؝٤؝٤僃二䤗软؅✳זי0,־
    12
    ˝ א׿ב׿┉㲊סبֵֿؘؓ׾
    ˝ א׿ב׿斻舅ס嚀耆׵ֵ׾
    辐炐Ⳃ⛼澬鏀յ☼喋澬鏀ע
    䑫׿׍מ
    

    View Slide

13. هٚؗاⳂ⺸ تٌُ
    
    ┩槡סٓفٜؕهٚؗابؘؓ 4UBUDPVOUFS鐧׬յ䇗僖
    
    13
    4BGBSJ
    $ISPNF
    ┩槡氳מע

    $ISPNFֿ⨣ⳙ
    

    View Slide

14. هٚؗاⳂ⺸ تٌُ
    
    仼儖סٓفٜؕهٚؗابؘؓ 4UBUDPVOUFS鐧׬յ䇗僖
    
    14
    4BGBSJ
    $ISPNF
    仼儖ךע

    4BGBSJֿ㏆⠠
    

    View Slide

15. تٌُ榫هٚؗاס㵚䑴
    ˝ ㎁⫂⺸ׄם׼㓹儖氳מ$ISPNFכ4BGBSJסײ㵚䑴׌׿ףゖ갭ם׊
    ˝ هٚؗاסف٭ة٘٤׻׽׵04סف٭ة٘٤מ❣㰆׊׷׌ַ
    "OESPJEױךյJ04ױךע$44+BWB4DSJQUך辐炐Ⳃ⛼מ⯆꡾
    㛡丗
    גד׊⹿ַف٭ة٘٤עبֿؘؓ丗םסך扛釱׊י׵墜؆
    לゖ갭ם׊
    ˝ J04ע䙫㛙כ☼喋䄐樟┘⪮⺬ֿ㛡ַ
    Ձ 㲔嚀ךס䒝⪌׽ם澬鏀؅
    15
    ❆ֻף׆׿̜
    

    View Slide

16. تٌُ榫هٚؗاס㵚䑴
    ⹿ַ04ס㵚䑴敯媲
    ˝ "OESPJE̜ױךכס8FC7JFX
    'MFYCPYעي٤ر٭وٝنؔشؠتֿ䑒釐
    $44(SJE-BZPVUֿꪜ㵚䑴
    &4ֿꪜ㵚䑴
    ˝ J04̜ױךע釐嫰䙫
    'MFYCPYױךעي٤ر٭وٝنؔشؠتֿ䑒釐
    $44(SJE-BZPVUע־׼
    &4ע־׼
    16
    

    View Slide

17. 1$تٌُ⪦鵟ס䗯㕔
    㵚䑴敯媲؅鐧׬׾̜$BO*VTF DBOJVTFDPN
    
    17
    

    View Slide

18. 1$تٌُ⪦鵟ס䗯㕔
    㵚䑴敯媲؅鐧׬׾̜.%/׵⺨ꯁ泘מ㵚䑴敯媲ֿ鬼זיַױ׌
    18
    

    View Slide

19. 1$تٌُ⪦鵟ס䗯㕔
    نؚ٤عס䣽ַ
    ˝ ⺱׋ئؕثסنؚ٤عך׵牊
    걉מ׻זי嘦䆋յ┕┖⛣糋յ
    ؜٭ؼ٤ءֿ樟םזי׀ױ׌
    Ձ 04מ׻זי嘅嶖סنؚ٤ع
    ֿ樟ם׾յ׌ם؂ה釤ֻ亠׵
    樟ם׾סך釐嫰䙫
    19
    ᕟΰγοΫ
    ώϥΪϊ֯ΰ
    Roboto
    FUDʜ
    

    View Slide

20. ױכ״
    ˝ 1$׵تٌُ׵㵚䑴敯媲յ䄫㕙بؘؓע仼չ㚺؂זיַ׀
    ױ׌
    ˝ לסهٚؗاյف٭ة٘٤㵚䑴؅车ֹסֿ荁ַ־׵侇ס
    孱׿ך㚺؂זיַ׀ױ׌
    ˝ ⹿ַهٚؗاע鸵䈱םذِؕ٤ءך䩰ייյ二䤗软؅
    ✳זיⲖ曍氳מؤ٭ظؔ٤ءյꝧ氦׊יַ׀ױ׊׺ֹ
    ˝ 二䤗软ס㵚䑴敯媲ٛئ٭زյⳂ⛼澬鏀׵䑫׿׍מ
    20
    

    View Slide

21. 磙
    ֵ׽ֿכׇֹ׉ַױ׊גն
    

    View Slide