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

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

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

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

120. Олег Мохов
Разработчик интерфейсов
mokhov@yandex-team.ru
twitter: olmokhov