CSS Многостолбцовый модуль Layout Уровень 1

  1. 1. Введение (Этот раздел не является нормативным.) Этот модуль описывает многостолбцовый макет...
  2. 3. Количество и ширина столбцов
  3. 3.1. ширина колонки
  4. 3.2. колонка подсчета
  5. 3.3. столбцы
  6. 3.4. Псевдо-алгоритм
  7. 3.5. Стековый контекст
  8. 4. Пробелы в колонках и правила
  9. 4.1. Колонка зазор
  10. 4.2. колонного правило цвета
  11. 4,3. колонного правило стиля
  12. 4.4. колонного правило ширины
  13. 4,5. колонного правило
  14. 5. Разрыв столбцов
  15. 5.1. брейк-перед тем , брейк-после , брейк-внутри
  16. 6. Охватывающие колонны
  17. 6.1. Колонку-пролетный
  18. 7. Заполнение столбцов
  19. 7.1. колонного заполнения
  20. 8. Переполнение
  21. 8.2. Нумерация страниц и переполнение вне многоцветных контейнеров
  22. Приложение Б. Изменения
  23. Изменения от Рабочий проект (WD) от 5 октября 2017 года

1. Введение

(Этот раздел не является нормативным.)

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

В Интернете таблицы также использовались для описания многостолбцовых макетов. Основным преимуществом использования столбцов на основе CSS является гибкость; содержимое может передаваться из одного столбца в другой, а количество столбцов может варьироваться в зависимости от размера области просмотра. Удаление разметки таблицы представления из документов позволяет их легче представлять на различных устройствах вывода, включая синтезаторы речи и небольшие мобильные устройства.

Многостолбцовые макеты легко описать в CSS. Вот простой пример:

body {column-width: 12 em}

В этом примере элемент body имеет столбцы шириной не менее 12 мкм. Точное количество столбцов будет зависеть от доступного пространства.

Количество столбцов также можно явно указать в таблице стилей:

body {column-count: 2}

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

Стенография столбцы Свойство может использоваться для установки одного или обоих свойств в одном объявлении.

В этих примерах задается соответственно число столбцов, ширина столбцов, а также их число и ширина: body {columns: 2} body {columns: 12 em} body {columns: 2 12 em}

Однако, как описано ниже, установка ширины и количества столбцов редко имеет смысл.

Другая группа свойств, представленная в этом модуле, описывает пробелы и правила между столбцами.

body {column-gap: 1 em; правило столбца: тонкий сплошной черный; }

Первое объявление в приведенном выше примере устанавливает разрыв между двумя соседними столбцами равным 1em. Пробелы в столбцах аналогичны областям заполнения. В середине пропасти будет правило, которое описывается колонного правило имущество.

Значения колонного правило свойства аналогичны свойствам границ CSS. подобно граница , column-rule - это сокращенное свойство.

В этом примере стенография колонного правило Объявление из приведенного выше примера было расширено: body {column-gap: 1 em; ширина столбца-правила: тонкая; стиль правила столбца: сплошной; цвет столбца-правила: черный; }

колонного заполнения а также Колонку-пролетный свойства дают таблицам стилей более широкий диапазон визуальных выражений в многостолбцовых макетах.

В этом примере столбцы установлены сбалансированными, то есть имеют приблизительно одинаковую длину. Кроме того, элементы h2 настроены так, чтобы охватывать все столбцы. div {column-fill: balance} h2 {column-span: все}

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

Если все свойства столбца имеют свои начальные значения, компоновка элемента будет идентична компоновке с несколькими столбцами только с одним столбцом.

2. Многоколоночная модель

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

В традиционной блочной модели CSS содержимое элемента передается в блок содержимого соответствующего элемента. Многостолбцовый макет представляет новый тип контейнера между блоком контента и контентом, а именно блок столбца (или столбец для краткости). Содержимое многоцветного контейнера передается в столбцы его столбцов.

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

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

Если многостолбцовый контейнер разбит на страницы, высота каждой строки ограничивается страницей, а содержимое продолжается в новой строке столбцов на следующей странице; поле столбца никогда не разделяется на страницы.

Тот же эффект возникает, когда элемент spanning разделяет контейнер с несколькими столбцами: столбцы перед элементом spanning уравновешиваются и укорачиваются, чтобы соответствовать их содержимому. Содержимое после элемента spanning затем попадает в новую строку столбцов.

Коробки столбцов - это блочные контейнеры. Контейнер с несколькими столбцами является основным, а столбцы - анонимными.

Примечание: поля столбцов не становятся содержащим блоком для элементов с положение: фиксированное или позиция: абсолютная. Содержащий блок является многоцветным элементом, являющимся основным блоком.

В этом примере ширина изображения устанавливается по следующим правилам: img {display: block; ширина: 100%}

Учитывая, что ширина рассчитывается относительно поля столбца, изображение будет таким же широким, как поле столбца:

Изображение ограничено полем столбца, в котором оно отображается.

Поплавки, которые появляются внутри многостолбцовых макетов, располагаются относительно поля столбца, в котором появляется поплавок.

Контейнер, состоящий из нескольких столбцов, устанавливает новый контекст форматирования блока в соответствии с разделом 9.4.1 CSS 2.1.

Разрешены вложенные многостолбцовые контейнеры, но могут быть ограничения для конкретной реализации.

Примечание. Невозможно установить свойства / значения в полях столбцов. Например, фон определенного поля столбца не может быть установлен, а поле столбца не имеет понятия заполнения, полей или границ. Будущие спецификации могут добавить дополнительную функциональность. Например, могут поддерживаться столбцы различной ширины и разного фона.

Примечание. Многоцветные контейнеры с высотой столбцов, превышающей область просмотра, могут создавать проблемы с доступностью.

3. Количество и ширина столбцов

Определение количества и ширины столбцов является основополагающим при размещении содержимого из нескольких столбцов. Эти свойства используются для установки количества и ширины столбцов:

Третье свойство, столбцы , является сокращенным свойством, которое устанавливает оба ширина колонки а также колонка подсчета ,

Другие факторы, такие как явные разрывы столбцов, содержимое и ограничения высоты, могут влиять на фактическое количество и ширину столбцов.

3.1. ширина колонки

Это свойство описывает ширину столбцов в многоцветных контейнерах.

auto означает, что ширина столбца будет определяться другими свойствами (например, колонка подсчета , если оно имеет неавтоматическое значение). <Длина> описывает оптимальную ширину столбца. Фактическая ширина столбца может быть больше (для заполнения доступного пространства) или уже (только если доступное пространство меньше указанной ширины столбца). Отрицательные значения не допускаются. Используемые значения будут ограничены минимум 1px. Например, рассмотрим эту таблицу стилей: div {width: 100 px; ширина столбца: 45 пикселей; пробел в колонке: 0; правило столбца: нет; }

Внутри элемента шириной 100px есть место для двух столбцов шириной 45px. Для заполнения доступного пространства фактическая ширина столбца будет увеличена до 50 пикселей.

Также рассмотрим эту таблицу стилей: div {width: 40 px; ширина столбца: 45 пикселей; пробел в колонке: 0; правило столбца: нет; }

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

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

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

3.2. колонка подсчета

Это свойство описывает количество столбцов многоцветного контейнера.

auto означает, что количество столбцов будет определяться другими свойствами (например, ширина колонки , если оно имеет неавтоматическое значение). <Целое число> описывает оптимальное количество столбцов, в которые будет перетекать содержимое элемента. Значения должны быть больше 0. Если оба ширина колонки а также колонка подсчета имеют неавтоматические значения, целочисленное значение описывает максимальное количество столбцов. Пример: body {column-count: 3}

3.3. столбцы

Это сокращенное свойство для настройки ширина колонки а также колонка подсчета , Опущенные значения устанавливаются на их начальные значения.

Вот несколько действительных объявлений, использующих столбцы свойство: столбцы: 12em; / * ширина столбца: 12em; количество столбцов: авто * / столбцы: авто 12em; / * ширина столбца: 12em; количество столбцов: авто * / столбцов: 2; / * ширина столбца: авто; количество столбцов: 2 * / столбцов: 2 авто; / * ширина столбца: авто; количество столбцов: 2 * / столбцы: авто; / * ширина столбца: авто; количество столбцов: авто * / столбцы: авто авто; / * ширина столбца: авто; количество столбцов: авто * /

3.4. Псевдо-алгоритм

Приведенный ниже псевдоалгоритм определяет используемые значения для колонка подсчета (N) и ширина колонки (Вт). В псевдоалгоритме есть еще одна переменная: U - используемая ширина многоколоночного элемента.

Примечание. Используемая ширина U контейнера с несколькими столбцами может зависеть от содержимого элемента, и в этом случае она также зависит от вычисленных значений колонка подсчета а также ширина колонки свойства. Эта спецификация не определяет, как рассчитывается U. Другой модуль (вероятно, базовая модель коробки) [CSS3BOX] или модуль внутренней и внешней калибровки [CSS3-ТОРЦОВЫЙ] ), как ожидается, определит это.

Функция floor (X) возвращает наибольшее целое число Y ≤ X.

(01) if ((column-width = auto) и (column-count = auto)) затем (02) выход; / * не многоцветный контейнер * / (03), если ширина столбца = авто, то (04) N: = количество столбцов (05), в противном случае, если количество столбцов = авто, то (06) N: = максимум (1, (07) ) floor ((U + столбец-пробел) / (ширина столбца + столбец-пробел))) (08) else (09) N: = min (количество столбцов, максимум (1, (10) этаж) ((U + Разрыв столбца) / (ширина столбца + разрыв столбца))))

А также:

(11) W: = max (0, ((U + разрыв столбца) / N - разрыв столбца))

Для определения количества автоматически повторяющихся дорожек UA должен свести размер дорожки к значению, указанному UA, чтобы избежать деления на ноль. Предполагается, что этот этаж будет 1px или меньше.

В фрагментированных контекстах, таких как в выгружаемых носителях, пользовательские агенты могут выполнять это вычисление для каждого фрагмента.

Используемое значение для колонка подсчета рассчитывается без учета явных разрывов столбцов или ограниченных высот столбцов, в то время как фактическое значение учитывает их.

Фактическое количество столбцов может быть ниже, чем используемое количество столбцов. Рассмотрим этот пример: div {width: 80 em; высота: 10 см; колонки: 20 эм; пробел в колонке: 0; заполнение столбца: авто; } <div> foo </ div>

Подсчитанное количество столбцов равно auto, используемое количество столбцов равно 4, а фактическое число столбцов равно 1.

3.5. Стековый контекст

Все поля столбцов в многоколоночном контейнере находятся в одном и том же контексте стека, и порядок рисования их содержимого соответствует указанному в CSS 2.1. Боксы столбцов не устанавливают новые контексты стекирования.

4. Пробелы в колонках и правила

Пробелы в столбцах и правила помещаются между столбцами в одном многоцветном контейнере. Длина пробелов столбцов и правил столбцов равна высоте столбца. Пробелы в колонках занимают место. То есть, пробелы в столбцах будут раздвигать содержимое в соседних столбцах (в пределах одного и того же многоцветного контейнера).

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

4.1. Колонка зазор

Колонка зазор принимающий <длина-процентное> в опасности, и может быть возвращен к <длина> ,

<Длина-процентное>

Определяет разрыв между столбцами. Если между столбцами есть правило столбца, оно появится в середине промежутка.

<Длина> или же <Процент> не может быть отрицательным.

нормальный <Длина-процентное> , но с использованным значением 1em.

4.2. колонного правило цвета

<Цвет>

Определяет цвет правила столбца.

4,3. колонного правило стиля

колонного правило стиля Свойство устанавливает стиль правила между столбцами элемента. <Строка-стиль> значения интерпретируются как в разрушающаяся граничная модель ,

никто значение заставляет вычисленное значение колонного правило ширины быть 0.

4.4. колонного правило ширины

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

4,5. колонного правило

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

5. Разрыв столбцов

Когда содержимое размещено в нескольких столбцах, пользовательский агент должен определить, где размещаются разрывы столбцов. Проблема разбивки контента на столбцы аналогична разбивке контента на страницы, что описано в CSS 2.1, раздел 13.3.3. [CSS21] ,

Введены три новых свойства, позволяющих описывать разрывы столбцов в тех же свойствах, что и разрывы страниц: брейк-перед тем , брейк-после , а также брейк-внутри ,

5.1. брейк-перед тем , брейк-после , брейк-внутри

брейк-перед тем , брейк-после , а также брейк-внутри определены в [CSS3-BREAK] ,

6. Охватывающие колонны

Колонку-пролетный Свойство позволяет элементу охватывать несколько столбцов.

6.1. Колонку-пролетный

Это свойство описывает количество столбцов, через которые проходит элемент. Значения:

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

Примечание. То, устанавливает ли элемент новое, не зависит от того, является ли этот элемент потомком мультиколла или нет. когда Колонку-пролетный является все это всегда так. Это помогает обеспечить устойчивость проектов к последующим версиям, которые удаляют многоцветный формат, или когда мультимедийные запросы отключают многоцветный дизайн в некоторых ситуациях.

Элемент, который охватывает более одного столбца, называется охватывающим элементом, а поле, которое он создает, называется гаечным ключом.

В этом примере элемент h2 был добавлен в образец документа после шестого предложения (т. Е. После слов «нога a»). Этот стиль применяется: h2 {column-span: all; фон: серебро}

Установив Колонку-пролетный в все все содержимое, которое появляется перед элементом h2, отображается перед элементом h2.

Элемент h2 имеет значение column-span: все

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

В этом примере контейнер multicol является элементом article. Внутри этого родителя находится абзац, а затем элемент раздела. Раздел содержит заголовок h2, настроенный на все это охватывает все три столбца, в то время как содержащий раздел остается внутри полей столбцов.

H2 - первый дочерний элемент раздела. Это означает, что поле, граница (показана красным на диаграмме) и отступы в этом разделе отображаются перед диапазоном h2 как пустой фрагмент.

<article> <p> ... </ p> <section> <h2> Элемент h2 </ h2> <p> ... </ p> </ section> </ article> section {border: 2 px сплошной красный; на полях: 3 часа; padding-top: 2 em; } h2 {column-span: all; фон: серебро} <article> <p> Элемент h2 имеет значение column-span: все, раздел имеет красную рамку, верхний отступ и поле

Охватывающий элемент занимает больше места, чем этот элемент занимал бы в противном случае. Когда пространство ограничено, может быть невозможно найти место для охватывающего элемента. В этих случаях пользовательские агенты могут рассматривать элемент как никто было указано на это имущество.

7. Заполнение столбцов

Существует две стратегии заполнения столбцов: столбцы могут быть сбалансированными или нет. Если столбцы сбалансированы, пользовательские агенты должны попытаться минимизировать изменения в высоте столбца, соблюдая при этом вынужденные разрывы, вдовы а также дети сироты и другие свойства, которые могут влиять на высоту столбцов. Если столбцы не сбалансированы, они заполняются последовательно; некоторые столбцы могут быть частично заполнены или вообще не заполнены.

7.1. колонного заполнения

Значения:

баланс Баланс содержимого равномерно между столбцами, насколько это возможно. В фрагментированных контекстах только последний фрагмент сбалансирован. balance-all Баланс содержимого одинаково между столбцами, насколько это возможно. В фрагментированных контекстах все фрагменты сбалансированы. автоматическое заполнение столбцов последовательно

В непрерывном контексте это свойство не оказывает никакого влияния при наличии переполненных столбцов.

В этом примере балансировка столбцов отключена: article {width: 60 em; высота: авто; столбцы: 4; заполнение столбца: авто; }

В результате первый столбец заполняется всем содержимым:

В результате первый столбец заполняется всем содержимым:

Нет балансировки, поэтому весь текст показан в одном абзаце. В этом примере статья имеет два абзаца: сначала длинный, а затем более короткий. Этот код применяется: article {width: 60 em; высота: авто; столбцы: 4; заполнение столбца: баланс; } p {break-after: column; }

Наименьшая возможная высота столбца содержит пять строк текста. После того, как высота столбца была установлена, столбцы заполняются последовательно. В результате третий столбец достигает первых двух столбцов, а последний столбец оказывается значительно короче.

Как только высота столбца установлена, столбцы заполняются последовательно. статья {ширина: 60 ​​эм; высота: авто; столбцы: 4; заполнение столбца: баланс; }

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

Высота колонны устанавливается по рисунку.

8. Переполнение

8.1. Переполнение внутри многоцветных контейнеров

За исключением случаев, когда это может привести к разрыву столбца, содержимое, которое выходит за рамки столбцов, явно переполняется и не обрезается до колонка ,

Примечание: см. §5 Разрывы столбцов для разрывов столбцов и §8.2 Разбивка на страницы и переполнение вне многоцветных контейнеров для того, чтобы обрезать его в поле содержимого контейнера с несколькими столбцами.

8.2. Нумерация страниц и переполнение вне многоцветных контейнеров

Правила содержимого и столбцов, которые выходят за пределы полей столбцов по краям контейнера из нескольких столбцов, обрезаются в соответствии с переполнение имущество.

Многоцветный контейнер может иметь больше столбцов, чем может вместить, из-за:

  • объявление, которое ограничивает высоту столбца (например, используя рост или же максимальная высота ). В этом случае дополнительные столбцы создаются в линейном направлении.
  • размер страницы. В этом случае дополнительные поля столбцов перемещаются на следующую страницу (ы).
  • явные разрывы столбцов. В этом случае дополнительные поля столбцов создаются во встроенном направлении для непрерывных контекстов, а дополнительные поля столбцов перемещаются к следующему фрагменту (фрагментам) для фрагментированных носителей.

Столбцы, которые появляются вне контейнера multicol в непрерывном контексте, называются столбцами переполнения. Переполненные столбцы могут влиять на высоту многоцветного контейнера.

В этом примере высота контейнера с несколькими столбцами ограничена максимальной высотой. Кроме того, таблица стилей указывает, что переполненное содержимое должно быть видимым: div {max-height: 5 em; переполнение: видимое; }

В результате количество столбцов увеличивается.

В результате количество столбцов увеличивается

Столбец переполнения создается во встроенном направлении.

В непрерывных контекстах столбцы переполнения могут влиять на высоту многоцветного контейнера. В этом примере в переполнении появляется столбец с четырьмя строками текста. Многоцветный контейнер сделан достаточно высоким, чтобы вместить этот столбец.

Последний столбец - это столбец переполнения, но он выше других. Контейнер достаточно высок для этой колонки. В этом примере явные разрывы столбцов генерируются после абзацев: p {break-after: column; }

В результате число столбцов увеличивается, а дополнительные столбцы добавляются в линейном направлении:

Столбец переполнения создается во встроенном направлении. В постраничных носителях дополнительные столбцы показаны на следующей странице. Учитывая тот же код, что и в предыдущем примере, последний абзац появляется на второй странице. Это появится на первой странице: Столбец переполнения создается во встроенном направлении Первые три абзаца появляются на первой странице.

Это появится на второй странице:

Столбец переполнения перемещен на вторую страницу.

Из-за балансировки столбцов последний абзац разделен на три столбца.

Приложение Б. Изменения

Это приложение является информативным .

Изменения от Рабочий проект (WD) от 5 октября 2017 года

  • Изменены ссылки на постраничные носители для ссылки на фрагментированные контексты. Постановили 12 апреля 2018 г. ,
  • Изменена строка, касающаяся свойства column-fill:
    В непрерывных средах это свойство не влияет на столбцы переполнения.
    Для того, чтобы:
    В непрерывных средах это свойство не оказывает никакого влияния при переполнении столбцов. Принято решение: 12 апреля 2018 г.
  • Добавьте строку текста и пример, чтобы показать, что переполненные столбцы могут влиять на высоту многоцветного контейнера. Принято решение: 12 апреля 2018 г.
  • Заменили примеры макетов HTML на версии SVG, так как примеры были неясными. Выпуск 1087 ,
  • Изменено значение normal для разрыва столбца, чтобы оно составляло 1em, а не значение, указанное в UA, с предложением 1em. Принято решение: 4 апреля 2018 г.
  • Уточнено, что отрицательные значения недопустимы для ширины столбца и что, хотя можно указать 0, используемые значения будут ограничены минимумом в 1 пиксель. Принято решение: 14 марта 2018 г.
  • Уточнено, что там, где есть охватывающий элемент, содержимое автоматически балансируется по всем столбцам в непосредственно предшествующей строке столбца до появления элемента. Принято решение: 9 ноября 2017
  • Добавлено пояснение и дополнительный пример того, что элементы spanning могут быть ниже первого уровня потомков, и что в случае полей, границ и отступов для элемента, содержащего spanning, это будет нарисовано над гаечным ключом. Принято решение: 8 ноября 2017
  • Изменено предложение Правила столбцов закрашиваются в слое встроенного содержимого, но ниже всего встроенного содержимого внутри многоцветного элемента. Правила столбца закрашиваются чуть выше границы многоцветного элемента. Для прокручиваемых многоцветных элементов обратите внимание, что, хотя граница и фон многоцветного элемента, очевидно, не прокручиваются, правила должны прокручиваться вместе со столбцами. Принято решение: 7 ноября 2017
  • В разделе «Модель с несколькими столбцами» удалены два предложения. То есть блоки столбцов ведут себя как блоки уровня блоков, ячеек таблицы и блоков встроенных блоков в соответствии с CSS 2.1, раздел 10.1, пункт 2 CSS21. Однако поля столбцов не устанавливают блоки контейнеров для элементов с позиция: фиксированная или позиция: абсолютная , , Они были заменены пояснением о главном блоке и новым примером, показывающим, как элементы abspos относятся к многоцветному контейнеру. Принято решение: 7 ноября 2017
  • Убрано предложение «Чтобы указать, где разрывы столбцов должны (или не должны) появляться, вводятся новые значения ключевых слов». и следующий пример (Пример 7 в WD опубликован 5 октября 2017 ), так как спецификация multicol больше не вводит эти свойства. редакционный
  • Изменено отношение к элементу, к которому мы применили multicol, из элемента multi-column или multicol к контейнеру multi-column или multicol. Принято решение: 22 ноября 2017 г.
  • Удален пример, в котором говорилось: «Если высокое изображение перемещается в столбец на следующей странице, чтобы освободить место для него, его естественный столбец можно оставить пустым. Если это так, считается, что столбец имеет содержимое с целью принятия решения о том, правило столбца должно быть нарисовано. " Постановлено: 7 сентября 2017

Изменения от Рекомендация кандидата (CR) от 12 апреля 2011 г. ,

Подтверждения

Этот документ основан на нескольких старых предложениях и комментариях к старым предложениям. Авторы включают в себя:

Алекс Могилевский, Энди Кларк, Антон Проу, Берт Бос, Бьорн Хёрманн, Седрик Саварезе, Крис Лилли, Крис Уилсон, Даниэль Глазман и Дэйв Раггетт, Дэвид Хаятт, Дэвид Сингер, Дэвид Вулли, Элика Этемад, Джованни Кампанья, Ян Хиксон. Йост де Валк, Кевин Лавер, Л. Дэвид Барон, Маркус Мильке, Мелинда Грант, Майкл Дэй, Ойвинд Стенхауг, Питер Линсс, Питер-Поль Кох, Роберт О'Каллахан, Роберт Стеван, Сергей Генкин, Шелби Мур, Стив Зиллес, Сильвен Галино, Тантек Челик, Тиль Хальбах,

Требования соответствия выражены комбинацией описательных утверждений и терминологии RFC 2119. Ключевые слова «ДОЛЖНЫ», «НЕ ДОЛЖНЫ», «НЕОБХОДИМЫ», «НЕ ДОЛЖНЫ», «НЕ ДОЛЖНЫ», «СЛЕДУЕТ», «НЕ СЛЕДУЕТ», «РЕКОМЕНДУЕТСЯ», «МОЖЕТ» и «ДОПОЛНИТЕЛЬНО» в нормативных частях. этого документа следует интерпретировать, как описано в RFC 2119. Однако для удобства чтения эти слова не отображаются заглавными буквами в данном описании.

Весь текст этой спецификации является нормативным, за исключением разделов, явно помеченных как ненормативные, примеры и примечания. [RFC2119]

Примеры в этой спецификации вводятся со словами «например» или отделены от нормативного текста с помощью class = «example», например так:

Информационные примечания начинаются со слова «Примечание» и отделены от нормативного текста с помощью class = «note», например:

Обратите внимание, это информационная заметка.

Советы - это нормативные разделы, разработанные для привлечения особого внимания и отличающиеся от другого нормативного текста с помощью <strong class = "advisement">, например:

Таблица стилей соответствует данной спецификации, если все ее операторы, использующие синтаксис, определенный в этом модуле, действительны в соответствии с общей грамматикой CSS и отдельными грамматиками каждой функции, определенной в этом модуле.

Рендерер соответствует этой спецификации, если, помимо интерпретации таблицы стилей, определенной в соответствующих спецификациях, он поддерживает все функции, определенные в этой спецификации, путем их правильного анализа и соответствующей визуализации документа. Однако неспособность UA правильно отобразить документ из-за ограничений устройства не делает UA несовместимым. (Например, UA не требуется отображать цвета на монохромном мониторе.)

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

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

Чтобы авторы могли использовать совместимые с форвардом правила синтаксического анализа для назначения резервных значений, средства визуализации CSS должны рассматриваться как недействительные (и игнорировать при необходимости ) любые at-правила, свойства, значения свойств, ключевые слова и другие синтаксические конструкции, для которых у них нет полезного уровня поддержки . В частности, пользовательские агенты не должны выборочно игнорировать неподдерживаемые значения свойств и учитывать поддерживаемые значения в одном объявлении свойства с несколькими значениями: если какое-либо значение считается недопустимым (как и неподдерживаемые значения), CSS требует, чтобы все объявление игнорировалось.

Как только спецификация достигает стадии Рекомендации кандидата, разработчики должны выпустить без префикса реализация любой функции уровня CR, которую они могут продемонстрировать, чтобы быть правильно реализованной в соответствии со спецификацией, и должна избегать раскрытия префиксного варианта этой функции.

Чтобы установить и поддерживать совместимость CSS между реализациями, рабочая группа CSS просит, чтобы неэкспериментальные средства визуализации CSS представили W3C отчет о реализации (и, если необходимо, тестовые сценарии, используемые для этого отчета о реализации), перед выпуском нефиксированной реализации любого Особенности CSS. Тестовые примеры, представленные в W3C, подлежат проверке и исправлению рабочей группой CSS.

Похожие

Немецкие сервисы: это исключительно большое количество кибератак
Немецкие службы сообщили об исключительном количестве кибератак в этом году. Глава Федерального ведомства по защите Конституции Ханс-Георг Маассен заявил, что большинство из них были совершены хакерами из России, Китая и Ирана.
Интегрируйте свой собственный CSS в тему WordPress - вот как это работает
Иногда вы просто хотите изменить мелочь на тему WordPress, например, настроить цвет шрифта или стиль шрифта. Если эти изменения в теме невозможны по умолчанию, альтернативно есть возможность интегрировать свой собственный CSS и, таким образом, заменить свойства CSS темы или даже выполнить совершенно новые свойства CSS. И как это работает? Обязательным условием является то, что вы уже знакомы с CSS. Тогда адаптация темы с ее собственным CSS на самом деле
Позиционирует лучший способ увеличить продажи
Статья покажет вам , является ли позиционирование лучшим способом увеличения продаж и как сэкономить 20 000 злотых,
Почему «Перенос покупок» не копирует приложения в iTunes при резервном копировании вашего iPhone
... или о создании резервной копии вашего устройства iOS это, когда восстановлено, также восстановит все ваши приложения. Как я отмечал в статье, резервная копия iCloud восстанавливает приложения и связанные с ними данные, а восстановление с использованием резервной копии iTunes - но, возможно, не так, как вы ожидаете. Вскоре после публикации статьи, Сандип Рой прислал мне сообщение через Твиттер и оставил комментарий с просьбой об очевидной сноске в конце статьи.
Конто 360 в Банке Миллениум - тест totalmoney.pl
04/06/2018 | 12 мин чтение Независимо от того, покупаете ли вы стиральную машину или обувь, вы смотрите тесты и читаете мнения других пользователей. И очень хорошо - не покупайте кошку в мешке! Именно поэтому мы вступаем в фазу тестирования в мире финансов! Прочитайте, как я отношусь к Konto 360o, которую я настроил в Bank Millennium некоторое время назад.
Как сделать концептуальную карту
Вы когда-нибудь чувствовали себя не спящими по ночам, заботясь о том, как сделать концептуальную карту? О, хорошо, мы тоже. Концептуальные карты на самом деле довольно просты. Все, что вам нужно сделать, это. , , Именно так. А с Lucidchart это легко сделать. В концептуальных картах концепты чаще всего изображаются в виде кругов или блоков, соединенных линиями или стрелками, содержащими
СУМКА С НЕОБХОДИМЫМ КЛЕМОМ AUBL213 100L
Легкий возврат товара Купи и проверь мирно дома. Вы можете вернуть этот товар в течение дня без объяснения причин. Показать детали дни, чтобы вернуться Наиболее важным является удовлетворение ваших покупок. Заказанные у нас товары могут быть возвращены в течение нескольких дней без объяснения причин . Нет стресса или забот
Hardcore Hardware: мы наполнили этот ПК 128 ГБ ультрасовременной оперативной памяти DDR4
Люди любят праздновать разрушение барьеров. Скорость звука. Первый процессор с тактовой частотой 1 ГГц или жесткий диск емкостью 1 ТБ. Так что будьте готовы выпить калифорнийское игристое вино, потому что мы только что пробили барьер оперативной памяти на 64 ГБ. Этот барьер, если вы не знали, раздражал потребительские вычисления уже много лет. Все основные настольные ПК оснащены четырьмя слотами для максимальной оперативной памяти DDR3 объемом 32 ГБ. В high-end, компьютеры
Koadic: защита безопасности в эпоху вредоносных программ LoL, часть IV
... ии «Руткит после эксплуатации Koadic». Проверьте остальное: Одним из преимуществ изучения механизмов внутри Koadic является то, что вы получаете низкоуровневые знания о том, как выполняются атаки в реальном мире. Инструменты тестирования пера позволяют вам исследовать, как хакеры перемещаются или поворачиваются однажды в системе жертвы, и помогают вам понять эффективные защитные меры. Блокировать этот хэш Pass Hash (PtH) является одним из подходов, а не единственным,
Как установить Windows на свой Mac с помощью Boot Camp
Итак, у вас есть Mac, но вы хотите запустить Windows? Вам повезло: вскоре после того, как в 2009 году на рынке появились первые Mac на базе Intel, Apple выпустила инструмент под названием Boot Camp, который позволяет владельцам компьютеров Mac устанавливать и запускать свои машины в Microsoft Windows. Одним нажатием кнопки вы можете переключаться между Mac и Windows при каждом включении компьютера. Вероятно, самая распространенная причина, по которой владельцы Mac используют Boot Camp,
5 лучших приложений для управления файлами для iPhone и iPad
Реклама iOS не имеет доступной пользователю файловой системы, такой как Windows или Android. Но это не значит, что вы не можете использовать свой iPhone или iPad в качестве файлового менеджера. Если ваш бизнес вращается вокруг файлов и документов, которые необходимо регулярно загружать, редактировать и предоставлять к ним общий доступ, вам потребуется использовать стороннее приложение для управления файлами на iOS. К счастью, есть немало классных вариантов. Что

Комментарии

Ты до сих пор не знаешь Kiss my Ki?
Ты до сих пор не знаешь Kiss my Ki? Наши новые группы проектов в одном поиске Результаты более 100 интернет-магазинов. Посетите Kiss My Ki Защити свой телефон Там не было никаких сборов Наслаждайся музыкой Информация на этом сайте не гарантируется. Kimovil не несет ответственности за любые недостатки, упущения или
Но теперь вы хотите открыть вложение CSV-файла в блокноте, не могли бы вы понять это?
Но теперь вы хотите открыть вложение CSV-файла в блокноте, не могли бы вы понять это? В этой статье я представлю два решения для изменения программ по умолчанию (или ассоциаций файлов) для открытия вложений в Outlook. Быстрый экспорт и сохранение всех вложений из множества выбранных писем в Outlook Обычно мы можем сохранять вложения с одного адреса электронной почты при активации инструментов вложения и использовать функцию « Сохранить все вложения»
Разве не нужно, чтобы часы на правой стороне панели задач были погашены ?
Разве не нужно, чтобы часы на правой стороне панели задач были погашены ?! Вы считаете его бесполезным инструментом и хотели бы избавиться от него как можно быстрее - мы покажем вам, как раз и навсегда удалить его из панели задач с небольшой модификацией реестра. Начнем с запуска редактора реестра , нажмите « Пуск» , « Выполнить» и в появившемся окне введите команду regedit , которая активирует ранее упомянутый инструмент. Следующим шагом на пути удаления часов
Все еще не можете установить Windows?
Все еще не можете установить Windows? Обратитесь к вашему Документация Windows для получения дополнительной помощи. Как выбрать операционную систему при запуске Теперь, когда у вас установлены и работают как MacOS, так и Windows, вы можете выбрать, какую операционную систему запускать при запуске. При включении или перезагрузке компьютера удерживайте нажатой
Вы случайно не открыли его?
Вы случайно не открыли его? Там вы делаете. Вредоносное ПО в основном зависит от вашего любопытства и отвлечения. Чтобы заразить вашу машину, потребуется всего один неосторожный ход онлайн. Однако необходимость удаления паразита впоследствии потребует гораздо больше времени и энергии. Избавьте себя от хлопот и заранее следите за инфекциями. Если вы столкнулись с каким-либо сомнительным электронным письмом или сообщением в социальных сетях, удалите его. Там может быть какой-то злобный злоумышленник,
Чаще всего лучше, чтобы ваша основная навигация была простой и понятной, а если вы хотите добавить персонализацию, то почему бы не попробовать это с помощью всплывающих окон и уведомлений?
Чаще всего лучше, чтобы ваша основная навигация была простой и понятной, а если вы хотите добавить персонализацию, то почему бы не попробовать это с помощью всплывающих окон и уведомлений? Приведенный ниже пример из Spread Shirt иллюстрирует умный копирайтинг, чтобы побудить пользователей оставлять отзывы. Рубашка
Еще не пользователь Lucidchart?
Еще не пользователь Lucidchart? Бесплатно зарегестрироваться! 2. Создать основную концепцию Начните с области знаний, с которой вы очень хорошо знакомы. Определите центральную идею, которая связана со всеми другими идеями на вашей карте. Если вы не знаете, с чего начать, попробуйте определить часть текста, занятие в классе или сложную проблему, требующую решения. Возможно, было бы полезно создать один вопрос, иногда называемый фокусным вопросом, который четко определяет
Konto 360o - что мне не нравится?
Konto 360o - что мне не нравится? Конечно, идеальных продуктов не существует, поэтому я нашел несколько недостатков в Konto 360o. Я не люблю использовать интернет-банкинг. Интерфейс для меня не интуитивно понятен. Когда я впервые захотел проверить историю транзакций или сделать перевод, мне пришлось на мгновение посмотреть, где находятся эти варианты. У меня также есть небольшое возражение по поводу работы приложения. В предыдущей версии у меня часто возникали проблемы
Раздел Как мне создать запрос на поддержку онлайн?
Konto 360o - что мне не нравится? Конечно, идеальных продуктов не существует, поэтому я нашел несколько недостатков в Konto 360o. Я не люблю использовать интернет-банкинг. Интерфейс для меня не интуитивно понятен. Когда я впервые захотел проверить историю транзакций или сделать перевод, мне пришлось на мгновение посмотреть, где находятся эти варианты. У меня также есть небольшое возражение по поводу работы приложения. В предыдущей версии у меня часто возникали проблемы
Не понимаете, что это изменит?
Не понимаете, что это изменит? Проверьте наш руководство по технологиям мобильных дисплеев Общие технологии мобильных дисплеев, которые вы должны знать Общие технологии мобильных дисплеев, которые вы должны знать Когда вы сравниваете разные
Почему это никак не влияет на наше мнение?
Почему это никак не влияет на наше мнение? Alex С 2016 года в Китае команда разработчиков гаджетов и в восторге от всех смартфонов и сумасшедших технологических гаджетов с Дальнего Востока.

И как это работает?
Ты до сих пор не знаешь Kiss my Ki?
Но теперь вы хотите открыть вложение CSV-файла в блокноте, не могли бы вы понять это?
Разве не нужно, чтобы часы на правой стороне панели задач были погашены ?
Все еще не можете установить Windows?
Вы случайно не открыли его?
Чаще всего лучше, чтобы ваша основная навигация была простой и понятной, а если вы хотите добавить персонализацию, то почему бы не попробовать это с помощью всплывающих окон и уведомлений?
Еще не пользователь Lucidchart?
Konto 360o - что мне не нравится?
Konto 360o - что мне не нравится?