Доклад Олега Мохова на я.субботнике обсуждает проблемы верстки в веб-разработке, акцентируя внимание на производительности и кроссбраузерной совместимости. Он предлагает различные решения для оптимизации рендеринга, а также расматривает использование CSS3 и HTML5 свойств. Доклад также затрагивает аспекты тачевой верстки и важность правильного построения DOM.

1. Куда идём мы с Пятачком, или О
том, куда движется вёрстка и
верстальщики Яндекса.
Олег Мохов
Верстальщик
Я.Субботник, Екатеринбург, 2 июля 2011 года

6. 6

7. Вышел в 2001 году
Очень много проблем и
неподдерживаемых решений
Доля в рунете 2.6%
и продолжает снижаться
6

8. Вышел в 2006 году
Проблемы почти те же
Доля в рунете 5.7%
7

9. 8

10. FF4 IE
8

11. 9

12. 4 элемента
9

13. 4 элемента
разные решения в разных
ситуациях
9

14. 4 элемента
разные решения в разных
ситуациях
время на внедрить и
протестировать
9

15. 4 элемента
разные решения в разных
ситуациях
время на внедрить и
протестировать
удар по скорости рендеринга
9

16. 10

17. Graceful degradation
11

18. Chrome Firefox Opera IE
12

19. 13

20. CSS3 свойства
HTML5
Не фиксим png24
В разных браузерах может
различаться порядок блоков
13

21. CSS3
14

22. CSS3 border-radius
border-image
gradients
transitions
flexbox
...
14

23. FF IE
15

24. border-radius + before:
FF IE
15

25. border-radius + before:
нет уголка
FF IE
15

26. border-radius + before: нет png24 fix
нет уголка
FF IE
15

27. 16

28. FF IE
17

29. FF IE
placeholder
17

30. 18

31. 18

32. + transition
18

33. + transition
18

34. Сервисом можно
пользоваться!

35. Доклад Олега Мохова на
Я.Субботнике в Киеве
http://video.yandex.ru/users/ya-events/view/276/
20

36. Тачевая вёрстка

37. 22

38. iOS Android
23

39. Доклад Владимира Гриненко
на Я.Субботнике в Киеве
http://video.yandex.ru/users/ya-events/view/277/
24

40. Каждый верстальщик Яндекса
будет заниматься
тачевой вёрсткой
25

41. Хочется всё и сразу
26

42. Производительность
Хочется всё и сразу
26

43. На сервере
27

44. На сервере
• Обфускация
27

45. На сервере
• Обфускация
• Уменьшение количества запросов к серверу
27

46. На сервере
• Обфускация
• Уменьшение количества запросов к серверу
• Оптимизация картинок
27

47. На сервере
• Обфускация
• Уменьшение количества запросов к серверу
• Оптимизация картинок
• Правильные http-заголовки
27

48. На сервере
• Обфускация
• Уменьшение количества запросов к серверу
• Оптимизация картинок
• Правильные http-заголовки
27

49. На клиенте
28

50. На клиенте
• Не использовать каскад
28

51. На клиенте
• Не использовать каскад
• Не селектить по тегам
28

52. На клиенте
• Не использовать каскад
• Не селектить по тегам
• Растягивать DOM вширь, а не вглубь
28

53. Конкретнее
29

54. Конкретнее
• png24 спрайты с фильтром тормозят в IE
29

55. Конкретнее
• png24 спрайты с фильтром тормозят в IE
• много селекторов + способны повесить FF
29

56. Конкретнее
• png24 спрайты с фильтром тормозят в IE
• много селекторов + способны повесить FF
• box-shadow inset с шириной > 10px тормозит
29

57. Конкретнее
• png24 спрайты с фильтром тормозят в IE
• много селекторов + способны повесить FF
• box-shadow inset с шириной > 10px тормозит
• transition цвета даёт большую нагрузку на
процессор
29

58. 30

59. Обнаружили и
исследовали
31

60. Исследовали и
обнаружили
31

61. Чего исследовать?
32

62. Чего исследовать?
• CSS-свойства
32

63. Чего исследовать?
• CSS-свойства
• Сочетание свойств друг с другом
32

64. Чего исследовать?
• CSS-свойства
• Сочетание свойств друг с другом
• Как правильно строить DOM
32

65. Чего исследовать?
• CSS-свойства
• Сочетание свойств друг с другом
• Как правильно строить DOM
• Разные форматы графики
32

66. Выяснили
33

67. Выяснили
• CSS3 свойства зачастую сильно быстрее экстра
разметки, но не во всех случаях
33

68. Выяснили
• CSS3 свойства зачастую сильно быстрее экстра
разметки, но не во всех случаях
• data:uri картинки рендерятся так же быстро,
как и обычные картинки
33

69. Выяснили
• CSS3 свойства зачастую сильно быстрее экстра
разметки, но не во всех случаях
• data:uri картинки рендерятся так же быстро,
как и обычные картинки
• Псевдоселекторы быстрее с указанием имени
элемента (.link:hover → a.link:hover)
33

70. Доклад Михаила Корепанова
на Я.Субботнике в Киеве
http://video.yandex.ru/users/ya-events/view/275/
34

71. Куда мы идём?
35

72. Куда мы идём?
• Новые технологии и graceful degradation
35

73. Куда мы идём?
• Новые технологии и graceful degradation
• Тачевая вёрстка
35

74. Куда мы идём?
• Новые технологии и graceful degradation
• Тачевая вёрстка
• Ускорение рендеринга
35

76. Самоускорение

77. CodeStyle
38

78. Группировка
CSS-свойств
• шрифт
• позиционирование
• отображение
• размеры
• таблицы/списки
• текст
• цвета/эффекты
39

79. .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;
}

80. CSSComb
http://csscomb.ru/
41

81. ZenCoding
42

82. ZenHTML
43

83. ZenHTML
div.my1 + div.my2 > ul > li * 5
43

84. ZenHTML
<div class='my1'></div>
<div class='my2'>
<ul>
<li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
43

85. ZenCSS
po:r → position: relative
po:a → position: absolute
po:s → position: static
f:l → float: left
f:r → float: right
44

86. ZenCSS
po:r
45

87. ZenCSS
por
46

88. ZenCSS
por → position: relative
poa → position: absolute
pos → position: static
fl → float: left
fr → float: right
47

89. HayakuBundle
po:r + por
48

90. HayakuBundle
por;fl;tal;m0
49

91. HayakuBundle
position: relative;
float: left;
text-align: left;
margin: 0;
49

92. HayakuBundle
margin-left: 10px
margin-left: 1.1em
50

93. HayakuBundle
margin-left: 10px
1
margin-left: 1.1em
50

94. HayakuBundle
margin-left: 10px
2
margin-left: 1.1em
50

95. HayakuBundle
https://github.com/kizu/Hayaku.tmbundle
https://twitter.com/#!/HayakuBundle
51

96. Олег Мохов
верстальщик
mokhov@yandex-team.ru
twitter: olmokhov