Олег Мохов "CSS3 фарш" Я.Субботник в Новосибирске О докладе: Давайте приготовим что-нибудь вкусненькое на CSS3. Сварим немного градиентов, перемешаем со скруглёнными уголками, добавим «тенюшек» и заправим всё это флексбоксом. Такой винегрет новых технологий даёт кучу интересных результатов, когда свойства бывают несовместимы друг с другом, и дизайнеры, которым дали в руки напильник из CSS3, рисуют «космические» картинки, о которых и не подозревают разработчики веб-стандартов. Рассказ пойдет о том, как верстальщики Яндекса пытаются справиться с этим «фаршем», и что из этого обычно получается.

1. CSS3 фарш
Олег Мохов
Разработчик интерфейсов
Я.Субботник, Новосибирск, 19 ноября 2011 года

2. 2011
2

3. 2011
CSS2.1
2

4. CSS3
3

5. CSS3
3

6. CSS3
4

7. CSS3 Первое упоминание в 1999
4

8. CSS3 Первое упоминание в 1999
Более 50 модулей
4

9. CSS3 Первое упоминание в 1999
Более 50 модулей
3 модуля рекомендованы
4

10. CSS3 Первое упоминание в 1999
Более 50 модулей
3 модуля рекомендованы
4 модуля в кандидатах
4

11. 5

12. 6

13. 7

14. 7

15. 7

16. 8

17. 9

18. 10

19. 11

20. 11

21. Firefox 4
IE9
11

22. Firefox 4
IE9
11

23. Firefox 4 Chrome
IE9 Safari
11

24. Firefox 4 Chrome
IE9 Safari
11

25. Firefox 4 Chrome
IE9 Safari
11

26. Firefox 4 Chrome
Opera
IE9 Safari
11

27. 12

28. 12

29. 13

30. background: #b3b3b3
13

31. background: #b3b3b3
13

32. border-radius: 20px
14

33. border-radius: 20px
14

34. box-shadow: 3px 3px 5px #0ff
15

35. ox-shadow: 3px 3px 5px #0ff
15

36. 16

37. 16

38. 16

39. 17

40. 18

41. 18

42. 19

43. 20

44. 20

45. 21

48. position: relative

49. position: relative

50. :before {
position: absolute;
position: relative top: 0; bottom: 0;
left: 0; right: 0
}

51. :before {
position: absolute;
position:bottom: 0;
top: 0; relative
left: 0; right: 0
}

53. :before {
z-index: -1
}

54. :before {
z-index: -1
}

56. :before {
box-shadow: ...
}

57. :before {
box-shadow: ...
}

60. 26

61. 27

62. Photoshop Browser

63. Photoshop Browser

65. Browser
Photoshop Photoshop
smoothness smoothness
100% 0%

66. 31

67. .b-mail-list:not(:last-of-type):after
{
content: ', '
}
32

68. 33

69. 33

70. 34

71. 35

72. 36

73. 37

74. .b-button:after, .b-button:before {
transition: 0.5s opacity linear;
}
.b-button:after {
opacity: 0;
}
.b-button:hover:before {
opacity: 0 !important;
}
.b-button:hover:after {
opacity: 1 !important;
}
38

79. background:
linear-gradient(top, #c5c5c5 0,
rgba(197,197,197, 0) 3px),
linear-gradient(-170deg, #c5c5c5 0,
rgba(197,197,197, 0) 4px),
linear-gradient(-10deg, #c5c5c5 0,
rgba(197,197,197, 0) 4px),
#fff;

80. .b-menu__layout-cell:first-of-type .b-tabbed-
pane__tab:not(.b-tabbed-
pane__tab_state_current):after,
.b-menu__layout-cell:last-of-type .b-tabbed-
pane__tab:not(.b-tabbed-
pane__tab_state_current):before

81. http://bar.yandex.com.tr

82. Ложка дёгтя

83. .b-block:not(.hidden):last-of-type
{
margin-right: 0;
}
.b-block:last-of-type:not(.hidden)
{
margin-right: 0;
}
45

84. .b-block:last-of-type:not(:hidden)
{
display: block;
}
46

85. .b-block <~ .b-block:not(.hidden)
{
display: block;
}
47

86. 48

89. CSS3 Первое упоминание в 1999
Более 50 модулей
3 модуля рекомендованы
4 модуля в кандидатах

90. http://lab.simurai.com/css/umbrui/

91. http://lab.simurai.com/css/buttons/

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