#заметка дня

#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 с высотой, равной паддингу. А кто-то просто оборачивает весь контент в блок и задаёт поля уже блоку. Мне такое не нравится, я не любитель избыточных обёрток.

#баг дня

Правило clip-path, обрезка, стало нынче довольно популярным.

Но пользоваться им нужно всё так же осторожно. Пример от Анны Тюдор:

clip-path: inset(80% 0 0 round 8%)

От чего конкретно отсчитываются 8% скругления?

Chrome и Safari (Blink и WebKit) отсчитывают их относительно изначального размера элемента.

Firefox (Gecko) – от уже обрезанного прямоугольника.

И, судя по всему, это баг в Firefox. Согласно спецификации, round в inset задаётся согласно синтаксису для border-radius, который в свою очередь устанавливает отсчёт от бокса элемента. Впрочем, прочитать можно как угодно.

И подобных мест в спецификации до сих пор неприлично много.

Пример:
https://codepen.io/alinaki/pen/qBRQRye

#css #firefox #clippath #bug

#фишка дня

TIL что можно получить список всех внутренних страниц браузеров. Ну знаете, этих chrome://flags, chrome://dino, edge://surf.

На самом же деле это всё — about:// страницы, просто переписываются каждым вендором. Попробуйте ввести about://flags.

А вот если ввести chrome://flags в Edge — он превратится в edge://flags. Гордые какие. Brave, кстати, тем же самым занимается.

Ладно, к делу: получить список всех страниц можно через about://about. Возможно, кто-нибудь найдёт там что-то экстраординарное.

Ну и на закуску: слеши можно не писать.

#chrome #edge #firefox #about #url

#фишка дня

Если ты увлёкся добавлением pointer-events: none к элементам: может чтобы люди не копировали, а может, чтобы UX был получше, — есть вероятность, что дебаг в девтулзах превратится в мучение.

Вот как выделить объект, который не слушается мыши?

Все очень просто, зажми Shift и выделяй. Работает в Chrome, Edge и Firefox.

#devtools #tips #chrome #firefox

#статья дня

Думаете, браузеры только ругаться друг с другом умеют? Нет, они ещё и взаимодействуют.

Начиная с 2019 года множество компаний-разработчиков браузеров, ведомые инициативой Mozilla и Google, стали собираться на конференцию Interprop.

Этот год не стал исключением: https://web.dev/interop-2022/

Рассматриваются 15 тем взаимодействия и стандартизации (единого понимания документов):
- Каскадные слои
- Цветовые пространства
- Новые единицы измерения для viewport
- Скролл
- Subgrid
- CSS contain
- Элемент dialog
- Типографика
- Совместимость браузеров
- Правило aspect-ratio
- Flexbox
- Grid
- position: sticky
- Трансформации

В общем, будьте как разработчики браузеров :)

#webkit #firefox #blink #chrome #safari

#баг дня

input size=“1” в Firefox слишком широкий. Логика подсказывает нам, что он должен так-то быть в один символ шириной.

Песочница: https://jsbin.com/zavefac/edit?output

Багтрекер: https://bugzilla.mozilla.org/show_bug.cgi?id=1782385

С комментария в приложенном куске кода я в целом в голос прорал: «To better match IE»…

Вот и он, кстати: https://searchfox.org/mozilla-central/rev/92e8568bbe7c8bf64f7a8ee958291877d960d7d8/layout/forms/nsTextControlFrame.cpp#209-232

Вроде как для моноширинных шрифтов все отрабатывает как надо. Но что-то пошло не так.

#firefox #bug

#фишка дня

Если ты увлёкся добавлением pointer-events: none к элементам: может чтобы люди не копировали, а может, чтобы UX был получше, — есть вероятность, что дебаг в девтулзах превратится в мучение.

Вот как выделить объект, который не слушается мыши?

Все очень просто, зажми Shift и выделяй. Работает в Chrome, Edge и Firefox.

#devtools #tips #chrome #firefox

#баг дня

input size=“1” в Firefox слишком широкий. Логика подсказывает нам, что он должен так-то быть в один символ шириной.

Песочница: https://jsbin.com/zavefac/edit?output

Багтрекер: https://bugzilla.mozilla.org/show_bug.cgi?id=1782385

С комментария в приложенном куске кода я в целом в голос прорал: «To better match IE»…

Вот и он, кстати: https://searchfox.org/mozilla-central/rev/92e8568bbe7c8bf64f7a8ee958291877d960d7d8/layout/forms/nsTextControlFrame.cpp#209-232

Вроде как для моноширинных шрифтов все отрабатывает как надо. Но что-то пошло не так.

#firefox #bug

#фишка дня

TIL что можно получить список всех внутренних страниц браузеров. Ну знаете, этих chrome://flags, chrome://dino, edge://surf.

На самом же деле это всё — about:// страницы, просто переписываются каждым вендором. Попробуйте ввести about://flags.

А вот если ввести chrome://flags в Edge — он превратится в edge://flags. Гордые какие. Brave, кстати, тем же самым занимается.

Ладно, к делу: получить список всех страниц можно через about://about. Возможно, кто-нибудь найдёт там что-то экстраординарное.

Ну и на закуску: слеши можно не писать.

#chrome #edge #firefox #about #url

#фишка дня

Оказывается, почти год назад в Firefox приземлилась фича, позволяющая раскрасить оверлей-скроллбар на маках и андроидах!

https://bugzilla.mozilla.org/show_bug.cgi?id=1719948#c15

Вот только в Chrome она так и не доехала... но у нас же никто не отбирал старые добрые -webkit-префиксы, правда?

Так что теперь можно сделать так: https://codepen.io/alinaki/pen/oNMMaGW

...и будет сносно выглядеть везде.

Правда, не знаю, зачем 😅

#scroll #css #firefox

#баг дня

input size=“1” в Firefox слишком широкий. Логика подсказывает нам, что он должен так-то быть в один символ шириной.

Песочница: https://jsbin.com/zavefac/edit?output

Багтрекер: https://bugzilla.mozilla.org/show_bug.cgi?id=1782385

С комментария в приложенном куске кода я в целом в голос прорал: «To better match IE»…

Вот и он, кстати: https://searchfox.org/mozilla-central/rev/92e8568bbe7c8bf64f7a8ee958291877d960d7d8/layout/forms/nsTextControlFrame.cpp#209-232

Вроде как для моноширинных шрифтов все отрабатывает как надо. Но что-то пошло не так.

#firefox #bug #бородач

#фишка дня

TIL что можно получить список всех внутренних страниц браузеров. Ну знаете, этих chrome://flags, chrome://dino, edge://surf.

На самом же деле это всё — about:// страницы, просто переписываются каждым вендором. Попробуйте ввести about://flags.

А вот если ввести chrome://flags в Edge — он превратится в edge://flags. Гордые какие. Brave, кстати, тем же самым занимается.

Ладно, к делу: получить список всех страниц можно через about://about. Возможно, кто-нибудь найдёт там что-то экстраординарное.

Ну и на закуску: слеши можно не писать.

#chrome #edge #firefox #about #url #бородач

#новость дня

На этой неделе вышел Firefox 125 (точнее, 125.0.1, там нашли уязвимость прямо перед выходом, и нулевую версию скипнули).

И у Mozilla, в отличие от Google, нет такой мощной пиар-команды, которая писала бы статьи на каждый выпуск, рекламируя новые фишки. Поэтому приходится нам с вами. Ну, конкретно в этом случае — Вадиму Макееву, всем вам знакомому.

Короче, к чему весь кипиш. А к тому, что Firefox 125 наконец-то начал поддерживать Popover API!

Вот, в чейнджлоге: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/125#apis

А вот, собственно, документация по API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

Мы с вами тоже рассматривали пару примеров. Вот тут: https://yangx.top/htmlshit/2029

Ну и это, в целом, значит, что Popover поддерживается во всех современных движках. И кому-то скоро вполне можно бужет это использовать :)

Ну а кому-то — полифиллить. Но то такое.

#css #popover #firefox

#баг дня или история одного апокалипсиса

Знаете, что происходит, если в Firefox ввести в <input type="number"> что-то вроде lol?

Он позволяет.

Да, вы видите эти lol, будто это валидное число. Только вот значение value в DOM превращается в пустую строку. Ну типа «я тебе это показал, но делать с этим ничего не буду». Гениально.

Баг #1398528 в Bugzilla живёт с 2017 года. Проблему признают: Firefox нарушает спецификацию WHATWG, согласно которой input type=number должен принимать только корректные числовые строки. А на деле — буквы, кириллица, эмоджи — всё идёт в бой. Только вот под капотом — пусто. Т.е. ты видишь, что ввёл, но значение не считается валидным. UX? Ну, такое себе.

Почему не фиксят?

Ответ классический: «а что, если у нас локаль с деванагари и арабскими цифрами, и вообще — как различать запятую и точку?». Ну и правда, лучше пусть вводится вся клавиатура, чем разбираться в сепараторах.

А теперь немного цирка из Chrome:

В Chrome <input type="number"> иногда разрешает ввод e, ведь вдруг ты хочешь ввести 1e10 (научную запись). Но если ты просто набрал e, поле становится… валидным. Бинго!

Ещё веселее: 1e- — тоже "нормально", но 1ee — уже нет. Картинку с барабаном вставите сами.

А если ты вводишь 1,5 в локали, где десятичный — это точка, Chrome может забраковать это, а может и нет — зависит от версии, луны и количества кофе у разработчика.

В итоге: у Firefox можно ввести хоть «привет», и он такой: «ну окей, но это не число». Chrome вроде бы фильтрует, но делает это через лунную призму.

Что же мы делаем? Пишем код, блять!

Мораль: в 2025 году проще создать свою валидацию под конкретный случай, чем надеяться, что браузеры когда-нибудь договорятся.
А баг тем временем отмечает 8 лет жизни, всё ещё «NEW», и, судя по комментариям, будет жить

Баг-репорт: https://bugzilla.mozilla.org/show_bug.cgi?id=1398528

Подпишитесь и следите, если вы, как и мы, верите (нет) в чудеса стандартизации.

P. S. тем временем Firefox пробивает дно за дном. В англоязычном интерфейсе выдаёт мне ошибки валидации на финском языке.

P. P. S. я молчу уже о том, что <input type="number"> вообще нахер не нужен и даже вреден: https://yangx.top/htmlshit/2663

#firefox #bug #input #number