Маниш Горегаокар — разработчик Servo — написал статью про сложности имплементации свойства font-size — "Font-size: An Unexpectedly Complex CSS Property".

Маниш разрабатывал Stylo — CSS-движок, написанный на Rust, который стал частью Firefox. Одной из его задач было добавление поддержки свойства font-size.

Проблема в том, что на размер шрифта влияют очень много факторов. Размер может быть задан разными юнитами и ключевыми словами. На него влияет выбранное семейство шрифтов, например, font-size: medium в рубленных шрифтах это 16 пикселей, а в моноширинных шрифтах — 13 пикселей. Также Firefox (из коробки) и Chrome (с помощью расширения) позволяют задавать размер шрифта в зависимости от текущего языка текста. Есть свои нюансы для задания размеров шрифта в MathML и при его использовании c аннотациями ruby.

Интересно, что в некоторых случаях разработчики не следуют полностью спецификации, а делают good enough приближение, потому что точно реализовать фичу по спеке бывает очень сложно.

В общем, хорошая статья. Рекомендую почитать всем, кто интересуется внутренней работой браузеров.

#css #internals #firefox #specification

https://manishearth.github.io/blog/2017/08/10/font-size-an-unexpectedly-complex-css-property/

Сегодня зарелизился Firefox 82. В этой версии упор был сделан на скорость работы браузера. Исправлены минорные проблемы с DOM API. Есть немного улучшений в DevTools. По умолчанию включена поддержка Media Session API.

Самое интересное для разработчиков
— В DevTools на вкладке "Network" теперь можно инспектировать server-sent events (SSE); панели "Message" и "Response" были объединены (то есть можно просматривать сообщения web socket'ов и SSE прямо под списком сетевых ответов)
— Диалог выбора цвета стал доступен с клавиатуры на Windows
— Появилась поддержка флага allow-downloads в <iframe sandbox>
— В CSS появилась поддержка псевдоэлемента ::file-selector-button для стилизации кнопки выбора файла
— Псевдоклассы :is() и :where() стали более толерантны к ошибкам — невалидный элемент из списка селекторов больше не делает весь список неавалидным
— Если у тэга <a> есть атрибут download (то есть это ссылка на загрузку файла), он будет перекрывать поведение открытия файла в браузере при установленном HTTP-заголовке Content-Disposition: inline;filename="somefile.jpg"
— Включена поддержка Media Session API. С помощью этого API в системные нотификации можно интегрировать информацию о текущем проигрываемом треке и обрабатыватать события медиа-клавиш на клавиатуре, пультах дистанционного управления и наушниках
— Свойство window.name сбрасывается, если в текущей вкладке загружается другой сайт. Это изменение было сделано для улучшения приватности, но оно может повлиять на фреймворки, которые используют window.name для междоменного обмена сообщениями

Нововведения для пользователей
— Ускорена работа браузера (раскладки на флексах работают на 20% быстрее, сессии восстанавливаются на 17% быстрее, на windows открытие новых окон стало быстрее на 10%).
— В Windows добавлена поддержка аппаратного декодирования видео, оно снижает потребление ресурсов GPU, CPU и положительно сказывается на разряде батареи
— Улучшена работа с режимом Picture-In-Picture

#firefox #release

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/82
https://www.mozilla.org/en-US/firefox/82.0/releasenotes/

Буквально на днях выйдет новая версия Firefox. В неё попадут изменения с улучшением работы JS-движка SpiderMonkey. Обо всех подробностях рассказал Ян дер Моой в статье "Warp: Improved JS performance in Firefox 83".

В SpiderMonkey используется два уровня компиляции кода: Baseline JIT для быстрой генерации байткода с минимальным количеством оптимизаций и Ion для генерации оптимизированного байткода. Ion в Firefox 83 будет заменён на новый оптимизирующий JIT-компилятор Warp. Warp в отличие от Ion не использует глобально собираемую информацию о типах и использует формат представления байткода CacheIR, которое используется в Baseline JIT.

Благодаря этим изменениям удалось ускорить выполнение JS-кода и уменьшить потребление памяти. Google Docs с Warp работает на 20% быстрее, бенчмарк Speedometer — на 10-12% быстрее. Firefox с Warp потребляет примерно на 8% меньше памяти по сравнению с Ion.

Новая архитектура упростила кодовую базу. Теперь разработчикам SpiderMonkey гораздо проще добавлять новые оптимизации и фичи.

#performance #firefox #internals

https://hacks.mozilla.org/2020/11/warp-improved-js-performance-in-firefox-83/

Сегодня вышел Firefox 83.

В новой версии добавлен режим HTTPS-only (выключен по умолчанию). С включенным HTTPS-only все устанавливаемые соединения будут использовать HTTPS. Если установка безопасного соединения невозможна, будет отображено сообщение об ошибке с возможностью перейти к ресурсу по HTTP. HTTPS-only включается в настройках в разделе "Privacy & Security".

В JS-движок SpiderMonkey добавлен новый оптимизирующий JIT-компилятор Warp. Благодаря ему загрузка страниц ускорилась на 15%, а общее потребление памяти снизилось на 8%. Более подробно о новом JIT-компиляторе можно почитать в предыдущем посте.

В Firefox теперь можно заполнять, сохранять и распечатывать PDF-формы AcroForm с помощью встроенного просмотрщика PDF. Добавили pinch-to-zoom в Windows (для сенсорных дисплеев) и macOS (для тачпадов). Улучшили интерфейс демонстрации экрана.

Для разработчиков не очень много изменений. В CSS была добавлена поддержка конических градиентов conic-gradient(). Свойство :-moz-any() теперь обычный алиас для :is(). В Intl добавлен метод Intl[Symbol.toStringTag], возвращающий строку "[object Intl]". В инспекторе элементов DevTools у DOM-элементов, приводящих к появлению полос прокрутки, теперь отображается бейдж "scroll" (помогает при дебаге двойных скроллов на странице).

#release #firefox

https://www.mozilla.org/en-US/firefox/83.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/83

Вчера вышел Firefox 84. Релиз в этот раз небольшой, но с полезными улучшениями.

В Firefox 84 появилась нативная поддержка процессоров Apple. Нативная сборка Firefox на процессорах Apple M1 запускается в два раза быстрее, также в нативной сборке гораздо быстрее работает JS.

CSS псевдокласс :not() стал поддерживать сложные селекторы. В Intl.DateTimeFormat() была добавлена поддержка форматирования долей секунд. Была добавлена поддержка Paint Timing API для получения подробной информации о затраченном времени на создание страницы (полезно для анализа и мониторинга производительности).

В инструментах разработчика с помощью инспектора доступности теперь можно узнать, в каком порядке будет переходить фокус при нажатии на клавишу Tab.

Все ресурсы, загружающиеся с локального хоста (127.0.0.1) вне зависимости от url, считаются загруженными в безопасном контексте.

#firefox #release

https://www.mozilla.org/en-US/firefox/84.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/84

Сегодня вышла новая версия Firefox. Крис Миллс рассказал про основные новинки релиза — "January brings us Firefox 85".

В CSS реализована поддержка :focus-visible. Этот псевдоэлемент позволяет стилизовать кольцо фокуса для тех случаев, когда оно должно быть отображено браузером (например, кольцо фокуса по умолчанию не отображается при клике на кнопку, но появляется при навигации по странице с клавиатуры).

Добавлена поддержка хинта производительности <link rel="preload" ...>. Он позволяет заблаговременно подгрузить ресурсы, которые нужны для отображения текущей страницы.

Полностью удалена поддержка Flash. К этому моменту разработчики шли пять лет.

В ночных сборках Firefox добавлена поддержка top-level await и метода .at() для получения элементов массива/строк с помощью относительных индексов.

#release #firefox

https://hacks.mozilla.org/2021/01/january-brings-us-firefox-85/

В Firefox 85 для всех пользователей включён изолированный кэш для борьбы с супер-куками — "Firefox 85 Cracks Down on Supercookies".

Супер-куки — это общее название для методов идентификации пользователей, которые сложно предотвратить. Их используют рекламные сети для определения сайтов, которые посещал пользователь. Например, такой супер-кукой может быть обычное изображение. В Firefox до версии 85 работал междоменный кэш для загружаемых изображений. Если изображение было ранее загружено другим сайтом, то оно извлекалось из кэша, Трекеры могли засечь время получения изображения и на основе этой информации определить, посещал ли пользователь определённый сайт или нет.

В Firefox 85 была включена изоляции для разных видов кэшей: HTTP-кэша, кэша изображений, кэша для favicon, HSTS, OCSP, CSS и т.п. Изоляция может незначительно влиять на производительность — время загрузки сайта для самого наихудшего случая увеличилось на 1.32%.

Firefox стал последним популярным браузером, который реализовал изолированный кэш для ресурсов.

#firefox #cache #performance

https://blog.mozilla.org/security/2021/01/26/supercookie-protections/

Вчера вышел Firefox 86. Крис Миллс рассказал про основные новинки релиза — "A Fabulous February Firefox — 86!"

Появилась поддержка CSS псевдокласса :autofill. С помощью этого псевдокласса можно кастомизировать <input> после его автозаполнения.

Добавлена поддержка конструктора Intl.DisplayNames для консистентного перевода регионов, языков и начертаний.

В бете Firefox появилась поддержка CSS-функции image-set() для создания отзывчивых изображений на уровне CSS.

Стала удобнее отладка iframe'ов в инструментах разработчика — добавлена кнопка, с помощью которой можно выбрать контекст отладки.

#release #firefox

https://hacks.mozilla.org/2021/02/a-fabulous-february-firefox-86/

В недавно вышедшем Firefox 86 был включён State Partitioning для предотвращения отслеживания пользователей с помощью кук. Йоханн Хофманн и Тим Хуанг рассказали о принципе его работы в статье "Introducing State Partitioning".

Ранее сторонний ресурс (third-party), подключаемый на страницу, мог установить для пользователя уникальную куку, которая использовалась для сбора информации о посещённых страницах. В Firefox 86 этот механизм отслеживания перестал работать по умолчанию, потому что куки начали изолироваться в пределах родительского сайта (first-party).

Теперь сторонним ресурсам надо получить явное подтверждение от пользователя для доступа к общим кукам. Это можно сделать с помощью Storage Access API: метод document.requestStorageAccess используется для запроса доступа, метод document.hasStorageAccess — для проверки текущего статуса доступа.

На данный момент поддержка Storage Access API есть в Safari, Edge и Firefox. В Chrome она доступна за экспериментальным флагом.

#privacy #firefox

https://hacks.mozilla.org/introducing-state-partitioning/

Сегодня вышла новая версия Firefox. Крис Миллс рассказал о всех новинках релиза — "In March, we see Firefox 87".

Из экспериментального статуса вышла поддержка события beforeinput и метода getTargetRanges() для гибкого управления поведением при редактировании текста. С их помощью можно эргономично предотвратить редактирование любой части текста, сделать автоматическую замену вводимых нецензурных слов звёздочками и т.п.

Дефолтное значение Referrer-Policy было заменено на strict-origin-when-cross-origin. Это означает, что по умолчанию браузер не будет включать путь и GET-параметры в Referer.

В DevTools появилась поддержка prefers-color-scheme для эмуляции текущей выбранной темы операционной системы. В инспекторе страницы теперь можно удобно устанавливать псевдокласс :target на выбранном DOM-узле.

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

Отключена поддержка Backspace для навигации по истории, чтобы предотвратить случайные переходы при заполнении форм. Для её включения (не делайте этого) нужно поменять опцию browser.backspace_action в about:config.

В версии для macOS была добавлена поддержка скринридера VoiceOver.

#firefox #release

https://hacks.mozilla.org/2021/03/in-march-we-see-firefox-87/

Сегодня вышла новая версия Firefox. Крис Миллс рассказал про новинки релиза — "Never too late for Firefox 88".

Для элементов управления форм была добавлена поддержка псевдоклассов :user-valid и :user-invalid. Они начинают матчиться, после того как пользователь завершил работу с элементом, например, после перехода на соседний элемент с помощью Tab.

Firefox теперь поддерживает CSS-функцию image-set() для выбора наиболее подходящего изображения из предоставленного множества. Эту функцию можно использовать в свойствах content и cursor.

Было обновлено поведение CSS-свойства outline — обводка теперь учитывает текущее значение border-radius.

В регулярных выражениях добавлена поддержка пропозала RegExp match indices. Оно добавляет поддержку флага /d, благодаря которому в результате выполнения регулярки (match object) появляется свойство indicies с позициями текущих скобочных групп (capturing group).

Добавлен статический метод AbortSignal.abort(), возвращающий отменённый сигнал.

Отключена поддержка FTP. Его полное удаление будет завершено в Firefox 90. При необходимости поддержку FTP можно будет включить с помощью плагинов.

#release #firefox

https://hacks.mozilla.org/2021/04/never-too-late-for-firefox-88/

Вчера вышла новая версия Firefox. Крис Миллс рассказал о новых фичах релиза — "Looking fine with Firefox 89".

Появилась поддержка медиафичи forced-colors: active, благодаря которой можно понять, отображается ли страница в ограниченной цветовой палитре (например, с включённым режимом повышенной контрастности в Windows).

Добавлены директивы line-gap-override, ascent-override и descent-override для @font-face. С их помощью можно изменять метрики фоллбек-шрифта для уменьшения сдвига содержимого после загрузки веб-шрифта.

Содержимым элементов <input> и <textarea> теперь можно управлять с помощью document.execCommand() с сохранением истории редактирования, выравнивая уровень поддержки этого метода с другими браузерами.

Добавлена реализация PerformanceEventTiming из Event Timing API, предназначенного для измерения времени обработки событий.

В JavaScript по умолчанию включена поддержка top-level await. ArrayBuffer на 64-битных системах теперь может использовать до 8Гб памяти (раньше было ограничение 2Гб).

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

#firefox #release

https://hacks.mozilla.org/2021/06/looking-fine-with-firefox-89/

Мэттью Гауде — разработчик SpiderMonkey — написал статью про опыт имплементации приватных полей класса в JavaScript-движке — "Implementing Private Fields for JavaScript".

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

Также в статье разбираются нюансы работы c приватными полями. Оказывается, приватные поля могут быть добавлены к любому объекту, даже если он был явно закрыт от изменений с помощью Oblect.seal(). Насколько я понимаю, это "побочный эффект" спецификации, и его не стоит использовать для решения своих задач.

Очень интересная статья. Рекомендую почитать.

#js #internals #spec #firefox

https://www.mgaudet.ca/technical/2021/5/4/implementing-private-fields-for-javascript

Релиз Firefox 92

Вчера вышла новая версия Firefox. Рут Джон рассказала про новинки релиза — "Time for a review of Firefox 92".

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

Реализована поддержка CSS-дескриптора font-adjust у @font-face. Он позволяет тонко настраивать размер глифов, упрощая работу с разными шрифтами на одной странице. Также его можно использовать при решении проблемы сдвига контента из-за несовпадения метрик загружаемого шрифта с дефолтным шрифтом страницы.

В JavaScript-движок была добавлена поддержка нового метода Object.hasOwn(instance,prop), который недавно был утверждён TC39. Поведение этого метода похоже на Object.hasOwnProperty(), но Object.hasOwn() без дополнительных ухищрений работает с объектами, которые были созданы с помощью Object.create(null).

Также в CSS была добавлена поддержка управлением размером строчных букв относительно разных метрик с помощью font-size-adjust для двух значений. Улучшена работа с многоколоночными макетами. В font-family добавлена поддержка system-ui — синонима для семейства системных шрифтов.

#firefox #release

https://hacks.mozilla.org/2021/09/time-for-a-review-of-firefox-92/

Релиз Firefox 93

На прошлой неделе вышла новая версия Firefox. Рут Джон рассказала про новинки релиза — "Lots to see in Firefox 93!".

Была добавлена поддержка формата AV1 Image File Format. AVIF — это открытый формат изображений, выигрывающий у WebP по степени сжатия и показывающий наилучшие результаты для небольших изображений.

Улучшена поддержка кастомных элементов. Добавлено событие slotchange, возникающее при изменении содержимого слота. Добавлен метод HTMLElement.attachInternals() для доступа к внутренним свойствам и методам инпутов. Добавлено свойство ElementInternals.shadowRoot для доступа к Shadow Root внутри кастомного элемента.

Добавлен новый тип инпута <input type="datetime-local"> для выбора даты и времени. Появилась поддержка синтеза глифов шрифта для маленьких заглавных букв ( small-caps ) с помощью CSS-свойства font-sythesis. Метод createImageBitmap теперь поддерживает опции imageOrientation и premultiplyAlpha.

В DevTools исправлено много утечек памяти, возникающих во время долгих сессий отладки.

#release #firefox

https://hacks.mozilla.org/2021/10/lots-to-see-in-firefox-93/

Релиз Firefox 94

На прошлой неделе вышла новая версия Firefox. Официального блог-поста на Mozilla Hacks в этот раз не было, скорее всего из-за того, что изменений для разработчиков в релизе очень мало.

Самая интересная фича релиза — добавление поддержки структурного клонирования объектов с помощью метода structuredClone(). Этот метод предназначен для глубокого клонирования объектов в том числе с циклическими ссылками. Есть поддержка перемещения для transferable objects. Это полезно для обмена данными между веб-воркерами и главным потоком.

Появилась поддержка кастомизации лейбла кнопки Enter виртуальной клавиатуры с помощью свойства enterKeyHint элементов ввода и глобального атрибута enterkeyhint. Можно указать: enter, done, go, next, previous, search, send.

У динамически создаваемых скриптов стал доступен статический метод supports() для проверки поддержки ECMAScript modules. Добавлена поддержка свойства ShadowRoot.delegatesFocus для проверки текущего статуса делегирования фокуса у кастомных элементов.

Уменьшено потребление памяти JavaScript-движком. Ускорен перебор свойств объектов. Уменьшено потребление CPU во время поллинга HTTPS-соединений.

#firefox #release

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/94
https://www.mozilla.org/en-US/firefox/94.0/releasenotes/

Изоляция сайтов в Firefox 94

Анна Гахокидзе из команды разработчиков Firefox рассказала про улучшение безопасности браузера с помощью изоляции сайтов — "Introducing Firefox’s new Site Isolation Security Architecture".

Старая архитектура Firefox для рендеринга контента сайтов использовала непривелигированные процессы. Эти процессы ограничены в выполнении операций, например, им запрещено записывать файлы на диск. Однако несколько сайтов могли быть соседями в рамках одного процесса, и зловредный сайт потенциально мог прочитать память другого сайта.

После обнаружения атак Meltdown и Spectre, которые эксплуатируют CPU для доступа к памяти сайтов-соседей, разработчики Firefox приступили к работе над новой архитектурой (проект Fission). В этой архитектуре все сайты находятся в независимых процессах. Изоляция сайтов позволяет решить проблему утечки данных через разделяемую память на системном уровне. Также изоляция улучшает стабильность браузера — критические ошибки не выходят за рамки выделенного процесса и не затрагивает сайты в соседних вкладках.

Переход на новую архитектуру с полноценной изоляцией сайтов был завершён в Firefox 94.

#firefox #security

https://hacks.mozilla.org/2021/05/introducing-firefox-new-site-isolation-security-architecture/

Релиз Firefox 95

В Firefox 95 включён RLBox — технология для улучшения безопасности браузера с помощью WebAssembly. Также в этой версии для всех пользователей был включён Site Isolation.

В macOS уменьшено потребление процессора во время обработки событий. А также было уменьшено потребление энергии при программном декодировании видео. Это особенно заметно в режиме полноэкранного просмотра.

В HTML был добавлен глобальный атрибут inputmode для настройки вида виртуальной клавиатуры на смартфонах. Firefox на Android теперь поддерживает CSS-свойство cursor.

В JS-движке значительных изменений не было, но был добавлен Crypto.randomUUID() — API для получения криптографически устойчивых значений UUID. Изменено поведение свойства SpeechSynthesisEvent.elapsedTime; теперь оно возвращает время в секундах.

#firefox #release

https://www.mozilla.org/en-US/firefox/95.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/95

Релиз Firefox 96

Несколько дней назад вышла новая версия Firefox. Самое интересное — изменение поведения кук, добавление Web Locks API, добавление поддержки CSS-свойства color-scheme.

Теперь по умолчанию у всех кук устанавливается атрибут SameSite=lax. Это изменение выравнивает поведение Firefox c Chrome и помогает в защите от атак Cross-Site Request Forgery (CSRF).

Добавлен Web Locks API. Это экспериментальное API для управления доступом к разделяемым ресурсам между разными сервис-воркерами или табами приложения.

Добавлена поддержка CSS-свойства color-scheme. С его помощью реализация тёмной темы для страницы делается в пару строк:

:root {
  color-scheme: light dark;
}

В этом примере свойство color-scheme сообщает браузеру о том, что вся страница поддерживает светлую и тёмную тему, и браузер начинает управлять цветами страницы автоматически.

В энкодере изображений появилась поддержка WebP. Благодаря этому изменению теперь можно программно экспортировать WebP-изображения из canvas с помощью методов HTMLCanvasElement.toDataURL(), HTMLCanvasElement.toBlob() и OffscreenCanvas.toBlob().

#firefox #release

https://www.mozilla.org/en-US/firefox/96.0/releasenotes/
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/96

Релиз Firefox 97

В новом релизе была добавлена поддержка каскадных слоёв (CSS Cascade Layers) с помощью CSS-директивы @layer. Эта фича полезна при рефакторинге, темизации и структурировании стилей.

Добавлена поддержка CSS-свойства scrollbar-gutter. С его помощью можно зарезервировать место на боковой границе вьюпорта, чтобы ширина страницы не прыгала при появлении полосы прокрутки.

Добавлен метод AbortSignal.throwIfAborted() и свойство AbortSignal.reason. Эти изменения позволяют упростить реализацию отмены выполнения кода по внешнему событию.

Теперь можно использовать requestAnimationFrame и cancelAnimationFrame внутри веб-воркеров.

В CSS добавлены новые единицы измерения cap и ic, добавлена поддержка @scroll-timeline и animation-timeline для создания анимаций, привязанных к позиции скролла. CSS-свойство color-adjust было переименовано в print-color-adjust.

#firefox #release

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/97