Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Абсолютно относительно

В ЦССе постоянно приходится делать абсолютно позиционированные элементы внутри относительно позиционированных, чтобы «привязаться» к какой-то плавающей точке в нормал-флоу. Это тупизм, потому что это вынуждает в разметке добавлять лишние элементы. Например, нам надо пририсовать к слову значок суффикса, который у нас есть в виде гифовой картинки. Вот что хочется писать в разметке:

слов<img class="suffix" src="i/suffix.gif" />ечко

Но что написать в стилях?

.suffix {
  position: ???
  width: 1.5em; /* на три буквы чтоб */
  bottom: -1em;
}


Относительно позиционированный элемент занимает собой места в нормал-флоу столько же, сколько непозиционированный, а потом может быть сдвинут относительно этого места так, что нормал-флоу этого не заметит. В нашем случае это не подходит, потому что будет разрыв между «слов» и «ечко» шириной в картинку.

Абсолютно позиционированный элемент не участвует в нормал-флоу и позиционируется относительно ближайшего позиционированного предка, либо относительно границ браузера, если позиционированных предков нет. Это нам тоже не подходит, так как нам надо, чтобы позиционировалась картинка именно относительно той точки в слове, куда мы её поставили.

Поэтому всё время приходится делать так:

слов<span class="suffix"><img src="i/suffix.gif" /></span>ечко

.suffix { position: relative }
.suffix img {
  position: absolute;
  width: 1em;
  bottom: -1em;
}


Спан, конечно, красивее было бы закрыть после «ечк», но это не про семантику заметка. Так вот, весь этот спан, получается, существует только для того, чтобы задать «систему координат» для картинки. Но ведь она уже задана тем, куда вы воткнули эту картинку в разметке!

Так почему было не придумать какой-нибудь position: anchored, который бы участвовал в нормал-флоу, но с точки зрения нормал-флоу имел бы размеры 0 на 0? Можно было бы развить идею, введя anchored-x и anchored-y, чтобы, допустим, сделать сноски на поля, висящие на уровне того места, откуда на них ссылаются. Атрибут position: anchored-y означал бы, что left / right для этого элемента имеют смысл по принципу position: absolute; а top / bottom — по принципу position: anchored, т. е. относительно точки, где элемент встретился в разметке. Тогда текст, снесённый на поля, можно было бы размечать так:

Пушкин писал<sup>1</sup><div class="sidenote"><sup>1</sup> В «Капитанской дочке»</div>: «Береги честь смолоду».

.sidenote {
  position: anchored-y;
  left: 110%; /* чтобы отступить от самого текста 10% его ширины */
  top: 0;
}


Почему создатели стандартов придумывают всякую хрень (вроде box-shadow или анимации) раньше, чем решают базовые задачи вёрстки?

Добавлено несколько позже: Оказывается, я ничего не понимаю в вёрстке. Спасибо комментаторам за прояснение ситуации.
Подписаться на блог
Поделиться
Отправить
22 комментария
Сергей Чикуёнок
А если так?

img.suffix {
position: absolute;
width: 1.5em; /* на три буквы чтоб */
margin-bottom: -1em; /* или margin-top: 1em */
}
Илья Бирман
А то, что абсолютные элементы остаются на месте, пока мы не указали координаты — это разве не случайность какая-то? На это можно полагаться?
Максим Захаров
Как насчёт absolute без координат и margin?
Антон Вернигор
Сноски на полях, «висящие на уровне», прекрасно реализуются абсолютным позиционированием.
А суффикс, теоретически, можно попробовать нарисовать фоном. Но тут надо чуть подумать и проанализировать разные ситуации с шириной/высотой строки и т. д.
Владимир Овсянников
Солидарен полностью.
Для упрощения себе жизни советую написать небольшой JS, который ищет теги с определённым классом и обрамляет их «избыточным» тегом.
И красиво и удобно, хотя и через гланды =)
Максим Захаров
Опоздал :)
Антон Вернигор
Кстати, картинка внутри слова, если я правильно помню, является возможной точкой переноса, так что и при этом не все совсем гладко.
Антон Вернигор
Илья,
А то, что абсолютные элементы остаются на месте, пока мы не указали координаты — это разве не случайность какая-то? На это можно полагаться?
Можно, так и должно быть. Именно поэтому и маргиналии на поля можно вынести абсолютным позиционированием.
Илья Бирман
Крутяк, буду знать.
Александр Карпинский
.suffix {
position: relative;
width: 1.5em; /* на три буквы чтоб */
margin-right: -1.5em;
bottom: -1em;
}
Дмитрий
Если абсолютно спозиционированному элементу не указывать координаты, он располагается так, как если бы он находился в нормальном потоке. Как-то так.
Сергей Чикуёнок
По спецификации если для абсолютно спозиционированного элемента не указывать позиционные координаты top/bottom/left/right, то элемент остаётся там, где он был бы в нормальном потоке, при этом, естественно, на поток не влияет. Так что «относительное смещение абсолютных элементов» через margin — вполне законный трюк, я им очень давно пользуюсь.
Konstantyn A. Galayko
Чем плохо так:
.suffix:before {
content: url(i/suffix.gif);
}

Ну кроме ослика, конечно.
Александр Сорокин
Потому что хотят «красиво», а потом уже правильно.
Ярик Глухов
Если нужно разместить рядом с текстом иконку, то достаточно использовать vertical-align c необходимым значением.
Алик Кириллович
>Абсолютно позиционированный элемент не участвует в нормал-флоу и позиционируется относительно ближайшего позиционированного предка, либо относительно границ браузера, если позиционированных предков нет.

Позиционированные предки не могут отсутствовать. Формально, «границы браузера» являются таким же «ближайшим позиционированным предком».

Вот цитата (http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#containing-block):

«The root of the document tree generates a box that serves as the initial containing block for subsequent layout».
Георгий Тудоси
слов<span class=«suffix3»>ечк</span>о
.suffix { background: url(suffix3.gif) no-repeat 50% 0%; }

suffix3 вместо suffix подразумевает, что картинки для 1-, 2-, 3- и более (а бывает?) -буквенных суффиксов разные.
Георгий Тудоси
Ха-ха, кавычки в коде затипографились ;-). См. мой недавний стёб на тему: http://yaker.livejournal.com/261175.html
egorinsk
Гм, а по моему так правильно сделать слов[span class=«suffix»]ечко[/span] — а картинку фоном в спане, да и семантичнее. И вообще, img для презентационной графики уже лет 10 никто не использует :) (как и гиф, хехе)
Ярик Глухов
egorinsk прав с небольшой поправкой. Лучше всего это делать спрайтами.
Эдуард Гомоляко
Илья, а где зелененькие бордюры слева у «отмеченных» комментариев? Раньше было удобней читать комментарии )
Сергей К.
Согласен с уважаемыми Георгием и  egorinsk.

Илья, у меня почему-то на http://ilyabirman.ru/meanwhile/ не видна иконка сайта в ФФ. И в Хроме тоже. Не связано ли это с тегом base?
subzey
Алик Кириллович> The root of the document tree generates a box that serves as the initial containing block for subsequent layout
Но он не то же самое, что «границы браузера».
Артём
Илья, пропишите абсолютный адрес фавиконки блога или добавьте её в папку /meanwhile/ ;)
Популярное
Эти ссылки принесут мне миллионы: Швейцарский eta 2838 движений два тона алмазный диск цена.