Michelle Barker z moim ulubionym wpisem na blogu: krótkim, praktycznym i zostawiającym Ci cenny samorodek na Twój czas. Tutaj, zagłębia się w skróty własności logicznych w CSS, szczególnie te, które ustawiają długości tylko na jednej osi, powiedzmy tylko oś bloku (pionowa) lub tylko oś w linii (pozioma).
Mówię „block” i „inline”, ponieważ jeśli chodzi o właściwości logiczne, oś x mogłaby równie dobrze zachowywać się jak oś pionowa w zależności od prądu writing-mode.
Więc tam, gdzie zawsze mieliśmy padding, margin, border skróty, które mogą obsługiwać składnię wielowartościową, żaden z nich nie pozwala nam deklarować długości na określonej osi bez ustawiania długości na drugiej osi.
Na przykład:
/* This gives us margin on the inline axis */
margin: 0 3rem;…ale musieliśmy ustawić drugą oś, żeby się tam dostać. W przypadku właściwości logicznych mamy jednak dodatkowe skróty dla każdej osi, co oznacza, że możemy wskazać margin-inline skrót do pracy konkretnie na osi inline:
margin-inline: 3rem;Michelle wspomina mimochodem mój ulubiony skrót dotyczący własności logicznych. Ile razy pozycjonujesz coś do tego rodzaju melodii:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}Możemy wprowadzić te cztery linijki za pomocą inset: 0. Lub możemy celować bezpośrednio w blok i oś liniową za pomocą inset-block i inset-inline, Odpowiednio.
Kiedy mówimy o skrótach, zawsze lubię coś przestrzec „przypadkowe” resety CSS. Tylko jeden z typowe błędy CSS, które popełniam.
