Мішель Баркер з моїм улюбленим дописом у блозі: короткий, практичний і залишає вам цінний самородок для вашого часу. тут, вона потрапляє в скорочення логічних властивостей у CSS, особливо ті, які встановлюють довжину лише на одній осі, скажімо, лише на блоковій (вертикальній) осі чи лише на вбудованій (горизонтальній) осі.
Я кажу «блок» і «вбудований», тому що, що стосується логічних властивостей, вісь х може так само поводитися як вертикальна вісь залежно від поточного 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, які я роблю.
