מאפיינים לוגיים לקיצורים שימושיים

מישל בארקר עם הפוסט האהוב עליי בבלוג: קצר, פרקטי ומשאיר אותך עם גוש ערך לזמנך. כאן, היא נכנסת לקיצורי מאפיינים לוגיים ב-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 נפוצות שאני עושה.

קישור ישיר →