ВЕ @tproger_web
Showing posts older than #6404 · Back to latest
column-rule, работавшее раньше только в многоколоночной вёрстке, теперь понимают grid и flexbox, а для второй оси появилось row-rule. Firefox и Safari фичу пока не умеют.outset переименовали в inset;gap-rule-paint-order стал rule-overlap;rule-visibility-items.
document.modelContext, сайт регистрирует через него свои инструменты, а агент вызывает их напрямую.
startViewTransition(). Пока анимация идёт, пользователь жмёт кнопку в другом углу экрана, и ничего не происходит. Он жмёт ещё раз, но ничего не происходит. ::view-transition размером во весь вьюпорт, и клики достаются ему. Разобрал это Крис Койер, придумавший CSS-Tricks и CodePen: в его демке рядом с анимацией стоит кнопка с alert(), и пока идёт переход, она не отвечает.::view-transition — подсветится весь экран.:root дефолтный view-transition-name, чтобы корень не попадал в снимок, и разрешаем кликать сквозь оверлей::root { view-transition-name: none; }
::view-transition { pointer-events: none; }startViewTransition() не на document, а на контейнере с нужными элементами: тогда и оверлей накроет только его. Но поддержка у этого варианта хуже, так что по умолчанию проще держать две строки выше.
package.json мы обычно ходим с вопросами про уязвимости и версии, но редко с вопросом, делает ли библиотека что-то, чего платформа ещё не умеет. Разбор в Smashing Magazine оценивает цену этой привычки: в среднем приложении 60–90 КБ после минификации и сжатия весят зависимости, которые дублируют то, что браузер уже умеет сам.timeago.js на 1 КБ заменяется на Intl.RelativeTimeFormat, numeral на 3,9 КБ — на Intl.NumberFormat, humanize-duration на 6,6 КБ — на Intl.DurationFormat. Самописные функции, склеивающие массив в строку через запятую, закрывает Intl.ListFormat, вместе с оксфордской запятой.Temporal лучше Date, но в стабильном Safari его пока нет, а официальный полифил весит 44 КБ против 3 КБ у dayjs. Сегодня такая замена не экономит, а добавляет к бандлу около 41 КБ, поэтому dayjs остаётся на месте до тех пор, пока Temporal не доедет до Safari.
label, у которого в for стоит чужой id, отдаёт клик по элементу, до которого у письма доступа быть не должно. В Outlook так открывается лента интерфейса и закрепляется сообщение. Не починено до сих пор. ::before, ::after и opacity разводит то, что видит человек, и то, что читает ИИ-браузер: письмо превращается в промпт-инъекцию. label при этом не нужно, режьте у него for: опасна не подпись, а привязка к чужому id. Совет автора даже шире — отдавать чужую разметку в iframe с sandbox. И не пускайте в белый список :has, :checked, :focus и :not: на них собирают поддельные элементы интерфейса.
if (PerformanceObserver.supportedEntryTypes.includes('soft-navigation')) {
new PerformanceObserver(console.log)
.observe({ type: 'soft-navigation', buffered: true });
}```
.btn { anchor-name: --btn; }
.tooltip {
position: absolute;
position-anchor: --btn;
position-area: block-start center;
position-try-fallbacks: flip-block;
}
