🌟 Что нового в DevTools Chrome 121: на заметку фронтенд-разработчику

1. Улучшения в панели Elements:

🔧 Поддержка @font-palette-values для настройки значений свойства font-palette.
🔧 Теперь можно использовать одно кастомное свойство CSS в качестве запасного значения для другого кастомного свойства.

2. Улучшенная поддержка source map: включена по умолчанию опция "Resolve variable names in expressions using source maps" для отладки исходного кода в Sources и Scope.

3. Улучшения в панели Performance:

🔧 Расширенный трек взаимодействий с индикаторами задержек ввода и отображения.
🔧 Новые кнопки для продвинутой фильтрации во вкладках Bottom-Up, Call Tree и Event Log.

4. Маркеры отступов в панели Sources: в редакторе кода теперь отображаются вертикальные линии для блоков с отступами.
5. Полезные подсказки для переопределенных заголовков и содержимого в панели Network.
6. Новые опции в Command Menu для добавления и удаления шаблонов блокировки запросов.
7. Удалён экспериментальный раздел нарушений CSP.
8. Lighthouse обновлён до версии 11.3.0.
9. Улучшения доступности: улучшенная навигация и взаимодействие в различных панелях.

... и многое другое

🧰 Использование прозрачных градиентов в CSS для создания эффекта затухания текста

Недавно некто Amit Merchant написал несколько полезных заметок о методе затемнения текста с помощью наложенного элемента, основанного на дизайне Trunk.io.

Эффект выглядит великолепно, но у него есть два недостатка:

☑️ Текст за градиентом больше нельзя выделить.
☑️ Эффект работает только на сплошных цветах фона.

Первую проблему легко решить, добавив к наложенному элементу:

user-select: none;

Для решения второй проблемы необходимо заставить текст исчезать, а не выглядеть так, будто он исчезает. Реализовать это можно с помощью mask-image или background-clip. Подробнее о реализации и подводных камнях читайте в статье.