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 для решения проблем, связанных с консистентностью виджета, как можно подключить модуль с помощью данной технологии и как обрабатывать ситуации, при которых виджет не сможет быть загружен и подключен.
Читать...
Новая фича CSS - Nesting
Алоха товарищи фронты! Я вчера узнал что оказывается в нативном CSS уже есть такая штука как nesting(вложенность). Штука очень удобная но в целом не новая если вы раньше работали с SASS, LESS и.т.д.
Так вот теперь CSS начал это уметь "из коробки".
Для тех кто пока не понял о чем речь вот код снизу:
👉 Допустим в сегодняшнем CSS нам нужно сделать что то вроде такого
👉 С нововведением мы сможем написать так:
❗ В общем имейте ввиду, но пока особо не торопитесь его использовать. Согласно ресурсу caniuse файрфокс пока что с этим всем добром работать не научился.
Алоха товарищи фронты! Я вчера узнал что оказывается в нативном CSS уже есть такая штука как nesting(вложенность). Штука очень удобная но в целом не новая если вы раньше работали с SASS, LESS и.т.д.
Так вот теперь CSS начал это уметь "из коробки".
Для тех кто пока не понял о чем речь вот код снизу:
👉 Допустим в сегодняшнем CSS нам нужно сделать что то вроде такого
.link { color: red;}.link:hover,.link:focus { color: blue;}👉 С нововведением мы сможем написать так:
.link { color: red; &:hover, &:focus { color: blue; }}❗ В общем имейте ввиду, но пока особо не торопитесь его использовать. Согласно ресурсу caniuse файрфокс пока что с этим всем добром работать не научился.
🚀JavaScript: ускоряем загрузку изображений с помощью Imgproxy, Cache API и Service Worker API
В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).
Читать...
В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).
Читать...