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

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

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

В этом посте я рассмотрю некоторые свойства CSS, которые, я надеюсь, вам покажутся интересными. Для некоторых я постараюсь показать их поддержку браузерами и применить подход прогрессивного улучшения, так что вы можете их использовать, не боясь, что попадете в ситуацию: «Это не поддерживается в браузере X, что мне делать?»

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

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

Я узнал об этом трюке от Бенджамина де Кока. Вы можете центрировать элемент по горизонтали и вертикали с помощью двух строк 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;
}

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

Старый добрый margin: auto с Flexbox

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

В сочетании с Flexbox margin: auto может очень легко центрировать flex-элемент по горизонтали и вертикали.

<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;
}

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

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

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

Во-первых, позвольте мне прояснить, что я не знал, что маленький кружок по умолчанию рядом с каждым элементом списка называется маркером. Прежде чем я узнал о псевдо-элементе ::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

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

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

Содержимое должно быть в центре. Стоит ли использовать flexbox или сетку? Этого можно легко достичь с помощью text-align. Мне не нужно объяснять о поддержке браузерами text-align, вы должны догадаться сами (извините!).

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

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

Помните ли вы что делать, если вам нужно отобразить список значков в строке, и каждый из них должен быть элементом flexbox? Вот для чего предназначен 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; /* where the magic happens */ justify-content: center; align-items: center;
}

В следующий раз, когда вам понадобится встроенный элемент с функционалом flex, не забывайте использовать inline-flex. Просто и легко.

Свойство column-rule

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

CSS-столбцы — это метод макета, с помощью которого можно разделить элемент на столбцы. Обычный вариант использования этого — разделить текстовое содержимое абзаца на два столбца. Тем не менее, менее распространенным применением является то, что мы можем добавить границы между столбцами.

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

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

Повторение фона

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

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

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

Согласно CSS Tricks, вот как работает round:

повторяет изображение в обоих направлениях. Никогда не обрезает изображение, если только изображение не слишком велико, чтобы уместить в контейнер. Если несколько изображений могут уместиться в оставшееся пространство, сжимает или растяните их, чтобы заполнить пространство. Если осталось менее половины ширины изображения, растягивает его, если больше, сжимает.

Это магия. Не так ли?

object-fit

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

Свойство 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> <!-- other logos --> </li>
</ul>

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

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

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

Это все. Спасибо за чтение.

Автор: Ahmad Shadeed

Источник: https://ishadeed.com

Редакция: Команда webformyself.