💡 Простой способ изменения стиля кнопки выбора файлов с помощью CSS: на заметку фронтенд-разработку

➡️ Поиграть можно здесь

#css #tip by Shripal Soni

💡Мы не можем изменить цвет внешней SVG-иконки с помощью свойств fill/storke, но есть способ сделать это с помощью CSS mask

#css #tip by Shripal Soni

💡 Простой способ получения доступа к любому значению атрибута в виде строки с помощью CSS: на заметку фронтенд-разработчику

➡️ Поиграть можно здесь

#css #tip by Shripal Soni

💡Простой способ анимации иконки при нажатии/фокусе: на заметку фронтенд-разработчику

👉 Поиграть можно здесь

#css #tip by Shripal Soni

💡 В CSS можно сделать attribute selector регистронезависимым: на заметку фронтенд-разработчику

👉 Поиграть можно здесь

#css #tip by Shripal Soni

🎮 Интерфейс, который покорил миллионы

Если вы выросли на Counter-Strike 1.6, то наверняка помните тот минималистичный и функциональный интерфейс. Теперь можно вернуть двухтысячные этот стиль в веб-проектах с помощью библиотеки cs16.css.

📎 Добавьте кусочек CS 1.6 в свои проекты

#css

💡 Простой способ создания нового контекста наложения в CSS

Шпаргалка для фронтенд-разработчика.

#css #tip by Shripal Soni

💡 Непрямоугольные текстовые блоки (Non-rectangular Text Block)

Простой способ использования CSS-свойства shape-outside для создания обтекания текста вокруг фигур нестандартной формы.

✨ В Firefox DevTools есть интерактивный инструмент для редактирования/отладки контуров фигур, созданных с использованием свойств shape-outside/clip-path.

#css #tip by Shripal Soni

💡Использование isolation: isolate помогает избежать неожиданных проблем со слоями (z-index) и позволяет группировать элементы в свой стековый контекст без вмешательства других элементов страницы.

#css #tip by Shripal Soni

⭐️ Типовая ловушка с :focus-within и :not() в формах

Многие используют эти псевдоклассы для управления состояниями форм и элементов, но есть ловушки:

➡️ Почему так:

1. :focus-within реагирует только на фокус внутри самого элемента, не на внешние события.

2. :not() может «съесть» вложенные селекторы неправильно — порядок и специфичность важны.

3. Если элемент содержит другие интерактивные элементы (кнопки, ссылки), браузер может вести себя по-разному.

➡️ Как исправить:

— Использовать более точные селекторы и отдельные правила для состояния фокуса.

— Проверять вложенные элементы: :focus-within смотрит любые потомки, не только input.

— Не смешивать :not() с сложными вложенными селекторами — часто проще добавить класс через JS.

✅ Проверяйте конкретный DOM и порядок CSS-правил.

🐸 Библиотека фронтендера

#hotfix #css