Michelle Barker, en sevdiğim sorta blog gönderisiyle: kısa, pratik ve size zaman ayırmanız için değerli bir külçe bırakıyor. Burada, CSS'de mantıksal özellik kısayollarına giriyor, özellikle uzunlukları yalnızca tek bir eksende ayarlayanlar, örneğin yalnızca blok (dikey) eksen veya yalnızca satır içi (yatay) eksen.
"Blok" ve "satır içi" diyorum çünkü mantıksal özellikler söz konusu olduğunda, x ekseni akıma bağlı olarak dikey bir eksen gibi davranabilir. writing-mode
.
Yani, her zaman sahip olduğumuz yer padding
, margin
, ve border
Çok değerli bir sözdizimini destekleyebilen stenografiler, hiçbiri diğer eksende bir uzunluk ayarlamadan belirli bir eksende uzunlukları bildirmemize izin vermez.
Örneğin:
/* This gives us margin on the inline axis */
margin: 0 3rem;
…ama oraya ulaşmak için diğer ekseni ayarlamamız gerekiyordu. Ancak mantıksal özelliklerle, her eksen için ek kestirme yollarımız var, yani margin-inline
özellikle satır içi eksende çalışmak için kısayol:
margin-inline: 3rem;
Michelle geçerken en sevdiğim mantıksal özellikten söz ediyor. Bir şeyi kaç kez bu tür bir melodiye yerleştirirsiniz:
.position-me {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Bu dört satırı içeri alabiliriz inset: 0
. Veya doğrudan blok ve satır içi ekseni hedefleyebiliriz. inset-block
ve inset-inline
, Sırasıyla.
Biz stenografi konuşurken, her zaman bir uyarıda bulunmayı severim. "yanlışlıkla" CSS sıfırlamaları. sadece biri yaptığım yaygın CSS hataları.