Сергей Попов

Transcript

1. А что, если мы долетим
 и там будет всё? Cергей попов HTML Academy VYORSTKA
5. Куда же мы летим?
6. План • Немного истории CSS 6
7. План • Немного истории CSS • Статусы черновиков 7
8. План • Немного истории CSS • Статусы черновиков • Самое вкусное 8
9. План • Немного истории CSS • Уровни черновиков • Самое вкусное • Итоги 9
10. Немного истории CSS • Был предложен в октябре 1994 года 10
11. • Был предложен в октябре 1994 года • СSS 1 — 17 декабря 1996 года 11 Немного истории CSS
12. CSS 1 • Свойства шрифта • Цвета текста, фонов • Выравнивания, таблицы и картинки • Отступы, рамки 12
13. • Был предложен в октябре 1994 года • СSS 1 — 17 декабря 1996 года • CSS 2 — май 1998 года 13 Немного истории CSS
14. CSS 2 • Позиционирование • Многослойность • Новые свойства шрифта, например тень 14
15. • Был предложен в октябре 1994 года • СSS 1 — 17 декабря 1996 года • CSS 2 — май 1998 года • CSS 2.1 — ? 15 Немного истории CSS
16. • Был предложен в октябре 1994 года • СSS 1 — 17 декабря 1996 года • CSS 2 — май 1998 года • CSS 2.1 — июнь 2012 года 16 Немного истории CSS
17. • Был предложен в октябре 1994 года • СSS 1 — 17 декабря 1996 года • CSS 2 — май 1998 года • CSS 2.1 — июнь 2012 года • CSS 3 — 2011-? 17 Немного истории CSS
18. • Был предложен в октябре 1994 года • СSS 1 — 17 декабря 1996 года • CSS 2 — май 1998 года • CSS 2.1 — июнь 2012 года • CSS 3 — 2011-? • CSS 4 — ? 18 Немного истории CSS
20. • Был предложен в октябре 1994 года • СSS 1 — 17 декабря 1996 года • CSS 2 — май 1998 года • CSS 2.1 — июнь 2012 года • CSS 3 — 2011-? • CSS 4 — не будет • CSS 2.2 — ? 20 Немного истории CSS
21. Сыграем
22. Какого уровня спецификация CSS Color? 22
23. CSS Color 3 level 23
24. CSS Grid Layout ? level 24
25. CSS Grid Layout 1 level 25
26. План • Немного истории CSS • Статусы черновиков • Самое вкусное • Итоги 26
27. Статусы черновиков • FPWD — First Public Working Draft 27
28. • FPWD — First Public Working Draft • WD — Working Draft 28 Статусы черновиков
29. • FPWD — First Public Working Draft • WD — Working Draft • CR — Candidate Recommendation 29 Статусы черновиков
30. • FPWD — First Public Working Draft • WD — Working Draft • CR — Candidate Recommendation • PR — Proposed Recommendation 30 Статусы черновиков
31. • FPWD — First Public Working Draft • WD — Working Draft • CR — Candidate Recommendation • PR — Proposed Recommendation • REC — Recommendation 31 Статусы черновиков
32. План • Немного истории CSS • Статусы черновиков • Самое вкусное • Итоги 32
33. Где смотреть?
34. drafts.csswg.org
39. И что там интересного?
40. CSS Background and Borders Level 4 https://drafts.csswg.org/css-backgrounds-4/
41. Форма угла <corner-shape> 41
42. Форма угла <corner-shape> = round; 42
43. Форма угла <corner-shape> = bevel; 43
44. Форма угла <corner-shape> = scoop; Border radii define a concave elliptical curve at the corner. 44
45. Concave elliptical curve 45
47. Форма угла <corner-shape> = scoop; 47
48. Форма угла <corner-shape> = notch; 48
49. Сокращённая запись угла <corner> = <corner-shape> | <border-radius> corners: bevel 50%; corners: bevel 0.25em 0.25em 0 0 / 50% 50% 0 0; 49
50. Обрезка границы <border-clip> = normal | <length-percentage> | <flex> 50
51. Обрезка границы border-clip = 10px 1fr 10px; 51
52. Обрезка границы border-clip = 10px 1fr 10px; 52
53. Обрезка границы border-clip-top: 10px 1fr 10px; border-clip-bottom: 10px 1fr 10px; border-clip-left: 5px 1fr 5px; border-clip-right: 5px 1fr 5px; 53
54. Обрезка границы border-clip-top: 0 10px 1fr 10px; border-clip-bottom: 0 10px 1fr 10px; border-clip-left: 0 5px 1fr 5px; border-clip-right: 0 5px 1fr 5px; 54
55. CSS Cascading Level 4 https://drafts.csswg.org/css-cascade
56. @import @import [ <url> | <string> ] <media-query-list>?; 56
57. @import v4 @import [ <url> | <string> ] <media-query-list>?; @import [ <url> | <string> ] [ supports() ]? <media-query-list>?; 57
58. @import v4 @import url("narrow.css") supports(display: flex) and (max-width: 400px); 58
59. CSS Color Level 4 https://drafts.csswg.org/css-color
60. rebeccapurple #663399
61. CSS Display Module Level 4 https://drafts.csswg.org/css-display
62. flow-root display: flow-root; 62
63. Clearfix .item { float: left; } .item-parent::after { content: ''; display: block; clear: both; } 63
64. .item { float: left; } .item-parent::after { display: flow-root; } 64 flow-root
65. display: run-in; 65 run-in
66. <dl class='dict'> <dt>dictionary</dt> <dd>Lorem ipsum dolor sit amet, consectetur</dd> <dt>glossary</dt> <dd>Lorem ipsum dolor sit amet, consectetur</dd> </dl> 66 run-in
67. .dict > dt { display: run-in; } dictionary Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quae reprehenderit nemo modi vero, ut facere laudantium, eaque quaerat aspernatur, culpa! glossary Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore non officiis, dolorem sed numquam temporibus. 67 run-in
68. CSS Overflow Level 4 https://drafts.csswg.org/css-overflow
69. 69 <div class="in-cards">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates a hic corruptivitae,similique cupiditate qui. Omnis commodi fugiat eius veniam autemfugit unde, tempora ea tenetur impedit molestias hic.</div> Фрагменты
70. 70 .in-cards { width: 13em; height: 8em; border: medium solid blue; continue: fragments; } Фрагменты
71. 71 .in-cards { width: 13em; height: 8em; border: medium solid blue; continue: fragments; } Фрагменты
72. 72 .in-cards::nth-fragment(1) { background: aqua; } .in-cards::nth-fragment(2) { background: yellow; } Фрагменты
73. 73 .in-cards::nth-fragment(1) { background: aqua; } .in-cards::nth-fragment(2) { background: yellow; } Фрагменты
74. CSS Expressive Generalisations and Gadgetry Level 1
76. 76 Астрономические величины
77. 77 Астрономические величины Примечание. В этой спецификации не рассматриваются релятивистские эффекты прокрутки или анимаций и переходов на скорости света (или за её пределами).
78. 78 Скорость речи speech-rate: N tmbl;
79. 79 Скорость речи speech-rate: N tmbl; 1 tmbl = Скорость речи Сэра Тимоти Бернерса-Ли во время выступления.
81. 81 Можно ли использовать отрицательные значения для воспроизведения речи наоборот? Скорость речи
82. 82 <img src="about:unicorn" style="background: double-rainbow(bottom, closest-corner)”> Двойная радуга
83. 83 Двойная радуга
85. CSS Extensions Level 1 https://drafts.csswg.org/css-extensions
86. 86 • Кастомные свойства • Кастомные селекторы • Кастомные @media • Миксины Расширения CSS
87. 87 @custom-selector :--heading { expansion: h1, h2, h3, h4, h5, h6; } @custom-selector :--heading h1, h2, h3, h4, h5, h6; Кастомные селекторы
88. 88 @custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading {} :--heading + p {} Кастомные селекторы
89. CSS Form Styling Level 1 https://drafts.csswg.org/css-forms
90. 90 @control select { ... } @control option { ... } Кастомизация элементов форм
91. 91 • Font • Text decoration • Text layout • Backgrounds and shadows • Borders and paddings • Filters Кастомизация элементов форм
92. 92 Кастомизация элементов форм
93. 93 Кастомизация элементов форм
94. CSS Grid Layout Level 2 https://drafts.csswg.org/css-grid-2
95. 95 <div class="grid"> <div class="ad">1</div> <ul> <li>2</li> <li>3</li> <li>4</li> </ul> <div class="ad">6</div> </div> Проблема
96. 96 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } Проблема
97. 97 Проблема
98. 98 Проблема
99. 99 <div class="grid"> <div class="ad">1</div> <ul> <li>2</li> <li>3</li> <li>4</li> </ul> <div class="ad">6</div> </div> Проблема
100. 100 <div class="grid"> <div class="ad">1</div> <div>2</div> <div>3</div> <div>4</div> <div class="ad">6</div> </div> Проблема
101. 101 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } .grid ul { display: subgrid; } Решение
102. 102 Решение
103. CSS Round Displays Level 1 https://drafts.csswg.org/css-round-display
104. 104 Форма экрана
105. 105 shape: rect | round; <link media="screen and (shape: rect)" rel="stylesheet" href=“rectangle.css"> <link media="screen and (shape: round)" rel="stylesheet" href="round.css"> Форма экрана
106. 106 Форма экрана
107. 107 viewport-fit = contain | cover; Вписывание в экран
108. 108 shape-inside = outside-shape | display; Вписывание в экран
110. CSS Speech Module Level 1 https://drafts.csswg.org/css-speech
111. 111 voice-volume = silent | x-soft | soft | medium | loud | x-loud | decibel; 1 dB — 1 децибел Громкость речи
112. 112 voice-balance = number | left | center | right | leftwards | rightwards; Баланс звука
113. 113 pause = pause-before | pause-after; h2 { pause: 30ms 40ms; } Пауза
114. 114 voice-family = name | [age? gender integer?] h1 { voice-family: announcer, old male; } h2 { voice-family: romeo, young male; } Семейство голоса
115. 115 Больше 20 свойств, для полного управления воспроизведения голоса. Голос
116. CSS Media Queries Level 5 https://drafts.csswg.org/css-speech
117. 117 light-level = dim | normal | washed Яркость окружения
118. 118 light-level = dim | normal | washed @media (light-level: normal) { p { color: #333 } } Яркость окружения
119. 119 scripting = enabled | none Доступность скриптов
120. 120 inverted-colors @media (inverted-colors) { img { filter: invert(100%); } } Инверсия цветов
121. Зачем ты это прочитал?
122. Зачем читать • Общая осведомлённость 122
123. Зачем читать • Общая осведомлённость • Подготовка к будущему 123
124. Зачем читать • Общая осведомлённость • Подготовка к будущему • Умение отличать реальные черновики от салфеток 124
125. План • Немного истории CSS • Статусы черновиков • Самое вкусное • Итоги 125
126. Итоги • CSS разбит на модули, каждый из которых развиваются отдельно 126
127. Итоги • CSS разбит на модули, каждый из которых развиваются отдельно • У спецификаций есть несколько уровней, которые они проходят, прежде чем стать рекомендациями 127
128. Итоги • CSS разбит на модули, каждый из которых развиваются отдельно • У спецификаций есть несколько уровней, которые они проходят, прежде чем стать рекомендациями • Черновики есть в открытом доступе и их можно читать и смотреть 128
129. Я хочу писать черновики!
130. Верстальщик: наследие goo.gl/QQ42KA
131. Спасибо за внимание! http://sergeypopov.site/