Требуется ваше мнение о предлагаемом решении проблемы методов компоновки, упорядочивающих элементы в порядке, который не связан с источником документа.
Рабочая группа CSS работает над решением ситуации, когда метод макета может располагать элементы в порядке, который не связан с источником и, следовательно, с порядком чтения и фокусировки документа. В этой статье описываются проблема и предлагаемое решение. Мы будем рады вашим отзывам.
Проблема
Порядок чтения HTML-документа соответствует исходному порядку. Это означает, что программа чтения с экрана будет читать документ в том виде, в котором он расположен в исходном коде, и человек, использующий клавиатуру для перемещения по документу, также будет следовать этому исходному порядку. Обычно это имеет смысл, и разумный порядок исходного кода документа жизненно важен для презентаций контента в режиме чтения, программ чтения с экрана и любого устройства с ограниченным CSS. Однако CSS и, в частности, flexbox и Grid, могут создавать макеты, в которых макет определяет порядок визуального чтения, отличный от базового источника.
Например, использование свойства order для гибких элементов меняет порядок макета, но не порядок в исходном коде.
Используя макет сетки, выбранный метод макета может перепутать порядок табуляции, например, при использовании grid-auto-flow: dense , который создает случайный порядок расположения элементов.
Разработчик также может вызвать это отключение, разместив элементы в сетке в порядке, отличном от того, который указан в исходном коде.
Предложенное решение
Рабочая группа CSS предлагает решение этой проблемы и будет рада отзывам разработчиков и сообщества специальных возможностей об этом подходе.
Следующие рандомизированные макеты с reading-order: auto
В ситуациях, когда создается случайный порядок макета, например, при использовании плотной упаковки в макете сетки, вы, вероятно, захотите, чтобы браузер следовал макету, а не исходному порядку. Чтобы это произошло, гибкие элементы или элементы сетки должны иметь свойство reading-order со значением auto .
Следующий CSS приведет к тому, что порядок чтения будет соответствовать размещению элементов, которые были плотно упакованы из-за grid-auto-flow: dense .
.cards {
display: grid;
grid-auto-flow: dense;
}
.cards li {
grid-column: auto / span 2;
reading-order: auto;
}
Следование нерандомизированным макетам с reading-order-items
В некоторых сеточных и гибких макетах порядок макета легко понять. Например, в гибком макете, который использует свойство order для изменения порядка элементов, существует очевидный порядок макета, определяемый свойством order . В других макетах не так ясно, каков идеальный порядок макетов: вариантов может быть несколько. Поэтому при использовании нерандомизированных макетов вам необходимо будет добавить в контейнер свойство grid-order-items со значениями ключевых слов, объясняющими ваше намерение относительно порядка макета.
В следующем примере показан гибкий макет с использованием row-reverse . Гибкие элементы имеют reading-order: auto и гибкий контейнер reading-order-items: flex flow , чтобы указать, что мы также хотим, чтобы порядок чтения тоже следовал направлению flex-flow , а не следовал визуальному порядку (который мы могли бы укажите с помощью flex visual ).
.cards {
display: flex;
flex-flow: row-reverse;
reading-order-items: flex flow;
}
.cards li {
reading-order: auto;
}
В следующем примере макет сетки создается с использованием grid-template-areas , а элементы размещаются в порядке макета, отличном от исходного порядка. Свойство reading-order-items используется для указания того, что мы должны следовать порядку макета, проходя каждую строку перед переходом к следующей. ( grid column будет указывать противоположное направление).
.wrapper {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-areas:
"a a b b b b"
"c c d d e e"
"f f g g h h";
reading-order-items: grid rows;
}
.a {
grid-area: a;
reading-order: auto;
}
Означает ли это, что порядок исходников не имеет значения?
Нет, порядок исходников по-прежнему имеет значение. Эту функцию следует использовать только в особых ситуациях, когда порядок чтения может отличаться от источника. Например, при использовании методов макета, которые могут вызвать такое отключение, например, при плотной упаковке сетки, или когда другой порядок макета имеет смысл в определенной точке останова.
При использовании этих свойств создайте исходный документ, используя порядок, который имел бы смысл, если бы страница отображалась без CSS. Добавляйте эти свойства только в тех местах и точках останова, где они необходимы.
Должны ли инструменты разработки применять эти свойства?
Авторские инструменты, которые позволяют людям создавать макет сетки путем перетаскивания элементов, по-прежнему должны побуждать людей создавать разумный исходный документ. Поэтому в большинстве случаев было бы более уместно изменить порядок источника на основе порядка макета, а не использовать эти свойства как ленивый способ борьбы с отключением.
Поделитесь, пожалуйста, своим мнением об этом предложении.
Мы очень хотим собрать отзывы по этому поводу. В частности, если у вас есть вариант использования, который, по вашему мнению, это не решит, или у вас есть проблемы с доступностью этого подхода, сообщите об этом в рабочую группу CSS.
Существует постоянная тема , в которой содержится множество вариантов использования и мыслей по поводу подхода. Эта ветка — отличное место для добавления комментариев и выявления потенциальных проблем с этим предложением. Обратите внимание, что текущее предложение сильно отличается от моего первоначального, с которого началась ветка. Заинтересованным людям может понравиться весь разговор, который привел к тому, что мы имеем сегодня, поскольку это хороший пример того, как в рабочей группе CSS работают предложения, чтобы стать чем-то, что можно реализовать в браузерах.
Миниатюрное изображение Патрика Томассо . Спасибо Крису Харрельсону, Табу Аткинсу и Яну Килпатрику за отзывы и обзор.