Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"

•
•
Yandex
Yandex

15 октября 2011, Я.Субботник в Алматы Олег Мохов "Куда движется вёрстка и верстальщики Яндекса" О докладе: Стремительное развитие браузеров и технологий требует от верстальщиков высокой скорости изучения и внедрения новых возможностей в существующую вёрстку. В докладе будет показано, как без изменения HTML можно значительно улучшить «старую вёрстку», а также куда смотрят верстальщики, кроме чейнджлогов браузеров, и чем ещё, кроме вёрстки, они занимаются.

1 of 120
Download to read offline
Куда движется вёрстка и верстальщики Яндекса. Олег Мохов Разработчик интерфейсов Я.Субботник, Алматы, 15 октября 2011 года
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
6
6
Вышел в 2001 году Очень много проблем и неподдерживаемых решений Доля в рунете 1.7% и продолжает снижаться 6
Вышел в 2001 году Очень много проблем и неподдерживаемых решений Доля в рунете 1.7% и продолжает снижаться 6
Вышел в 2006 году Проблемы почти те же Доля в рунете 4.7% 7
IE8 Firefox 3 10.4% 6.5% 8
¹/₄
10
Firefox 7 IE6 10
2011 2001 10
11
4 элемента 11
4 элемента разные решения в разных ситуациях 11
4 элемента разные решения в разных ситуациях время на внедрить и протестировать 11
4 элемента разные решения в разных ситуациях время на внедрить и протестировать удар по скорости рендеринга 11
12
Chrome Firefox Opera IE 13
14
CSS3 Не фиксим png24 В разных браузерах может различаться порядок блоков 14
FF IE 15
нет уголка FF IE 15
нет png24 fix нет уголка FF IE 15
border-radius + before: нет png24 fix нет уголка FF IE 15
border-radius + before: нет png24 fix нет уголка FF IE 16
17
FF IE 18
FF IE placeholder 18
FF IE placeholder CSS3 градиент 18
FF IE placeholder картинка CSS3 градиент 18
19
19
+ transition 19
+ transition 19
Сервисом можно пользоваться!
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
22
23
24
25
.example-shadow { position: relative; } 26
.example-shadow { position: relative; } .example-shadow:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; content: “”; } 27
.example-shadow { position: relative; } .example-shadow:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: block; content: “”; } 28
.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
30
31
31
32
33
34
.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
.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; }
Тачевая вёрстка
38
iOS Android 39
Подробнее через несколько минут 40
Каждый верстальщик Яндекса будет заниматься тачевой вёрсткой 41
Производительность Хочется всё и сразу 42
На сервере 43
На сервере • Обфускация 43
На сервере • Обфускация • Уменьшение количества запросов к серверу 43
На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок 43
На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок • Правильные http-заголовки 43
На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок • Правильные http-заголовки 43
На клиенте 44
На клиенте • Не использовать каскад 44
На клиенте • Не использовать каскад • Не селектить по тегам 44
На клиенте • Не использовать каскад • Не селектить по тегам • Растягивать DOM вширь, а не вглубь 44
Конкретнее 45
Конкретнее • png24 спрайты с фильтром тормозят в IE 45
Конкретнее • png24 спрайты с фильтром тормозят в IE • много селекторов + способны повесить FF 45
Конкретнее • png24 спрайты с фильтром тормозят в IE • много селекторов + способны повесить FF • box-shadow inset с шириной > 10px тормозит 45
Конкретнее • png24 спрайты с фильтром тормозят в IE • много селекторов + способны повесить FF • box-shadow inset с шириной > 10px тормозит • transition цвета даёт большую нагрузку на процессор 45
46
Обнаружили и исследовали 47
Исследовали и обнаружили 47
Исследование 48
Исследование • Влияние CSS-свойств на скорость рендеринга 48
Исследование • Влияние CSS-свойств на скорость рендеринга • Влияние сочетаний свойств, комбинации 48
Исследование • Влияние CSS-свойств на скорость рендеринга • Влияние сочетаний свойств, комбинации • Исследования скорости рендеринга графики в разных форматах 48
Выяснили 49
Выяснили • CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях 49
Выяснили • CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях • data:uri картинки рендерятся так же быстро, как и обычные картинки 49
Выяснили • CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях • data:uri картинки рендерятся так же быстро, как и обычные картинки • Псевдоселекторы быстрее с указанием имени элемента (:link → a:link) 49
Доклад Михаила Корепанова на Я.Субботнике в Киеве http://video.yandex.ru/users/ya-events/view/275/ 50
Куда мы идём? 51
Куда мы идём? • Новые технологии и graceful degradation 51
Куда мы идём? • Новые технологии и graceful degradation • Тачевая вёрстка 51
Куда мы идём? • Новые технологии и graceful degradation • Тачевая вёрстка • Ускорение рендеринга 51
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
Самоускорение
CodeStyle 54
Группировка CSS-свойств • шрифт • позиционирование • отображение • размеры • таблицы/списки • текст • цвета/эффекты 55
.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; }
CSSComb http://csscomb.ru/ 57
ZenCoding 58
ZenHTML 59
ZenHTML div.my1 + div.my2 > ul > li * 5 59
ZenHTML <div class='my1'></div> <div class='my2'> <ul> <li></li><li></li><li></li><li></li><li></li> </ul> </div> 59
ZenCSS po:r → position: relative po:a → position: absolute po:s → position: static f:l → float: left f:r → float: right 60
ZenCSS po:r 61
ZenCSS po r 61
ZenCSS por → position: relative poa → position: absolute pos → position: static fl → float: left fr → float: right 62
HayakuBundle po:r + por 63
HayakuBundle por;fl;tal;m0 64
HayakuBundle position: relative; float: left; text-align: left; margin: 0; 64
HayakuBundle margin-left: 10px margin-left: 1.1em 65
HayakuBundle margin-left: 10px 1 margin-left: 1.1em 65
HayakuBundle margin-left: 10px 2 margin-left: 1.1em 65
HayakuBundle https://github.com/kizu/Hayaku.tmbundle https://twitter.com/#!/HayakuBundle 66
BEM https://github.com/bem 67
Олег Мохов Разработчик интерфейсов mokhov@yandex-team.ru twitter: olmokhov

More Related Content

Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"

  • 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
  • 17. 10
  • 18. Firefox 7 IE6 10
  • 19. 2011 2001 10
  • 20. 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
  • 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
  • 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; }
  • 62. 38
  • 63. iOS Android 39
  • 64. Подробнее через несколько минут 40
  • 65. Каждый верстальщик Яндекса будет заниматься тачевой вёрсткой 41
  • 68. На сервере • Обфускация 43
  • 69. На сервере • Обфускация • Уменьшение количества запросов к серверу 43
  • 70. На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок 43
  • 71. На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок • Правильные http-заголовки 43
  • 72. На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок • Правильные http-заголовки 43
  • 74. На клиенте • Не использовать каскад 44
  • 75. На клиенте • Не использовать каскад • Не селектить по тегам 44
  • 76. На клиенте • Не использовать каскад • Не селектить по тегам • Растягивать DOM вширь, а не вглубь 44
  • 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
  • 86. Исследование • Влияние CSS-свойств на скорость рендеринга 48
  • 87. Исследование • Влияние CSS-свойств на скорость рендеринга • Влияние сочетаний свойств, комбинации 48
  • 88. Исследование • Влияние CSS-свойств на скорость рендеринга • Влияние сочетаний свойств, комбинации • Исследования скорости рендеринга графики в разных форматах 48
  • 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
  • 95. Куда мы идём? • Новые технологии и graceful degradation 51
  • 96. Куда мы идём? • Новые технологии и graceful degradation • Тачевая вёрстка 51
  • 97. Куда мы идём? • Новые технологии и graceful degradation • Тачевая вёрстка • Ускорение рендеринга 51
  • 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
  • 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