מאפיינים לוגיים ב CSS – או במילים אחרות: Logical Properties

שימוש במאפיינים לוגיים נותן למפתחים אפשרות ליצור אתרים דינמיים ורספונסיביים ולאפשר שליטה במבנה האתר תוך שימוש בכיונים לוגיים, בניגוד לכיוונים פיזיים. למען האמת, זה נשמע הרבה יותר מסובך ממה שזה באמת. הדבר היחיד שצריך לזכור כשניגשים לשימוש במאפיינים לוגיים הוא אותו דבר שאנדר גילה בבית הספר ללחימה בבאגים: באפס כבידה אין למעלה ולמטה – רק קדימה (וסליחה על הרפרנס הגיקי). אותו דבר בשימוש במאפיינים לוגיים. אין ימין, שמאל, למעלה ולמטה. יש inline ו block, ויש התחלה וסוף.

כל מי שעובד עם CSS מכיר את השימוש שאנחנו עושים בכיוונים השונים, כמו למעלה, למטה, ימין ושמאל. קחו לדוגמה את הדוגמה הבאה ליישור קונטיינר בחלל העמוד שלנו.

<body>
  <header>
    some content
  </header>
  <main>
    main content including:
    <div>
    </div>
  </main>
</body>

body {
  width: min(1250px, 95vw);
  min-height: 100dvh;
  margin: 15px auto;
}

header {
  margin-top: 25px;
  margin-left: 15px;
}

main {
  margin-top: 15px;
  padding-left: 10px;
}

div {
  margin: auto;
}

עכשיו כשאני מסתכל על זה, אני רואה שיכולתי לחשוב על דוגמאות הרבה יותר פשוטות, אבל היי, אנחנו כבר כאן, אז בואו נהנה מזה כמה שרק אפשר, לא?

בקיצור, מה שאנחנו רואים כאן, אם נתעלם מזה שהשימוש בפיקסלים במקום בערכים רלטיבים הוא לא פרקטיקה מומלצת, הוא עמוד קלאסי שמחולק לראש העמוד ולתוכן הראשי של העמוד. ה CSS של העמוד מפריד בין החלקים השונים באמצעות התכונה margin-top, והמיקום שלהם ביחס לצד שמאל של העמוד מוגדר על ידי התכונות margin-left ו- padding-left. אבל מה אם אנחנו רוצים לבנות את העמוד שלנו בצורה מודולרית, שתתאים לתכנים בשפות שונות, או אפילו בכיוונים שונים?

דמיינו שאתם בונים עכשיו אתר מולטי-לשוני, שאמור לתמוך בעברית, צרפתית ויפנית מסורתית. במקרה הזה, העיצוב של העמוד ייראה טוב בצרפתית, שנכתבת משמאל לימין, אבל בעברית, היישור לשמאל ייראה מוזר, וגם ביפנית ליישור הזה לא תהיה משמעות הגיונית. במקום לכתוב עמוד CSS נפרד לכל אחת מהשפות (בהנחה שהיפנית שלכם נכתבת בצורה העתיקה והמסורתית מלמעלה למטה, ולא המודרנית שנכתבת משמאל לימין), אתם יכולים לבנות את העמוד פעם אחת באמצעות מאפיינים לוגיים, שלוקחים בחשבון את הכיוון היחסי של העמוד במקום את המיקום האבסולוטי.

בשלב הזה נכנסים לבמה שני חברים וותיקים שלנו, שיקבלו מקום של כבוד בגישת החשיבה החדשה הזאת שאנחנו מנסים להטמיע לעצמנו בראש: inline ו- block. כמו שאנחנו כבר מכירים את הבלוק ואת האינליין משימושים קודמים שעשינו בהם בעבר (display: block לדוגמה), בלוק מייצג לנו שורה שלמה של העמוד, בעוד אינליין נכנס בתוכה. אם נכנסים לתוך הלוגיקה הזאת, אפשר לומר שתחילתו של הבלוק היא יחסית לתחילת העמוד, בעוד שתחילתו של האינליין יחסית לתחילת השורה. בכוונה אני לא נכנס כאן להגדרות של ״למעלה״ או ״שמאלה״, ומיד נבין גם למה.

אז אם אנחנו לוקחים את החשיבה הלוגית החדשה שלנו אנחנו יכולים כבר להחליף חלק מהתכונות בקובץ ה CSS שלנו, ולקבל את הדבר הבא:

body {
  width: min(1250px, 95vw);
  min-height: 100dvh;
  margin: 15px auto;
}

header {
  margin-block-start: 25px;
  margin-inline-start: 15px;
}

main {
  margin-block-start: 15px;
  padding-inline-start: 10px;
}

div {
  margin: auto;
}

שימו לב שבמקום margin-top כתבנו margin-block-start, בעוד שבמקום margin-left או padding-left, ההתייחסות היא ל inline-start. כלומר – במקום למעלה: התחלת הבלוק; במקום שמאל: התחלה האינליין.

אבל איפה כל זה עוזר לנו? אתם עשויים לשאול. אוה, מזל ששאלתם, אחרת היינו נשארים כאן בלי תשובה וסתם נותנים לנושא לנקר לנו באחורי הראש. קחו לכם חמש נקודות על השתתפות, ותחשבו על התרחיש הבא. נגיד שסיימתם לבנות את העיצוב של עמוד שאמור להיות מיושר לשמאל, ועכשיו אתם מעלים עמוד נוסף, שאמור לשמור על אותו עיצוב, אבל להיות מיושר לימין כי הוא בעברית. במידה והשתמשתם במאפיינים לוגיים כל מה שתצטרכו לעשות, הוא לאותת לעמוד שלכם שהוא מיושר לימין, וכל ההתייחסות של המאפיינים הלוגיים שלכם תהיה בהתאם. כלומר, ההתחלה של האינליין תהיה בצד ימין במקום בשמאל, ולהיפך. כדי לעשות את זה, כל שעליכם לעשות, הוא להוסיף לתגית ה HTML שלכם את שם השפה והכיוון שלה כך:

<html lng="he" dir="trl">

וזהו, העמוד שלכם מותאם ליישור לימין, בלי שום עבודה נוספת.