А что, если мы долетим и там будет всё?

Серёжа Попов

А что, если мы долетим и там будет всё?

Серёжа Попов

  1. Фронтенд-разработчик
  2. Ментор и наставник
  3. Безработный
  4. moscowcss комьюнити в Москве

https://drafts.csswg.org/

W3C Drafts List
W3C Drafts example

Черновики

Зачем?

Что интересного?

  1. CSS Box Alignment Module Level 3
  2. CSS Backgrounds and Borders Module Level 4
  3. CSS Cascading Module 4 level
  4. CSS Color Module 4 level
  5. CSS Counter Styles Level 3
  6. CSS Display Module Level 3
  7. CSS Expressive Generalisations and Gadgetry Level 1
  8. CSS Exclusions Module Level 1
  9. CSS Extensions Level 1
  10. CSS Form Styles Module Level 1
  11. CSS Grid Layout Module Level 2
  12. CSS Overflow Module Level 4
  13. CSS Pseudo Elements Module Level 4
  14. CSS Round Display Level 1
  15. CSS Shapes Module Level 1
  16. CSS Speech Module Level 1
  17. CSS TV Profile Level 1
  18. CSS Media Queries Level 5
  19. CSS Selectors Level 4

CSS Box Alignment Module Level 3

https://drafts.csswg.org/css-align/

Boxes
W3C Drafts example

Новые значения

      <self-position> = 
    center | start | end |
    self-start | self-end |
    flex-start | flex-end;

<content-position> =
    center | start | end |
    flex-start | flex-end;

Overflow position

      <overflow-position> = unsafe | safe;
		
W3C Drafts example

CSS Background and Borders Module Level 4

https://drafts.csswg.org/css-backgrounds-4

Boxes

Форма угла

      <corner-shape>
		

Форма угла

      <corner-shape> = round | bevel | scoop | notch
		
W3C Drafts example

Форма угла

      <corner-shape> = round | bevel | scoop | notch
		
W3C Drafts example

Форма угла

      <corner-shape> = round | bevel | scoop | notch
		

Border radii define a concave elliptical curve at the corner.

W3C Drafts example
W3C Drafts example

Форма угла

      <corner-shape> = round | bevel | scoop | notch
		
W3C Drafts example

Форма угла

      <corner-shape> = round | bevel | scoop | notch
		
W3C Drafts example

Сокращённая запись угла

      <corner> = <corner-shape> | <border-radius>
      


corners: bevel 50%;
corners: bevel 0.25em 0.25em 0 0 / 50% 50% 0 0;

Обрезка границы

      <border-clip> = normal | <length-percentage> | <flex>
		

Обрезка границы

      border-clip: 10px 1fr 10px
		
W3C Drafts example

Обрезка границы

      border-clip-top: 10px 1fr 10px
      border-clip-bottom: 10px 1fr 10px
      border-clip-left: 5px 1fr 5px
      border-clip-right: 5px 1fr 5px
		
W3C Drafts example

Обрезка границы (инверсия)

      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
		
W3C Drafts example

CSS Cascading Module Level 4

https://drafts.csswg.org/css-cascade/

Boxes

@import

      @import [ <url> | <string> ] <media-query-list>?;
		

@import vs @import level 4

      @import [ <url> | <string> ] 
<media-query-list>?;

@import [ <url> | <string> ]
[ supports() ]?
<media-query-list>?;

@import level 4

      @import url("narrow.css")
        supports(display: flex)
        and (max-width: 400px);
    

CSS Color Module Level 4

https://drafts.csswg.org/css-color/

Boxes

rebeccapurple
#663399

CSS Display Module Level 3

https://drafts.csswg.org/css-display/

Boxes

Flow root

      display: flow-root;
    

Clearfix

      .item {
        float: left;
      }
      .elements::after {
        content: '';
        display: block;
        clear: both;
      }
    

Flow root

      .item {
        float: left;
      }
      .elements {
        display: flow-root;
      }
    

Run in

      display: run-in;
    

Run in

      <dl class='dict'>
        <dt>dictionary</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dd>
        <dt>glossary</dt>
        <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dd>
      </dl>
    

Run in

      .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.

CSS Expressive Generalisations and Gadgetry Level 1

https://drafts.csswg.org/css-display/

Boxes
W3C Drafts example

Астрономические величины

W3C Drafts example

Астрономические величины

Примечание. В этой спецификации не рассматриваются релятивистские эффекты прокрутки или анимаций и переходов на скорости света (или за её пределами).

Астрономические величины

Примечание. В этой спецификации не рассматриваются релятивистские эффекты прокрутки или анимаций и переходов на скорости света (или за её пределами).

ОЧЕНЬ ЖАЛЬ!

Скорость речи

      speech-rate: N tmbl;
    

Скорость речи

      speech-rate: N tmbl;
    

1 tmbl = Скорость речи Сэра Тимоти Бернерса-Ли во время выступления.

Скорость речи

      speech-rate: N tmbl;
    

1 tmbl = Скорость речи Сэра Тимоти Бернерса-Ли во время выступления.

Можно ли использовать отрицательные значения для воспроизведения речи наоборот?

Двойная радуга

      <img src="about:unicorn"
style="background: double-rainbow(bottom, closest-corner)">
    
W3C Drafts example
W3C Drafts example

CSS Exclusions Module Level 1

https://drafts.csswg.org/css-exclusions/

Boxes

Wrap Flow

      wrap-flow = auto | both | start | end |
minimum | maximum | clear;

Wrap Flow

W3C Drafts example

Wrap Flow

W3C Drafts example

Wrap Flow

W3C Drafts example

Wrap Flow

W3C Drafts example

CSS Extensions Level 1

https://drafts.csswg.org/css-extensions/

Boxes

Расширения

Кастомные селекторы

      @custom-selector :--heading {
        expansion: h1, h2, h3, h4, h5, h6;
      }
      
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

Кастомные селекторы

      @custom-selector :--heading h1, h2, h3, h4, h5, h6;
      

:--heading {} :--heading + p {}

CSS Form Styling Module Level 1

https://drafts.csswg.org/css-forms/

Boxes

Кастомизация сложных элементов форм

      @control select {
        ...
      }
      @control option {
        ...
      }
    

Кастомизация сложных элементов форм

CSS Grid Layout Module Level 2

https://drafts.csswg.org/css-grid-2/

Boxes

Subgrid

      <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>
    

Subgrid

      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
      }
    

Subgrid

W3C Drafts example

Subgrid

      <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>
    

Subgrid

      <div class="grid">
        <div class="ad">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div class="ad">6</div>
      </div>
    

Subgrid

      <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>
    

Subgrid

      .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
      }
      .grid ul {
        display: subgrid;
      }
    

Subgrid

W3C Drafts example

CSS Overflow Module Level 4

https://drafts.csswg.org/css-overflow/

Boxes

Фрагменты

      <div class="in-cards">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Voluptates a hic corrupti
vitae,similique cupiditate qui. Omnis commodi fugiat
eius veniam autemfugit unde, tempora ea tenetur
impedit molestias hic.</div>
    

Фрагменты

      .in-cards {
        width: 13em;
        height: 8em;
        border: medium solid blue;
        continue: fragments;
      }
    

Фрагменты

W3C Drafts example

Стилизация фрагментов

      .in-cards::nth-fragment(1) {
        background: aqua;
        color: black;
      }
      .in-cards::nth-fragment(2) {
        background: yellow;
        color: black;
      }
    

Фрагменты

W3C Drafts example

CSS Pseudo Elements Module Level 4

https://drafts.csswg.org/css-pseudo/

Boxes

Первая строка

      p::first-line {
        text-transform: uppercase; 
      }
    

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag
sequence.

Первая буква

      p::first-letter {
        font-size: 100px; 
      }
    


This is a somewhat long html paragraph that
will be broken into several lines. The first
line will be identified by a fictional tag
sequence.

Выделение

      ::selection
    
W3C Drafts example

Неактивное выделение

      ::inactive-selection
    
W3C Drafts example

Ошибки

      ::grammar-error
    
W3C Drafts example

CSS Round Display Level 1

https://drafts.csswg.org/css-round-display/

Boxes

Круглые экраны

W3C Drafts example

Круглые экраны

      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">

Круглые экраны

W3C Drafts example

Круглые экраны

      viewport-fit = contain | cover;
    
W3C Drafts example

Круглые экраны

      viewport-fit = contain | cover;
    
W3C Drafts example

Круглые экраны

      shape-inside = outside-shape | display;
    
W3C Drafts example

Круглые экраны

      border-boundary = parent | display;
    
W3C Drafts example

CSS Speech Module Level 1

https://drafts.csswg.org/css-speech/

Boxes

Громкость звука

      voice-volume = silent | x-soft | soft | medium |
loud | x-loud | decibel;

Громкость звука

      voice-volume = silent | x-soft | soft | medium |
loud | x-loud | decibel;

1 dB — 1 децибел

Баланс звука

      voice-balance = number | left | center | right |
leftwards | rightwards;

Баланс звука

      voice-balance = number | left | center | right |
leftwards | rightwards;

Баланс звука

      voice-balance = number | left | center | right |
leftwards | rightwards;

leftwards = Moves the sound to the left, by subtracting 20 from the inherited voice-balance value

Пауза

      pause = pause-before | pause-after;
      
h2 { pause: 30ms 40ms; }

Голос

      voice-family = name | [age? gender integer?]
    

Голос

      voice-family = name | [age? gender integer?]
      
h1 { voice-family: announcer, old male; } h2 { voice-family: romeo, young male; }

Голос

      voice-family = name | [age? gender integer?]
      
h1 { voice-family: announcer, old male; } h2 { voice-family: romeo, young male; }

Голос

      voice-family = name | [age? gender integer?]
      
h1 { voice-family: announcer, old male; } h2 { voice-family: romeo, young male; }

Голос

Больше 20 свойств, для полного управления воспроизведения голоса.

CSS TV Profile Level 1

https://drafts.csswg.org/css-tv/

Boxes

Телевизоры

Это больше не спецификация, а документ, который описывает, какие возможности CSS доступны в телевизорах и с какими значениями.

А какие недоступны.

Телевизоры

      E:hover, E + F, E[foo], E[foo="bar"], E[foo~="bar"],
E:before, E:after
@font-face background-attachment, border-collapse, border-spacing,
content, counter-increment, cursor, elevation, font-stretch,
letter-spacing, max-height, max-width, min-height,
min-width, overflow, voice-family, volume. . . .

CSS Media Queries Level 5

https://drafts.csswg.org/mediaqueries-5/

Boxes

Яркость света

      light-level = dim | normal | washed
    

Яркость света

      light-level = dim | normal | washed
      
@media (light-level: normal) { p { color: #333 } }

Доступность скриптов

      scripting = enabled | none
    

Инверсия цветов

      inverted-colors
      
@media (inverted-colors) { img { filter: invert(100%); } }

CSS Selectors Level 4

https://drafts.csswg.org/selectors/

:matches()

      *:matches(:hover, :focus)
    

Только элементы, которые в состоянии наведения или фокуса.

:has()

:has()

      section {
        color: red;
      }
       
      section:has(h1, h2, h3) {
        color: yellow;
      }
    

Состояние медиа

      :playing
      :paused
    

Состояние поля ввода

      :placeholder-shown
    

Читайте черновики

103 черновика спецификаций

Добавление черновиков

To make substantive contributions to specifications, you must either participate in the relevant W3C Working Group or make a non-member patent licensing commitment.

Будьте готовы к спецификации до её принятия

Спасибо за внимание
fb: sergeytovarov