CSS псевдокласс :has()
Алоха товарищи! Сегодня будет небольшой пост про один из новых псевдоклассов CSS.
Что он делает: позволяет создать CSS селектор для элемента в зависимости от того есть ли у него тот или иной дочерний элемент.
Примеры:
Собственно вот интересная такая штука.
❗️ Но как это часто случается есть нюанс. Согласно ресурсу caniuse этот псевдокласс на данный момент не поддерживает Firefox, но учитывая что месяца 3 назад его еще не поддерживал хром то думаю это вопрос недолгого времени.
Алоха товарищи! Сегодня будет небольшой пост про один из новых псевдоклассов CSS.
Что он делает: позволяет создать CSS селектор для элемента в зависимости от того есть ли у него тот или иной дочерний элемент.
Примеры:
// Выбираем элемент section который содержит h2section:has(h2) { background: lightgray;}// Выбираем img только в том случае если его родительский элемент содержит h2section:has(h2) img { border: 5px solid lime;}Собственно вот интересная такая штука.
❗️ Но как это часто случается есть нюанс. Согласно ресурсу caniuse этот псевдокласс на данный момент не поддерживает Firefox, но учитывая что месяца 3 назад его еще не поддерживал хром то думаю это вопрос недолгого времени.
CSS псевдокласс :is()
Всем привет! Недавно узнал о том что в
Несколько примеров:
Меняет фон для кнопки если она имеет состояние
Выбирает все элементы
В данном примере мы выбираем все списки которые уже находятся в списках.
Собственно вот такая довольно полезная штуковина. Поддерживается на данный момент всеми основными браузерами, вот ссылка на caniuse. Удачи в экспериментах!
Всем привет! Недавно узнал о том что в
CSS есть псевдокласс :is(), который позволяет значительно сократить длинные записи селекторов. По сути он просто принимает список селекторов для выбора элементов HTML.Несколько примеров:
button:is(:hover, :focus) { background: green;}Меняет фон для кнопки если она имеет состояние
focus или hover.:is(thead, tfoot) tr :is(th, td) { background: red;}Выбирает все элементы
th и td внутри хедера и футера таблицы.:is(ul, ol, menu) > :is(ul, ol, menu) { background: yellow;}В данном примере мы выбираем все списки которые уже находятся в списках.
Собственно вот такая довольно полезная штуковина. Поддерживается на данный момент всеми основными браузерами, вот ссылка на caniuse. Удачи в экспериментах!
JS - document.visibilityState или определяем активна ли сейчас вкладка в браузере
Алоха товарищи фронты! Не большой шортрид о том как определить находится ли сейчас юзер на странице или нет.
Для данной задачи мы будем использовать:
👉 Cвойство
👉 А так же стандартный JS event
Пример кода:
Надеюсь это было вам полезно. Удачи в экспериментах!
Алоха товарищи фронты! Не большой шортрид о том как определить находится ли сейчас юзер на странице или нет.
Для данной задачи мы будем использовать:
👉 Cвойство
window.navigator.visibilityState, которое может быть равно или строке 'hidden' или строке 'visible'. 👉 А так же стандартный JS event
visibilitychange, который в свою очередь будет реагировать на открытие / скрытие вкладки браузера и проверять свойство window.navigator.visibilityStateПример кода:
const isVisibilityHiddenState = 'hidden';const handleVisibility = () => { if (document.visibilityState === isVisibilityHiddenState) { console.log('user is on the page'); } else { console.log('user is not on the page right now'); }}document.addEventListener('visibilitychange', handleVisibility);Надеюсь это было вам полезно. Удачи в экспериментах!