#заметка дня

#firefox #css #bug #hack

Я немного уже отвык от того, что современные браузеры всё ещё могут принести сюрпризы там, где их не ждёшь. Сегодня такое принёс Firefox.

Нижнее поле (padding-bottom) в нём игнорируется при установке значения правила overflow в scroll или auto. Оказывается, принесли это поведение ещё 9 лет назад, в Firefox 12. Мотивация была следующей: “The layout is correct per the CSS 2.1 spec: padding is applied at the
content edge, not after any overflow”.

То, что спецификация иной раз может быть максимально нелогичной никого в команде Firefox не волновало ни тогда, ни сейчас. Возможно, это правильно и Opera в своё время последовала этим же путём (и благополучно сдохла, впрочем).

Интересное в этом то, что в спецификации не говорится прямым текстом о разнице между контентом и областью, окружающей контент, что и позволяет различным движкам поступать по-своему:
http://www.w3.org/TR/CSS2/visufx.html#overflow-clipping
http://www.w3.org/TR/CSS2/box.html#box-padding-area

Ссылка на обсуждение, весьма горячее, между прочим: https://bugzilla.mozilla.org/show_bug.cgi?id=748518

Так или иначе, отступ-то мне был нужен. Закончилось это добавлением псевдоэлемента ::after с высотой, равной паддингу. А кто-то просто оборачивает весь контент в блок и задаёт поля уже блоку. Мне такое не нравится, я не любитель избыточных обёрток.

А всё просто: концепция дыма и зеркал :) Ну, как у фокусников.

Нужно чередовать цвета? Так давайте чередовать контейнеры и заполнять их наоборот: если макет идёт как циановый-серый-циановый, контейнеры будут серый-циановый-серый, а вот уже контент внутри них — как по макету.

Что это даёт? В тот момент, как будут заданы скругления контента, через них начнёт просвечивать контейнер. Вот так всё просто.

Я не считаю, что добавление контейнеров это плохой тон. Как минимум, он даёт лишний уровень свободы при добавлении отступов, псевдоэлементов и адаптации.

Более того, если совсем неохота брать контейнер — ну сделайте градиент-полоску в нужный размер, эффект будет тот же самый. Все же знают, как рисовать градиент-полоски, да? Если нет, потом покажу.

В общем, think outside the box, насколько банально бы это ни было, котаны.

Ах да, ссылка: https://codepen.io/alinaki/pen/XWENXJW

Модифицируйте по своему усмотрению.

#css #hack

#фишка дня

Кому немного зла, близкого к абсолютному? :)

Как превратить вообще все ссылки в вашем проекте в управляемые вашим роутером? В нашем случае, либо Next.js либо react-router. Да очень просто: https://gist.github.com/devongovett/919dc0f06585bd88af053562fd7c41b7

На скриншоте есть ошибка, кто найдет — возьмет с полки пирожок.

Но если я такое увижу в новом проекте... не надо :) Это крайний случай.

#react #router #hack

#codepen дня

Маскинг зашёл слишком далеко! Вы только посмотрите, что можно сделать при помощи небольшого количества геометрии и градиентов!

И всё это на единственном теге img, без обёрток!

Сразу будет сказано: в Safari пока сам цветной кружочек не работает, даже в Technology Preview :( но это не значит, что нам нечего почерпнуть! Исправлено!

Ссылка: https://codepen.io/alinaki/pen/xxeoXjN (это форк пена от t_afif, но с более универсальным сдвигом аутлайна)

Небольшой разбор:
1. clip-path требуется только для ограничения области ховера, можно и без него
2. чтобы чётко расположить кружочек на окружности, требуется немного геометрии с извлечением квадратного корня из радиуса.
3. Оказывается, аутлайн можно двигать. К сожалению, в Safari пока не прокатило. Суть перемещения outline — как раз в том, чтобы разместить квадратик, обозначающий статус пользователя, на окружности.

Буду пробовать починить это дело в Safari, посмотрим, что к чему :)

Upd. я нашёл способ починить в Safari, сейчас подбираю значения. Потому основная ссылка сломана, смотрите оригинальную :)

Upd. 2 Я починил в Safari! Осталось понять аналитическое решение :)

#css #hack #mask