От автора: Firefox 71 — увлекательный релиз для тех, кто интересуется CSS Layout. Хотя я очень рада, что в Firefox стала доступна подсетка, есть еще одно свойство, за которым я следила. В Firefox 71 реализовано column-span из многостолбцовой компоновки. В этом посте я объясню, что это такое, и немного о продвижении спецификации Multiple-column Layout.
Многостолбцовый макет, обычно называемый multicol — это метод макета, который делает что-то совершенно отличное от таких методов макета, как flexbox и grid. Если у вас есть некоторый контент, размеченный и отображаемый в нормальном потоке, и превращенный в multicol контейнер с использованием свойств column-width или column-count, он будет отображаться в виде набора столбцов. В отличие от Flexbox или Grid, содержимое внутри столбцов течет так же, как и в обычном потоке. Разница заключается в том, что теперь он переходит в ряд анонимных столбцов, как контент в газете.
Multicol описывается как фрагментирующий контент, когда он создает эти анонимные столбцы для отображения контента. Он не воздействует на прямые потомки многостолбцового контейнера способом Flexbox или Grid. Таким образом, это наиболее похоже на фрагментацию, которая происходит, когда мы печатаем веб-документ, а содержимое разделяется на страницы. Блок столбца — это то же самое, что и страница.
Что такое column-span?
Мы можем использовать свойство column-span, чтобы взять элемент, отображающийся в столбце, и заставить его охватывать все столбцы. Это шаблон, распространенный в полиграфическом дизайне. В CodePen ниже у меня есть два таких охватывающих элемента:
h1 внутри статьи в качестве первого дочернего элемента, он охватывает все столбцы.
h2 внутри второго раздела, он также охватывает все столбцы.
Этот пример демонстрирует несколько вещей, связанных с column-span. Во-первых, можно охватить только все столбцы или ни одного. Допустимые значения для column-span — all или none.
Во-вторых, когда span прерывает блоки столбцов, мы получаем две строки столбцов. Столбцы создаются в линейном направлении над элементом span, затем они перезапускаются ниже. Содержимое в столбцах не «перепрыгивает» через элемент span, а продолжаются.
Кроме того, h1 является прямым потомком контейнера multicol, однако для h2 — это не так. h2 вложен в section. Это демонстрирует тот факт, что элементы не должны быть прямыми потомками, чтобы к ним можно было применить column-span.
Firefox присоединился к другим браузерам в реализации свойства column-span. Это означает, что у нас есть достойная поддержка свойства во всех основных браузерах, как показывают данные Compat для column-span.
Спецификация multicol
Мой интерес к реализации column-span частично объясняется тем, что я являюсь одним из редакторов спецификации multicol. Я вызвалась отредактировать спецификацию multicol, так как она некоторое время пробуксовывала, а предыдущие резолюции WG не были внесены в спецификацию. Был также ряд нерешенных проблем, многие из которых были связаны с функцией column-span. Я начала работать, копаясь в архивах списков рассылки, чтобы найти эти проблемы и способы их устранения. Затем я начала обрабатывать их и редактировать в спецификации.
В то время, когда я начала работать над спецификацией, она находилась в статусе Рекомендации кандидата (CR), что означает, что спецификация считается довольно полной. Учитывая количество проблем, рабочая группа решила вернуть ее на стадию в Рабочий проект(WD), пока эти проблемы не будут решены.
Разработка CSS требует совместной работы поставщиков браузеров и редакторов спецификаций
Для редактора спецификаций всегда интересно, когда реализуются новые функции, так как он помогает развивать спецификацию. CSS создается с помощью итеративного и совместного процесса; рабочая группа CSS не создает полную спецификацию и не бросает ее через стену разработчикам браузеров. Процесс включает в себя работу над функцией в WG, которую пытаются реализовать разработчики браузеров. Вопросы и проблемы, обнаруженные на этом этапе реализации, возвращаются в рабочую группу. Затем рабочая группа должна решить, что делать с такими проблемами, и редактор спецификации затем получает задание прояснить спецификацию на основе решения. Процесс повторяется — каждый раз, когда мы выявляем проблемы. Любая неясность может привести к проблеме совместимости, если два браузера по-разному интерпретируют описание функции.
Основываясь на работе, которую в Mozilla выполнили для реализации column-span, несколько вопросов были переданы в рабочую группу CSS и были проведены обсуждения на конференциях и при личных встречах. Мы смогли сделать спецификацию намного понятнее по ряду вопросов, связанных с column-span . Поэтому я очень рада, что новое свойство реализовано в браузерах, а также рада, что мы получили более гибкую спецификацию! Недавно мы опубликовали обновленный Рабочий проект multicol, который включает в себя множество изменений, внесенных в то время, когда Mozilla внедряли multicol в Firefox.
Другие проблемы multicol
С реализацией column-span, multicol будет работать практически одинаково во всех браузерах. У нас есть нерешенная проблема в отношении свойства column-fill, которое контролирует заполнение столбцов. Стандартный способ заполнения столбцов в режиме multicol — пытаться распределить содержимое, чтобы в каждом столбце было одинаковое количество содержимого.
Используя свойство column-fill, вы можете изменить это поведение для последовательного заполнения столбцов. Это будет означать, что multicol контейнер с заданной высотой может заполнять столбцы содержимым до указанной высоты, потенциально оставляя пустые столбцы, если больше нет содержимого.
Из-за неоднозначности спецификации Firefox и Chrome делают разные вещи, если контейнер multicol не имеет высоты. Chrome игнорирует свойство column-fill и распределение, тогда как Firefox заполняет первый столбец всем содержимым. Это проблема, которая возникает, когда у нас есть неопределенные или неясные спецификации. Это не тот случай, когда браузер «делает что-то неправильно» или пытается усложнить жизнь веб-разработчикам. Это то, что происходит, когда спецификации не полностью прояснены! Для тех, кто заинтересован, здесь описана проблема, которую пытаются решить уже довольно давно. Большинство разработчиков не сталкиваются с этой проблемой на практике. Однако, если вы видите различия при использовании column-fill, это стоит знать.
Реализация column-span является шагом к тому, чтобы сделать multicol надежным. Чтобы узнать больше о multicol и возможных вариантах использования, см. Руководство по Multicol для MDN и мою статью Когда и как использовать многостолбцовый макет.
Автор: Rachel Andrew
Источник: https://hacks.mozilla.org
Редакция: Команда webformyself.