Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
0 likes•1,061 views
Документ обсуждает будущее вёрстки и работу верстальщиков в Яндексе, акцентируя внимание на проблемы совместимости браузеров и производительности. Основное внимание уделяется влиянию CSS свойств на скорость рендеринга, а также новым технологиям и их взаимосвязи с примером кода. В заключение подчеркивается необходимость оптимизации временных затрат на внедрение и тестирование интерфейсов.
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
- 1. Куда движется вёрстка и верстальщики Яндекса. Олег Мохов Разработчик интерфейсов Я.Субботник, Алматы, 15 октября 2011 года
- 10. 6
- 11. 6
- 12. Вышел в 2001 году Очень много проблем и неподдерживаемых решений Доля в рунете 1.7% и продолжает снижаться 6
- 13. Вышел в 2001 году Очень много проблем и неподдерживаемых решений Доля в рунете 1.7% и продолжает снижаться 6
- 14. Вышел в 2006 году Проблемы почти те же Доля в рунете 4.7% 7
- 15. IE8 Firefox 3 10.4% 6.5% 8
- 16. ¹/₄
- 17. 10
- 18. Firefox 7 IE6 10
- 19. 2011 2001 10
- 20. 11
- 21. 4 элемента 11
- 22. 4 элемента разные решения в разных ситуациях 11
- 23. 4 элемента разные решения в разных ситуациях время на внедрить и протестировать 11
- 24. 4 элемента разные решения в разных ситуациях время на внедрить и протестировать удар по скорости рендеринга 11
- 25. 12
- 26. Chrome Firefox Opera IE 13
- 27. 14
- 28. CSS3 Не фиксим png24 В разных браузерах может различаться порядок блоков 14
- 29. FF IE 15
- 30. нет уголка FF IE 15
- 31. нет png24 fix нет уголка FF IE 15
- 32. border-radius + before: нет png24 fix нет уголка FF IE 15
- 33. border-radius + before: нет png24 fix нет уголка FF IE 16
- 34. 17
- 35. FF IE 18
- 36. FF IE placeholder 18
- 37. FF IE placeholder CSS3 градиент 18
- 38. FF IE placeholder картинка CSS3 градиент 18
- 39. 19
- 40. 19
- 41. + transition 19
- 42. + transition 19
- 45. 22
- 46. 23
- 47. 24
- 48. 25
- 49. .example-shadow { position: relative; } 26
- 50. .example-shadow { position: relative; } .example-shadow:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; content: “”; } 27
- 51. .example-shadow { position: relative; } .example-shadow:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: block; content: “”; } 28
- 52. .example-shadow { position: relative; } .example-shadow:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: block; content: “”; box-shadow: 0 0 14px #fff; } 29
- 53. 30
- 54. 31
- 55. 31
- 56. 32
- 57. 33
- 58. 34
- 59. .b-button { position: relative; display: -moz-inline-box; display: inline-block; width: 100px; height: 50px; background: url(sprite.png) repeat-x; } .b-button:hover { background-position: 0 100%; } 35
- 60. .b-button:before, .b-button:after { position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 1; content: ''; opacity: 1; transition: opacity 0.2s linear; background: url(sprite.png) repeat-x; } .b-button:after { opacity: 0; background-position: 0 100%; } .b-button:hover:before { opacity: 0 !important; } 36 .b-button:hover:after { opacity: 1 !important; }
- 61. Тачевая вёрстка
- 62. 38
- 63. iOS Android 39
- 64. Подробнее через несколько минут 40
- 65. Каждый верстальщик Яндекса будет заниматься тачевой вёрсткой 41
- 66. Производительность Хочется всё и сразу 42
- 67. На сервере 43
- 68. На сервере • Обфускация 43
- 69. На сервере • Обфускация • Уменьшение количества запросов к серверу 43
- 70. На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок 43
- 71. На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок • Правильные http-заголовки 43
- 72. На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок • Правильные http-заголовки 43
- 73. На клиенте 44
- 74. На клиенте • Не использовать каскад 44
- 75. На клиенте • Не использовать каскад • Не селектить по тегам 44
- 76. На клиенте • Не использовать каскад • Не селектить по тегам • Растягивать DOM вширь, а не вглубь 44
- 77. Конкретнее 45
- 78. Конкретнее • png24 спрайты с фильтром тормозят в IE 45
- 79. Конкретнее • png24 спрайты с фильтром тормозят в IE • много селекторов + способны повесить FF 45
- 80. Конкретнее • png24 спрайты с фильтром тормозят в IE • много селекторов + способны повесить FF • box-shadow inset с шириной > 10px тормозит 45
- 81. Конкретнее • png24 спрайты с фильтром тормозят в IE • много селекторов + способны повесить FF • box-shadow inset с шириной > 10px тормозит • transition цвета даёт большую нагрузку на процессор 45
- 82. 46
- 83. Обнаружили и исследовали 47
- 84. Исследовали и обнаружили 47
- 85. Исследование 48
- 86. Исследование • Влияние CSS-свойств на скорость рендеринга 48
- 87. Исследование • Влияние CSS-свойств на скорость рендеринга • Влияние сочетаний свойств, комбинации 48
- 88. Исследование • Влияние CSS-свойств на скорость рендеринга • Влияние сочетаний свойств, комбинации • Исследования скорости рендеринга графики в разных форматах 48
- 89. Выяснили 49
- 90. Выяснили • CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях 49
- 91. Выяснили • CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях • data:uri картинки рендерятся так же быстро, как и обычные картинки 49
- 92. Выяснили • CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях • data:uri картинки рендерятся так же быстро, как и обычные картинки • Псевдоселекторы быстрее с указанием имени элемента (:link → a:link) 49
- 93. Доклад Михаила Корепанова на Я.Субботнике в Киеве http://video.yandex.ru/users/ya-events/view/275/ 50
- 94. Куда мы идём? 51
- 95. Куда мы идём? • Новые технологии и graceful degradation 51
- 96. Куда мы идём? • Новые технологии и graceful degradation • Тачевая вёрстка 51
- 97. Куда мы идём? • Новые технологии и graceful degradation • Тачевая вёрстка • Ускорение рендеринга 51
- 99. Самоускорение
- 100. CodeStyle 54
- 101. Группировка CSS-свойств • шрифт • позиционирование • отображение • размеры • таблицы/списки • текст • цвета/эффекты 55
- 102. .b-switcher__tumbler { width: 33px; height: 13px; margin: 0 5px; display: -moz-inline-box; display: inline-block; vertical-align: middle; text-align: left; border: 1px solid #bbb5b3; background: #a1a1a1; -moz-border-radius: 3px; /* Firefox */ -webkit-border-radius: 3px; /* Safari, Chrome */ border-radius: 3px; -moz-box-shadow: inset -2px 2px 3px 0 #666; /* Firefox */ -webkit-box-shadow: inset -2px 2px 3px 0 #666; /* Safari, Chrome */ box-shadow: inset -2px 2px 3px 0 #666; }
- 103. CSSComb http://csscomb.ru/ 57
- 104. ZenCoding 58
- 105. ZenHTML 59
- 106. ZenHTML div.my1 + div.my2 > ul > li * 5 59
- 107. ZenHTML <div class='my1'></div> <div class='my2'> <ul> <li></li><li></li><li></li><li></li><li></li> </ul> </div> 59
- 108. ZenCSS po:r → position: relative po:a → position: absolute po:s → position: static f:l → float: left f:r → float: right 60
- 109. ZenCSS po:r 61
- 110. ZenCSS po r 61
- 111. ZenCSS por → position: relative poa → position: absolute pos → position: static fl → float: left fr → float: right 62
- 112. HayakuBundle po:r + por 63
- 113. HayakuBundle por;fl;tal;m0 64
- 114. HayakuBundle position: relative; float: left; text-align: left; margin: 0; 64
- 115. HayakuBundle margin-left: 10px margin-left: 1.1em 65
- 116. HayakuBundle margin-left: 10px 1 margin-left: 1.1em 65
- 117. HayakuBundle margin-left: 10px 2 margin-left: 1.1em 65
- 118. HayakuBundle https://github.com/kizu/Hayaku.tmbundle https://twitter.com/#!/HayakuBundle 66
- 119. BEM https://github.com/bem 67