От автора: CSS продолжает развиваться, как и его кузен Javascript. Я подумал, что поделюсь с разработчиками некоторыми свойствами макета CSS, которые пока относительно неизвестны. Первые 3 — это вариации почти одного и того же, а четвертое — самое непонятное и неподдерживаемое из всех.
PLACE-ITEMS
Оно поражает многих разработчиков. Свойство place-items — это сокращение для свойств CSS align-items и justify-items. Если вам нужен полностью центрированный макет (по осям X и Y), вы можете просто использовать place-items: center.
.layout { display: flex; place-items: center;
}PLACE-CONTENT
Подобно сокращенному свойству place-items свойство place-content является сокращением для свойств align-content и justify-content.
.layout { display: flex; place-content: center;
}PLACE-SELF
Еще одно сокращенное свойство, place-self, является сокращением для свойств align-self и justify-self.
.layout { display: flex;
} .layout .item { place-self: center start;
}ASPECT-RATIO
Одно из самых интересных свойств CSS, которое не является сокращенным свойством — это aspect-ratio, которое позволяет контролировать рассчитанный размер элемента. Очевидными примерами использования здесь являются видео и изображения, но на самом деле вы можете использовать это свойство для чего угодно.
В следующем примере мы создаем элемент, ширина которого указана в 250 пикселей, но использование свойства aspect-ratio даст нам идеально квадратный прямоугольник размером 250 пикселей по высоте и ширине.
.square { width: 250px; height: auto; aspect-ratio: 1/1;
}Теперь предположим, что у вас есть видео, и вы хотите сохранить соотношение сторон 16/9, не прибегая к помощи Javascript или CSS. Вы можете просто сделать это.
video { width: 100%; height: auto; aspect-ratio: 16/9;
}Сейчас, на момент написания данной статьи, поддержка этого свойства была интересной. Многие браузеры поддерживают его в той или иной степени, но только для использования внутреннего сопоставления. Из всех перечисленных свойств это самое новое и экспериментальное. Таким образом, это крутое свойство пока не может использоваться напрямую. Стоит помнить, что у нас все еще есть object-fit, которое хорошо поддерживается.
Автор: Dwayne Charrington
Источник: https://ilikekillnerds.com
Редакция: Команда webformyself.