Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"

1,080 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"

  1. 1. Куда движется вёрстка иверстальщики Яндекса.Олег МоховРазработчик интерфейсовЯ.Субботник, Алматы, 15 октября 2011 года
  2. 2. 6
  3. 3. 6
  4. 4. Вышел в 2001 году Очень много проблем и неподдерживаемых решений Доля в рунете 1.7% и продолжает снижаться6
  5. 5. Вышел в 2001 году Очень много проблем и неподдерживаемых решений Доля в рунете 1.7% и продолжает снижаться6
  6. 6. Вышел в 2006 году Проблемы почти те же Доля в рунете 4.7%7
  7. 7. IE8 Firefox 3 10.4% 6.5%8
  8. 8. ¹/₄
  9. 9. 10
  10. 10. Firefox 7 IE610
  11. 11. 2011 200110
  12. 12. 11
  13. 13. 4 элемента11
  14. 14. 4 элемента разные решения в разных ситуациях11
  15. 15. 4 элемента разные решения в разных ситуациях время на внедрить и протестировать11
  16. 16. 4 элемента разные решения в разных ситуациях время на внедрить и протестировать удар по скорости рендеринга11
  17. 17. 12
  18. 18. Chrome Firefox Opera IE13
  19. 19. 14
  20. 20. CSS3 Не фиксим png24 В разных браузерах может различаться порядок блоков14
  21. 21. FF IE15
  22. 22. нет уголка FF IE15
  23. 23. нет png24 fix нет уголка FF IE15
  24. 24. border-radius + before: нет png24 fix нет уголка FF IE15
  25. 25. border-radius + before: нет png24 fix нет уголка FF IE16
  26. 26. 17
  27. 27. FF IE18
  28. 28. FF IE placeholder18
  29. 29. FF IE placeholder CSS3 градиент18
  30. 30. FF IE placeholder картинка CSS3 градиент18
  31. 31. 19
  32. 32. 19
  33. 33. + transition19
  34. 34. + transition19
  35. 35. Сервисом можно пользоваться!
  36. 36. 22
  37. 37. 23
  38. 38. 24
  39. 39. 25
  40. 40. .example-shadow{ position: relative;} 26
  41. 41. .example-shadow{ position: relative;}.example-shadow:before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; content: “”;} 27
  42. 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. 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. 44. 30
  45. 45. 31
  46. 46. 31
  47. 47. 32
  48. 48. 33
  49. 49. 34
  50. 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. 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. 52. Тачевая вёрстка
  53. 53. 38
  54. 54. iOS Android39
  55. 55. Подробнее через несколько минут40
  56. 56. Каждый верстальщик Яндекса будет заниматься тачевой вёрсткой41
  57. 57. ПроизводительностьХочется всё и сразу 42
  58. 58. На сервере43
  59. 59. На сервере • Обфускация43
  60. 60. На сервере • Обфускация • Уменьшение количества запросов к серверу43
  61. 61. На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок43
  62. 62. На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок • Правильные http-заголовки43
  63. 63. На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок • Правильные http-заголовки43
  64. 64. На клиенте44
  65. 65. На клиенте • Не использовать каскад44
  66. 66. На клиенте • Не использовать каскад • Не селектить по тегам44
  67. 67. На клиенте • Не использовать каскад • Не селектить по тегам • Растягивать DOM вширь, а не вглубь44
  68. 68. Конкретнее45
  69. 69. Конкретнее • png24 спрайты с фильтром тормозят в IE45
  70. 70. Конкретнее • png24 спрайты с фильтром тормозят в IE • много селекторов + способны повесить FF45
  71. 71. Конкретнее • png24 спрайты с фильтром тормозят в IE • много селекторов + способны повесить FF • box-shadow inset с шириной > 10px тормозит45
  72. 72. Конкретнее • png24 спрайты с фильтром тормозят в IE • много селекторов + способны повесить FF • box-shadow inset с шириной > 10px тормозит • transition цвета даёт большую нагрузку на процессор45
  73. 73. 46
  74. 74. Обнаружили и исследовали47
  75. 75. Исследовали и обнаружили47
  76. 76. Исследование48
  77. 77. Исследование • Влияние CSS-свойств на скорость рендеринга48
  78. 78. Исследование • Влияние CSS-свойств на скорость рендеринга • Влияние сочетаний свойств, комбинации48
  79. 79. Исследование • Влияние CSS-свойств на скорость рендеринга • Влияние сочетаний свойств, комбинации • Исследования скорости рендеринга графики в разных форматах48
  80. 80. Выяснили49
  81. 81. Выяснили • CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях49
  82. 82. Выяснили • CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях • data:uri картинки рендерятся так же быстро, как и обычные картинки49
  83. 83. Выяснили • CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях • data:uri картинки рендерятся так же быстро, как и обычные картинки • Псевдоселекторы быстрее с указанием имени элемента (:link → a:link)49
  84. 84. Доклад Михаила Корепанова на Я.Субботнике в Киеве http://video.yandex.ru/users/ya-events/view/275/50
  85. 85. Куда мы идём?51
  86. 86. Куда мы идём? • Новые технологии и graceful degradation51
  87. 87. Куда мы идём? • Новые технологии и graceful degradation • Тачевая вёрстка51
  88. 88. Куда мы идём? • Новые технологии и graceful degradation • Тачевая вёрстка • Ускорение рендеринга51
  89. 89. Самоускорение
  90. 90. CodeStyle54
  91. 91. Группировка CSS-свойств • шрифт • позиционирование • отображение • размеры • таблицы/списки • текст • цвета/эффекты55
  92. 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. 93. CSSComb http://csscomb.ru/57
  94. 94. ZenCoding58
  95. 95. ZenHTML59
  96. 96. ZenHTML div.my1 + div.my2 > ul > li * 559
  97. 97. ZenHTML <div class=my1></div> <div class=my2> <ul> <li></li><li></li><li></li><li></li><li></li> </ul> </div>59
  98. 98. ZenCSS po:r → position: relative po:a → position: absolute po:s → position: static f:l → float: left f:r → float: right60
  99. 99. ZenCSS po:r61
  100. 100. ZenCSS po r61
  101. 101. ZenCSS por → position: relative poa → position: absolute pos → position: static fl → float: left fr → float: right62
  102. 102. HayakuBundle po:r + por63
  103. 103. HayakuBundle por;fl;tal;m064
  104. 104. HayakuBundle position: relative; float: left; text-align: left; margin: 0;64
  105. 105. HayakuBundle margin-left: 10px margin-left: 1.1em65
  106. 106. HayakuBundle margin-left: 10px 1 margin-left: 1.1em65
  107. 107. HayakuBundle margin-left: 10px 2 margin-left: 1.1em65
  108. 108. HayakuBundle https://github.com/kizu/Hayaku.tmbundle https://twitter.com/#!/HayakuBundle66
  109. 109. BEM https://github.com/bem67
  110. 110. Олег МоховРазработчик интерфейсовmokhov@yandex-team.rutwitter: olmokhov

×