Необычные CSS-свойства

Есть много CSS-свойств, о которых некоторые разработчики не знают, или знают о них, но забывают применять на практике. Некоторые из этих свойств могут позволить вам не использовать JavaScript для достижения определенного результата, некоторые могут позволить писать меньше CSS. Как фронтенд-разработчик, я время от времени сталкивался с такими вещами и подумал, почему бы не перечислить все эти малоиспользуемые и интересные свойства в статье?

Мы рассмотрим некоторые CSS-свойства, которые, я надеюсь, покажутся вам интересными. Для некоторых свойств посмотрим браузерную поддержку и применим подход прогрессивного улучшения, так что вы сможете использовать их, не боясь того, что свойство не поддерживается в браузере X.

Вы готовы? Тогда вперед! :)

Использование place-items вместе с CSS Grid

Я узнал об этом трюке от Benjamin De Cock. Вы можете центрировать элемент по горизонтали и вертикали с помощью двух строк CSS.

<div class="hero">
  <div class="hero-wrapper">
    <h2>CSS is awesome</h2>
    <p>Yes, this is a hero section made for fun.</p>
    <a href="#">See more</a>
  </div>
</div>

.hero {
    display: grid;
    place-items: center;
}

Прежде чем углубляться в детали, стоит упомянуть, что place-items - это сокращенное свойство, которое объединяет justify-items и align-items. Вот как может выглядеть приведенный выше код:

.hero {
    display: grid;
    justify-items: center;
    align-items: center;
}

Вы можете спросить, как же это работает? Хорошо, позвольте мне объяснить. Когда мы используем свойство place-items, оно применяется к каждой ячейке в сетке. Это означает, что оно будет центрировать содержимое ячейки. Также это означает, что такая техника может работать с несколькими ячейками. Если мы увеличим количество столбцов, сможем в этом убедиться.

.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
}

Старый добрый margin: auto вместе с flexbox

Сочетая flexbox со свойством margin: auto; можно очень легко центрировать дочерний элемент по горизонтали и вертикали.

<div class="parent">
    <div class="child"></div>
</div>

.parent {
    width: 300px;
    height: 200px;
    background: #ccc;
    display: flex;
}

.child {
    width: 50px;
    height: 50px;
    background: #000;
    margin: auto;
}

Разве это не круто?

Стилизация маркеров у списка

Во-первых, позвольте мне прояснить, что я не знал, что маленький кружок по умолчанию рядом с каждым элементом списка называется маркером. Прежде чем я узнал о псевдоэлементе ::marker, процесс стилизации заключался в том, чтобы сбросить стили у списка, а затем добавить кружок в качестве псевдоэлемента ::before или ::after. Это не самый удачный способ стилизовать маркеры:

ul {
    list-style: none;
    padding: 0;
}

li {
    color: #222;
}

li::before {
    content: "•";
    color: #ccc;
    margin-right: 0.5em;
}

Как видите, для элементов li задан цвет #222, а для псевдоэлемента ::before - #ccc. Если для li и ::before задан одинаковый цвет, то цвет для маркера будет наследоваться по умолчанию, и, таким образом, псевдоэлемент вообще не нужен.

Давайте посмотрим на более классный способ изменить цвет маркера:

li {
    color: #222;
}

li::marker {
    color: #ccc;
}

У нас получилось! Так намного проще, правда?

::marker поддерживается в Firefox 68+ и Safari 11.1+. И поддерживается за флагом в Chrome и Edge 80+.

Свойство text-align

С растущей популярностью flexbox и grid, для тех, кто только начал работать с CSS, стало привычным использовать современные методы центрирования и выравнивания вместо свойства text-align. Однако старые методы все еще работают.

Использование text-align: center, в некоторых случаях, может решить проблему проще и быстрее. Рассмотрим следующий пример.

Текстовое содержимое должно быть отцентрировано. Стоит ли использовать flexbox или grid? С помощью свойства text-align это можно сделать одной строкой кода.

Думаю мне не нужно говорить про поддержку браузерами свойства text-align, вы и сами наверняка догадываетесь =)

Свойство display: inline-flex

Если вам нужно отобразить список значков в один ряд, и при этом каждый из них должен быть flex-элементом, то как нельзя кстати будет свойство inline-flex.

<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>
<span class="badge"><svg></svg></span>

.badge {
    display: inline-flex; /* тут происходит магия */
    justify-content: center;
    align-items: center;
}

Свойство column-rule

Обычно, это свойство используется для того, чтобы разделить текстовое содержание абзаца на несколько колонок. Гораздо реже при этом мы добавляем границы между столбцами. Я узнал об этом из статьи Manuel Matuzovic.

p {
    columns: 3;
    column-rule: solid 2px #222;
}

Название column-rule не слишком понятно дает представление о назначении свойства, но для себя мы можем представлять его как border-right. Свойство хорошо поддерживается во всех браузерах (IE 10+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Edge 12+).

Background-repeat: round

Недавно я узнал об этом из твита Addy Osmani. Существует значение, для background-repeat при котором предотвращается отсечение фона.

.element {
  background-size: contain;
  background-repeat: round;
}

Object-fit

CSS-свойство object-fit - это настоящая магия. Когда я узнал о нем, многие задачи стало существенно легче решать. Недавно я работал над разделом, в котором есть сетка логотипов. Подобные вещи сложно делать из-за слишком разных размеров логотипов. Зачастую, некоторые из них имеют горизонтальную форму, а некоторые - вертикальную.

При использовании object-fit: contain;, я могу задать им определенные значения width и height и заставить изображение придерживаться этих размеров.

<ul class="brands">
    <li class="brands__item">
        <a href="#">
            <img src="img/logo.png" alt="">
        </a>
    </li>
    <li> <!-- остальные логотипы --> </li>
</ul>

img {
    width: 130px;
    height: 75px;
    object-fit: contain;
}

Более того, мы можем обернуть этот код в @supports, чтобы избежать растягивания изображения логотипа в браузерах, которые не поддерживают свойство object-fit.

@supports (object-fit: contain) {
  img {
    object-fit: contain;
    height: 75px;
  }
}