Современный CSS

Современный CSS

                .example {
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: -moz-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-transition: all .5s;
                    -o-transition: all .5s;
                    -moz-transition: all .5s;
                    transition: all .5s;
                    -webkit-user-select: none;
                       -moz-user-select: none;
                        -ms-user-select: none;
                            user-select: none;
                    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
                    background: -webkit-linear-gradient(top, white, black);
                    background: -moz-linear-gradient(top, white, black);
                    background: -o-linear-gradient(top, white, black);
                    background: linear-gradient(to bottom, white, black);
                }
            

С Autoprefixer:

            .example {
                display: flex;
                transition: all .5s;
                user-select: none;
                background: linear-gradient(to bottom, white, black);
            }
        

Андрей Ситник, Злые Марсиане | Используем PostCSS правильно | FrontTalks 2015

https://youtu.be/qhouBGNncGQ

CSS 3

2010

Flexbox

96.92%

Для IE8/9 есть полифил

https://github.com/jonathantneal/flexibility

Это уже почти 98%

Flexbox

flex-direction

Задаёт главную ось и направление элементов в контейнере.

flex-direction: row

1
2
3
4

flex-direction: row-reverse

1
2
3
4

flex-direction: column

1
2
3

flex-direction: column-reverse

1
2
3

flex-wrap

Определяет, будет ли контейнер однострочным или многострочным.

flex-wrap: nowrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

flex-wrap: wrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

flex-wrap: wrap-reverse

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

justify-content

Определяет выравнивание относительно основной оси путём распределения свободного места.

align-items

Определяет выравнивание по поперечной оси.

align-content

Определяет выравнивание строк многострочного flexbox по поперечной оси.

Работает так же, как justify-content.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
            .red {order: -1}
            .green {order: 1}
        
1
2
3
4
5
6
7
8
9
10
11
12
13
14

flex-basis

Задаёт размер элемента по умолчанию.

flex-grow

0
0
0
0

1
0
1
2

flex-basis: 25%; flex-shrink: 1

Lorem
ipsum
dolor
sit
amet

flex-basis: 25%; flex-shrink: 0

Lorem
ipsum
dolor
sit
amet

align-self

Позволяет переопределить выравнивание, заданное в align-items для отдельного элемента.

Примеры

Центрирование

		    <div class="outer">
                <div class="inner">Some Content</div>
            </div>
		
		    .outer {
                display: flex;
                justify-content: center;
                align-items: center;
            }
		

Центрирование

		    .outer {
                display: flex;
            }
		    .inner {
                margin: auto;
            }
		

Прижатый футер

            <div class="wrapper">
                <div class="content"></div>
                <div class="footer"></div>
            </div>
        

Прижатый футер

            .wrapper {
                display: flex;
                flex-direction: column;
            }
            .content {
                flex-grow: 1;
            }
		

Отзывчивость

1
2
3
4
5
6
7
8
9
10
11
12
13

Сетки на флексбоксах

http://flexboxgrid.com/

Flexbox, теперь понятно

https://pepelsbey.net/2013/05/flexbox-gotcha/

Колонки

96.93%

Объявление колонок

            column-count: 3;
            column-width: 200px;
		

Объявление колонок

            /* Короткая запись: */
            columns: 3 200px;
		

Прочие свойства

            /* Интервал: */
            column-gap: 2em;
            /* Разделитель: */
            column-rule: 1px solid #aaa;
		
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis turpis ut mollis vehicula. Fusce pharetra enim a purus vehicula interdum. Nullam ut commodo nisi, sed convallis nulla. Praesent ante orci, finibus vel ornare eu, molestie ut nulla. Morbi pharetra ornare nibh, at vehicula felis iaculis sed. Mauris consequat diam bibendum, maximus augue a, vestibulum dolor.

Проблемы колонок

Скорость

Здесь должна была быть «Производительность», но она не влезла в слайд.

Firefox

Внезапность

Chromium-based

            .outer>.inner*4
		
            .outer {
                columns: 2 100px;
            }
            .inner {
                height: 100px;
                break-inside: avoid;
                box-shadow: 3px 3px 10px 3px #000;
                margin-bottom: 50px;
            }
		

orphans & widows

            /* Было: */
            rotateZ(37deg);
            /* Стало: */
            rotate3d(0, 0, 1, 37deg);
		

position: absolute

Неуправляемость

Grid Layout

Обычная раскладка, странная разметка

		    <div class="grid">
                <div class="content"></div>
                <div class="header"></div>
                <div class="footer"></div>
                <div class="sidebar"></div>
            </div>
		
            .grid { display: grid;
                    grid-template-columns: 60px 1fr;
                    grid-template-rows: 50px 1fr 60px; }
            .header { grid-row: 1 / 2;
                      grid-column: span 2; }
            .sidebar { grid-row: 2 / 3;
                       grid-column: 1 / 2; }
            .footer { grid-area: -1 / 1 / -2 / span 2; }
		

ASCII-раскладка

            .header { grid-area: h }
            .sidebar { grid-area: s }
            .content { grid-area: c }
            .footer { grid-area: f }
		
            .grid {
                grid-template-columns: 60px 1fr;
                grid-template-rows: 50px 1fr 60px;
                grid-template-areas:
                    'h h'
                    's c'
                    'f f';
            }
		
            .grid {
                grid-template: 50px 20px 1fr 60px / 1fr;
                grid-template-areas:
                    'h h h h'
                    's s s s'
                    'c c c c'
                    'f f f f';
            }
		

Что посмотреть?

Вадим Макеев. Можно вообще всё. Раскладка по гриду.

Наталья Короткова. CSS Grid Layout. Готовность номер один

Контакты:

@webholt

@lazy_frontend

Доклад:

gwer.github.io/modern-css