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

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

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

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

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

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

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

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

1234567<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>

CSS

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

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

CSS

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

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

READ
Как легко создавать текстовые градиенты с помощью CSS

CSS

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

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

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

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

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

123<div class=”parent”>    <div class=”child”></div></div>

CSS

12345678910111213.parent {    width: 300px;    height: 200px;    background: #ccc;    display: flex;} .child {    width: 50px;    height: 50px;    background: #000;    margin: auto;}

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

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

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

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

CSS

1234567891011121314ul {    list-style: none;    padding: 0;} li {    color: #222;} li::before {    content: “•”;    color: #ccc;    margin-right: 0.5em;}

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

CSS

1234567li {    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 может решить проблему быстро. Рассмотрим следующий пример.

READ
Отрицательные поля в CSS

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

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

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

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

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

1234<span class=”badge”><svg></svg></span><span class=”badge”><svg></svg></span><span class=”badge”><svg></svg></span><span class=”badge”><svg></svg></span>

CSS

12345.badge {    display: inline-flex; /* where the magic happens */    justify-content: center;    align-items: center;}

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

Свойство column-rule

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

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

CSS

1234p {    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, которое предотвращается отсечение фона.

CSS

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

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

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

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

READ
Для Google не существует дружественных к SEO разновидностей шрифтов

object-fit

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

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

При использовании object-fit: contain, я был в состоянии контролировать width и height логотипов и вписать изображения в определенную ширину и высоту.

12345678<ul class=”brands”>    <li class=”brands__item”>        <a href=”#”>            <img src=”img/logo.png” alt=””>        </a>    </li>    <li> <!– other logos –> </li></ul>

CSS

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

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

CSS

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

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

Автор: Ahmad Shadeed

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

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий