Defront — про фронтенд-разработку и не только
12.8K subscribers
21 photos
1.09K links
Ламповый канал про фронтенд и не только. Всё самое полезное для опытных web-разработчиков

Обсуждение постов @defrontchat

Также советую канал @webnya
Download Telegram
В 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/
🔥1
Релиз 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/
🔥1
Релиз 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/
🔥1
Изоляция сайтов в 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
🔥1
Релиз 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
🔥11👍5
Релиз 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
👍18🔥4