Олег Мохов "Куда идём мы с Пятачком, или О том, куда...
TRANSCRIPT
![Page 1: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/1.jpg)
Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса.
Я.Субботник, Екатеринбург, 2 июля 2011 года
ВерстальщикОлег Мохов
![Page 2: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/2.jpg)
![Page 3: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/3.jpg)
![Page 4: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/4.jpg)
![Page 5: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/5.jpg)
![Page 6: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/6.jpg)
6
![Page 7: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/7.jpg)
Вышел в 2001 году
Очень много проблем и неподдерживаемых решений
Доля в рунете 2.6%и продолжает снижаться
6
![Page 8: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/8.jpg)
Вышел в 2006 году
Проблемы почти те же
Доля в рунете 5.7%
7
![Page 9: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/9.jpg)
8
![Page 10: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/10.jpg)
IEFF48
![Page 11: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/11.jpg)
9
![Page 12: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/12.jpg)
4 элемента
9
![Page 13: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/13.jpg)
4 элемента
разные решения в разных ситуациях
9
![Page 14: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/14.jpg)
4 элемента
разные решения в разных ситуациях
время на внедрить и протестировать
9
![Page 15: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/15.jpg)
4 элемента
разные решения в разных ситуациях
время на внедрить и протестировать
удар по скорости рендеринга
9
![Page 16: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/16.jpg)
10
![Page 17: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/17.jpg)
Graceful degradation
11
![Page 18: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/18.jpg)
IEOperaFirefoxChrome
12
![Page 19: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/19.jpg)
13
![Page 20: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/20.jpg)
CSS3
HTML5
Не фиксим png24
В разных браузерах может различаться порядок блоков
свойства
13
![Page 21: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/21.jpg)
CSS3
14
![Page 22: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/22.jpg)
CSS3 border-radius
border-image
gradients
transitions
flexbox
...
14
![Page 23: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/23.jpg)
FF IE15
![Page 24: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/24.jpg)
border-radius + before:
FF IE15
![Page 25: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/25.jpg)
border-radius + before:
нет уголка
FF IE15
![Page 26: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/26.jpg)
border-radius + before: нет png24 fix
нет уголка
FF IE15
![Page 27: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/27.jpg)
16
![Page 28: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/28.jpg)
17
FF IE
![Page 29: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/29.jpg)
placeholder
17
FF IE
![Page 30: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/30.jpg)
18
![Page 31: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/31.jpg)
18
![Page 32: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/32.jpg)
+ transition18
![Page 33: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/33.jpg)
+ transition18
![Page 34: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/34.jpg)
Сервисом можно пользоваться!
![Page 35: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/35.jpg)
Доклад Олега Мохова на Я.Субботнике в Киевеhttp://video.yandex.ru/users/ya-events/view/276/
20
![Page 36: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/36.jpg)
Тачевая вёрстка
![Page 37: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/37.jpg)
22
![Page 38: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/38.jpg)
23
iOS Android
![Page 39: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/39.jpg)
Доклад Владимира Гриненко на Я.Субботнике в Киеве
http://video.yandex.ru/users/ya-events/view/277/
24
![Page 40: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/40.jpg)
Каждый верстальщик Яндексабудет заниматься тачевой вёрсткой
25
![Page 41: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/41.jpg)
Хочется всё и сразу
26
![Page 42: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/42.jpg)
Хочется всё и сразу
26
Производительность
![Page 43: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/43.jpg)
На сервере
27
![Page 44: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/44.jpg)
На сервере
•Обфускация
27
![Page 45: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/45.jpg)
На сервере
•Обфускация• Уменьшение количества запросов к серверу
27
![Page 46: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/46.jpg)
На сервере
•Обфускация• Уменьшение количества запросов к серверу• Оптимизация картинок
27
![Page 47: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/47.jpg)
На сервере
•Обфускация• Уменьшение количества запросов к серверу• Оптимизация картинок• Правильные http-заголовки
27
![Page 48: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/48.jpg)
На сервере
•Обфускация• Уменьшение количества запросов к серверу• Оптимизация картинок• Правильные http-заголовки
27
![Page 49: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/49.jpg)
На клиенте
28
![Page 50: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/50.jpg)
На клиенте
• Не использовать каскад
28
![Page 51: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/51.jpg)
На клиенте
• Не использовать каскад• Не селектить по тегам
28
![Page 52: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/52.jpg)
На клиенте
• Не использовать каскад• Не селектить по тегам• Растягивать DOM вширь, а не вглубь
28
![Page 53: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/53.jpg)
Конкретнее
29
![Page 54: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/54.jpg)
Конкретнее
• png24 спрайты с фильтром тормозят в IE
29
![Page 55: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/55.jpg)
Конкретнее
• png24 спрайты с фильтром тормозят в IE
• много селекторов + способны повесить FF
29
![Page 56: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/56.jpg)
Конкретнее
• png24 спрайты с фильтром тормозят в IE
• много селекторов + способны повесить FF
• box-shadow inset с шириной > 10px тормозит
29
![Page 57: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/57.jpg)
Конкретнее
• png24 спрайты с фильтром тормозят в IE
• много селекторов + способны повесить FF
• box-shadow inset с шириной > 10px тормозит
• transition цвета даёт большую нагрузку на процессор
29
![Page 58: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/58.jpg)
30
![Page 59: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/59.jpg)
исследовалиОбнаружили и
31
![Page 60: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/60.jpg)
Исследовали и обнаружили
и
31
![Page 61: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/61.jpg)
Чего исследовать?
32
![Page 62: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/62.jpg)
Чего исследовать?
• CSS-свойства
32
![Page 63: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/63.jpg)
Чего исследовать?
• CSS-свойства
• Сочетание свойств друг с другом
32
![Page 64: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/64.jpg)
Чего исследовать?
• CSS-свойства
• Сочетание свойств друг с другом• Как правильно строить DOM
32
![Page 65: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/65.jpg)
Чего исследовать?
• CSS-свойства
• Сочетание свойств друг с другом• Как правильно строить DOM
• Разные форматы графики
32
![Page 66: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/66.jpg)
Выяснили
33
![Page 67: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/67.jpg)
Выяснили
• CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях
33
![Page 68: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/68.jpg)
Выяснили
• CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях
• data:uri картинки рендерятся так же быстро, как и обычные картинки
33
![Page 69: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/69.jpg)
Выяснили
• CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях
• data:uri картинки рендерятся так же быстро, как и обычные картинки
• Псевдоселекторы быстрее с указанием имени элемента (.link:hover → a.link:hover)
33
![Page 70: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/70.jpg)
Доклад Михаила Корепанова на Я.Субботнике в Киеве
http://video.yandex.ru/users/ya-events/view/275/
34
![Page 71: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/71.jpg)
Куда мы идём?
35
![Page 72: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/72.jpg)
• Новые технологии и graceful degradation
Куда мы идём?
35
![Page 73: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/73.jpg)
• Новые технологии и graceful degradation
• Тачевая вёрстка
Куда мы идём?
35
![Page 74: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/74.jpg)
• Новые технологии и graceful degradation
• Тачевая вёрстка• Ускорение рендеринга
Куда мы идём?
35
![Page 75: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/75.jpg)
![Page 76: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/76.jpg)
Самоускорение
![Page 77: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/77.jpg)
CodeStyle
38
![Page 78: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/78.jpg)
Группировка CSS-свойств• шрифт• позиционирование• отображение• размеры• таблицы/списки
• текст• цвета/эффекты
39
![Page 79: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/79.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 81: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/81.jpg)
ZenCoding
42
![Page 82: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/82.jpg)
ZenHTML
43
![Page 83: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/83.jpg)
ZenHTML
div.my1 + div.my2 > ul > li * 5
43
![Page 84: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/84.jpg)
<div class='my1'></div><div class='my2'> <ul> <li></li><li></li><li></li><li></li><li></li> </ul></div>
ZenHTML
43
![Page 85: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/85.jpg)
ZenCSS
po:r → position: relativepo:a → position: absolute
po:s → position: staticf:l → float: left
f:r → float: right
44
![Page 86: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/86.jpg)
ZenCSS
po r:
45
![Page 87: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/87.jpg)
ZenCSS
por
46
![Page 88: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/88.jpg)
ZenCSS
por → position: relativepoa → position: absolute
pos → position: staticfl → float: left
fr → float: right
47
![Page 89: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/89.jpg)
HayakuBundle
48
po:r + por
![Page 90: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/90.jpg)
HayakuBundle
por;fl;tal;m0
49
![Page 91: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/91.jpg)
position: relative;float: left;text-align: left;margin: 0;
HayakuBundle
49
![Page 92: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/92.jpg)
margin-left: 10pxmargin-left: 1.1em
HayakuBundle
50
![Page 93: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/93.jpg)
margin-left: 10pxmargin-left: 1.1em
HayakuBundle
50
1
![Page 94: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/94.jpg)
margin-left: 10pxmargin-left: 1.1em
HayakuBundle
50
2
![Page 95: Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"](https://reader033.vdocuments.net/reader033/viewer/2022052700/55a178351a28ab8f468b4776/html5/thumbnails/95.jpg)
HayakuBundlehttps://github.com/kizu/Hayaku.tmbundle
https://twitter.com/#!/HayakuBundle
51