#фишка дня

Если вы используете стандартные элементы вроде input type number, date, range (а их часто используют в админках, да и они потихоньку улучшаются), может возникнуть задача стилизовать значения, выходящие за рамки дозволенного.

И тут, оказывается, в CSS есть необходимые селекторы: :in-range и :out-of-range.

Ну уж input type number точно будет доволен :)

#css #range #selector #input

#фишка дня

Кому ещё не надоели споры, что быстрее, # или ., * или :has — те будут рады новой фишке Chrome DevTools в Chrome 125 — Selector Stats!

Кстати, её сделали разработчики Edge, они много внимания уделяют развитию DevTools вообще. Ну что же, у каждого свой PR :)

Впрочем, тем, кому эти споры надоели, можно лишний раз напомнить: CSS вряд ли станет бутылочным горлышком. Ну разве что новые селекторы, has, is, not и злое использование .foo > * и то это надо постараться.

#devtools #chrome #performance

#инструмент дня

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

Arc активно переосмысляет интерфейс, Vivaldi играет на чувстве ностальгии, Яндекс.Браузер предлагает закладки перевод и озвучание видео в реальном времени, Opera — встраивает VPN.

А ребята из Microsoft Edge — дорабатывают девтулзы. Почти всё новое из последних релизов Chrome — от них.

И вот чтобы покончить все споры на тему производительности CSS, ещё в Chrome 125 бэкпортнули статистику селекторов на вкладке оценки производительности.

Речь там, как правило, о микросекундах в худшем случае, но вдруг...

И, пользуясь случаем, хочу напомнить о замечательном ресурсе Can I DevTools, где можно найти разные фишки работы со средствами разработчика: https://www.canidev.tools/find-expensive-selectors/edge

#css #performance #devtools

#фишка дня

Думаю, все знают про :nth-child, :nth-last-child. А также про :nth-of-type и :nth-last-of-type.

Что в них самое раздражающее?

Кто сказал нумерация с единицы? Иди в свой Си.

Конечно же это неочевидность, а когда-то и невозможность, выбора элементов по классу или иному атрибуту!

Да-да, :nth-of-type выбирает по тегу, даже не по классу. Так что же делать?

А делать вот что: уже пару лет с нами присутствует синтаксис-дополнение к nth-child. И называется он of S.

Выглядит так:

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

А применяется так:

:nth-child(2 of .highlight)
:nth-child(even of :not([hidden]))

Первый выберет второе появление элемента с классом .highlight, а второй — все чётные не скрытые элементы.

Подробнее — в блоге разработчиков Chrome.

#css #nth #selector