Новости CSS июль 2020

С точки зрения реализации функций веб-платформы все движется намного быстрее, чем раньше, и этот пост представляет собой сводку новостей о функциях CSS, которые внедряются в платформу. Если вы относитесь к тому типу людей, которые не любят читать о вещах, которыми можно пользоваться прямо сейчас, то эта статья, вероятно, не для вас! Однако, если вы хотите знать, что уже происходит, и узнать больше о том, с чем можно поиграть в бета-версии браузера, читайте дальше!

Flexbox Gaps

Начнем с того, что реализовано в поставляемой версии одного браузера и в бета-версии — в другом. В CSS Grid мы можем использовать свойства gap, column-gap и row-gap для определения промежутков между строками и столбцами или и тем, и другим одновременно. Эта column-gap функция также появляется в макете с несколькими столбцами для создания промежутков между столбцами.

Хотя вы можете использовать поля для разнесения элементов сетки, преимуществом этой gapфункции является то, что вы получаете только промежутки между элементами; у вас не остается дополнительного места в начале и конце сетки. Добавление полей обычно было тем, как мы создавали пространство между гибкими элементами. Чтобы создать регулярное пространство между элементами гибкости, мы используем поле. Если нам не нужны поля в начале и в конце, мы должны использовать отрицательные поля на контейнере, чтобы удалить их.

Было бы здорово иметь эту функцию разрыва и во Flexbox, не так ли? Хорошая новость в том, что она уже есть — реализована в Firefox и находится в бета-версии Chrome.

В нижнем CodePen вы увидите все три варианта. Первый — это гибкие элементы с полями с каждой стороны. Это создает зазор в начале и в конце гибкого контейнера. Второй использует отрицательное поле гибкого контейнера, чтобы вывести это поле за пределы границы. Третий полностью обходится без полей и вместо этого использует gap: 20px, создавая промежуток между элементами, но не на начальной и конечной кромках.

Умный разрыв

Реализация Flexbox gap выделяет несколько интересных вещей. Во-первых, вы, возможно, хорошо помните, что когда функция разрыва была впервые представлена в Grid Layout, ее свойства были:

grid-gap
grid-row-gap
grid-column-gap

Эти свойства были добавлены, когда сетка впервые появилась в браузерах. Однако, во многом таким же образом , как и выравнивающих элементов ( justify-content, align-content, align-items и так далее) впервые появился в Flexbox , а затем стал доступен к сетке (когда было принято решение о функции щелевые были полезны для более чем сетки), они были перемещены и переименованы .

Наряду с этими функциями выравнивания свойства зазора теперь находятся в спецификации Box Alignment. Спецификация касается выравнивания и распределения пространства, поэтому это естественный дом для них. Чтобы у нас не было нескольких свойств с префиксом с именем спецификации, они также были переименованы, чтобы удалить grid- префикс.

Если grid- в вашем коде есть версии с префиксом, вам не о чем беспокоиться. Они сохранены как псевдонимы свойств, чтобы ваш код не сломался. Однако для новых проектов версии без префиксов реализованы во всех браузерах.

ОБНАРУЖЕНИЕ ПОДДЕРЖКИ ЗАЗОРА ДЛЯ FLEXBOX

Вы могли подумать, что можете использовать функцию разрыва в Flexbox и использовать Feature Queries для проверки поддержки, используя запас в качестве запасного варианта. К сожалению, это не так, потому что функциональные запросы проверяют имя и значение. Например, если я хочу протестировать поддержку сетки, я могу использовать следующий запрос:

@supports (display: grid) {
  .grid {
    /* grid layout code here */
  }
}

Если бы я был тест на gap: 20px, однако, я хотел бы получить положительный ответ в Chrome , который в настоящее время не поддерживает разрыв в Flexbox но делает поддержку его в сетке. Все эти запросы к функциям проверяют, распознает ли браузер свойство и значение. У них нет возможности проверить поддержку в конкретном режиме макета. Я поднял это как проблему в рабочей группе CSS, однако, оказалось, что это нелегко исправить, и в настоящее время существует ограниченное количество мест, где у нас есть эта проблема частичной реализации.

Единица Соотношения Сторон

У некоторых вещей есть соотношение сторон, которое мы хотим сохранить, например, изображение или видео. Если вы размещаете изображение или видео прямо на странице с помощью HTML imgили videoэлемента, то оно прекрасно сохраняет полученное соотношение сторон (если вы не измените ширину или высоту принудительно). Однако иногда мы хотим добавить элемент без внутреннего соотношения сторон, делая одно измерение гибким, а другое сохраняя определенное соотношение сторон. Чаще всего это происходит, когда мы встраиваем видео с iframe, однако вы также можете захотеть сделать идеально квадратные области в своей сетке (что также требует, чтобы одно измерение могло реагировать на другое).

В настоящее время мы справляемся с этим с помощью взлома padding . При этом используется тот факт, что отступы в направлении блока копируются из внутреннего направления, когда мы используем процент. Это не очень изящное решение проблемы, но оно работает.

Единица соотношения сторон пытается решить эту проблему, позволяя нам указывать соотношение сторон для длины. Chrome реализовал это в Canary, поэтому вы можете взглянуть на демонстрацию ниже, используя Canary, если вы включите флаг Experimental Web Platform Features .

Я создал макет сетки и настроил элементы сетки на использование 1 / 1 соотношения сторон. Ширина элементов определяется размером дорожки их столбца сетки (как это возможно). Затем высота копируется из него, чтобы получился квадрат. Ради интереса я потом повернул предметы.

В Canary вы можете взглянуть на демонстрацию и увидеть, как элементы остаются квадратными даже по мере того, как их дорожка увеличивается и уменьшается, из-за того, что размер блока использует 1/1 соотношение встроенного размера.

Поддержка встроенной Masonry-раскладки

Разработчики часто спрашивают, можно ли использовать CSS Grid для создания макета в стиле Masonry или Pinterest. Хотя некоторые демонстрации выглядят немного так, Grid никогда не создавался для масонства.

Чтобы объяснить, вам нужно знать, что такое макет Masonry. В типичном макете Masonry элементы отображаются построчно. После заполнения первой строки новые элементы заполняют другую строку. Однако, если некоторые элементы в первой строке короче других, элементы второй строки поднимутся вверх, чтобы заполнить пробел. Библиотека Masonry — это то, сколько людей достигают этого с помощью JavaScript.

Если вы попытаетесь создать этот макет с помощью CSS Grid и автоматического размещения, вы увидите, что потеряете это изменение направления блока элементов. Они располагаются в строгих строках и столбцах, потому что это то, что делает сетка.

Так можно ли использовать сетку в качестве макета кладки? Так считает один из инженеров Mozilla и создал прототип функциональности. Вы можете проверить это с помощью Firefox Nightly с флагом layout.css.grid-template-masonry-value.enabled установив true, перейдя на about:config в адресной строке Firefox.

Subgrid

Некоторое время у нас была поддержка subgridценности grid-template-columns и grid-template-rows в Firefox. Использование этого значения означает, что вы можете наследовать размер и количество дорожек от родительской сетки до дочерних сеток. По сути, пока элемент сетки имеет display: grid, он может наследовать покрываемые им дорожки, а не создавать новые дорожки столбцов или строк.

Однако первый вопрос, который возникает у людей, когда я говорю о подсетке, — «Когда она будет доступна в Chrome?» Я все еще не могу сказать, когда, но на горизонте появляются хорошие новости. 18 июня в сообщении блога Chromium было объявлено, что команда Microsoft Edge (сейчас работающая над Chromium) работает над повторной реализацией Grid Layout в движке LayoutNG, то есть в движке компоновки нового поколения Chromium. Часть этой работы будет включать также добавленную поддержку подсеток.

Добавление функций в браузеры — это не быстрый процесс, однако команда Microsoft в первую очередь предложила нам Grid Layout — вместе с ранней реализацией с префиксом, которая входила в IE10. Так что это отличные новости, и я с нетерпением жду возможности протестировать эту реализацию, когда она появится в бета-версии.

`prefers-reduced-data`

Еще не реализована ни в одном браузере — но с ошибкой, указанной в Chrome с недавней активностью — это prefers_reduced_data функция мультимедиа. Это позволит CSS проверить, разрешил ли посетитель сохранение данных на своем устройстве, и соответствующим образом настроить веб-сайт. Вы можете, например, отказаться от загрузки больших изображений.

@media (prefers-reduced-data: reduce) {
  .image {
    background-image: url("images/placeholder.jpg");
  }
}

Функция prefers_reduced_data мультимедиа работает так же, как некоторые из уже реализованных функций мультимедиа предпочтений пользователя в Спецификации мультимедийных запросов уровня 5. Например, функции мультимедиа prefers_reduced_motion и prefers_color_scheme позволяют вам проверить, попросил ли посетитель уменьшить движение или темный режим в своей операционной системе, и настроить ваш CSS в соответствии с требованиями.

`::marker`

::marker Псевдо-элемент позволяет целевой маркер списка. На очень простом уровне это означает, что мы можем нацелить маркер списка и изменить его цвет или размер. (Раньше это было невозможно из-за того, что вы могли настроить таргетинг только на весь элемент списка — текст и маркер.)

Поддержка ::marker уже доступна в Firefox, а теперь ее можно найти и в бета-версии Chrome.

Помимо стилизации маркеров в реальных списках, вы можете использовать их ::marker для других элементов. В приведенном ниже примере у меня есть заголовок, который был задан display: list-item и, следовательно, имеет маркер, который я заменил смайликом.

Пожалуйста, Протестируйте Новые Функции

Хотя интересно немного заглянуть в будущее, я рекомендую протестировать реализации, если у вас есть вариант использования для любой из этих вещей. Вы можете найти ошибку или что-то, что работает не так, как вы ожидаете. Производители браузеров и рабочая группа CSS хотели бы знать. Если вы думаете, что обнаружили ошибку в браузере — возможно, вы тестируете ::marker в Chrome и обнаруживаете, что она отображается иначе, чем реализация в Firefox — тогда поднимите вопрос с браузером: « Как зарегистрировать исправную ошибку » объясняется, как это сделать. Если вы считаете, что спецификация может делать что-то, чего еще не было, тогда поднимите вопрос против спецификации в репозитории GitHub рабочей группы CSS .