Мишель Баркер с моей любимой записью в блоге: короткой, практичной и оставляет вам ценный самородок за ваше время. Здесь, она использует логические обозначения свойств в CSS, особенно те, которые задают длину только на одной оси, скажем, только на блочной (вертикальной) оси или только на встроенной (горизонтальной) оси.
Я говорю «блочный» и «встроенный», потому что с точки зрения логических свойств ось X может точно так же вести себя как вертикальная ось в зависимости от текущего значения. writing-mode.
Итак, где мы всегда были padding, marginи border сокращений, которые могут поддерживать синтаксис с несколькими значениями, ни одно из них не позволяет нам объявлять длины на определенной оси без установки длины на другой оси.
Например:
/* This gives us margin on the inline axis */
margin: 0 3rem;…но нам пришлось установить другую ось, чтобы добраться туда. Однако с логическими свойствами у нас есть дополнительные сокращения для каждой оси, что означает, что мы можем указать margin-inline сокращение для работы конкретно на встроенной оси:
margin-inline: 3rem;Мишель мимоходом упоминает мою любимую стенографию логических свойств. Сколько раз вы позиционируете что-то на такую мелодию:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Мы можем получить эти четыре строки с помощью inset: 0. Или мы могли бы нацелиться на блок и встроенную ось напрямую с помощью inset-block и inset-inline, Соответственно.
Пока мы говорим о сокращении, я всегда хотел бы предостеречь «случайный» сброс CSS. Просто один из распространенные ошибки CSS, которые я допускаю.
