1.
Куда движется вёрстка и
верстальщики Яндекса.
Олег Мохов
Разработчик интерфейсов
Я.Субботник, Алматы, 15 октября 2011 года

2.
6

3.
6

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

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

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

7.
IE8 Firefox 3
10.4% 6.5%
8

8.
¹/₄

9.
10

10.
Firefox 7 IE6
10

11.
2011 2001
10

12.
11

13.
4 элемента
11

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

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

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

17.
12

18.
Chrome Firefox Opera IE
13

19.
14

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

21.
FF IE
15

22.
нет уголка
FF IE
15

23.
нет png24 fix
нет уголка
FF IE
15

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

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

26.
17

27.
FF IE
18

28.
FF IE
placeholder
18

29.
FF IE
placeholder
CSS3 градиент
18

30.
FF IE
placeholder картинка
CSS3 градиент
18

31.
19

32.
19

33.
+ transition
19

34.
+ transition
19

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

36.
22

37.
23

38.
24

39.
25

40.
.example-shadow
{
position: relative;
}
26

41.
.example-shadow
{
position: relative;
}
.example-shadow:before
{
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
display: block;
content: “”;
}
27

42.
.example-shadow
{
position: relative;
}
.example-shadow:before
{
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
z-index: -1;
display: block;
content: “”;
}
28

43.
.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

44.
30

45.
31

46.
31

47.
32

48.
33

49.
34

50.
.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

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

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

53.
38

54.
iOS Android
39

55.
Подробнее через
несколько минут
40

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

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

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

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

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

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

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

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

64.
На клиенте
44

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

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

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

68.
Конкретнее
45

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

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

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

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

73.
46

74.
Обнаружили и
исследовали
47

75.
Исследовали и
обнаружили
47

76.
Исследование
48

77.
Исследование
• Влияние CSS-свойств на скорость рендеринга
48

78.
Исследование
• Влияние CSS-свойств на скорость рендеринга
• Влияние сочетаний свойств, комбинации
48

79.
Исследование
• Влияние CSS-свойств на скорость рендеринга
• Влияние сочетаний свойств, комбинации
• Исследования скорости рендеринга графики в
разных форматах
48

80.
Выяснили
49

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

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

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

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

85.
Куда мы идём?
51

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

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

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

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

90.
CodeStyle
54

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

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

93.
CSSComb
http://csscomb.ru/
57

94.
ZenCoding
58

95.
ZenHTML
59

96.
ZenHTML
div.my1 + div.my2 > ul > li * 5
59

97.
ZenHTML
<div class='my1'></div>
<div class='my2'>
<ul>
<li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
59

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

99.
ZenCSS
po:r
61

100.
ZenCSS
po r
61

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

102.
HayakuBundle
po:r + por
63

103.
HayakuBundle
por;fl;tal;m0
64

104.
HayakuBundle
position: relative;
float: left;
text-align: left;
margin: 0;
64

105.
HayakuBundle
margin-left: 10px
margin-left: 1.1em
65

106.
HayakuBundle
margin-left: 10px
1
margin-left: 1.1em
65

107.
HayakuBundle
margin-left: 10px
2
margin-left: 1.1em
65

108.
HayakuBundle
https://github.com/kizu/Hayaku.tmbundle
https://twitter.com/#!/HayakuBundle
66

109.
BEM
https://github.com/bem
67

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