CSS Protips
Это современные решения типичных проблем, коллекция советов, которая поможет вам улучшить ваши профессиональные навыки CSS.
От переводчика
Приветствую, для вас подготовлен еще один перевод заметок на тему CSS. Мэтт Смит, разработчик из Портленда, поделился CSS-советами и выложил их на GitHub. Мне особенно понравилась его подборка, она структурирована, не особо громоздкая в плане скучных больших текстов и описаний, и в целом будет понятна даже новичку. Я буду рад, если в комментариях мы с вами обсудим каждый пункт и в итоге дадим некоторые заключения. Итак, приступим.
Cодержание
Используем псевдо-класс :not для задания рамки навигации
Добавляем межстрочный интервал элементу body
Центрируем по вертикали все что угодно
Правильно разделяем запятыми элементы списков
Отрицательный порядковый номер в nth-child
Используем SVG-логотипы
Аксиоматический CSS
Максимальная высота у CSS-слайдера
Наследуем box-sizing
Одинаковая ширина ячейки таблицы
Динамические внешние отступы при помощи flexbox
Используем селектор атрибутов пустых ссылок
Стили по умолчанию для обычных ссылок
Используем псевдо-класс :not для задания рамки навигации
Вместо того, чтобы задавать рамку (border) таким образом…
/* добавляем рамку */
.nav li {
border-right: 1px solid #666;
}
… да еще и обнулять border последнему элементу…
/* удаляем рамку */
.nav li:last-child {
border-right: none;
}
… можно было просто использовать псевдо-класс :not(), который поможет нам выбрать только нужные элементы:
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
Конечно, вы могли использовать такую выборку .nav li + li или даже .nav li:first-child ~ li, однако, если мы намеренно используем :not(), нам ясно, что CSS определяет границу всем элементам, кроме последнего, и теперь любому человеку будет понятно, что здесь происходит. Этот способ поддерживается в IE9+ и остальных.
Добавляем межстрочный интервал элементу body
Вам не следует добавлять высоту строки для каждого параграфа или заголовка (<р>, <h*>), соответственно, определяя каждый элемент. Вместо этого, добавьте этот код в тело элемента body:
body {
}
Вот таким вот образом, любые текстовые элементы наследуют это свойство от главного родительского элемента body.
Центрируем по вертикали все что угодно
Нет, это не черная магия, вы действительно можете центрировать любой элемент по вертикали:
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
Хотите центрировать как-то еще? Вертикально, горизонтально… как-нибудь, где-нибудь? На CSS-Tricks вы можете ознакомиться со статьей и тогда вы сможете делать все, что угодно. Пример имеет поддержку в IE11+ и остальных.
Примечание: Следите за багами (ошибки) flexbox в IE11 и контролируйте процесс html-верстки.
Правильно разделяем запятыми элементы списков
Мы можем сделать наши элементы li так, чтобы они действительно выглядели как реальный список, записи которого разделены запятыми:
ul > li:not(:last-child)::after {
content: ",";
}
Используя псевдо-класс :not(), мы добавляем после каждого элемента ul-списка запятую, кроме последнего.
Отрицательный порядковый номер в nth-child
Используем отрицательные аргументы в nth-child для выбора элементов с 1 по n.
li {
display: none;
}
/* выбираем элементы с 1 по 3 и отображаем их */
li:nth-child(-n+3) {
display: block;
}
Или, теперь, когда мы знаем все об использовании псевдо-класса :not(), можем попробовать так:
/* скрываем все элемента ul-списка, кроме элементов с 1 по 3 */
li:not(:nth-child(-n+3)) {
display: none;
}
Ну, что, было довольно легко.
Используем SVG-логотипы
Нет, никаких причин не использовать SVG:
.logo {
background: url("logo.svg");
}
SVG хорошо масштабируется под любое разрешение и поддерживается во всех браузерах, IE9+.Теперь мы можем использовать svg, вместо .png, .jpg, or .gif-файлов.
Примечание: Если у вас есть SVG-иконка только для какой-либо кнопки и, в случае, если SVG не был загружен, вы можете использовать доступную текстовую подсказку:
.no-svg .icon-only::after {
content: attr(aria-label);
}
Аксиоматический CSS
Лоботомированная сова (аксиоматический СSS), да, это довольно странное название, однако с помощью универсального селектора (*) и одноуровневого селектора (+) можно получить мощные возможности CSS:
* + * {
margin-top: 1.5em;
}
В этом примере, все элементы в потоке, которые расположены после другого элемента, должны получить верхний отступ равный 1.5em.Более подробную информацию о "лоботомированной сове" можете прочитать в статье Хейдона Пикеринга, или перевод на русском.
Максимальная высота у CSS-слайдера
Реализовать CSS-слайдер можно с помощью «max-height» и «overflow:hidden»:
.slider ul {
max-height: 0;
overflow: hidden;
}
.slider:hover ul {
max-height: 1000px;
transition: .3s ease; /* анимация для max-height */
}
Наследуем box-sizing
Пусть box-sizing наследуется от html:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Теперь нам проще контролировать box-sizing в плагинах или компонентах, которые используют свои правила поведения. Поддержка в IE8+ и остальных.
Одинаковая ширина ячейки таблицы
Иногда, таблицы могут причинять боль в работе, поэтому попробуйте использовать table-layout: fixed, чтобы задействовать ячейки одинаковыми по ширине:
.calendar {
table-layout: fixed;
}
Мы избавляемся от боли с помощью table-layout. Поддержка в IE8+ и остальных.
Динамические внешние отступы при помощи flexbox
При работе с колоночным макетом, вы можете избавиться от использования css-селекторов nth-*, first-*, и last-child при помощи flexbox значения space-between:
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%; /* базовый размер отдельно взятого блока */
}
Поддержка в IE11+ и остальных.
Используем селектор атрибутов пустых ссылок
Отображаем ссылки, когда a-элемент не имеет текстового значения, но при этом атрибут href содержит ссылку:
a[href^="http"]:empty::before {
content: attr(href);
}
Это довольно удобно. Поддержка в IE9+ и остальных.
Стили по умолчанию для обычных ссылок
Добавляем по умолчанию стиль ссылкам:
a[href]:not([class]) {
color: #008000;
text-decoration: underline;
}
Теперь ссылки, вставленные через визуальный редактор вашей CMS, которые обычно не имеют класса, будут отличаться от остальных ссылок, не затрагивая каскад.
