Взглянем на некоторые менее известные свойства CSS

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

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

Итак, вы готовы к небольшому путешествию в удивительный и почти безграничный мир CSS? Давайте начнем!

сетка + месторасположение

Этот метод позволяет выровнять элементы по горизонтали и вертикали с помощью всего двух строк кода.

place-items - это сокращенное свойство для justify-items и align-items.

Это свойство можно применить сразу к одной или нескольким (дочерним) ячейкам.

гибкий + маржа

Еще один современный способ выровнять элементы по горизонтали и вертикали - использовать комбинацию display: flex и margin: auto.

Было бы справедливо сказать, что то же самое можно сделать с помощью следующего фрагмента:

гибкий + разрыв

Поскольку мы говорим о Flexbox, стоит упомянуть, что мы наконец-то получили возможность устанавливать промежутки между гибкими элементами с помощью свойства gap (нам это действительно было нужно):

встроенный гибкий

Это свойство позволяет создавать встроенные элементы с Flexbox функциями. Пример стоит много слов:

столбцы

Этот метод позволяет разбивать текст на столбцы. Свойство column-count указывает количество столбцов, column-gap задает размер промежутка между столбцами, а column-rule задает стиль вертикальной линии между столбцами.

columns - это сокращенное свойство для column-count и column-width.

фон-повтор

Свойство background-repeat устанавливает порядок, в котором фон заполняется указанным изображением. Круглое значение равномерно распределяет изображения по всей ширине контейнера, в то время как значение пробела добавляет небольшое количество отступов между изображениями:

фоновый режим наложения

Свойство background-blend-mode устанавливает порядок, в котором фоновое изображение и цвет (или несколько фоновых изображений / цветов) должны смешиваться друг с другом.

Возможные значения:

  • color
  • color-burn
  • color-dodge
  • darken
  • difference
  • exclusion
  • hard-light
  • hue
  • lighten
  • luminosity
  • multiply
  • overlay
  • saturation
  • screen
  • soft-light

Вы когда-нибудь работали с фотошопом? Тогда, я думаю, вы понимаете, о чем идет речь.

Предположим, у нас есть черно-белое изображение, которое мы хотим использовать в качестве фона. Но в то же время мы хотим, чтобы он был цветным. Как этого добиться?

фоновый клип

Свойство background-clip определяет, насколько далеко цвет фона или фоновое изображение должны выходить за пределы отступа элемента. На мой взгляд, text - самое интересное значение этого свойства:

фильтр

Свойство filter позволяет применять к элементам некоторые визуальные эффекты.

Возможные значения функции:

  • url()
  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()

Изменение цветовых тем (или схем) сайта для ленивых:

В CSSgram вы найдете пример использования filter для фильтров Instagram.

тень

Свойство filter, для которого установлено значение drop-shadow(), в отличие от свойства box-shadow, которое аналогично применяемому эффекту, позволяет добавлять тень к самому изображению (в формате PNG), а не к блоку, в который оно помещено.

подходящий объект

Свойство object-fit управляет соотношением сторон заменяемых элементов, таких как img и video, если они имеют ширину или высоту, а также процессом масштабирования.

Например, значение scale-down позволяет сохранить соотношение сторон изображения независимо от размера блока:

Свойство object-position используется для выравнивания содержимого любого выбранного заменяемого элемента внутри блока.

курсор

Знаете ли вы, что помимо значков курсора, предоставляемых браузером (например, cursor: pointer), мы также можем определять наши собственные изображения и SVG?

поведение прокрутки

Свойство scroll-behavior, установленное на smooth, упрощает реализацию плавной прокрутки между разделами страницы:

переполнение текста

Свойство text-overflow, установленное на ellipsis, позволяет добавлять … в конец текста, когда он выходит за пределы контейнера.

цвет каретки

Свойство caret-color устанавливает цвет каретки, видимый маркер (|) указывает, куда будет вставлен следующий набранный символ.

@supports

Правило @supports позволяет вам проверить, поддерживает ли браузер определенное свойство или свойства (или комбинацию свойство / значение), прежде чем использовать их.

var ()

Функция var() позволяет использовать значения пользовательских переменных в качестве значений свойств. Второй необязательный параметр этой функции - значение резерва.

calc ()

Функция calc() используется для указания вычисленного значения свойств, которые используют размер, угол, время или число в качестве значений. Это позволяет устанавливать значения на основе сложения или вычитания различных единиц.

Обычно абсолютно позиционированный элемент выравнивается по горизонтали и вертикали следующим образом:

Если мы знаем размеры такого элемента, мы можем сделать следующее:

attr ()

С помощью функции attr() вы можете получить значение атрибута выбранного элемента и использовать его в стилях.

Создание всплывающих подсказок с помощью CSS:

:цель

Псевдокласс :target позволяет создавать модальные окна, которые работают без JavaScript:

:: маркер

Раньше мы удаляли маркеры списка с помощью list-style: none и добавляли свои собственные с помощью псевдоэлементов ::before или ::after. Теперь есть более простой способ сделать это - мы можем использовать псевдоэлемент ::marker.

:: выбор

Псевдоэлемент ::selection позволяет стилизовать выделенный текст.

Спасибо за уделенное время и хорошего дня!