כל מה שאתה צריך לדעת על הפער אחרי סמן הרשימה

קראתי "עיצוב רשימה יצירתית" בבלוג web.dev של גוגל ושם לב למשהו מוזר באחת מדוגמאות הקוד ב- ::marker קטע של המאמר. סמני הרשימה המובנים הם תבליטים, מספרים סידוריים ואותיות. ה ::marker פסאודו-אלמנט מאפשר לנו לסגנן את הסמנים האלה או להחליף אותם בדמות או תמונה מותאמים אישית.

::marker { content: url('/marker.svg') ' ';
}

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

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

ראשית, ניסיתי להחליף את תו הרווח בשוליים מתאימים:

::marker { content: url('/marker.svg'); margin-right: 1ch;
}

זה לא עבד. כפי שמתברר, ::marker תומך רק בא קבוצה קטנה של מאפייני CSS הקשורים בעיקר לטקסט. לדוגמה, אתה יכול לשנות את font-size ו color של הסמן, ולהגדיר סמן מותאם אישית לפי הגדרה content למחרוזת או לכתובת אתר, כפי שמוצג לעיל. אבל ה margin ו padding נכסים הם אינו נתמך, כך שלהגדרתם אין השפעה. איזו אכזבה.

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

הוספת ריפוד ושוליים

ראשית, בואו נאשר מה margin ו padding לעשות על <ul> ו <li> אלמנטים. יצרתי דף בדיקה למטרה זו. גרור את המחוונים הרלוונטיים וצפה בהשפעה על המרווח בכל צד של סמן הרשימה. טיפ: השתמש בלחצן איפוס בנדיבות כדי לאפס את כל הפקדים לערכים ההתחלתיים שלהם.

הערה: דפדפנים מחילים ברירת מחדל padding-inline-left of 40px ל <ol> ו <ul> אלמנטים. ההגיוני padding-inline-left תכונה שווה לפיזי padding-left קניין במערכות כתיבה עם כיוון משמאל לימין. במאמר זה, אני הולך להשתמש במאפיינים פיזיקליים למען הפשטות.

כפי שניתן לראות, padding-left on <li> מגדיל את הפער אחרי סמן הרשימה. שלושת המאפיינים האחרים שולטים במרווח משמאל לסמן, במילים אחרות, ההזחה של פריט הרשימה.

שימו לב שגם כאשר פריט הרשימה padding-left is 0px, עדיין יש פער מינימלי אחרי הסמן. אי אפשר לצמצם את הפער הזה margin or padding. האורך המדויק של הפער המינימלי תלוי בדפדפן.

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

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

הזזת הסמן בתוך פריט הרשימה

השמיים list-style-position נכס מקבל שתי מילות מפתח: outside, שהיא ברירת המחדל, ו inside, שמזיז את הסמן בתוך פריט הרשימה. האחרון שימושי ליצירת עיצובים עם פריטי רשימה ברוחב מלא.

אם הסמן הוא עכשיו בתוך פריט הרשימה, האם זה אומר את זה padding-left on <li> כבר לא מגדיל את הפער אחרי הסמן? בוא נגלה. בדף הבדיקה שלי, הפעל list-style-position: inside דרך תיבת הסימון. מה שלום הארבעה padding ו margin נכסים שהושפעו מהשינוי הזה?

כפי שניתן לראות, padding-left on <li> כעת מגדיל את המרווח ל- עזבו של הסמן. זה אומר שאיבדנו את היכולת להגדיל את הפער אחרי הסמן. במצב זה, יהיה שימושי להיות מסוגל להוסיף margin-right אל ה ::marker עצמו, אבל זה לא עובד, כפי שקבענו לעיל.

בנוסף, יש א באג ב-Chromium שגורם לפער אחרי הסמן משולש לאחר המעבר ל inside מיקום. כברירת מחדל, אורך הפער הוא כשליש מגודל הטקסט. אז כברירת מחדל font-size of 16px, הפער הוא בערך 5.5px. לאחר המעבר ל inside, הפער גדל עד הסוף 16px בכרום. באג זה משפיע על disc, circle, ו square סמנים, אבל לא סמני מספר סידורי.

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

לסיכום, עוברים ל list-style-position: inside מציג שתי בעיות. אנחנו לא יכולים עוד להגדיל את הפער באמצעות padding-left on <li>, וגודל הפער אינו עקבי בין דפדפנים.

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

מעבר לסמן מותאם אישית

ישנן שתי דרכים להגדיר את א סמן מותאם אישית:

• list-style-type ו list-style-image נכסים
• content נכס על ::marker אלמנט פסאודו

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

למרבה הצער, Safari אינו תומך ב content נכס ב ::marker עדיין (באג WebKit). מסיבה זו, אני הולך להשתמש ב- list-style-type מאפיין כדי להגדיר את הסמן המותאם אישית. אתה עדיין יכול להשתמש ב ::marker בורר לסגנון הסמן המותאם אישית המוצהר באמצעות list-style-type. ההיבט הזה של ::marker נתמך בספארי.

כל תו Unicode יכול לשמש כסמן רשימה מותאמת אישית, אבל רק לקבוצה קטנה של תווים יש למעשה "Bullet" בשמם הרשמי, אז חשבתי להרכיב אותם כאן לעיון.

אופי	שם	נקודת קוד	מילת מפתח CSS
•	כדור	U+2022	disc
Less	כדור משולש	U+2023
⁃	כדור מקף	U+2043
⁌	כדור שחור שמאלה	U+204C
⁍	כדור שחור ימינה	U+204D
◘	כדור הפוך	U+25D8
◦	כדור לבן	U+25E6	circle
☙	כדור לב פרחוני הפוך מסובב	U+2619
❥	כדור לב שחור כבד מסובב	U+2765
❧	כדור לב פרחוני מסובב	U+2767
⦾	כדור לבן בעיגול	U+29BE
⦿	כדור עיגול	U+29BF

הערה: ה- CSS square למילת המפתח אין תו "כדור" תואם ב-Unicode. הדמות שהכי מתקרבת היא האימוג'י של הריבוע הקטן השחור (▪️) (U+25AA).

עכשיו בואו נראה מה קורה כשאנחנו מחליפים את סמן ברירת המחדל ברשימה list-style-type: "•" (U+2022 כַּדוּר). זהו אותו דמות כמו תבליט ברירת המחדל, כך שלא אמורים להיות הבדלים גדולים בעיבוד. בדף הבדיקה שלי, הפעל את list-style-type אפשרות ולצפות בכל שינוי בסמן.

כפי שניתן לראות, ישנם שני שינויים משמעותיים:

1. אין עוד פער מינימלי אחרי הסמן.
2. הקליע הפך קטן יותר, כאילו הוא מוצג בקטן יותר font-size.

לפי סגנונות דלפק CSS רמה 3, סמן ברירת המחדל של הרשימה (disc) צריך להיות "דומה ל • U+2022 כַּדוּר". נראה שדפדפנים מגדילים את גודל תבליט ברירת המחדל כדי להפוך אותו לקריא יותר. פיירפוקס אפילו משתמש בגופן מיוחד, -moz-bullet-font, עבור הסמן.

האם ניתן לתקן את בעיית הגודל הקטן עם CSS? בדף הבדיקה שלי, הפעל את עיצוב הסמן וצפה במה שקורה כשאתה משנה את font-size, line-height, ו font-family של הסמן.

כפי שאתה יכול לראות, הגדלת ה font-size גורם לסמן המותאם אישית להיות לא מיושר אנכית, ולא ניתן לתקן זאת על ידי הקטנת ה- line-height. ה vertical-align נכס, שיכול בקלות לפתור בעיה זו, אינו נתמך ב ::marker.

אבל האם שמת לב ששינוי font-family יכול לגרום לסמן להיות גדול יותר? נסה להגדיר את זה ל Tahoma. זה עשוי להיות פתרון מספיק טוב לבעיה בגודל קטן, למרות שלא בדקתי איזה גופן עובד הכי טוב בדפדפנים ובמערכות ההפעלה הגדולות.

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

1. אין פער מינימלי לאחר סמנים מותאמים אישית.
2. ::marker לא תומך padding or margin.
3. padding-left on <li> אינו מגדיל את הפער, מכיוון שהסמן ממוקם inside.

<br> סיכום

להלן סיכום של כל העובדות המרכזיות שציינתי במאמר:

1. דפדפנים מחילים ברירת מחדל padding-inline-start of 40px ל <ul> ו <ol> אלמנטים.
2. יש פער מינימלי לאחר סמני רשימה מובנים (disc, decimal, וכו.). אין פער מינימלי לאחר סמנים מותאמים אישית (מחרוזת או כתובת אתר).
3. ניתן להגדיל את אורך הפער על ידי הוספת a padding-left ל <ul>, אבל רק אם הסמן ממוקם מחוץ לפריט הרשימה (מצב ברירת המחדל).
4. לסמני מחרוזת מותאמים אישית יש גודל ברירת מחדל קטן יותר מסמנים מובנים. שינוי ה font-family on ::marker יכול להגדיל את גודלם.

סיכום

במבט לאחור על דוגמה הקוד מתחילת המאמר, אני חושב שאני מבין עכשיו למה יש תו רווח ב- content ערך. פשוט אין דרך טובה יותר להכניס פער אחרי סמן ה-SVG. זה פתרון שדרוש כי אין כמות של margin ו padding יכול ליצור פער אחרי סמן מותאם אישית שממוקם בתוך פריט הרשימה. א margin-right on ::marker יכול בקלות לעשות את זה, אבל זה לא נתמך.

עד ::marker מוסיף תמיכה עבור נכסים נוספים, למפתחי אתרים לא תהיה הרבה ברירה אלא להסתיר את הסמן ולדמות אותו עם א ::before פסאודו-אלמנט. הייתי צריך לעשות את זה בעצמי לאחרונה כי לא יכולתי לשנות את הסמן background-color. אני מקווה שלא נצטרך לחכות יותר מדי זמן לסרט חזק יותר ::marker אלמנט פסאודו.

• הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
• מקור: https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/