С точки зрения реализации функций веб-платформы все движется намного быстрее, чем раньше, и этот пост представляет собой сводку новостей о функциях CSS, которые внедряются в платформу. Если вы относитесь к тому типу людей, которые не любят читать о вещах, которыми можно пользоваться прямо сейчас, то эта статья, вероятно, не для вас! Однако, если вы хотите знать, что уже происходит, и узнать больше о том, с чем можно поиграть в бета-версии браузера, читайте дальше!
Flexbox Gaps
Начнем с того, что реализовано в поставляемой версии одного браузера и в бета-версии — в другом. В CSS Grid мы можем использовать свойства gap, column-gap и row-gap для определения промежутков между строками и столбцами или и тем, и другим одновременно. Эта column-gap функция также появляется в макете с несколькими столбцами для создания промежутков между столбцами.
Хотя вы можете использовать поля для разнесения элементов сетки, преимуществом этой gapфункции является то, что вы получаете только промежутки между элементами; у вас не остается дополнительного места в начале и конце сетки. Добавление полей обычно было тем, как мы создавали пространство между гибкими элементами. Чтобы создать регулярное пространство между элементами гибкости, мы используем поле. Если нам не нужны поля в начале и в конце, мы должны использовать отрицательные поля на контейнере, чтобы удалить их.
Было бы здорово иметь эту функцию разрыва и во Flexbox, не так ли? Хорошая новость в том, что она уже есть — реализована в Firefox и находится в бета-версии Chrome.
В нижнем CodePen вы увидите все три варианта. Первый — это гибкие элементы с полями с каждой стороны. Это создает зазор в начале и в конце гибкого контейнера. Второй использует отрицательное поле гибкого контейнера, чтобы вывести это поле за пределы границы. Третий полностью обходится без полей и вместо этого использует gap: 20px, создавая промежуток между элементами, но не на начальной и конечной кромках.
Пожалуйста, Протестируйте Новые Функции
Хотя интересно немного заглянуть в будущее, я рекомендую протестировать реализации, если у вас есть вариант использования для любой из этих вещей. Вы можете найти ошибку или что-то, что работает не так, как вы ожидаете. Производители браузеров и рабочая группа CSS хотели бы знать. Если вы думаете, что обнаружили ошибку в браузере — возможно, вы тестируете ::marker в Chrome и обнаруживаете, что она отображается иначе, чем реализация в Firefox — тогда поднимите вопрос с браузером: « Как зарегистрировать исправную ошибку » объясняется, как это сделать. Если вы считаете, что спецификация может делать что-то, чего еще не было, тогда поднимите вопрос против спецификации в репозитории GitHub рабочей группы CSS .