От автора: есть много свойств CSS, о которых некоторые не знают, или знают, но забывают использовать, когда они необходимы. Некоторые из них могут помочь не использовать JavaScript для достижения определенного результата, а некоторые могут сэкономить ваше время, помогая писать меньше CSS. Как фронтенд-разработчик, я время от времени сталкивался с такими вещами и спрашивал себя, почему бы не перечислить все эти мало используемые и интересные свойства CSS в одной статье?
В этом посте я рассмотрю некоторые свойства CSS, которые, я надеюсь, вам покажутся интересными. Для некоторых я постараюсь показать их поддержку браузерами и применить подход прогрессивного улучшения, так что вы можете их использовать, не боясь, что попадете в ситуацию: «Это не поддерживается в браузере X, что мне делать?»
Использование place-items с CSS Grid
Я узнал об этом трюке от Бенджамина де Кока. Вы можете центрировать элемент по горизонтали и вертикали с помощью двух строк CSS.
CSS is awesome
Yes, this is a hero section made for fun.
See more
| 1234567 |
CSS is awesome
Yes, this is a hero section made for fun. See more |
CSS .hero { display: grid; place-items: center;
}
| 1234 | .hero { display: grid; place-items: center;} |
Прежде чем углубляться в детали, стоит упомянуть, что place-items — это сокращенное свойство, которое объединяет justify-items и align-items. Вот каков может быть приведенный выше код:
CSS .hero { display: grid; justify-items: center; align-items: center;
}
| 12345 | .hero { display: grid; justify-items: center; align-items: center;} |
Вы можете спросить, как это работает? Хорошо, позвольте мне объяснить это. Когда используется place-items, оно применяется к каждой ячейке в сетке. Это означает, что оно будет центрировать содержимое ячейки и эта техника может работать с несколькими ячейками. Если мы увеличим количество колонок, это будет более понятно.
Как легко создавать текстовые градиенты с помощью CSS
CSS .hero { display: grid; grid-template-columns: 1fr 1fr; place-items: center;
}
| 12345 | .hero { display: grid; grid-template-columns: 1fr 1fr; place-items: center;} |
Старый добрый margin: auto с Flexbox
В сочетании с Flexbox margin: auto может очень легко центрировать flex-элемент по горизонтали и вертикали.
| 123 |
CSS .parent { width: 300px; height: 200px; background: #ccc; display: flex;
}
.child { width: 50px; height: 50px; background: #000; margin: auto;
}
| 12345678910111213 | .parent { width: 300px; height: 200px; background: #ccc; display: flex;} .child { width: 50px; height: 50px; background: #000; margin: auto;} |
Разве это не круто?
Стилизация маркера списка
Во-первых, позвольте мне прояснить, что я не знал, что маленький кружок по умолчанию рядом с каждым элементом списка называется маркером. Прежде чем я узнал о псевдо-элементе ::marker, процесс состоял в том, чтобы сбросить стиль списка, а затем добавить кружок в качестве псевдо-элемента ::before или ::after. Это не практично. Вот плохой способ сделать это:
CSS ul { list-style: none; padding: 0;
}
li { color: #222;
}
li::before { content: “•”; color: #ccc; margin-right: 0.5em;
}
| 1234567891011121314 | ul { list-style: none; padding: 0;} li { color: #222;} li::before { content: “•”; color: #ccc; margin-right: 0.5em;} |
Как видите, цвет li — #222, а цвет псевдо-элемента ::before — #ccc. Если li и ::before имеют одинаковый цвет, то круг будет наследоваться по умолчанию, и, таким образом, псевдо-элемент вообще не нужен. Давайте рассмотрим лучший способ сделать это.
CSS li { color: #222;
}
li::marker { color: #ccc;
}
| 1234567 | 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 может решить проблему быстро. Рассмотрим следующий пример.
Содержимое должно быть в центре. Стоит ли использовать flexbox или сетку? Этого можно легко достичь с помощью text-align. Мне не нужно объяснять о поддержке браузерами text-align, вы должны догадаться сами (извините!).
Свойство display: inline-flex
Помните ли вы что делать, если вам нужно отобразить список значков в строке, и каждый из них должен быть элементом flexbox? Вот для чего предназначен inline-flex.
| 1234 |
CSS .badge { display: inline-flex; /* where the magic happens */ justify-content: center; align-items: center;
}
| 12345 | .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;
}
| 1234 | 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, которое предотвращается отсечение фона.
CSS .element { background-size: contain; background-repeat: round;
}
| 1234 | .element { background-size: contain; background-repeat: round;} |
Согласно CSS Tricks, вот как работает round:
повторяет изображение в обоих направлениях. Никогда не обрезает изображение, если только изображение не слишком велико, чтобы уместить в контейнер. Если несколько изображений могут уместиться в оставшееся пространство, сжимает или растяните их, чтобы заполнить пространство. Если осталось менее половины ширины изображения, растягивает его, если больше, сжимает.
Это магия. Не так ли?
Для Google не существует дружественных к SEO разновидностей шрифтов
object-fit
Свойство CSS object-fit — это магия. Когда я впервые узнал о нем, это многое изменило и облегчило мою жизнь в качестве фронтенд-разработчика. Недавно я работал над разделом, который отображает сетку логотипов. Подобные вещи иногда сложны из-за несовместимых размеров логотипов. Некоторые из них имеют горизонтальную форму, некоторые — вертикальную.
При использовании object-fit: contain, я был в состоянии контролировать width и height логотипов и вписать изображения в определенную ширину и высоту.
| 12345678 |
|
CSS img { width: 130px; height: 75px; object-fit: contain;
}
| 12345 | img { width: 130px; height: 75px; object-fit: contain;} |
Определив width и height, мы заставим изображение вписываться в них. Это огромная выгода. Более того, мы можем обернуть вышеупомянутое в @supports, чтобы избежать растягивания изображения логотипа в браузерах, которые не поддерживают object-fit.
CSS @supports (object-fit: contain) { img { object-fit: contain; height: 75px; }
}
| 123456 | @supports (object-fit: contain) { img { object-fit: contain; height: 75px; }} |
Это все. Спасибо за чтение.
Автор: Ahmad Shadeed
Редакция: Команда webformyself.
Источник
