4 неизвестных свойства макета CSS

4 неизвестных свойства макета CSS

От автора: CSS продолжает развиваться, как и его кузен Javascript. Я подумал, что поделюсь с разработчиками некоторыми свойствами макета CSS, которые пока относительно неизвестны. Первые 3 — это вариации почти одного и того же, а четвертое — самое непонятное и неподдерживаемое из всех.

PLACE-ITEMS

Оно поражает многих разработчиков. Свойство place-items — это сокращение для свойств CSS align-items и justify-items. Если вам нужен полностью центрированный макет (по осям X и Y), вы можете просто использовать place-items: center.

PLACE-CONTENT

Подобно сокращенному свойству place-items свойство place-content является сокращением для свойств align-content и justify-content.

PLACE-SELF

Еще одно сокращенное свойство, place-self, является сокращением для свойств align-self и justify-self.

ASPECT-RATIO

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

В следующем примере мы создаем элемент, ширина которого указана в 250 пикселей, но использование свойства aspect-ratio даст нам идеально квадратный прямоугольник размером 250 пикселей по высоте и ширине.

Теперь предположим, что у вас есть видео, и вы хотите сохранить соотношение сторон 16/9, не прибегая к помощи Javascript или CSS. Вы можете просто сделать это.

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

Автор: Dwayne Charrington

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

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

Метки:

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

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

Комментарии запрещены.