Олег Мохов "Куда движется вёрстка и верстальщики...
DESCRIPTION
15 октября 2011, Я.Субботник в Алматы Олег Мохов "Куда движется вёрстка и верстальщики Яндекса" О докладе: Стремительное развитие браузеров и технологий требует от верстальщиков высокой скорости изучения и внедрения новых возможностей в существующую вёрстку. В докладе будет показано, как без изменения HTML можно значительно улучшить «старую вёрстку», а также куда смотрят верстальщики, кроме чейнджлогов браузеров, и чем ещё, кроме вёрстки, они занимаются.TRANSCRIPT
![Page 1: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/1.jpg)
Куда движется вёрстка и верстальщики Яндекса.
Я.Субботник, Алматы, 15 октября 2011 года
Разработчик интерфейсовОлег Мохов
![Page 2: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/2.jpg)
![Page 3: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/3.jpg)
![Page 4: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/4.jpg)
![Page 5: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/5.jpg)
![Page 6: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/6.jpg)
![Page 7: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/7.jpg)
![Page 8: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/8.jpg)
![Page 9: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/9.jpg)
![Page 10: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/10.jpg)
6
![Page 11: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/11.jpg)
6
![Page 12: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/12.jpg)
Вышел в 2001 году
Очень много проблем и неподдерживаемых решений
Доля в рунете 1.7%и продолжает снижаться
6
![Page 13: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/13.jpg)
Вышел в 2001 году
Очень много проблем и неподдерживаемых решений
Доля в рунете 1.7%и продолжает снижаться
6
![Page 14: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/14.jpg)
Вышел в 2006 году
Проблемы почти те же
Доля в рунете 4.7%
7
![Page 15: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/15.jpg)
8
IE8 Firefox 3
10.4% 6.5%
![Page 16: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/16.jpg)
¹/₄
![Page 17: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/17.jpg)
10
![Page 18: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/18.jpg)
IE6Firefox 710
![Page 19: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/19.jpg)
1020012011
![Page 20: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/20.jpg)
11
![Page 21: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/21.jpg)
4 элемента
11
![Page 22: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/22.jpg)
4 элемента
разные решения в разных ситуациях
11
![Page 23: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/23.jpg)
4 элемента
разные решения в разных ситуациях
время на внедрить и протестировать
11
![Page 24: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/24.jpg)
4 элемента
разные решения в разных ситуациях
время на внедрить и протестировать
удар по скорости рендеринга
11
![Page 25: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/25.jpg)
12
![Page 26: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/26.jpg)
IEOperaFirefoxChrome
13
![Page 27: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/27.jpg)
14
![Page 28: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/28.jpg)
CSS3
Не фиксим png24
В разных браузерах может различаться порядок блоков
14
![Page 29: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/29.jpg)
FF IE15
![Page 30: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/30.jpg)
нет уголка
FF IE15
![Page 31: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/31.jpg)
нет png24 fix
нет уголка
FF IE15
![Page 32: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/32.jpg)
border-radius + before: нет png24 fix
нет уголка
FF IE15
![Page 33: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/33.jpg)
border-radius + before: нет png24 fix
нет уголка
FF IE16
![Page 34: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/34.jpg)
17
![Page 35: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/35.jpg)
18
FF IE
![Page 36: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/36.jpg)
placeholder
18
FF IE
![Page 37: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/37.jpg)
placeholder
18
FF IE
CSS3 градиент
![Page 38: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/38.jpg)
placeholder
18
FF IE
CSS3 градиенткартинка
![Page 39: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/39.jpg)
19
![Page 40: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/40.jpg)
19
![Page 41: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/41.jpg)
+ transition19
![Page 42: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/42.jpg)
+ transition19
![Page 43: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/43.jpg)
Сервисом можно пользоваться!
![Page 44: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/44.jpg)
![Page 45: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/45.jpg)
22
![Page 46: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/46.jpg)
23
![Page 47: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/47.jpg)
24
![Page 48: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/48.jpg)
25
![Page 49: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/49.jpg)
.example-shadow{ position: relative;}
26
![Page 50: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/50.jpg)
.example-shadow{ position: relative;}
.example-shadow:before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; content: “”;}
27
![Page 51: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/51.jpg)
.example-shadow{ position: relative;}
.example-shadow:before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: block; content: “”;}
28
![Page 52: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/52.jpg)
.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
![Page 53: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/53.jpg)
30
![Page 54: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/54.jpg)
31
![Page 55: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/55.jpg)
31
![Page 56: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/56.jpg)
32
![Page 57: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/57.jpg)
33
![Page 58: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/58.jpg)
34
![Page 59: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/59.jpg)
35
.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%;}
![Page 60: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/60.jpg)
36
.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; }
.b-button:hover:after { opacity: 1 !important; }
![Page 61: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/61.jpg)
Тачевая вёрстка
![Page 62: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/62.jpg)
38
![Page 63: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/63.jpg)
39
iOS Android
![Page 64: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/64.jpg)
Подробнее через несколько минут
40
![Page 65: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/65.jpg)
Каждый верстальщик Яндексабудет заниматься тачевой вёрсткой
41
![Page 66: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/66.jpg)
Хочется всё и сразу
42
Производительность
![Page 67: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/67.jpg)
На сервере
43
![Page 68: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/68.jpg)
На сервере
•Обфускация
43
![Page 69: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/69.jpg)
На сервере
•Обфускация• Уменьшение количества запросов к серверу
43
![Page 70: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/70.jpg)
На сервере
•Обфускация• Уменьшение количества запросов к серверу• Оптимизация картинок
43
![Page 71: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/71.jpg)
На сервере
•Обфускация• Уменьшение количества запросов к серверу• Оптимизация картинок• Правильные http-заголовки
43
![Page 72: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/72.jpg)
На сервере
•Обфускация• Уменьшение количества запросов к серверу• Оптимизация картинок• Правильные http-заголовки
43
![Page 73: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/73.jpg)
На клиенте
44
![Page 74: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/74.jpg)
На клиенте
• Не использовать каскад
44
![Page 75: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/75.jpg)
На клиенте
• Не использовать каскад• Не селектить по тегам
44
![Page 76: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/76.jpg)
На клиенте
• Не использовать каскад• Не селектить по тегам• Растягивать DOM вширь, а не вглубь
44
![Page 77: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/77.jpg)
Конкретнее
45
![Page 78: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/78.jpg)
Конкретнее
• png24 спрайты с фильтром тормозят в IE
45
![Page 79: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/79.jpg)
Конкретнее
• png24 спрайты с фильтром тормозят в IE
• много селекторов + способны повесить FF
45
![Page 80: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/80.jpg)
Конкретнее
• png24 спрайты с фильтром тормозят в IE
• много селекторов + способны повесить FF
• box-shadow inset с шириной > 10px тормозит
45
![Page 81: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/81.jpg)
Конкретнее
• png24 спрайты с фильтром тормозят в IE
• много селекторов + способны повесить FF
• box-shadow inset с шириной > 10px тормозит
• transition цвета даёт большую нагрузку на процессор
45
![Page 82: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/82.jpg)
46
![Page 83: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/83.jpg)
исследовалиОбнаружили и
47
![Page 84: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/84.jpg)
Исследовали и обнаружили
и
47
![Page 85: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/85.jpg)
Исследование
48
![Page 86: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/86.jpg)
Исследование
• Влияние CSS-свойств на скорость рендеринга
48
![Page 87: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/87.jpg)
Исследование
• Влияние CSS-свойств на скорость рендеринга
• Влияние сочетаний свойств, комбинации
48
![Page 88: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/88.jpg)
Исследование
• Влияние CSS-свойств на скорость рендеринга
• Влияние сочетаний свойств, комбинации• Исследования скорости рендеринга графики в разных форматах
48
![Page 89: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/89.jpg)
Выяснили
49
![Page 90: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/90.jpg)
Выяснили
• CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях
49
![Page 91: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/91.jpg)
Выяснили
• CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях
• data:uri картинки рендерятся так же быстро, как и обычные картинки
49
![Page 92: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/92.jpg)
Выяснили
• CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях
• data:uri картинки рендерятся так же быстро, как и обычные картинки
• Псевдоселекторы быстрее с указанием имени элемента (:link → a:link)
49
![Page 93: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/93.jpg)
Доклад Михаила Корепанова на Я.Субботнике в Киеве
http://video.yandex.ru/users/ya-events/view/275/
50
![Page 94: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/94.jpg)
Куда мы идём?
51
![Page 95: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/95.jpg)
• Новые технологии и graceful degradation
Куда мы идём?
51
![Page 96: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/96.jpg)
• Новые технологии и graceful degradation
• Тачевая вёрстка
Куда мы идём?
51
![Page 97: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/97.jpg)
• Новые технологии и graceful degradation
• Тачевая вёрстка• Ускорение рендеринга
Куда мы идём?
51
![Page 98: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/98.jpg)
![Page 99: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/99.jpg)
Самоускорение
![Page 100: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/100.jpg)
CodeStyle
54
![Page 101: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/101.jpg)
Группировка CSS-свойств• шрифт• позиционирование• отображение• размеры• таблицы/списки
• текст• цвета/эффекты
55
![Page 102: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/102.jpg)
.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;}
![Page 104: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/104.jpg)
ZenCoding
58
![Page 105: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/105.jpg)
ZenHTML
59
![Page 106: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/106.jpg)
ZenHTML
div.my1 + div.my2 > ul > li * 5
59
![Page 107: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/107.jpg)
<div class='my1'></div><div class='my2'> <ul> <li></li><li></li><li></li><li></li><li></li> </ul></div>
ZenHTML
59
![Page 108: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/108.jpg)
ZenCSS
po:r → position: relativepo:a → position: absolute
po:s → position: staticf:l → float: left
f:r → float: right
60
![Page 109: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/109.jpg)
ZenCSS
po r:
61
![Page 110: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/110.jpg)
ZenCSS
por
61
![Page 111: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/111.jpg)
ZenCSS
por → position: relativepoa → position: absolute
pos → position: staticfl → float: left
fr → float: right
62
![Page 112: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/112.jpg)
HayakuBundle
63
po:r + por
![Page 113: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/113.jpg)
HayakuBundle
por;fl;tal;m0
64
![Page 114: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/114.jpg)
position: relative;float: left;text-align: left;margin: 0;
HayakuBundle
64
![Page 115: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/115.jpg)
margin-left: 10pxmargin-left: 1.1em
HayakuBundle
65
![Page 116: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/116.jpg)
margin-left: 10pxmargin-left: 1.1em
HayakuBundle
65
1
![Page 117: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/117.jpg)
margin-left: 10pxmargin-left: 1.1em
HayakuBundle
65
2
![Page 118: Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"](https://reader034.vdocuments.pub/reader034/viewer/2022051513/54656704af7959c04e8b4cf3/html5/thumbnails/118.jpg)
HayakuBundlehttps://github.com/kizu/Hayaku.tmbundle
https://twitter.com/#!/HayakuBundle
66