Поместив элемент визуально за другим, хотя в DOM он выглядит сначала, используя сетку или Flexbox? -- flexbox поле с участием accessibility поле с участием css-grid пол Связанный проблема

Placing an element visually after another, although in the DOM it appears first using Grid or Flexbox?


1
vote

проблема

русский

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

В следующем коде <time> элемент должен визуально отображаться перед заголовками, но для причины доступности, в доме он помещается после этого.

 <код> <article>   <h2>Wahlresultate bekannt gegeben</h2>   <time datetime="2020-08-18">Dienstag, 18.8.2020</time>    <p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p> </article>   

В первые дни нам нужно было использовать хаки абсолютное позиционирование для достижения чего-то подобного. Что я должен использовать для этого сегодня? Flexbox? Сетка? И как бы это было достигнуто?

Большое спасибо.

Английский оригинал

I'm an accessibility expert, and my CSS has gotten quite rusty, but I need to quickly deliver an example for placing an element visually after the other, although in the DOM it is the other way round.

In the following code, the <time> element should visually appear before the heading, but for accessibility reasons, in the DOM it is placed after it.

<article>   <h2>Wahlresultate bekannt gegeben</h2>   <time datetime="2020-08-18">Dienstag, 18.8.2020</time>    <p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p> </article> 

In early days, we needed to use hacky absolute positioning to achieve something like that. What should I use for this today? Flexbox? Grid? And how would it be accomplished?

Thanks a lot.

</div
        

Список ответов

1
 
vote
vote
Лучший ответ
 
<Р> Вы можете добиться этого с Flex Box , в частности, порядок собственность. <Р> Будьте осторожны при использовании этого в каждом сценарии, хотя, имея визуально разный порядок в DOM порядке обычно является доступность Ноно (хотя в данном случае, похоже, отлично). Используйте это экономно!

 <Код> article {   display: flex;   flex-direction: column; }  h2 {   order: 2;   margin-top: 0.5em; } time {   order: 1; } p{    order: 3; }  
 <Код> <article>   <h2>Wahlresultate bekannt gegeben</h2>   <time datetime="2020-08-18">Dienstag, 18.8.2020</time>    <p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p> </article>  
<Р> Для того, чтобы сделать его легче контролировать, я бы вместо того, чтобы добавить <код> <div> вокруг элементов, которые вы хотите поменять местами вокруг и делают, что <код> display: flex , таким образом, вы не должны определяют порядок все в пределах <код> article . <Р> Я включил обе версии упаковывают вы не можете изменить разметку.

 <Код> .container {       display: flex;       flex-direction: column;     }      h2 {       order: 2;       margin-top: 0.5em;     }     time {       order: 1;     }  
 <Код> <article>       <div class="container">           <h2>Wahlresultate bekannt gegeben</h2>           <time datetime="2020-08-18">Dienstag, 18.8.2020</time>       </div>       <p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p> </article>  

Максимальная совместимость

<Р> Как это помечается как <код> accessibility Я хотел бы предостеречь вас от использования Flexbox. Flexbox не работает в IE 8, 9 и т.д. . <Р> Это проблема, потому что много экрана пользователей читатель до сих пор используют IE8, IE9, IE10 и т.д. < / а>. <Р> По этой причине вы должны либо использовать Flexbox polyfill или вместо вернуться к использованию абсолютное позиционирование, как показано на этой скрипке.
 

You can achieve this with Flex Box, specifically the order property.

Be careful using this in every scenario though, having a visually different order to DOM order is normally an accessibility nono (although in this case it seems fine). Use it sparingly!

article {   display: flex;   flex-direction: column; }  h2 {   order: 2;   margin-top: 0.5em; } time {   order: 1; } p{    order: 3; }
<article>   <h2>Wahlresultate bekannt gegeben</h2>   <time datetime="2020-08-18">Dienstag, 18.8.2020</time>    <p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p> </article>

To make it easier to control I would instead add a <div> around the elements you want to swap around and make that display: flex, this way you don't have to define the order of everything within the article.

I have included both versions incase you are unable to change the markup.

.container {       display: flex;       flex-direction: column;     }      h2 {       order: 2;       margin-top: 0.5em;     }     time {       order: 1;     }
<article>       <div class="container">           <h2>Wahlresultate bekannt gegeben</h2>           <time datetime="2020-08-18">Dienstag, 18.8.2020</time>       </div>       <p>Heute morgen wurden die Resultate der aktuellen Wahlen veröffentlicht.</p> </article>

Maximum compatibility

As this is marked as accessibility I would caution you on the use of flexbox. Flexbox does not work in IE 8, 9 etc..

This is a problem because a lot of screen reader users still use IE8, IE9, IE10 etc.

For that reason you should either use a flexbox polyfill or instead revert to using absolute positioning as shown in this fiddle.

</div
 
 
     
     

Связанный проблема

1  Выпадание не изменить размер  ( Dropdown not resize ) 
Я использую Flex Grid, где ряд и столбец, имеющие свойство <код> display:flex . Теперь я создаю раскрывающуюся. Использование свойства <код> display:inline-fl...

3  Ведущие изображения в контейнерах Flexbox  ( Leading images in flexbox containers ) 
Я строил контейнеры Flexbox - на самом деле их строки - а в некоторых там были ведущие изображения. К моему удивлению что-то неожиданное случается каждый раз,...

-1  Невозможно отобразить флажок Angularjs материал горизонтально на iPad, но работает на рабочем столе  ( Unable to display angularjs material checkbox horizontally on ipad but works on ) 
У меня есть проблема с Angularjs Flex. В первом на iPad он отображается вертикально, но на режиме iPad Chrome в инструментах разработчика оно отображается пра...

6  Автоматическое изменение изображения в Flex item  ( Auto resize image in flex item ) 
У меня есть следующие HTML: <код> <div class="main-container"> <h1>A title</h1> <p>Some text</p> <div class="sub-container"> <img src=""...

0  Использование Flex-Wrap на контейнерах с шириной: 100%  ( Using flex wrap on containers with width 100 ) 
Я пытаюсь иметь форму, которая имеет входы для имени и LASTNAME . Я хотел бы, чтобы мои данные были встроены, а также занимают 100% доступного пространства...

-1  Flexbox с горизонтальным списком Добавьте прокладку слева [дубликат]  ( Flexbox with horizontal list add a padding left ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

3  Абсолютно позиционирование с Flexbox в Safari  ( Absolutely positioning with flexbox in safari ) 
Safari имеет полную поддержку Flexbox в соответствии с Caniuse. Я просто пытаюсь складывать некоторые по-разному разрабатыванию друг на друга, используя F...

17  Создание Divs равных размеров с оберткой  ( Creating divs of equal sizes with wrap around ) 
Я пытаюсь создать систему меню с изображением и текстом выше и ниже. Данные динамичны. Я хочу, чтобы система меню отображалась, чтобы каждое изображение было ...

0  Можно стекать изображения в гибкой контейнере?  ( Possible to stack images within a flex container ) 
У меня есть проект, который я в настоящее время пытаюсь ревертировать, и мне интересно, можно ли стекать изображения в пределах гибкого контейнера? Вот HTML...

0  Центр логотип над навигацией Flexbox  ( Center logo over navigation flexbox ) 
Я пытаюсь центрировать логотип над навигацией и слегка охватить изображение баннера (изображение ниже). Я не уверен, что сделает лучший современный подход, бу...

0  Bootstrap Grid [2 предмета] в центре  ( Bootstrap grid 2 items in center ) 
Я делаю веб-сайт с помощью bootstrap, и это скриншот сетки из w3schools.com. На моем сайте вместо того, чтобы сфотографировать свой профиль на левом языке 1 ...

1  Как realign Ements в медиа-запросе с помощью Flexbox?  ( How to realign items in a media query using flexbox ) 
Я хотел бы вернуть свои 3 столбца теста в ID = «Статьи», используя медиа-запрос. Я хотел бы переместить их так, чтобы они были вертикально, а не горизонтальны...

3  CSS3: Flex Display и переполнение  ( Css3 flex display and overflow ) 
У меня проблемы с использованием дисплея и переполнения CSS3 Flex. Я хочу, чтобы ящик был «y-прокручиваемый», если содержимое переполняется на оси Y и «X-пере...

2  Дисплей FLEX не работает на сводных тегах в Chrome?  ( Display flex doesnt work on summary tags in chrome ) 
У меня есть <код> class AddEditRating(graphene.Mutation): rating = graphene.Field(RatingType) class Arguments: movie = graphene.ID() ...

1  Как сделать последние элементы в мою сеть CSS сетку на полную ширину с одинаковым расстоянием?  ( How to make the last items in my css grid stretch full width with equal spacing ) 
Я новый, чтобы использовать CSS Grid и наткнулся на проблему, которую я не могу найти ответ онлайн. То, что я пытаюсь достичь, - это 7 столбцов, а остальные э...




© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.