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.

Георгий Мостоловица — «Браузеры»

7,341 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Георгий Мостоловица — «Браузеры»

  1. 1. БраузерыГеоргий МостоловицаРазработчик интерфейсов
  2. 2. Браузеры
  3. 3. БраузерыОбщая схема работы браузера
  4. 4. БраузерыОбщая схема работы браузераКраткая история
  5. 5. БраузерыОбщая схема работы браузераКраткая историяБраузерные войны
  6. 6. БраузерыОбщая схема работы браузераКраткая историяБраузерные войныРежимы отображения
  7. 7. БраузерыОбщая схема работы браузераКраткая историяБраузерные войныРежимы отображенияUserAgent
  8. 8. БраузерыОбщая схема работы браузераКраткая историяБраузерные войныРежимы отображенияUserAgentКроссбраузерность
  9. 9. Бра́узер — программное обеспечение для просмотра веб-сайтов, т.е. для запроса веб-страниц, их обработки, вывода и перехода от одной страницы к другой. Wikipedia4
  10. 10. Схема работы браузера5
  11. 11. Архитектура браузеров Пользовательский интерфейс Хранилище данных Высокоуровневый движок Движок рендеринга Сеть JS UI Backend6
  12. 12. Краткая история
  13. 13. Краткая история браузеров. 1991 год8
  14. 14. Краткая история браузеров. 1991 год WorldWideWeb8
  15. 15. Краткая история браузеров. 1991 год WorldWideWeb • Начало эпохи браузеров8
  16. 16. Краткая история браузеров. 1991 год WorldWideWeb • Начало эпохи браузеров • Разработал Тим Бернерс-Ли8
  17. 17. Краткая история браузеров. 1991 год WorldWideWeb • Начало эпохи браузеров • Разработал Тим Бернерс-Ли – он очень крутой8
  18. 18. Краткая история браузеров. 1991 год WorldWideWeb • Начало эпохи браузеров • Разработал Тим Бернерс-Ли – он очень крутой – изобретатель всемирной паутины и как следствие: URI, URL, HTTP, HTML, семантического веба8
  19. 19. Краткая история браузеров. 1991 год WorldWideWeb • Начало эпохи браузеров • Разработал Тим Бернерс-Ли – он очень крутой – изобретатель всемирной паутины и как следствие: URI, URL, HTTP, HTML, семантического веба • Переименован в Nexus, чтобы избежать путаницы8
  20. 20. Краткая история браузеров. 1991 год WorldWideWeb • Начало эпохи браузеров • Разработал Тим Бернерс-Ли – он очень крутой – изобретатель всемирной паутины и как следствие: URI, URL, HTTP, HTML, семантического веба • Переименован в Nexus, чтобы избежать путаницы • Графический браузер8
  21. 21. Краткая история браузеров. 1991 год WorldWideWeb • Начало эпохи браузеров • Разработал Тим Бернерс-Ли – он очень крутой – изобретатель всемирной паутины и как следствие: URI, URL, HTTP, HTML, семантического веба • Переименован в Nexus, чтобы избежать путаницы • Графический браузер – но картинки только в отдельном окне8
  22. 22. Краткая история браузеров. 1991 год WorldWideWeb • Начало эпохи браузеров • Разработал Тим Бернерс-Ли – он очень крутой – изобретатель всемирной паутины и как следствие: URI, URL, HTTP, HTML, семантического веба • Переименован в Nexus, чтобы избежать путаницы • Графический браузер – но картинки только в отдельном окне – WYSIWYG8
  23. 23. Краткая история браузеров. 1991 год WorldWideWeb • Начало эпохи браузеров • Разработал Тим Бернерс-Ли – он очень крутой – изобретатель всемирной паутины и как следствие: URI, URL, HTTP, HTML, семантического веба • Переименован в Nexus, чтобы избежать путаницы • Графический браузер – но картинки только в отдельном окне – WYSIWYG – NeXT, Objective C8
  24. 24. Краткая история браузеров. 1993 год9
  25. 25. Краткая история браузеров. 1993 год Mosaic9
  26. 26. Краткая история браузеров. 1993 год Mosaic • Разработан в NCSA9
  27. 27. Краткая история браузеров. 1993 год Mosaic • Разработан в NCSA • Популяризовал веб9
  28. 28. Краткая история браузеров. 1993 год Mosaic • Разработан в NCSA • Популяризовал веб – удобный установщик9
  29. 29. Краткая история браузеров. 1993 год Mosaic • Разработан в NCSA • Популяризовал веб – удобный установщик – понятный интерфейс9
  30. 30. Краткая история браузеров. 1993 год Mosaic • Разработан в NCSA • Популяризовал веб – удобный установщик – понятный интерфейс – Windows, Unix и Mac версия9
  31. 31. Краткая история браузеров. 1993 год Mosaic • Разработан в NCSA • Популяризовал веб – удобный установщик – понятный интерфейс – Windows, Unix и Mac версия – и конечно же инлайновые картинки9
  32. 32. Краткая история браузеров. 1994 год10
  33. 33. Краткая история браузеров. 1994 год Netscape Navigator 1.x10
  34. 34. Краткая история браузеров. 1994 год Netscape Navigator 1.x • Обладает самыми широкими возможностями10
  35. 35. Краткая история браузеров. 1994 год Netscape Navigator 1.x • Обладает самыми широкими возможностями • Стремительно набирает популярность10
  36. 36. Краткая история браузеров. 1994 год Netscape Navigator 1.x • Обладает самыми широкими возможностями • Стремительно набирает популярность • Сodename Mozilla (Mosaic Killer)10
  37. 37. Краткая история браузеров. 1994 год Netscape Navigator 1.x • Обладает самыми широкими возможностями • Стремительно набирает популярность • Сodename Mozilla (Mosaic Killer) – вообще сложная история с названием Mozilla10
  38. 38. Краткая история браузеров. 1994 год Netscape Navigator 1.x • Обладает самыми широкими возможностями • Стремительно набирает популярность • Сodename Mozilla (Mosaic Killer) – вообще сложная история с названием Mozilla – ещё и имя маскота10
  39. 39. Краткая история браузеров. 1994 год Netscape Navigator 1.x • Обладает самыми широкими возможностями • Стремительно набирает популярность • Сodename Mozilla (Mosaic Killer) – вообще сложная история с названием Mozilla – ещё и имя маскота10
  40. 40. Краткая история браузеров. 1996 год11
  41. 41. Краткая история браузеров. 1996 год Netscape Navigator 2.x-3.x11
  42. 42. Краткая история браузеров. 1996 год Netscape Navigator 2.x-3.x • Добавлена поддержка11
  43. 43. Краткая история браузеров. 1996 год Netscape Navigator 2.x-3.x • Добавлена поддержка – LiveAudio, LiveVideo, QuickTime, POP3, HTML 3.211
  44. 44. Краткая история браузеров. 1996 год Netscape Navigator 2.x-3.x • Добавлена поддержка – LiveAudio, LiveVideo, QuickTime, POP3, HTML 3.2 – Java, JavaScript, плагины и само собой анимированые гифки11
  45. 45. Краткая история браузеров. 1996 год Netscape Navigator 2.x-3.x • Добавлена поддержка – LiveAudio, LiveVideo, QuickTime, POP3, HTML 3.2 – Java, JavaScript, плагины и само собой анимированые гифки – email клиент и многое другое11
  46. 46. Краткая история браузеров. 1996 год Netscape Navigator 2.x-3.x • Добавлена поддержка – LiveAudio, LiveVideo, QuickTime, POP3, HTML 3.2 – Java, JavaScript, плагины и само собой анимированые гифки – email клиент и многое другое • Около 90% рынка11
  47. 47. Краткая история браузеров. 1996 год12
  48. 48. Краткая история браузеров. 1996 год Opera 212
  49. 49. Краткая история браузеров. 1996 год Opera 2 • публичная версия12
  50. 50. Краткая история браузеров. 1996 год Opera 2 • публичная версия • поддержка фреймов12
  51. 51. Краткая история браузеров. 1996 год13
  52. 52. Краткая история браузеров. 1996 год Internet Explorer 1-213
  53. 53. Краткая история браузеров. 1996 год Internet Explorer 1-2 • Разработан на основе Mosaic13
  54. 54. Краткая история браузеров. 1996 год Internet Explorer 1-2 • Разработан на основе Mosaic • Поддерживает CSS13
  55. 55. Краткая история браузеров. 1996 год Internet Explorer 1-2 • Разработан на основе Mosaic • Поддерживает CSS – правда очень частично13
  56. 56. Краткая история браузеров. 1996 год Internet Explorer 1-2 • Разработан на основе Mosaic • Поддерживает CSS – правда очень частично – но зато, впервые на рынке13
  57. 57. Краткая история браузеров. 1996 год Internet Explorer 1-2 • Разработан на основе Mosaic • Поддерживает CSS – правда очень частично – но зато, впервые на рынке • Плагины ActiveX, Java13
  58. 58. Краткая история браузеров. 1996 год Internet Explorer 1-2 • Разработан на основе Mosaic • Поддерживает CSS – правда очень частично – но зато, впервые на рынке • Плагины ActiveX, Java • Поставляется с Windows 95 OSR213
  59. 59. Краткая история браузеров. 1996 год Internet Explorer 1-2 • Разработан на основе Mosaic • Поддерживает CSS – правда очень частично – но зато, впервые на рынке • Плагины ActiveX, Java • Поставляется с Windows 95 OSR2 • Первая версия включавшая синюю букву E13
  60. 60. Краткая история браузеров. 1997 год14
  61. 61. Краткая история браузеров. 1997 год Netscape Navigator 4.x14
  62. 62. Краткая история браузеров. 1997 год Netscape Navigator 4.x • CSS1 частично14
  63. 63. Краткая история браузеров. 1997 год Netscape Navigator 4.x • CSS1 частично • Очень старый движок по сравнению с IE414
  64. 64. Краткая история браузеров. 1997 год Netscape Navigator 4.x • CSS1 частично • Очень старый движок по сравнению с IE4 • Начало падения рыночной доли14
  65. 65. Краткая история браузеров. 1997 год Netscape Navigator 4.x • CSS1 частично • Очень старый движок по сравнению с IE4 • Начало падения рыночной доли Opera 314
  66. 66. Краткая история браузеров. 1997 год Netscape Navigator 4.x • CSS1 частично • Очень старый движок по сравнению с IE4 • Начало падения рыночной доли Opera 3 • кроссплатформенная14
  67. 67. Краткая история браузеров. 1997 год Netscape Navigator 4.x • CSS1 частично • Очень старый движок по сравнению с IE4 • Начало падения рыночной доли Opera 3 • кроссплатформенная • JavaScript14
  68. 68. Краткая история браузеров. 1997 год15
  69. 69. Краткая история браузеров. 1997 год Internet Explorer 415
  70. 70. Краткая история браузеров. 1997 год Internet Explorer 4 • Код полностью переписан15
  71. 71. Краткая история браузеров. 1997 год Internet Explorer 4 • Код полностью переписан • Cобственные расширения JavaScript, не совместимые с Netscape15
  72. 72. Краткая история браузеров. 1997 год Internet Explorer 4 • Код полностью переписан • Cобственные расширения JavaScript, не совместимые с Netscape • Собственная объектная модель документа (DOM)15
  73. 73. Краткая история браузеров. 1997 год Internet Explorer 4 • Код полностью переписан • Cобственные расширения JavaScript, не совместимые с Netscape • Собственная объектная модель документа (DOM) • Проще и стабильнее чем в Netscape15
  74. 74. Краткая история браузеров. 1997 год Internet Explorer 4 • Код полностью переписан • Cобственные расширения JavaScript, не совместимые с Netscape • Собственная объектная модель документа (DOM) • Проще и стабильнее чем в Netscape • Поставляется с Windows 9815
  75. 75. Краткая история браузеров. 1998 год16
  76. 76. Краткая история браузеров. 1998 год Netscape. Последние дни.16
  77. 77. Краткая история браузеров. 1998 год Netscape. Последние дни. – Очень старый движок16
  78. 78. Краткая история браузеров. 1998 год Netscape. Последние дни. – Очень старый движок – Множество ошибок обработки HTML и CSS16
  79. 79. Краткая история браузеров. 1998 год Netscape. Последние дни. – Очень старый движок – Множество ошибок обработки HTML и CSS • AOL покупает Netscape16
  80. 80. Краткая история браузеров. 1998 год Netscape. Последние дни. – Очень старый движок – Множество ошибок обработки HTML и CSS • AOL покупает Netscape • Netscape наносит Microsoft последний удар в спину и опенсорсит код браузера в рамках проекта Mozilla16
  81. 81. Краткая история браузеров. 1998 год Netscape. Последние дни. – Очень старый движок – Множество ошибок обработки HTML и CSS • AOL покупает Netscape • Netscape наносит Microsoft последний удар в спину и опенсорсит код браузера в рамках проекта Mozilla • Internet Explorer — новый лидер рынка16
  82. 82. Краткая история браузеров. 1998 год17
  83. 83. Краткая история браузеров. 1998 год Opera 3.517
  84. 84. Краткая история браузеров. 1998 год Opera 3.5 • Начинает поддерживать CSS17
  85. 85. Краткая история браузеров. 1998 год Opera 3.5 • Начинает поддерживать CSS • Техническим директором компании становится один из создателей CSS — Хокон Виум Ли17
  86. 86. Краткая история браузеров. 1999 год18
  87. 87. Краткая история браузеров. 1999 год Internet Explorer 5.0-5.518
  88. 88. Краткая история браузеров. 1999 год Internet Explorer 5.0-5.5 • Улучшенная поддержка HTML и CSS18
  89. 89. Краткая история браузеров. 1999 год Internet Explorer 5.0-5.5 • Улучшенная поддержка HTML и CSS • Поддержка XML и XSL18
  90. 90. Краткая история браузеров. 1999 год Internet Explorer 5.0-5.5 • Улучшенная поддержка HTML и CSS • Поддержка XML и XSL • XMLHttpRequest18
  91. 91. Краткая история браузеров. 1999 год Internet Explorer 5.0-5.5 • Улучшенная поддержка HTML и CSS • Поддержка XML и XSL • XMLHttpRequest – можно считать днём рождения AJAX18
  92. 92. Краткая история браузеров. 1999 год Internet Explorer 5.0-5.5 • Улучшенная поддержка HTML и CSS • Поддержка XML и XSL • XMLHttpRequest – можно считать днём рождения AJAX – хотя сам термин появится гораздо позже18
  93. 93. Краткая история браузеров. 1999 год Internet Explorer 5.0-5.5 • Улучшенная поддержка HTML и CSS • Поддержка XML и XSL • XMLHttpRequest – можно считать днём рождения AJAX – хотя сам термин появится гораздо позже • Последняя шестнадцатибитная версия18
  94. 94. Краткая история браузеров. 1999 год Internet Explorer 5.0-5.5 • Улучшенная поддержка HTML и CSS • Поддержка XML и XSL • XMLHttpRequest – можно считать днём рождения AJAX – хотя сам термин появится гораздо позже • Последняя шестнадцатибитная версия • Поставляется с Windows 98 SE, Windows ME, Windows 2000 и Microsoft Office18
  95. 95. Краткая история браузеров. 2000 год19
  96. 96. Краткая история браузеров. 2000 год Konqueror 219
  97. 97. Краткая история браузеров. 2000 год Konqueror 2 • Игра на именах:19
  98. 98. Краткая история браузеров. 2000 год Konqueror 2 • Игра на именах: – Navigator — мореплаватель, штурман19
  99. 99. Краткая история браузеров. 2000 год Konqueror 2 • Игра на именах: – Navigator — мореплаватель, штурман – Explorer — путешественник, исследователь19
  100. 100. Краткая история браузеров. 2000 год Konqueror 2 • Игра на именах: – Navigator — мореплаватель, штурман – Explorer — путешественник, исследователь – Conqueror — завоеватель, победитель19
  101. 101. Краткая история браузеров. 2000 год Konqueror 2 • Игра на именах: – Navigator — мореплаватель, штурман – Explorer — путешественник, исследователь – Conqueror — завоеватель, победитель • «K» это от KDE19
  102. 102. Краткая история браузеров. 2000 год Konqueror 2 • Игра на именах: – Navigator — мореплаватель, штурман – Explorer — путешественник, исследователь – Conqueror — завоеватель, победитель • «K» это от KDE • Основан на KHTML и KJS19
  103. 103. Краткая история браузеров. 2001 год20
  104. 104. Краткая история браузеров. 2001 год Opera 620
  105. 105. Краткая история браузеров. 2001 год Opera 6 • Microsoft заблокировала доступ к MSN.com20
  106. 106. Краткая история браузеров. 2001 год Opera 6 • Microsoft заблокировала доступ к MSN.com – спасает опция «представляться как Internet Explorer»20
  107. 107. Краткая история браузеров. 2001 год Opera 6 • Microsoft заблокировала доступ к MSN.com – спасает опция «представляться как Internet Explorer» – в конце года полная маскировка под ИЕ20
  108. 108. Краткая история браузеров. 2001 год Opera 6 • Microsoft заблокировала доступ к MSN.com – спасает опция «представляться как Internet Explorer» – в конце года полная маскировка под ИЕ Internet Explorer 620
  109. 109. Краткая история браузеров. 2001 год Opera 6 • Microsoft заблокировала доступ к MSN.com – спасает опция «представляться как Internet Explorer» – в конце года полная маскировка под ИЕ Internet Explorer 6 • Улучшена поддержка CSS1 и DOM уровня 120
  110. 110. Краткая история браузеров. 2001 год Opera 6 • Microsoft заблокировала доступ к MSN.com – спасает опция «представляться как Internet Explorer» – в конце года полная маскировка под ИЕ Internet Explorer 6 • Улучшена поддержка CSS1 и DOM уровня 1 • Всё ещё не соответствует стандартам W3C20
  111. 111. Краткая история браузеров. 2001 год Opera 6 • Microsoft заблокировала доступ к MSN.com – спасает опция «представляться как Internet Explorer» – в конце года полная маскировка под ИЕ Internet Explorer 6 • Улучшена поддержка CSS1 и DOM уровня 1 • Всё ещё не соответствует стандартам W3C • Что, в купе с монополией, мешает их внедрению20
  112. 112. Краткая история браузеров. 2002 год21
  113. 113. Краткая история браузеров. 2002 год Phoenix 0.1-0.521
  114. 114. Краткая история браузеров. 2002 год Phoenix 0.1-0.5 • Основан на движке Gecko21
  115. 115. Краткая история браузеров. 2002 год Phoenix 0.1-0.5 • Основан на движке Gecko – который начинали разрабатывать ещё в Netscape21
  116. 116. Краткая история браузеров. 2002 год Phoenix 0.1-0.5 • Основан на движке Gecko – который начинали разрабатывать ещё в Netscape – теперь разрабатывается Mozilla Foundation21
  117. 117. Краткая история браузеров. 2002 год Phoenix 0.1-0.5 • Основан на движке Gecko – который начинали разрабатывать ещё в Netscape – теперь разрабатывается Mozilla Foundation – основной принцип — поддержка открытых стандартов21
  118. 118. Краткая история браузеров. 2002 год Phoenix 0.1-0.5 • Основан на движке Gecko – который начинали разрабатывать ещё в Netscape – теперь разрабатывается Mozilla Foundation – основной принцип — поддержка открытых стандартов • Много всего хорошего21
  119. 119. Краткая история браузеров. 2002 год Phoenix 0.1-0.5 • Основан на движке Gecko – который начинали разрабатывать ещё в Netscape – теперь разрабатывается Mozilla Foundation – основной принцип — поддержка открытых стандартов • Много всего хорошего – блокировка всплывающих окон21
  120. 120. Краткая история браузеров. 2002 год Phoenix 0.1-0.5 • Основан на движке Gecko – который начинали разрабатывать ещё в Netscape – теперь разрабатывается Mozilla Foundation – основной принцип — поддержка открытых стандартов • Много всего хорошего – блокировка всплывающих окон – табики21
  121. 121. Краткая история браузеров. 2002 год Phoenix 0.1-0.5 • Основан на движке Gecko – который начинали разрабатывать ещё в Netscape – теперь разрабатывается Mozilla Foundation – основной принцип — поддержка открытых стандартов • Много всего хорошего – блокировка всплывающих окон – табики – темы21
  122. 122. Краткая история браузеров. 2003 год22
  123. 123. Краткая история браузеров. 2003 год Firebird 1.522
  124. 124. Краткая история браузеров. 2003 год Firebird 1.5 • Переименованный Phoenix22
  125. 125. Краткая история браузеров. 2003 год Firebird 1.5 • Переименованный Phoenix – проблемы с торговой маркой22
  126. 126. Краткая история браузеров. 2003 год Firebird 1.5 • Переименованный Phoenix – проблемы с торговой маркой • Какие-то улучшения22
  127. 127. Краткая история браузеров. 2003 год Firebird 1.5 • Переименованный Phoenix – проблемы с торговой маркой • Какие-то улучшения Opera 7.0-7.222
  128. 128. Краткая история браузеров. 2003 год Firebird 1.5 • Переименованный Phoenix – проблемы с торговой маркой • Какие-то улучшения Opera 7.0-7.2 • Новый движок — Presto. Полностью переписанный22
  129. 129. Краткая история браузеров. 2003 год Firebird 1.5 • Переименованный Phoenix – проблемы с торговой маркой • Какие-то улучшения Opera 7.0-7.2 • Новый движок — Presto. Полностью переписанный • Выросла скорость и стабильность работы22
  130. 130. Краткая история браузеров. 2003 год Firebird 1.5 • Переименованный Phoenix – проблемы с торговой маркой • Какие-то улучшения Opera 7.0-7.2 • Новый движок — Presto. Полностью переписанный • Выросла скорость и стабильность работы • Очередной конфликт с MSN22
  131. 131. Краткая история браузеров. 2003 год Firebird 1.5 • Переименованный Phoenix – проблемы с торговой маркой • Какие-то улучшения Opera 7.0-7.2 • Новый движок — Presto. Полностью переписанный • Выросла скорость и стабильность работы • Очередной конфликт с MSN – люди думали, что виновата Опера22
  132. 132. Краткая история браузеров. 2003 год Firebird 1.5 • Переименованный Phoenix – проблемы с торговой маркой • Какие-то улучшения Opera 7.0-7.2 • Новый движок — Presto. Полностью переписанный • Выросла скорость и стабильность работы • Очередной конфликт с MSN – люди думали, что виновата Опера – Microsoft не признался22
  133. 133. Краткая история браузеров. 2003 год23
  134. 134. Краткая история браузеров. 2003 год Safari 1.023
  135. 135. Краткая история браузеров. 2003 год Safari 1.0 • Онован на Webkit — форке KHTML23
  136. 136. Краткая история браузеров. 2003 год Safari 1.0 • Онован на Webkit — форке KHTML – небольшой код (140 000 строк кода)23
  137. 137. Краткая история браузеров. 2003 год Safari 1.0 • Онован на Webkit — форке KHTML – небольшой код (140 000 строк кода) – хорошо спроектированный23
  138. 138. Краткая история браузеров. 2003 год Safari 1.0 • Онован на Webkit — форке KHTML – небольшой код (140 000 строк кода) – хорошо спроектированный – поддержка стандартов23
  139. 139. Краткая история браузеров. 2003 год Safari 1.0 • Онован на Webkit — форке KHTML – небольшой код (140 000 строк кода) – хорошо спроектированный – поддержка стандартов • Состоит из WebCore и JavaScriptCore23
  140. 140. Краткая история браузеров. 2003 год Safari 1.0 • Онован на Webkit — форке KHTML – небольшой код (140 000 строк кода) – хорошо спроектированный – поддержка стандартов • Состоит из WebCore и JavaScriptCore • Браузер по умолчанию на Маках23
  141. 141. Краткая история браузеров. 2004 год24
  142. 142. Краткая история браузеров. 2004 год Internet Explorer 6 SP224
  143. 143. Краткая история браузеров. 2004 год Internet Explorer 6 SP2 • Никаких изменений в движке24
  144. 144. Краткая история браузеров. 2004 год Internet Explorer 6 SP2 • Никаких изменений в движке Opera 7.x24
  145. 145. Краткая история браузеров. 2004 год Internet Explorer 6 SP2 • Никаких изменений в движке Opera 7.x • Проблемы с Hotmail24
  146. 146. Краткая история браузеров. 2004 год Internet Explorer 6 SP2 • Никаких изменений в движке Opera 7.x • Проблемы с Hotmail • Направлена жалоба в Майкрософт24
  147. 147. Краткая история браузеров. 2004 год Internet Explorer 6 SP2 • Никаких изменений в движке Opera 7.x • Проблемы с Hotmail • Направлена жалоба в Майкрософт • Но они не ответили24
  148. 148. Краткая история браузеров. 2004 год25
  149. 149. Краткая история браузеров. 2004 год Firefox 0.8-1.025
  150. 150. Краткая история браузеров. 2004 год Firefox 0.8-1.0 • Опять переименован из-за аналогичной причины25
  151. 151. Краткая история браузеров. 2004 год Firefox 0.8-1.0 • Опять переименован из-за аналогичной причины • Получил множество положительных оценок25
  152. 152. Краткая история браузеров. 2004 год Firefox 0.8-1.0 • Опять переименован из-за аналогичной причины • Получил множество положительных оценок • 25 млн. загрузок за первые 99 дней25
  153. 153. Краткая история браузеров. 2004 год Firefox 0.8-1.0 • Опять переименован из-за аналогичной причины • Получил множество положительных оценок • 25 млн. загрузок за первые 99 дней • Становится одним из самых популярных свободных приложений25
  154. 154. Краткая история браузеров. 2005 год26
  155. 155. Краткая история браузеров. 2005 год Opera 8.x26
  156. 156. Краткая история браузеров. 2005 год Opera 8.x • Браузер становится полностью бесплатным и без рекламы26
  157. 157. Краткая история браузеров. 2005 год Opera 8.x • Браузер становится полностью бесплатным и без рекламы Firefox 1.526
  158. 158. Краткая история браузеров. 2005 год Opera 8.x • Браузер становится полностью бесплатным и без рекламы Firefox 1.5 • Через 344 дня после выпуска первой версии — загружен в 100 миллионный раз26
  159. 159. Краткая история браузеров. 2005 год Opera 8.x • Браузер становится полностью бесплатным и без рекламы Firefox 1.5 • Через 344 дня после выпуска первой версии — загружен в 100 миллионный раз • Рыночная доля около 10%26
  160. 160. Краткая история браузеров. 2005 год Opera 8.x • Браузер становится полностью бесплатным и без рекламы Firefox 1.5 • Через 344 дня после выпуска первой версии — загружен в 100 миллионный раз • Рыночная доля около 10% Safari 2.026
  161. 161. Краткая история браузеров. 2005 год Opera 8.x • Браузер становится полностью бесплатным и без рекламы Firefox 1.5 • Через 344 дня после выпуска первой версии — загружен в 100 миллионный раз • Рыночная доля около 10% Safari 2.0 • Проходит Acid2 тест26
  162. 162. Краткая история браузеров. 2005 год Opera 8.x • Браузер становится полностью бесплатным и без рекламы Firefox 1.5 • Через 344 дня после выпуска первой версии — загружен в 100 миллионный раз • Рыночная доля около 10% Safari 2.0 • Проходит Acid2 тест • Webkit в OpenSource26
  163. 163. Краткая история браузеров. 2006 год27
  164. 164. Краткая история браузеров. 2006 год Internet Explorer 727
  165. 165. Краткая история браузеров. 2006 год Internet Explorer 7 • PNG с альфа-каналом27
  166. 166. Краткая история браузеров. 2006 год Internet Explorer 7 • PNG с альфа-каналом • Какие то улучшения поддержки стандартов27
  167. 167. Краткая история браузеров. 2006 год Internet Explorer 7 • PNG с альфа-каналом • Какие то улучшения поддержки стандартов • Первая версия, в которой не содержался код Mosaic27
  168. 168. Краткая история браузеров. 2006 год Internet Explorer 7 • PNG с альфа-каналом • Какие то улучшения поддержки стандартов • Первая версия, в которой не содержался код Mosaic • Trident 3.1 (раньше без версий)27
  169. 169. Краткая история браузеров. 2007 год28
  170. 170. Краткая история браузеров. 2007 год Мобильная версия Safari28
  171. 171. Краткая история браузеров. 2007 год Мобильная версия Safari • Стив Джобс представляет iPhone28
  172. 172. Краткая история браузеров. 2007 год Мобильная версия Safari • Стив Джобс представляет iPhone • А вместе с ним и мобильную версию28
  173. 173. Краткая история браузеров. 2007 год Мобильная версия Safari • Стив Джобс представляет iPhone • А вместе с ним и мобильную версию • Основан на обычном Webkit28
  174. 174. Краткая история браузеров. 2007 год Мобильная версия Safari • Стив Джобс представляет iPhone • А вместе с ним и мобильную версию • Основан на обычном Webkit • С изменениями для мобильных устройств28
  175. 175. Краткая история браузеров. 2008 год29
  176. 176. Краткая история браузеров. 2008 год Opera 9.x29
  177. 177. Краткая история браузеров. 2008 год Opera 9.x • Повышение производительности29
  178. 178. Краткая история браузеров. 2008 год Opera 9.x • Повышение производительности – вдвое быстрее предыдущей версии29
  179. 179. Краткая история браузеров. 2008 год Opera 9.x • Повышение производительности – вдвое быстрее предыдущей версии – на 50% быстрее Firefox 229
  180. 180. Краткая история браузеров. 2008 год Opera 9.x • Повышение производительности – вдвое быстрее предыдущей версии – на 50% быстрее Firefox 2 – вдвое быстрее Internet Explorer 729
  181. 181. Краткая история браузеров. 2008 год Opera 9.x • Повышение производительности – вдвое быстрее предыдущей версии – на 50% быстрее Firefox 2 – вдвое быстрее Internet Explorer 7 Firefox 3.029
  182. 182. Краткая история браузеров. 2008 год Opera 9.x • Повышение производительности – вдвое быстрее предыдущей версии – на 50% быстрее Firefox 2 – вдвое быстрее Internet Explorer 7 Firefox 3.0 • 8 миллионов загрузок в день релиза29
  183. 183. Краткая история браузеров. 2008 год Opera 9.x • Повышение производительности – вдвое быстрее предыдущей версии – на 50% быстрее Firefox 2 – вдвое быстрее Internet Explorer 7 Firefox 3.0 • 8 миллионов загрузок в день релиза • Глобальная доля рынка — 20%, в Европе — 30%29
  184. 184. Краткая история браузеров. 2008 год30
  185. 185. Краткая история браузеров. 2008 год Chrome 1.030
  186. 186. Краткая история браузеров. 2008 год Chrome 1.0 • Простой интерфейс30
  187. 187. Краткая история браузеров. 2008 год Chrome 1.0 • Простой интерфейс • Высокая скорость работы30
  188. 188. Краткая история браузеров. 2008 год Chrome 1.0 • Простой интерфейс • Высокая скорость работы • Основан на Webkit30
  189. 189. Краткая история браузеров. 2008 год Chrome 1.0 • Простой интерфейс • Высокая скорость работы • Основан на Webkit • V8, вместо JavaScriptCore30
  190. 190. Краткая история браузеров. 2008 год Chrome 1.0 • Простой интерфейс • Высокая скорость работы • Основан на Webkit • V8, вместо JavaScriptCore • Наверное, можно считать, что положил начало30
  191. 191. Краткая история браузеров. 2008 год Chrome 1.0 • Простой интерфейс • Высокая скорость работы • Основан на Webkit • V8, вместо JavaScriptCore • Наверное, можно считать, что положил начало – гонке за скорость30
  192. 192. Краткая история браузеров. 2008 год Chrome 1.0 • Простой интерфейс • Высокая скорость работы • Основан на Webkit • V8, вместо JavaScriptCore • Наверное, можно считать, что положил начало – гонке за скорость – в том числе и для Яваскриптовых движков30
  193. 193. Краткая история браузеров. 2009 год31
  194. 194. Краткая история браузеров. 2009 год Internet Explorer 8.031
  195. 195. Краткая история браузеров. 2009 год Internet Explorer 8.0 • Новый режим рендеринга, который называется «режим стандартов»31
  196. 196. Краткая история браузеров. 2009 год Internet Explorer 8.0 • Новый режим рендеринга, который называется «режим стандартов» • Проходит Acid231
  197. 197. Краткая история браузеров. 2009 год Internet Explorer 8.0 • Новый режим рендеринга, который называется «режим стандартов» • Проходит Acid2 Chrome 2.0-3.031
  198. 198. Краткая история браузеров. 2009 год Internet Explorer 8.0 • Новый режим рендеринга, который называется «режим стандартов» • Проходит Acid2 Chrome 2.0-3.0 • Существенно увеличена производительность JavaScript31
  199. 199. Краткая история браузеров. 2009 год Internet Explorer 8.0 • Новый режим рендеринга, который называется «режим стандартов» • Проходит Acid2 Chrome 2.0-3.0 • Существенно увеличена производительность JavaScript Firefox 3.531
  200. 200. Краткая история браузеров. 2009 год Internet Explorer 8.0 • Новый режим рендеринга, который называется «режим стандартов» • Проходит Acid2 Chrome 2.0-3.0 • Существенно увеличена производительность JavaScript Firefox 3.5 • Новая версия SpiderMonkey — TraceMonkey31
  201. 201. Краткая история браузеров. 2009 год Internet Explorer 8.0 • Новый режим рендеринга, который называется «режим стандартов» • Проходит Acid2 Chrome 2.0-3.0 • Существенно увеличена производительность JavaScript Firefox 3.5 • Новая версия SpiderMonkey — TraceMonkey • Существенно увеличена производительность JavaScript31
  202. 202. Краткая история браузеров. 2009 год Internet Explorer 8.0 • Новый режим рендеринга, который называется «режим стандартов» • Проходит Acid2 Chrome 2.0-3.0 • Существенно увеличена производительность JavaScript Firefox 3.5 • Новая версия SpiderMonkey — TraceMonkey • Существенно увеличена производительность JavaScript • Первый JIT компилятор для JavaScript31
  203. 203. Краткая история браузеров. 2010 год32
  204. 204. Краткая история браузеров. 2010 год Chrome 4.0-8.032
  205. 205. Краткая история браузеров. 2010 год Chrome 4.0-8.0 • Полное прохождение тестов ACID332
  206. 206. Краткая история браузеров. 2010 год Chrome 4.0-8.0 • Полное прохождение тестов ACID3 • Улучшена скорость работы JavaScript32
  207. 207. Краткая история браузеров. 2010 год Chrome 4.0-8.0 • Полное прохождение тестов ACID3 • Улучшена скорость работы JavaScript Opera 10.50-11.0032
  208. 208. Краткая история браузеров. 2010 год Chrome 4.0-8.0 • Полное прохождение тестов ACID3 • Улучшена скорость работы JavaScript Opera 10.50-11.00 • Новый JavaScript-движок Carakan32
  209. 209. Краткая история браузеров. 2010 год Chrome 4.0-8.0 • Полное прохождение тестов ACID3 • Улучшена скорость работы JavaScript Opera 10.50-11.00 • Новый JavaScript-движок Carakan Firefox 3.632
  210. 210. Краткая история браузеров. 2010 год Chrome 4.0-8.0 • Полное прохождение тестов ACID3 • Улучшена скорость работы JavaScript Opera 10.50-11.00 • Новый JavaScript-движок Carakan Firefox 3.6 • Улучшена скорость работы JavaScript32
  211. 211. Краткая история браузеров. 2011 год33
  212. 212. Краткая история браузеров. 2011 год Firefox 4.0-9.033
  213. 213. Краткая история браузеров. 2011 год Firefox 4.0-9.0 • Gecko 2.0 и JägerMonkey33
  214. 214. Краткая история браузеров. 2011 год Firefox 4.0-9.0 • Gecko 2.0 и JägerMonkey • Переход на быстрый цикл разработки релизов33
  215. 215. Краткая история браузеров. 2011 год Firefox 4.0-9.0 • Gecko 2.0 и JägerMonkey • Переход на быстрый цикл разработки релизов • Acid3 — 97/10033
  216. 216. Краткая история браузеров. 2011 год Firefox 4.0-9.0 • Gecko 2.0 и JägerMonkey • Переход на быстрый цикл разработки релизов • Acid3 — 97/100 Internet Explorer 9.033
  217. 217. Краткая история браузеров. 2011 год Firefox 4.0-9.0 • Gecko 2.0 и JägerMonkey • Переход на быстрый цикл разработки релизов • Acid3 — 97/100 Internet Explorer 9.0 • Поддержка большей части CSS333
  218. 218. Краткая история браузеров. 2011 год Firefox 4.0-9.0 • Gecko 2.0 и JägerMonkey • Переход на быстрый цикл разработки релизов • Acid3 — 97/100 Internet Explorer 9.0 • Поддержка большей части CSS3 • Более быстрая обработка JavaScript33
  219. 219. Краткая история браузеров. 2011 год Firefox 4.0-9.0 • Gecko 2.0 и JägerMonkey • Переход на быстрый цикл разработки релизов • Acid3 — 97/100 Internet Explorer 9.0 • Поддержка большей части CSS3 • Более быстрая обработка JavaScript • Аудио- и видеотеги HTML533
  220. 220. Краткая история браузеров. 2011 год34
  221. 221. Краткая история браузеров. 2011 год Chrome 9.0-16.0034
  222. 222. Краткая история браузеров. 2011 год Chrome 9.0-16.00 • Ускорено выполнение JavaScript34
  223. 223. Краткая история браузеров. 2011 год Chrome 9.0-16.00 • Ускорено выполнение JavaScript • Становится вторым по полярности браузером в мире34
  224. 224. Краткая история браузеров. 2011 год Chrome 9.0-16.00 • Ускорено выполнение JavaScript • Становится вторым по полярности браузером в мире – cмещая Firefox на третье место34
  225. 225. Краткая история браузеров. 2011 год Chrome 9.0-16.00 • Ускорено выполнение JavaScript • Становится вторым по полярности браузером в мире – cмещая Firefox на третье место Safari 5.134
  226. 226. Краткая история браузеров. 2011 год Chrome 9.0-16.00 • Ускорено выполнение JavaScript • Становится вторым по полярности браузером в мире – cмещая Firefox на третье место Safari 5.1 • Переход на Webkit234
  227. 227. Краткая история браузеров. 2011 год Chrome 9.0-16.00 • Ускорено выполнение JavaScript • Становится вторым по полярности браузером в мире – cмещая Firefox на третье место Safari 5.1 • Переход на Webkit2 – быстрее и надёжнее34
  228. 228. Краткая история браузеров. 2011 год Chrome 9.0-16.00 • Ускорено выполнение JavaScript • Становится вторым по полярности браузером в мире – cмещая Firefox на третье место Safari 5.1 • Переход на Webkit2 – быстрее и надёжнее – обработка web контента производится в изолированных процессах34
  229. 229. Краткая история браузеров. 2011 год Chrome 9.0-16.00 • Ускорено выполнение JavaScript • Становится вторым по полярности браузером в мире – cмещая Firefox на третье место Safari 5.1 • Переход на Webkit2 – быстрее и надёжнее – обработка web контента производится в изолированных процессах – так же как и в Хроме, но реализовано на уровне движка34
  230. 230. Краткая история браузеров. 2012 год35
  231. 231. Краткая история браузеров. 2012 год Chrome 17.00-21.0035
  232. 232. Краткая история браузеров. 2012 год Chrome 17.00-21.00 • Новый V8 «JavaScript Harmony»35
  233. 233. Краткая история браузеров. 2012 год Chrome 17.00-21.00 • Новый V8 «JavaScript Harmony» • Поддержка протокола SPDY35
  234. 234. Краткая история браузеров. 2012 год Chrome 17.00-21.00 • Новый V8 «JavaScript Harmony» • Поддержка протокола SPDY Firefox 10.00-15.0.135
  235. 235. Краткая история браузеров. 2012 год Chrome 17.00-21.00 • Новый V8 «JavaScript Harmony» • Поддержка протокола SPDY Firefox 10.00-15.0.1 • Поддержка протокола SPDY35
  236. 236. Краткая история браузеров. 2012 год Chrome 17.00-21.00 • Новый V8 «JavaScript Harmony» • Поддержка протокола SPDY Firefox 10.00-15.0.1 • Поддержка протокола SPDY • Борьба с утечками памяти35
  237. 237. Браузерные войны
  238. 238. Браузерные войны37
  239. 239. Браузерные войны • Борьба за господство на рынке web-браузеров37
  240. 240. Браузерные войны • Борьба за господство на рынке web-браузеров • Вроде бы ничего страшного37
  241. 241. Браузерные войны • Борьба за господство на рынке web-браузеров • Вроде бы ничего страшного • Если бы не используемые методы — добавление специфических, нестандартных возможностей к браузеру37
  242. 242. Браузерные войны • Борьба за господство на рынке web-браузеров • Вроде бы ничего страшного • Если бы не используемые методы — добавление специфических, нестандартных возможностей к браузеру • В результате — многие сайты «оптимизированы» для конкретного браузера37
  243. 243. Браузерные войны • Борьба за господство на рынке web-браузеров • Вроде бы ничего страшного • Если бы не используемые методы — добавление специфических, нестандартных возможностей к браузеру • В результате — многие сайты «оптимизированы» для конкретного браузера • Но вообще, проявляется по разному37
  244. 244. Первая браузерная война39
  245. 245. Первая браузерная война Причины39
  246. 246. Первая браузерная война Причины • дерзкий Netscape39
  247. 247. Первая браузерная война Причины • дерзкий Netscape • отказ в продаже Microsoft своих технологий39
  248. 248. Первая браузерная война Причины • дерзкий Netscape • отказ в продаже Microsoft своих технологий • полное отсутствие Microsoft на рынке браузеров39
  249. 249. Первая браузерная война Причины • дерзкий Netscape • отказ в продаже Microsoft своих технологий • полное отсутствие Microsoft на рынке браузеров Факторы39
  250. 250. Первая браузерная война Причины • дерзкий Netscape • отказ в продаже Microsoft своих технологий • полное отсутствие Microsoft на рынке браузеров Факторы • Netscape коммерческая компания, которой необходимо зарабатывать деньги39
  251. 251. Первая браузерная война Причины • дерзкий Netscape • отказ в продаже Microsoft своих технологий • полное отсутствие Microsoft на рынке браузеров Факторы • Netscape коммерческая компания, которой необходимо зарабатывать деньги • У Microsoft монополия на рынке операционных систем39
  252. 252. Первая браузерная война Причины • дерзкий Netscape • отказ в продаже Microsoft своих технологий • полное отсутствие Microsoft на рынке браузеров Факторы • Netscape коммерческая компания, которой необходимо зарабатывать деньги • У Microsoft монополия на рынке операционных систем • Могут позволить раздавать браузер бесплатно39
  253. 253. Первая браузерная война Причины • дерзкий Netscape • отказ в продаже Microsoft своих технологий • полное отсутствие Microsoft на рынке браузеров Факторы • Netscape коммерческая компания, которой необходимо зарабатывать деньги • У Microsoft монополия на рынке операционных систем • Могут позволить раздавать браузер бесплатно • Ну и вообще Internet Explorer лучше39
  254. 254. Первая браузерная война40
  255. 255. Первая браузерная война Итоги40
  256. 256. Первая браузерная война Итоги • AOL покупает Netscape40
  257. 257. Первая браузерная война Итоги • AOL покупает Netscape • Internet Explorer становится доминирующим браузером на рынке40
  258. 258. Первая браузерная война Итоги • AOL покупает Netscape • Internet Explorer становится доминирующим браузером на рынке • Суд: Соединённые штаты против Microsoft40
  259. 259. Режимы отображения
  260. 260. Основные режимы отображения46
  261. 261. Основные режимы отображения Quirks Mode (clck.ru/27PuB)46
  262. 262. Основные режимы отображения Quirks Mode (clck.ru/27PuB) Standards Mode46
  263. 263. Основные режимы отображения Quirks Mode (clck.ru/27PuB) Standards Mode Almost Standards Mode (clck.ru/27Q1n)46
  264. 264. Режимы отображения в IE47
  265. 265. Режимы отображения в IE IE7 Standards47
  266. 266. Режимы отображения в IE IE7 Standards IE8 Standards47
  267. 267. Режимы отображения в IE IE7 Standards IE8 Standards IE8 Almost Standards47
  268. 268. Режимы отображения в IE IE7 Standards IE8 Standards IE8 Almost Standards IE9 Standards47
  269. 269. Режимы отображения в IE IE7 Standards IE8 Standards IE8 Almost Standards IE9 Standards IE9 Almost Standards47
  270. 270. Режимы отображения в IE IE7 Standards IE8 Standards IE8 Almost Standards IE9 Standards IE9 Almost Standards clck.ru/27QXD47
  271. 271. UserAgent
  272. 272. User Agent — это клиентское приложение, использующее определённый сетевой протокол. Термин обычно используется для приложений, осуществляющих доступ к веб-сайтам, таким как браузеры, поисковые роботы (и другие «пауки»), мобильные телефоны и другие устройства Wikipedia49
  273. 273. The User-Agent request-header field contains information about the user agent originating the request. This is for statistical purposes, the tracing of protocol violations, and automated recognition of user agents for the sake of tailoring responses to avoid particular user agent limitations. User agents SHOULD include this field with requests. RFC 2616, 14.4350
  274. 274. UserAgent Пример HTTP запроса GET / HTTP/1.1 Host: www.yandex.ru Connection: keep-alive Cache-Control: no-cache Pragma: no-cache User-Agent: Mozilla/5.0 (Macintosh; ru-ru; Intel Mac OS X 10_8_0) AppleWebKit/535.22 (KHTML, like Gecko) Chrome/ 19.0.1048.0 Safari/535.22 Accept: text/html Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.351
  275. 275. User-Agent = "User-Agent" ":" 1*( product | comment ) product = token ["/" product-version] product-version = token token = 1*<any CHAR except CTLs or separators> comment = "(" *( ctext | quoted-pair | comment ) ")" RFC 261652
  276. 276. UserAgent clck.ru/1WYC clck.ru/27hxV53
  277. 277. UA: Mosaic NCSA_Mosaic/2.7b4 (X11;AIX 1)54
  278. 278. UA: Netscape Navigator Mozilla/3.0 (Macintosh; I; PPC)55
  279. 279. UA: Internet Explorer Mozilla/1.22 (compatible; MSIE 2.0; Windows 95)56
  280. 280. UA: Mozilla Mozilla/5.001 (Macintosh; N; PPC; ja) Gecko/2525010157
  281. 281. UA:Firefox Mozilla/5.0 (X11; Linux i686; rv:1.7.5) Gecko/20041108 Firefox/1.058
  282. 282. UA: Konqueror Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko)59
  283. 283. UA: Safari Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-us) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.660
  284. 284. UA: Chrome Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/22.0.1207.1 Safari/537.161
  285. 285. Кроссбраузерность
  286. 286. Кроссбра́узерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Wikipedia63
  287. 287. Кроссбраузерность64
  288. 288. Кроссбраузерность • Много браузеров64
  289. 289. Кроссбраузерность • Много браузеров – их вообще много64
  290. 290. Кроссбраузерность • Много браузеров – их вообще много – да ещё и разных версий64
  291. 291. Кроссбраузерность • Много браузеров – их вообще много – да ещё и разных версий – а ещё с разным уровнем поддежки технологий64
  292. 292. Кроссбраузерность • Много браузеров – их вообще много – да ещё и разных версий – а ещё с разным уровнем поддежки технологий • Требуется дополнительное время, которое стоит денег64
  293. 293. Кроссбраузерность • Много браузеров – их вообще много – да ещё и разных версий – а ещё с разным уровнем поддежки технологий • Требуется дополнительное время, которое стоит денег • Но иначе — посетитель уйдёт64
  294. 294. Кроссбраузерность • Много браузеров – их вообще много – да ещё и разных версий – а ещё с разным уровнем поддежки технологий • Требуется дополнительное время, которое стоит денег • Но иначе — посетитель уйдёт • Ну и вообще это плохо64
  295. 295. Limited browser support65
  296. 296. Limited browser support • Поддержка ограниченного количества браузеров65
  297. 297. Limited browser support • Поддержка ограниченного количества браузеров • Может проявляться по разному65
  298. 298. Limited browser support • Поддержка ограниченного количества браузеров • Может проявляться по разному – блокировка работы в некоторых браузерах65
  299. 299. Limited browser support • Поддержка ограниченного количества браузеров • Может проявляться по разному – блокировка работы в некоторых браузерах – предупреждение о возможных проблемах65
  300. 300. Limited browser support • Поддержка ограниченного количества браузеров • Может проявляться по разному – блокировка работы в некоторых браузерах – предупреждение о возможных проблемах – просто ограниченная поддержка65
  301. 301. Limited browser support66
  302. 302. Browser detection Определение браузера по его особенностям: .bang { // some properties } * html .bang { zoom: 1; }67
  303. 303. Graceful degradation68
  304. 304. Graceful degradation • Современные и популярные браузеры получают контент в полном виде68
  305. 305. Graceful degradation • Современные и популярные браузеры получают контент в полном виде • Остальные — в упрощённом68
  306. 306. Graceful degradation • Современные и популярные браузеры получают контент в полном виде • Остальные — в упрощённом68
  307. 307. Graceful degradation • Современные и популярные браузеры получают контент в полном виде • Остальные — в упрощённом68
  308. 308. Graceful degradation • Современные и популярные браузеры получают контент в полном виде • Остальные — в упрощённом68
  309. 309. Progressive enhancement69
  310. 310. Progressive enhancement • основной контент доступен во всех браузерах69
  311. 311. Progressive enhancement • основной контент доступен во всех браузерах • основная функциональность доступна во всех браузерах69
  312. 312. Progressive enhancement • основной контент доступен во всех браузерах • основная функциональность доступна во всех браузерах • не используется экстраразметка для эмуляции неподдерживаемых свойств69
  313. 313. Progressive enhancement • основной контент доступен во всех браузерах • основная функциональность доступна во всех браузерах • не используется экстраразметка для эмуляции неподдерживаемых свойств • улучшение внешнего вида достигается за счет дополнительных браузерозависимых стилей69
  314. 314. Progressive enhancement • основной контент доступен во всех браузерах • основная функциональность доступна во всех браузерах • не используется экстраразметка для эмуляции неподдерживаемых свойств • улучшение внешнего вида достигается за счет дополнительных браузерозависимых стилей • улучшение функциональности достигается за счет «ненавязчивых» (unobtrusive) скриптов69
  315. 315. Progressive enhancement • основной контент доступен во всех браузерах • основная функциональность доступна во всех браузерах • не используется экстраразметка для эмуляции неподдерживаемых свойств • улучшение внешнего вида достигается за счет дополнительных браузерозависимых стилей • улучшение функциональности достигается за счет «ненавязчивых» (unobtrusive) скриптов • учитываются возможности браузера пользователя69
  316. 316. Feature detection Проверка поддержки тэга video: if(!!document.createElement(video).canPlayType) { // Insert HTML5 Video } else { // Insert Flash Video }70
  317. 317. Feature detection <!DOCTYPE html> <html class="draganddrop rgba ..."> <head> <title>Bang!</title> <script src="//yandex.st/modernizr/2.6.2/ modernizr.js"></script> ... </head> <body> .. <script> if(!Modernizr.inputtypes.date) { // no native support for <input type="date"> :( // maybe build one yourself with Dojo or jQueryUI } </script> </body> </html>71
  318. 318. Здравый смысл72
  319. 319. Здравый смысл Limited browser support72
  320. 320. Здравый смысл Limited browser support • Список совместимости72
  321. 321. Здравый смысл Limited browser support • Список совместимости • Основывается на доле браузера среди нашей аудитории72
  322. 322. Здравый смысл Limited browser support • Список совместимости • Основывается на доле браузера среди нашей аудитории – > 2% — полная совместимость72
  323. 323. Здравый смысл Limited browser support • Список совместимости • Основывается на доле браузера среди нашей аудитории – > 2% — полная совместимость – < 2% — слабая совместимость72
  324. 324. Здравый смысл Limited browser support • Список совместимости • Основывается на доле браузера среди нашей аудитории – > 2% — полная совместимость – < 2% — слабая совместимость – < 0.5% — не поддерживаем72
  325. 325. Здравый смысл Limited browser support • Список совместимости • Основывается на доле браузера среди нашей аудитории – > 2% — полная совместимость – < 2% — слабая совместимость – < 0.5% — не поддерживаем • Но контент должен быть доступен везде72
  326. 326. Здравый смысл Browser detection: условные комментарии <!--[if gt IE 7]><!--> <link rel="stylesheet" href="//yandex.st/.../style.css"> <!--<![endif]--> <!--[if lt IE 8]> <link rel="stylesheet" href="//yandex.st/.../style.ie.css"> <![endif]-->73
  327. 327. Здравый смысл Browser detection: дополнительные стили для iPad { block: b-page, head: [ ... data.isIpad ? { elem: css, url: //yandex.st/.../style.ipad.css } : , ], ... }74
  328. 328. Здравый смысл Feature detection: определение JavaScript и режима отображения <!doctype html> <html class="i-ua_js_no i-ua_css_standard"> <head> <script> ;(function(d,e,c,r) { e=d.documentElement; c="className"; r="replace"; e[c]=e[c][r]("i-ua_js_no","i-ua_js_yes"); if(d.compatMode!="CSS1Compat") e[c]=e[c][r]("i-ua_css_standart","i- ua_css_quirks") })(document); </script> <link rel="stylesheet" href="//yandex.st/.../style.css"> <style> .b-huge-js-block { display: none } </style>75
  329. 329. Списки совместимости в IE76
  330. 330. Списки совместимости в IE • Internet Explorer старше седьмой версии76
  331. 331. Списки совместимости в IE • Internet Explorer старше седьмой версии • Приезжают вместе с обновлениями76
  332. 332. Списки совместимости в IE • Internet Explorer старше седьмой версии • Приезжают вместе с обновлениями • Основываются на поведении пользователей76
  333. 333. Списки совместимости в IE • Internet Explorer старше седьмой версии • Приезжают вместе с обновлениями • Основываются на поведении пользователей • support.microsoft.com/kb/96032176
  334. 334. Browser JavaScript в Opera77
  335. 335. Browser JavaScript в Opera • Не путать с UserJS77
  336. 336. Browser JavaScript в Opera • Не путать с UserJS • Автоматически исправляет77
  337. 337. Browser JavaScript в Opera • Не путать с UserJS • Автоматически исправляет – веб страницы77
  338. 338. Browser JavaScript в Opera • Не путать с UserJS • Автоматически исправляет – веб страницы – устаревшие скрипты77
  339. 339. Browser JavaScript в Opera • Не путать с UserJS • Автоматически исправляет – веб страницы – устаревшие скрипты – страницы которые по неосторожности блокируют Оперу77
  340. 340. Browser JavaScript в Opera • Не путать с UserJS • Автоматически исправляет – веб страницы – устаревшие скрипты – страницы которые по неосторожности блокируют Оперу • Лежит на ГитХабе77

×