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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

И мы сделали это! Не намного ли это проще? ::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, вы должны догадаться сами (извините!).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

Свойство column-rule

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

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

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

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

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

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

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

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

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

object-fit

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

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

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

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

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

Автор: Ahmad Shadeed

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: