@wowwek

Какой вариант позиционирования элементов наиболее кроссбраузерен?

Какой вариант позиционирования элементов наиболее кроссбраузерен: через псевдокласс after или через обычный блок c абсолютным позиционированием?
5a578309c52c5576009658.png
Как по вашему должно выглядеть DOM дерево для корректного отображения и на мобильной версии прикрепленного мною примера для элемента 1 и 2?

Я обычно делаю через отрицательные значения отступов и абсолютное позиционирование, но уверен, что это не всегда верно. Как делаете вы?
  • Вопрос задан
  • 84 просмотра
Решения вопроса 2
@archelon
Псевдоэлементы :before и :after поддерживаются начиная с IE8, position - с IE6.
Но не думаю, что стоит переживать о браузерах старше IE8.
Ответ написан
Комментировать
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Да как хочешь, работать они будут примерно одинаково. Я больше любли псевдоклассы, ибо меньше кода в разметке.

<div class="block" />

.block{
// ...
position: relative;
}

// 1
.block:before{
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  transform: translate(50%, -50%);
}

// 2
.block:after{
  content: '';
  position: absolute;
  bottom: 0px;
  right: 50%;
  transform: translate(50%, 50%);
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Odisseya
@Odisseya
Оптимизирую PageSpeed & Performance
  • Абсолют.позиционирование — кроссбраузернее, ограничения: для сеток лучше не использовать, надо учитывать контекст наложения.
  • Псевдо-элементы, достаточно хорошо поддерживаются, ограничения: не подходят для одиночных тегов (input), не воспринимаются через JS.


Для декоративных элементов подходят оба варианта, для контентных — первый.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы