Вже доступно! Дослідження Telegram за 2025 — головні інсайти року 
Логово верстальщика
Відкрити в Telegram
Логово верстальщиков: HTML, CSS, JavaScript, практики современной верстки, вайбкодинг и использование ИИ в разработке. Личный блог автора - @just_genych По вопросам рекламы или разработки: @g_abashkin
Показати більше8 226
Підписники
-524 години
-237 днів
-1430 день
Архів дописів
8 223
8 223
8 223
Использование переменных в CSS
Всем привет!
В JavaScript-мире препроцессоры CSS — это очень полезные и популярные технологии. Препроцессоры расширяют возможности CSS, позволяя пользоваться, например, переменными и функциями. Но нам теперь доступны более мощные возможности CSS, например мы можем создать переменные без использования препроцессоров.
Как это сделать:
Для объявления переменной достаточно поставить два тире (--) перед её именем. После этого, там, где нужно значение переменной, вызывают функцию var(), передавая ей созданную ранее переменную в качестве аргумента.
Пример:
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background: var(--base);
-webkit-filter: blur(var(--blur));
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
Собственно как то так, удачи вам в экспериментах!8 223
8 223
8 223
8 223
8 223
🚀JavaScript: ускоряем загрузку изображений с помощью Imgproxy, Cache API и Service Worker API
В этой статье я хочу поделиться с вами результатами небольшого эксперимента, связанного с ускорением загрузки изображений с помощью Imgproxy, Cache API (далее — кеш) и Service Worker API (далее — СВ).
Читать...
8 223
Новая фича CSS - Nesting
Алоха товарищи фронты! Я вчера узнал что оказывается в нативном CSS уже есть такая штука как nesting(вложенность). Штука очень удобная но в целом не новая если вы раньше работали с SASS, LESS и.т.д.
Так вот теперь CSS начал это уметь "из коробки".
Для тех кто пока не понял о чем речь вот код снизу:
👉 Допустим в сегодняшнем CSS нам нужно сделать что то вроде такого
.link {
color: red;
}
.link:hover,
.link:focus {
color: blue;
}
👉 С нововведением мы сможем написать так:
.link {
color: red;
&:hover,
&:focus {
color: blue;
}
}
❗ В общем имейте ввиду, но пока особо не торопитесь его использовать. Согласно ресурсу caniuse файрфокс пока что с этим всем добром работать не научился.8 223
8 223
8 223
8 223
8 223
8 223
🔥 За интуитивно понятным и простым синтаксисом Vue.js скрываются широкие возможности! Но их можно упустить при самостоятельном освоении.
Поэтому приглашаем освоить этот инструмент фронтенд и бэкенд-разработчиков на онлайн-курсе «Vue.js разработчик».
🧑💻 Преподаватели на живых вебинарах и практике помогут вам освоить продвинутые возможности Vue.
Вас ждет актуальная программа, учитывающая последние обновления, включая новую версию Vue 3, и выпускной проект для портфолио.
Старт занятий 31 октября.
Успейте 📌ПРОЙТИ ТЕСТ , чтобы записаться в группу по спец.цене: https://clck.ru/36DH3q
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru, erid: LjN8KRxNZ
8 223
8 223
8 223
😵Как применять Module Federation для шеринга виджетов из UI-kit
В этой статье мы рассмотрим возможности Module Federation для решения проблем, связанных с консистентностью виджета, как можно подключить модуль с помощью данной технологии и как обрабатывать ситуации, при которых виджет не сможет быть загружен и подключен.
Читать...
8 223
CSS - min(), max() - функции
Всем привет! Относительно недавно в CSS появилась еще одна клевая фича которая позволяет сократить наши портянки кода и сделать его более лаконичным.
Сегодня я хотел бы рассказать о min, max функциях
Например мы имеем
div и у него свойство width, max-width, min-width:
Как мы писали раньше:
// Вариант 1
div {max-width: 780px; width: 80%};
// Вариант 2
div {width: 50%; min-width: 400px};
Как это можно написать сейчас:
// Вариант 1
div {max-width: min(80%, 780px)};
// Вариант 2
div {width: max(50%, 400px)};
❗ Полностью в рамках телеграма раскрыть эту тему нереально поэтому для тех кого интересуют подробности вот крутая статья с хабра.
❗ Так же согласно caniuse эти функции уже поддерживают последние версии всех основных брауеров.8 223
