CSS מותאם לכיוון הדף

בהרבה אתרים היום אנחנו צריכים להתאים את כיוון העיצוב לכיוון הדף.

אם הכתיבה משמאל לימין או להפיך, ה-CSS צריך להתאים.

פעם היינו מיצרים 2 קבצי CSS, כאשר אחד מותאם לצד אחד והשני לצד השני,

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

אלא על יחס כלפי הכיוון.

במילים אחרות, זה לא משנה לאיזה כיוון הדף, אנחנו מגדירים נתון בהתייחסות לתחילת התגית או לסוף התגית ללא כתיבה של left/right.

נראה דוגמה:

 <div>
        <div class="wrapper-1" dir="ltr">
            <div class="wrapper-2">
                <div class="wrapper-3">ltr </div>
            </div>
        </div>
        <div class="wrapper-1" dir="rtl">
            <div class="wrapper-2">
                <div class="wrapper-3">rtl </div>
            </div>
        </div>
    </div>

  .wrapper-1 {
            background-color: lightblue;
            padding-inline-start: 5px;
            padding-inline-end: 10px;
            padding-block-start: 15px;
            padding-block-end: 20px;
            margin-block-start: 10px;
            margin-block-end: 15px;
            margin-inline-start: 20px;
            margin-inline-end: 5px;
            display: inline-block;
        }

        .wrapper-2 {
            margin-block: 10px;
            margin-inline: 15px;
            border-inline-start: 1px solid red;
            border-inline-end: 5px solid blue;
            border-block-start: 3px solid purple;
            border-block-end: 10px solid pink;
            padding: 20px;
        }

        .wrapper-3 {
            padding: 25px;
            border: 5px solid brown;
            border-start-start-radius: 5px;
            border-start-end-radius: 10px;
            border-end-start-radius: 15px;
            border-end-end-radius: 0;
            font-size: 18px;
        }

התוצאה:

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

אז מה הרעיון?

BLOCK – התייחסות למעטפת של אותה תגית, יותר נכון להגיד להתחלה ולסיום של התגית.

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

INLINE – מתייחס בתוך ה-BLOCK, להתחלה שלו ולסיום שלו, בהשוואה למחברת שורות,

אנחנו כבר נמצאים בין השורות הכחולות של המחברת והשאלה היא מאיפה אנחנו מתחילים לכתוב את האותיות ואיפה מסיימים.

כפי שאפשר לראות, אפשר לעשות את זה ב-padding, margin, border.

כאשר אנחנו משתמשים בעיצוב שהוא ספציפי לנקודות, אז צריך לכל נקודה X ו-Y וזה מתורגם כך:

אם ניקח את border-radius לדוגמה ונפרק את ה-prop , נראה שהמבנה שלו כך –

border – סוג ה-prop

מיד אחריו קובע אם מסתכלים על החלק העליון (start) או תחתון (end)

הערך אחריו קובע אם זה יהיה איפה שהמשפט/התגית מתחילה (start) או מסתיימת (end)

raduius – תת סוג ה-prop.

אם נשווה את זה לשורה 28 –

גבול – עליון – בסוף – רדיוס

אם תמנעו לגמרי משימוש ב-left/right תוכלו להפוך את כיוון הדף (עברית/אנגלית) בי שום בעיה.

רק צריך לזכור, מדובר ביכולות מתקדמות יחסית ודפדפנים ישנים לא תומכים בהם.

פוסטים קשורים:

מדריך CSS + HTML – הבסיס – חלק 3 שימוש ב-currentColor CSS מדריך css | מה כבר אפשר לעשות עם box-shadow רכיבים: בניה של רכיב MULTI-SELECT נגיש באנגולר