👩‍💻👩‍💻 Модернизация с Web-платформой: Производительность изображений

Демонстрация того, как современная Web-платформа может радикально упростить и обогатить старую кодовую базу.

Это первая часть серии статей о силе современной Web-платформы. Я написал каждую статью, основываясь на результатах проекта, созданного в 2018 году, а затем обновлённого в 2024 году.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #JavaScript #WebPlatform

👩‍💻 Теперь CSS функция `attr()` поддерживает типы

CSS функция attr() позволяет извлечь значение атрибута выбранного HTML элемента и использовать его в качестве значения CSS свойства.

attr() обычно используется вместе со свойством content в псевдоэлементах для отображения значения атрибута на странице.

Функция attr() давно существует и широко используется в CSS. Однако она принимала только один аргумент: имя атрибута, значение которого требуется использовать.

Кроме того, значение, возвращаемое функцией attr(), всегда рассматривалось как строка, поэтому её можно было использовать только в свойствах, принимающих строковые значения. Например, свойство `content`, о котором говорилось ранее.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS #Attr

👩‍💻 Декодирование CSS селекторов: :has(:not) и :not(:has)

При комбинировании CSS функций вложенность функций имеет значение. В статье мы рассмотрим разницу между :has(:not) и :not(:has), а также то, как подходить к декодированию CSS селекторов, использующих эти вложенные CSS функции.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

Гиф в 2025 году

Вам нужно автоматически воспроизводящееся зацикленное видео без звука? В разговорной речи именно такое значение имеет слово «гифка». Слово прижилось, но сам формат изображения является древним и устаревшим. Существует множество способов добиться такого результата, но ясно одно: больше нет причин использовать громоздкий формат .gif.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #gif #video

👩‍💻 Матрица CSS трансформаций

Глубокое погружение в матрицу CSS трансформаций, её взаимосвязь с отдельными свойствами CSS трансформаций, взгляд на скрытые возможности форм функций.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

👩‍💻 Спокойное подчёркивание текста ссылки

Синие ссылки с подчёркиванием — хороший стиль по умолчанию для ссылок в основном тексте, но он выглядит чересчур резко. Возможно, мы можем его немного смягчить и сделать более гибким.

Иногда я не могу решить, как должна выглядеть идеальная ссылка в тексте. Она должна быть очевидной, но в то же время должна быть оформлена не настолько интенсивно, чтобы отвлекать от чтения текста. В целом мне нравится идея, что ссылки должны быть синими и подчёркнутыми, так как это наиболее близко к привычному виду ссылок по умолчанию, но я гибко подхожу к этому вопросу. Ссылки, имеющие «фирменный» цвет и отличающиеся от цвета текста, кажутся прекрасными, особенно если они тоже подчёркнуты.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

👩‍💻👩‍💻 Тёмная и светлая темы для SVG

Использование CSS функции `light-dark()` для реализации светлого и тёмного режима для SVG иконок,включая SVG, используемые с HTML элементом `img` или в качестве CSS свойства `background-image`.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #CSS

👩‍💻 Упрощение CSS с псевдоклассом `:is()`

Недавно появился повод воспользоваться новым псевдоклассом CSS `:is()`, и он превосходен! Хочу рассказать, как с его помощью можно значительно уменьшить сложность селекторов.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

👩‍💻 Понимание селектора `:root` и CSS переменных

Используйте возможности CSS3 с селектором `:root`, упрощающим глобальную стилизацию, повышающим удобство сопровождения и открывающим динамичный, отзывчивый дизайн.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

Обновлён цикл статей по рефакторингу CSS

🖥 Рефакторинг CSS: Введение
🖥 Рефакторинг CSS: Стратегия, тестирование и сопровождение
🖥 Рефакторинг CSS: Оптимизация размера и производительности

📱 @dev_notes_ru

#Frontend #CSS #Рефакторинг