🖥 Неизвестно полезный CSS. Часть 8

Собрал CSS-хаки, про которые мало кто знает, но они реально выручают. Всё современно, без учёта IE11. Будет и про гриды, и про transform, и даже пара древностей

🔗 Ссылка

CodeBase | Frontend | #article

🐧 Linux Club ©

🦥Ленивый программист ©

🦥Ленивый программист ©

🦥Ленивый программист ©

👩‍💻 Псевдокласс :focus

Сайтом можно пользоваться не только с использованием мышки, но и при помощи клавиатуры. При переключении клавишей Tab элементу добавляется псевдокласс :focus, и мы можем задать для него красивые стили.

⚠️ Важно! В браузерах Safari и Firefox на Mac при клике мышкой на кнопку фокус не устанавливается.

➡️ После любого селектора ставим двоеточие и пишем ключевое слово focus.

a:focus {
  outline: 2px solid hotpink;
}

➡️ Фишки:

⏺ Смену стилей между состояниями можно анимировать при помощи transition

⏺ В браузер встроены дефолтные стили для фокуса.

⏺ Нельзя полностью удалять стили для фокуса, заменяйте их на свои, если дефолтные не нравятся.

⏺ Стили для фокуса можно увидеть, открыв сайт и несколько раз нажав клавишу Tab. Или нажмите на кнопку, поставьте курсор в поле ввода.

CodeBase | Frontend | #css

🦥Ленивый программист ©

🦥Ленивый программист ©

Подборка 3 лучших IT каналов, необходимых каждому

💻 GitHack — репозитории, секретные утилиты, фишки, о которых не пишут в блогах.

🌐 GitWeb — топовые сайты, подборки и инструменты для веб разработки.

🐍 GitPython — лучшие тулзы недели, репозитории, необходимые фишки питона, которые должен знать каждый разработчик

🎁 Всё бесплатно и полезно. Подпишись и будь в курсе всего, что происходит в IT