Что проверять перед обработкой postMessage от iframe
Сообщение от встроенного виджета не становится доверенным только потому, что пришло через
На отправке задайте точный
После этого проверьте структуру и допустимые значения📎 Правила безопасного обмена в MDN.
Сообщение от встроенного виджета не становится доверенным только потому, что пришло через
postMessage(). Страница должна проверить, кто его прислал и что именно предлагается сделать.На отправке задайте точный
targetOrigin, если адрес получателя известен: со схемой, хостом и нужным портом. На приёме сравните event.origin с ожидаемым origin. Если важен конкретный iframe, проверьте и event.source. Это помогает отличить нужное окно от других отправителей.После этого проверьте структуру и допустимые значения
event.data. Правильный origin не гарантирует корректность содержимого. И сохранённая ссылка на окно не гарантирует, что оно всё ещё открыто на прежнем адресе. Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
URLSearchParams может превратить плюс в пробел
Если собрать query-строку вручную, значение
Передавайте исходное значение через
Не вызывайте📎 Примеры кодирования в MDN.
Если собрать query-строку вручную, значение
E+AXQB+A при разборе может стать E AXQB A. Конструктор URLSearchParams воспринимает плюс как пробел. Для Base64 это уже изменение данных.Передавайте исходное значение через
append() или set(). При сериализации API сам закодирует плюсы как %2B:const params = new URLSearchParams()
params.append("bin", "E+AXQB+A")
params.toString() // "bin=E%2BAXQB%2BA"
Не вызывайте
encodeURIComponent() перед добавлением значения: знак процента закодируется ещё раз. И не передавайте конструктору весь URL. Для полного адреса создайте URL и используйте его searchParams. Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
Прокрутку панели можно удержать внутри панели
Вы дошли до конца списка в боковой панели, продолжили крутить колесо, и теперь двигается фоновая страница. Это scroll chaining: прокрутка переходит от внутреннего контейнера к внешнему.
Для вертикальной панели задайте
Это поведение на границе контейнера, а не общая блокировка прокрутки документа. Свойство на самом📎 Механика и демо в MDN.
Вы дошли до конца списка в боковой панели, продолжили крутить колесо, и теперь двигается фоновая страница. Это scroll chaining: прокрутка переходит от внутреннего контейнера к внешнему.
Для вертикальной панели задайте
overscroll-behavior-y: contain на её прокручиваемом контейнере. Значение прерывает такую передачу, но может сохранить эффект отскока у края. none убирает и передачу прокрутки, и этот эффект.Это поведение на границе контейнера, а не общая блокировка прокрутки документа. Свойство на самом
<iframe> не управляет внутренним документом. Перед применением проверьте поддержку нужного значения в целевых мобильных браузерах. Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤1
Лимит размера JS-бандла можно проверять до слияния
Новая зависимость может незаметно увеличить клиентский JavaScript. Size Limit позволяет задать бюджет и завершить проверку ошибкой, если итоговый размер превышает его. Так рост виден в CI до слияния изменений.
Если приложение уже собирается своим бандлером, достаточно связки
Плагин📎 Настройка для приложений в README.
Новая зависимость может незаметно увеличить клиентский JavaScript. Size Limit позволяет задать бюджет и завершить проверку ошибкой, если итоговый размер превышает его. Так рост виден в CI до слияния изменений.
Если приложение уже собирается своим бандлером, достаточно связки
size-limit и @size-limit/file. В конфигурации укажите path на готовые файлы из dist и limit. Саму проверку запускайте после сборки, чтобы сравнивать её результат, а не исходники.Плагин
file по умолчанию считает размер с Brotli. Можно выбрать Gzip или отключить сжатие. Это ещё не замер времени исполнения JavaScript: для него нужен отдельный плагин. И размер npm-пакета тоже не равен клиентскому бандлу. Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
inert отключает взаимодействие с целой панелью
Панель уехала за край экрана, но её ссылки всё ещё получают фокус по Tab. Одного визуального перемещения недостаточно, чтобы сделать содержимое неактивным.
Атрибут
Сам атрибут ничего не прячет и не добавляет визуального признака отключения. Оформление состояния и возврат фокуса после закрытия панели нужно продумать отдельно. Для одной нативной кнопки обычно подходит📎 Поведение inert в MDN, включая исключение для модального
Панель уехала за край экрана, но её ссылки всё ещё получают фокус по Tab. Одного визуального перемещения недостаточно, чтобы сделать содержимое неактивным.
Атрибут
inert убирает обычные вложенные ссылки, кнопки и поля из порядка Tab и дерева доступности. Пользователь не может сфокусировать или нажать их. Текст внутри также не находится поиском по странице и не выделяется. Это полезно для временно неактивного блока интерфейса.Сам атрибут ничего не прячет и не добавляет визуального признака отключения. Оформление состояния и возврат фокуса после закрытия панели нужно продумать отдельно. Для одной нативной кнопки обычно подходит
disabled. <dialog>.Please open Telegram to view this post
VIEW IN TELEGRAM
👍1🔥1
preconnect готовит соединение до запроса ресурса
Критичный шрифт находится на другом домене. Прежде чем скачать файл, браузеру нужно разрешить имя, установить соединение и договориться о TLS. Подсказка
Она относится к origin, а не к конкретному файлу, и сама файл не скачивает. Для CORS-ресурсов, например шрифтов, нужен соответствующий
Открывать соединения со всеми доменами страницы не стоит. Выберите критичные источники, которые скоро понадобятся. Если достаточно заранее узнать IP-адрес,📎 Различия подсказок в web.dev помогают выбрать нужную.
Критичный шрифт находится на другом домене. Прежде чем скачать файл, браузеру нужно разрешить имя, установить соединение и договориться о TLS. Подсказка
preconnect позволяет начать эту подготовку раньше.Она относится к origin, а не к конкретному файлу, и сама файл не скачивает. Для CORS-ресурсов, например шрифтов, нужен соответствующий
crossorigin. В примере Google Fonts это <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>.Открывать соединения со всеми доменами страницы не стоит. Выберите критичные источники, которые скоро понадобятся. Если достаточно заранее узнать IP-адрес,
dns-prefetch делает только DNS-запрос и обходится дешевле. Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
Две вкладки могут договориться об очереди синхронизации
Приложение открыто в двух вкладках, и обе хотят синхронизировать данные с IndexedDB. Web Locks API позволяет договориться, кто выполняет эту работу сейчас, через блокировку с общим именем.
Механизм действует для вкладок и workers одного origin в безопасном контексте. Все участники должны использовать эту блокировку. Она не заменяет серверную транзакцию и не координирует разные устройства.📎 Сценарии и ограничения Web Locks в MDN.
Приложение открыто в двух вкладках, и обе хотят синхронизировать данные с IndexedDB. Web Locks API позволяет договориться, кто выполняет эту работу сейчас, через блокировку с общим именем.
navigator.locks.request() запускает callback после получения блокировки. В обычном режиме exclusive остальные запросы того же имени ждут. Блокировка освобождается после завершения callback или возвращённого им Promise, поэтому асинхронную работу важно дождаться внутри него.Механизм действует для вкладок и workers одного origin в безопасном контексте. Все участники должны использовать эту блокировку. Она не заменяет серверную транзакцию и не координирует разные устройства.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3
Иконки как CSS-токены: компактный HTML с оговорками
SVG внутри каждой кнопки быстро заслоняет саму разметку. Lea Verou предлагает хранить иконки в CSS-переменных, а на элементе выбирать нужную через
Рисует иконку маска на псевдоэлементе. Цвет берётся из
Но проверять нужно всю связку: в Safari автор нашла ошибки, из-за которых иконки, например, появлялись лишь после hover. В разборе есть обходы и вариант с явными классами для обязательных иконок. А доступное имя кнопки без текста всё равно нужно задать отдельно.
📎 Демо и обходы Safari
SVG внутри каждой кнопки быстро заслоняет саму разметку. Lea Verou предлагает хранить иконки в CSS-переменных, а на элементе выбирать нужную через
--icon. Так изображение можно менять при наведении или переключении темы без замены узлов.Рисует иконку маска на псевдоэлементе. Цвет берётся из
currentColor, а style queries вместе с @property помогают не создавать пустой псевдоэлемент там, где иконки нет.Но проверять нужно всю связку: в Safari автор нашла ошибки, из-за которых иконки, например, появлялись лишь после hover. В разборе есть обходы и вариант с явными классами для обязательных иконок. А доступное имя кнопки без текста всё равно нужно задать отдельно.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥2
В Chrome 155 unload больше не срабатывает по умолчанию
Сохранение данных «при закрытии вкладки» могло тихо перестать работать. Команда Chrome сообщила о завершении отключения
Причина не только в скорости возврата назад через bfcache. На мобильных ОС давно могли завершить фоновую страницу вообще без события. Поэтому
Исключения остаются через Permissions Policy и корпоративную политику. Chrome на iOS отдельно оговорён: там используется WebKit. Если в проекте аналитика или сохранение состояния ждут
📎 Что изменилось в Chrome
Сохранение данных «при закрытии вкладки» могло тихо перестать работать. Команда Chrome сообщила о завершении отключения
unload: начиная с Chrome 155 обработчик по умолчанию больше не вызывается.Причина не только в скорости возврата назад через bfcache. На мобильных ОС давно могли завершить фоновую страницу вообще без события. Поэтому
unload и раньше не был надёжной последней возможностью записать данные.Исключения остаются через Permissions Policy и корпоративную политику. Chrome на iOS отдельно оговорён: там используется WebKit. Если в проекте аналитика или сохранение состояния ждут
unload, найдите эти зависимости и перенесите работу на более ранний момент. Отправку данных при закрытии это событие больше не страхует.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2🤔2❤1
Почему lazy-картинка уже загружается за пределами экрана
Вы добавили
Ben Schwarz сравнил поведение движков. В его таблице Chrome на 4G получает изображения примерно за 1250 px до видимой области, Firefox использует запас 600 px, Safari — примерно один экран. В Chrome дистанция ещё и зависит от типа соединения.
Это наблюдения источника, а не обещанные пороги API. Поэтому не завязывайте логику страницы на точный момент запроса. Важную LCP-картинку не стоит делать ленивой, а под остальные заранее резервируйте размер через
📎 Таблица и условия замеров
Вы добавили
loading="lazy", а картинка далеко внизу уже появилась в Network. Это не обязательно ошибка: браузер начинает загрузку с запасом, чтобы пользователь не увидел пустое место при прокрутке.Ben Schwarz сравнил поведение движков. В его таблице Chrome на 4G получает изображения примерно за 1250 px до видимой области, Firefox использует запас 600 px, Safari — примерно один экран. В Chrome дистанция ещё и зависит от типа соединения.
Это наблюдения источника, а не обещанные пороги API. Поэтому не завязывайте логику страницы на точный момент запроса. Важную LCP-картинку не стоит делать ленивой, а под остальные заранее резервируйте размер через
width/height или aspect-ratio.Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Kube API не отвечает, LoadBalancer не пропускает трафик, DNS не резолвит, исходящие запросы не уходят. Причина обычно кроется на стыке облачной сети и кластера, и найти её без понимания всей цепочки сложно.
3 ноября в 12:00 Роман Ерема, разработчик в команде Managed Kubernetes MWS Cloud Platform, на практике покажет:
⏺️ как взаимодействуют сеть облака, CNI и сеть Kubernetes
⏺️ как работают SNAT и Source IP
⏺️ когда нужен externalTrafficPolicy: Local и почему при нём может не проходить health check
⏺️ как диагностировать проблемы на реальных кейсах (live-demo)
Все участники получат чек-лист для проверки доступности.
Полезно инженерам, разработчикам и специалистам по сетям и облачной инфраструктуре.
🗓 3 ноября в 12:00
Регистрируйтесь по ссылке
3 ноября в 12:00 Роман Ерема, разработчик в команде Managed Kubernetes MWS Cloud Platform, на практике покажет:
Все участники получат чек-лист для проверки доступности.
Полезно инженерам, разработчикам и специалистам по сетям и облачной инфраструктуре.
🗓 3 ноября в 12:00
Регистрируйтесь по ссылке
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
Bootstrap 6 Alpha переносит визуальную настройку в CSS
Менять тему после сборки удобнее, когда её параметры остались в CSS. В Bootstrap
Sass никуда не делся: он отвечает за генерацию вариантов компонентов и утилит, использует
Цена перехода — новый минимум браузеров: Chrome/Edge 130, Firefox 132, Safari 18. Ниже него встроенных fallback и полифилов нет. Это Alpha, миграция ещё может меняться. Если такой порог проекту не подходит, Bootstrap 5 остаётся поддерживаемым.
📎 Разбор CSS-first Sass modules
Менять тему после сборки удобнее, когда её параметры остались в CSS. В Bootstrap
6.0.0-alpha.1 почти каждая прежняя Sass-переменная получила CSS-переменную внутри token maps. Это открывает настройку во время работы страницы, а не только перед компиляцией.Sass никуда не делся: он отвечает за генерацию вариантов компонентов и утилит, использует
@use/@forward. Визуальные параметры при этом можно переопределять через CSS.Цена перехода — новый минимум браузеров: Chrome/Edge 130, Firefox 132, Safari 18. Ниже него встроенных fallback и полифилов нет. Это Alpha, миграция ещё может меняться. Если такой порог проекту не подходит, Bootstrap 5 остаётся поддерживаемым.
Please open Telegram to view this post
VIEW IN TELEGRAM
😁2
DOM-узел можно переставить без сброса фокуса
Перемещение через
У
Есть ограничения: перенос внутри одного документа, совместимое connected-состояние узла и нового родителя. MDN помечает API как Limited availability, поэтому проверяйте его наличие. Запасной
📎 Ограничения и живой пример
Перемещение через
insertBefore() выглядит как одна операция, но узел удаляется и вставляется заново. Из-за этого можно потерять фокус, перезапустить CSS-анимацию или загрузку iframe.У
Element.moveBefore(node, reference) другой механизм: состояние узла сохраняется. Второй аргумент указывает, перед каким ребёнком вставить узел, а null означает конец. Для custom elements предусмотрен connectedMoveCallback() вместо пары отключения и подключения.Есть ограничения: перенос внутри одного документа, совместимое connected-состояние узла и нового родителя. MDN помечает API как Limited availability, поэтому проверяйте его наличие. Запасной
insertBefore() сохранит порядок DOM, но не даст тех же гарантий состояния.Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤2
Отчёт доступности полезнее, когда он ведёт к конкретному элементу
«На странице есть проблемы» — слабая подсказка для исправления. В pour находка связана с конкретным элементом: видны разметка, важность, объяснение и рекомендация. На скриншоте, например, показаны изображения без
Инструмент работает как расширение и bookmarklet. После исправления можно повторить аудит, отдельно посмотреть порядок Tab, заголовки и landmarks, проверить forced colours. Находки с отметкой
Зелёный автоматический отчёт не доказывает полную доступность. После него всё ещё нужно пройти реальные сценарии клавиатурой и проверить работу вспомогательных технологий. Визуальные симуляции помогают искать барьеры, но не воспроизводят опыт каждого человека.
📎 Посмотреть возможности pour
«На странице есть проблемы» — слабая подсказка для исправления. В pour находка связана с конкретным элементом: видны разметка, важность, объяснение и рекомендация. На скриншоте, например, показаны изображения без
alt.Инструмент работает как расширение и bookmarklet. После исправления можно повторить аудит, отдельно посмотреть порядок Tab, заголовки и landmarks, проверить forced colours. Находки с отметкой
review требуют решения человека.Зелёный автоматический отчёт не доказывает полную доступность. После него всё ещё нужно пройти реальные сценарии клавиатурой и проверить работу вспомогательных технологий. Визуальные симуляции помогают искать барьеры, но не воспроизводят опыт каждого человека.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
VK Видео вдвое сократил время запуска роликов
Платформа разработала собственный пресет сжатия видео. Размер файлов уменьшился в среднем на 20%, у части роликов почти на треть, при этом качество изображения осталось прежним. Это ускорило запуск видео в два раза. Воспроизведение тоже стало стабильнее.
Почему не подошли стандартные настройки? Они плохо учитывают особенности видео на платформе, а от параметров сжатия зависит многое: и размер файла, и качество, и скорость обработки файлов. Инженеры VK Видео подобрали свои.
«Сжимать видео сильнее и при этом сохранять качество изображения — сложная инженерная задача. Нам удалось найти комбинацию параметров, которая уменьшает размер файлов в среднем на 20%, а для некоторых видео — почти на треть. Для зрителя это означает, что ролики быстрее запускаются и выглядят так же, как без сжатия», — отметил руководитель направления мультимедийных технологий VK Игорь Никифоров.
Платформа разработала собственный пресет сжатия видео. Размер файлов уменьшился в среднем на 20%, у части роликов почти на треть, при этом качество изображения осталось прежним. Это ускорило запуск видео в два раза. Воспроизведение тоже стало стабильнее.
Почему не подошли стандартные настройки? Они плохо учитывают особенности видео на платформе, а от параметров сжатия зависит многое: и размер файла, и качество, и скорость обработки файлов. Инженеры VK Видео подобрали свои.
«Сжимать видео сильнее и при этом сохранять качество изображения — сложная инженерная задача. Нам удалось найти комбинацию параметров, которая уменьшает размер файлов в среднем на 20%, а для некоторых видео — почти на треть. Для зрителя это означает, что ролики быстрее запускаются и выглядят так же, как без сжатия», — отметил руководитель направления мультимедийных технологий VK Игорь Никифоров.
💩8👍5😁4❤2
Фуригану можно встроить в шрифт через OpenType-лигатуры
У японского слова можно показать чтение прямо в глифе, без дополнительного
Сборка берёт Source Han Sans/Serif и словарь, затем создаёт лигатуры. Более длинные словарные совпадения имеют приоритет. В DOM остаётся обычный текст, а надстрочное чтение появляется на этапе отображения.
Но шрифт видит последовательность символов, а не смысл предложения. Поэтому чтение может оказаться неверным, а для надстрочных подписей автор рекомендует
📎 Устройство и ограничения Furifont
У японского слова можно показать чтение прямо в глифе, без дополнительного
ruby и JavaScript. В Furifont Anthony Fu перенёс эту работу в шрифт: например, последовательность 今日 заменяется лигатурой с надписью きょう сверху.Сборка берёт Source Han Sans/Serif и словарь, затем создаёт лигатуры. Более длинные словарные совпадения имеют приоритет. В DOM остаётся обычный текст, а надстрочное чтение появляется на этапе отображения.
Но шрифт видит последовательность символов, а не смысл предложения. Поэтому чтение может оказаться неверным, а для надстрочных подписей автор рекомендует
line-height от 1.6. Это интересный приём рендеринга, без гарантии правильного чтения и без автоматической замены семантики ruby.Please open Telegram to view this post
VIEW IN TELEGRAM
❤4😁2
Когда заголовки уже нельзя уменьшать, помогает не только кегль
Если каждый следующий заголовок делать меньше,
Размеры и интервалы он получает из модульной шкалы: базовое значение последовательно умножается или делится на общий коэффициент. Если между двумя уровнями слишком большой скачок, промежуточный шаг можно рассчитать через квадратный корень из коэффициента. На скриншоте так отделён
Это авторская система, а не обязательная формула доступности. Проверьте, что выбранные веса действительно есть у шрифта. И выбирайте уровень заголовка по структуре документа: нужный внешний вид задаётся CSS, а не перестановкой
📎 Разбор со шкалой и демо
Если каждый следующий заголовок делать меньше,
h4–h6 быстро упираются в размер обычного текста. Craig Abbott предлагает строить иерархию сразу из трёх вещей: размера, отступов и начертания.Размеры и интервалы он получает из модульной шкалы: базовое значение последовательно умножается или делится на общий коэффициент. Если между двумя уровнями слишком большой скачок, промежуточный шаг можно рассчитать через квадратный корень из коэффициента. На скриншоте так отделён
h4.Это авторская система, а не обязательная формула доступности. Проверьте, что выбранные веса действительно есть у шрифта. И выбирайте уровень заголовка по структуре документа: нужный внешний вид задаётся CSS, а не перестановкой
h2 на h5.Please open Telegram to view this post
VIEW IN TELEGRAM
👍1🔥1
Двоичный payload запроса можно рассмотреть прямо в Network
Копировать байты запроса в сторонний декодер теперь нужно реже. В Chrome DevTools 152 у
Это удобно, когда приложение отправляет не читаемый JSON, а бинарный формат. Можно остаться рядом с заголовками запроса и его ответом, переключить представление и проверить, какие данные ушли по сети.
Только не путайте отображение с пониманием протокола. Hex покажет байты, UTF-8 попробует представить их текстом, но структуру вашего формата инструмент сам не объяснит и шифрованные данные не расшифрует. Для смысла полей всё ещё нужна схема протокола.
📎 Раздел Network в DevTools 152
Копировать байты запроса в сторонний декодер теперь нужно реже. В Chrome DevTools 152 у
Payload появились варианты отображения Base64, Hex и UTF-8 для двоичных и сжатых данных запроса. На скриншоте источника — Response, чьи варианты перенесли в Payload.Это удобно, когда приложение отправляет не читаемый JSON, а бинарный формат. Можно остаться рядом с заголовками запроса и его ответом, переключить представление и проверить, какие данные ушли по сети.
Только не путайте отображение с пониманием протокола. Hex покажет байты, UTF-8 попробует представить их текстом, но структуру вашего формата инструмент сам не объяснит и шифрованные данные не расшифрует. Для смысла полей всё ещё нужна схема протокола.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥1
Safari блокирует серверы, связывающие email с рекламными ID
Один сайт знает ваш email, другой — свой непрозрачный tracking ID. Сервер identity resolution может связать их и помочь узнавать человека между сайтами. Именно такую инфраструктуру описывает новый разбор WebKit.
В iOS, iPadOS, macOS и visionOS 27 Safari и WebKit блокируют сетевой доступ к её доменам. Барьер стоит на пути к посреднику, как на схеме. Поэтому отладка стороннего идентификатора теперь должна учитывать и эту причину неудачного запроса.
Это не запрет на любую аналитику и не блокировка собственной персонализации сайта: источник отдельно различает first-party сценарий и межсайтовое сопоставление. Если интеграция перестала получать ID, сначала выясните роль домена. Не стоит автоматически считать это поломкой вашего логина или рассылки.
📎 Механизм блокировки в WebKit
Один сайт знает ваш email, другой — свой непрозрачный tracking ID. Сервер identity resolution может связать их и помочь узнавать человека между сайтами. Именно такую инфраструктуру описывает новый разбор WebKit.
В iOS, iPadOS, macOS и visionOS 27 Safari и WebKit блокируют сетевой доступ к её доменам. Барьер стоит на пути к посреднику, как на схеме. Поэтому отладка стороннего идентификатора теперь должна учитывать и эту причину неудачного запроса.
Это не запрет на любую аналитику и не блокировка собственной персонализации сайта: источник отдельно различает first-party сценарий и межсайтовое сопоставление. Если интеграция перестала получать ID, сначала выясните роль домена. Не стоит автоматически считать это поломкой вашего логина или рассылки.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Одна сцена графика для браузера и серверного SVG
Когда график нужен и на странице, и в серверном отчёте, легко получить две реализации с разными подписями и отступами. В Chartist 2 между конфигурацией и выводом есть общая сцена.
На сайте показана связка
Общий рендеринг не решает все задачи представления. У SVG всё ещё должны быть понятные подписи и текстовая альтернатива данным. А container-based responsive в источнике отмечен как экспериментальный: не рассчитывайте на него как на готовую универсальную адаптивность.
📎 Примеры и серверный рендеринг
Когда график нужен и на странице, и в серверном отчёте, легко получить две реализации с разными подписями и отступами. В Chartist 2 между конфигурацией и выводом есть общая сцена.
На сайте показана связка
renderToString(toScene(config, size)): сцена превращается в строку SVG, которую можно получить и на сервере. В браузере график стилизуется CSS-классами. Есть и комбинированный пример со столбцами, линией и двумя осями.Общий рендеринг не решает все задачи представления. У SVG всё ещё должны быть понятные подписи и текстовая альтернатива данным. А container-based responsive в источнике отмечен как экспериментальный: не рассчитывайте на него как на готовую универсальную адаптивность.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2