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

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

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

 

.cover-something {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

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

.cover-something {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

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

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

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

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

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

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

.cover-something {
    position: absolute 0;
}

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

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

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

.cover-something {
    offset: 0;
    position: absolute;
}

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

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

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

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

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

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

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

.inset-from-the-top-left {
    offset: 10px auto auto 10px;
    position: absolute;
}

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

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

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

Секрет в CSS Grid.

.container {
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

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

.inset-from-the-top-left {
    position: absolute [top left] 0;
}
.cover-everything {
    position: absolute [top right bottom left] 0;
}

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

.cover-everything {
    position: absolute [] 0;
}
 

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

.inset-from-the-top-left {
    position: absolute [tl] 0;
}

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

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

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

.inset-from-the-top-left {
    position: absolute [block-start inline-start] 0;
}

Или вот так:

.inset-from-the-top-left {
    position: absolute [start] 0;
}

Или вот так:

.inset-from-the-top-left {
    position: absolute  0; /* aww yiss */
}

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

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

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

Автор: Jonathan Neal

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree