Магия CSS на практике: советы по вёрстке от гика

Хабр, привет! Я частенько пишу про работу CSS, его неизвестные возможности и влияние на доступность. Кажется, этих направлений мало для меня. Теперь я хочу показать техники вёрстки, используемые мной постоянно. Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями. Сегодня я расскажу: как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок; про свойство inset , сокращающее код на целых три строки; мой сниппет для расширения интерактивной области у кнопок и ссылок; стиль написания медиа-запросов, позволяющий сократить количество правил; альтернативный способ центрирования элемента без свойства transform .

https://habr.com/ru/companies/ruvds/articles/822461/

#ruvds_статьи #css #вёрстка #лайфхаки #чекбоксы #радиокнопки #псевдоклассы #псевдоэлементы #центрирование

[Перевод] Сложнейшая проблема компьютерных наук: центрирование

Заявляю: «Мы, как цивилизация, разучились использовать центрирование». Ну то есть мы, конечно, знаем, как это делать — очень просто: display: flex;
justify-content: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */ Не спрашивайте, почему вам нужно запомнить четыре слова вместо просто горизонтальное/вертикальное; всё равно лучше, чем было до этого. Ещё можно использовать сетку: display: grid;
justify-items: center; /* Горизонтальное центрирование */
align-items: center; /* Вертикальное центрирование */ Также не спрашивайте, почему выражение justify-content стало justify-items .

https://habr.com/ru/companies/ruvds/articles/810311/

#ruvds_перевод #вебразработка #вебдизайн #выравнивание #центрирование #css