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);Надеюсь это было вам полезно. Удачи в экспериментах!
CSS - min(), max() - функции
Всем привет! Относительно недавно в CSS появилась еще одна клевая фича которая позволяет сократить наши портянки кода и сделать его более лаконичным.
Сегодня я хотел бы рассказать о min, max функциях
Например мы имеем
Как мы писали раньше:
Как это можно написать сейчас:
❗ Полностью в рамках телеграма раскрыть эту тему нереально поэтому для тех кого интересуют подробности вот крутая статья с хабра.
❗ Так же согласно caniuse эти функции уже поддерживают последние версии всех основных брауеров.
Всем привет! Относительно недавно в CSS появилась еще одна клевая фича которая позволяет сократить наши портянки кода и сделать его более лаконичным.
Сегодня я хотел бы рассказать о min, max функциях
Например мы имеем
div и у него свойство width, max-width, min-width:Как мы писали раньше:
// Вариант 1 div {max-width: 780px; width: 80%};// Вариант 2div {width: 50%; min-width: 400px};Как это можно написать сейчас:
// Вариант 1div {max-width: min(80%, 780px)};// Вариант 2div {width: max(50%, 400px)};❗ Полностью в рамках телеграма раскрыть эту тему нереально поэтому для тех кого интересуют подробности вот крутая статья с хабра.
❗ Так же согласно caniuse эти функции уже поддерживают последние версии всех основных брауеров.
😵Как применять Module Federation для шеринга виджетов из UI-kit
В этой статье мы рассмотрим возможности Module Federation для решения проблем, связанных с консистентностью виджета, как можно подключить модуль с помощью данной технологии и как обрабатывать ситуации, при которых виджет не сможет быть загружен и подключен.
Читать...
В этой статье мы рассмотрим возможности Module Federation для решения проблем, связанных с консистентностью виджета, как можно подключить модуль с помощью данной технологии и как обрабатывать ситуации, при которых виджет не сможет быть загружен и подключен.
Читать...