От автора: позиционирование сдвигов – одна из самых громоздких вещей в CSS. Давайте рассмотрим способы позиционирования в CSS.
1 2 3 4 5 6 7 |
.cover-something { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } |
Приходилось писать что-то подобное? Некоторые даже сортируют свойства по алфавиту.
1 2 3 4 5 6 7 |
.cover-something { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } |
И бац! Если мы запишем в это правило еще какие-либо свойства, то концепция, которую мы хотим передать, будет потеряна.
На этих выходных я был приятно удивлен. CSSWG занимались именно этой проблемой.
Сокращения? Я люблю сокращения! Сразу же появилось отличное предложение расширить свойство position.
Суть в том, чтобы свойство position принимало значения по часовой стрелке, как margin и padding. Значения можно было бы записывать следующим образом:
1 2 3 |
.cover-something { position: absolute 0; } |
Чистенько! Однако CSSWG напомнил нам главную причину, почему этого никогда не случится.
Вот блин. Ну ладно, дальше предложили использовать новое свойство – offset.
1 2 3 4 |
.cover-something { offset: 0; position: absolute; } |
Но и этот мыльный пузырь быстро лопнул.
ОК! А если мы добавим тире?
Мне очень нравится. С box-offset уже можно работать. Всем спасибо, все молодцы! Но мы еще далеко не вышли «из леса». Jake Archibald напомнил нам минус сокращений по часовой стрелке.
При установке top и left разработчикам пришлось бы выбирать между написанием двух длинных свойств и сбросом всех сдвигов для использования сокращения.
1 2 3 4 |
.inset-from-the-top-left { offset: 10px auto auto 10px; position: absolute; } |
Не очень хорошо. Сокращение переписывает все, а это значит, что все предыдущие свойства right и bottom нужно объявлять заново. Кроме того, если top и left должны иметь одно значение, то визуальное разделение ломает концепцию.
Но с этой проблемой мы и так сталкиваемся в margin и padding.
Думаю, можно создать неразрушающее сокращение, которое сохраняло бы связи в смещениях. Оно даже позволит нам использовать position.
Секрет в CSS Grid.
1 2 3 4 |
.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]; } |
Слова в скобках называются «кастомными идентификаторами». А что если применить кастомные идентификаторы к сдвигам позиционирования?
1 2 3 |
.inset-from-the-top-left { position: absolute [top left] 0; } |
1 2 3 |
.cover-everything { position: absolute [top right bottom left] 0; } |
Я думаю, смысл понятен. Во втором примере можно было бы просто оставить скобки пустыми.
1 2 3 |
.cover-everything { position: absolute [] 0; } |
И зачем вообще писать имена целиком?
1 2 3 |
.inset-from-the-top-left { position: absolute [tl] 0; } |
Полезно. Не забывайте, что ни один из способов не требует повторного использования position. Идея может работать и с box-offset!
Не знаю за вас, но когда я пытаюсь представить будущие веб-стандарты, я стараюсь применить все, что мне известно о других новых стандартах.
Например, я понимаю, что мы стараемся отойти от left и right в сторону inline start и inline end. Точно так же top и bottom должны перейти в block start и block end. Ну, хорошие новости – наш шаблон идентификаторов все еще работает!
1 2 3 |
.inset-from-the-top-left { position: absolute [block-start inline-start] 0; } |
Или вот так:
1 2 3 |
.inset-from-the-top-left { position: absolute [start] 0; } |
Или вот так:
1 2 3 |
.inset-from-the-top-left { position: absolute [s] 0; /* aww yiss */ } |
И еще раз, если мы примем такой синтаксис block/inline + start/end, мы получим следующие идентификаторы:
А вы думаете, это решит реальные проблемы? И какие проблемы такой синтаксис может создать?
Автор: Jonathan Neal
Источник: //codepen.io/
Редакция: Команда webformyself.