👩‍💻 Теперь 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

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

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

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

📱 @dev_notes_ru

#Frontend #CSS

🖥 CSS Form Control Styling Level 1
Unofficial Proposal Draft, 5 March 2025

Этот модуль CSS определяет различные способы стилизации элементов управления формами и их частей.

📱 @dev_notes_ru

#CSS #Form

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

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

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

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

📱 @dev_notes_ru

#Frontend #CSS

💡 Совет по CSS

Заметил, что многие разработчики используют margin для добавления промежутков между элементами flexbox, особенно в меню.

Вместо margin во Flexbox можно использовать свойство gap и избежать неудобных :not(:last-child) или сброса margin на первом/последнем элементе. 😉

gap в baseeline с апреля 2021 года. ✅

📱 @dev_notes_ru

#CSS #flexbox #tips

👩‍💻👩‍💻 Тёмная и светлая темы для 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

CSS Working Group приняла решение разрешить синтаксис диапазона в запросах style. Можно сравнивать с переменной контейнера:

@container style(--var < 5em)

Но можно сравнивать и обычные значения:

style(1em < 20px)
style(sibling-count() > 3)

Функция style также может быть использована для условий встроенных if()

Функция style() разработана для работы с именами свойств, поэтому можно использовать переменные без var(). Возможно, когда-нибудь браузеры также позволят обращаться к нестандартным свойствам напрямую.

Но, так же можно использовать var(). Если вам нравится var() или возможность использования резервных значений, он тоже работает!

📱 @dev_notes_ru

#CSS #feature

📱 @dev_notes_ru

#joke #css