Лучший способ позиционирования в CSS

Лучший способ позиционирования в CSS

От автора: позиционирование сдвигов – одна из самых громоздких вещей в CSS. Давайте рассмотрим способы позиционирования в CSS.

 

Приходилось писать что-то подобное? Некоторые даже сортируют свойства по алфавиту.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

И бац! Если мы запишем в это правило еще какие-либо свойства, то концепция, которую мы хотим передать, будет потеряна.

На этих выходных я был приятно удивлен. CSSWG занимались именно этой проблемой.

Лучший способ позиционирования в CSS

Сокращения? Я люблю сокращения! Сразу же появилось отличное предложение расширить свойство position.

Лучший способ позиционирования в CSS

Суть в том, чтобы свойство position принимало значения по часовой стрелке, как margin и padding. Значения можно было бы записывать следующим образом:

Чистенько! Однако CSSWG напомнил нам главную причину, почему этого никогда не случится.

Лучший способ позиционирования в CSS

Вот блин. Ну ладно, дальше предложили использовать новое свойство – offset.

Но и этот мыльный пузырь быстро лопнул.

Лучший способ позиционирования в CSS

ОК! А если мы добавим тире?

Лучший способ позиционирования в CSS

Мне очень нравится. С box-offset уже можно работать. Всем спасибо, все молодцы! Но мы еще далеко не вышли «из леса». Jake Archibald напомнил нам минус сокращений по часовой стрелке.

Лучший способ позиционирования в CSS

При установке top и left разработчикам пришлось бы выбирать между написанием двух длинных свойств и сбросом всех сдвигов для использования сокращения.

Не очень хорошо. Сокращение переписывает все, а это значит, что все предыдущие свойства right и bottom нужно объявлять заново. Кроме того, если top и left должны иметь одно значение, то визуальное разделение ломает концепцию.

Но с этой проблемой мы и так сталкиваемся в margin и padding.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Секрет в CSS Grid.

Слова в скобках называются «кастомными идентификаторами». А что если применить кастомные идентификаторы к сдвигам позиционирования?

Я думаю, смысл понятен. Во втором примере можно было бы просто оставить скобки пустыми.

И зачем вообще писать имена целиком?

Полезно. Не забывайте, что ни один из способов не требует повторного использования position. Идея может работать и с box-offset!

Не знаю за вас, но когда я пытаюсь представить будущие веб-стандарты, я стараюсь применить все, что мне известно о других новых стандартах.

Например, я понимаю, что мы стараемся отойти от left и right в сторону inline start и inline end. Точно так же top и bottom должны перейти в block start и block end. Ну, хорошие новости – наш шаблон идентификаторов все еще работает!

Или вот так:

Или вот так:

И еще раз, если мы примем такой синтаксис block/inline + start/end, мы получим следующие идентификаторы:

Лучший способ позиционирования в CSS

А вы думаете, это решит реальные проблемы? И какие проблемы такой синтаксис может создать?

Автор: Jonathan Neal

Источник: http://codepen.io/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree