פעם היה לי את הבוס הזה מי אהבתי, אהבתי, אהבתי, אהבתי להדגיש מילים. זה היה הרבה לפני שהשתמשנו בעורך WYSIWYG והייתי צריך לקוד ביד את החרא הזה.
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(בואו לא ניכנס לצבעים שבהם הוא השתמש אפילו נוֹרָא דָגֵשׁ.)
כתיבת כל הסימון הזה מעולם לא הרגישה נהדר. המאמץ שנדרש, בטח, מה שלא יהיה. אבל האם זה בכלל רעיון טוב להוסיף תוכן עומס יתר עם כפול - או יותר! - דגשים?
תגים שונים מעבירים דגשים שונים
בתור התחלה, <strong>
ו <em>
תגיות מיועדות לשימושים שונים. החזרנו אותם ב-HTML5, שם:
אז, <strong>
נותן לתוכן משקל רב יותר במובן שהוא מרמז שהתוכן בו חשוב או דחוף. תחשוב על אזהרה:
אַזהָרָה: התוכן הבא סומן בתור מדהים.
זה עשוי להיות מפתה להגיע אליו <em>
לעשות את אותו הדבר. טקסט נטוי יכול להיות מושך תשומת לב אחרי הכל. אבל זה באמת נועד כרמז להשתמש בדגש רב יותר בעת קריאת התוכן בו. לדוגמה, הנה שתי גרסאות של אותו משפט עם הדגשה במיקומים שונים:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
שתי הדוגמאות מדגישות דגש, אך על מילים שונות. והם היו נשמעים אחרת אם היית קורא אותם בקול רם. זה עושה <em>
דרך מצוינת להביע טון בכתיבה שלך. זה משנה את משמעות המשפט בצורה כזו <strong>
לא.
דגש חזותי מול דגש סמנטי
אלה שני דברים שאתה צריך לשקול כאשר אתה מדגיש תוכן. כמו, יש הרבה מקרים שבהם ייתכן שיהיה עליך להטות תוכן מבלי להשפיע על משמעות המשפט. אבל ניתן לטפל בהם באמצעות תגים אחרים המציגים כתובות נטוי:
<i>
: זה הקלאסי! לפני HTML5, זה שימש כדי להדגיש דגש עם נטוי בכל מקום. כעת, הוא משמש אך ורק להטיית תוכן בצורה ויזואלית מבלי לשנות את המשמעות הסמנטית.<cite>
: ציון מקור עובדה או נתון. ("מָקוֹר: CSS-טריקים")<address>
: משמש לסימון פרטי איש קשר, לא רק כתובות פיזיות, אלא גם דברים כמו כתובות דוא"ל ומספרי טלפון. (
)
זה הולך לו אותו דבר עם <strong>
. במקום להשתמש בו לעיצוב טקסט שאתה רוצה להיראות כבד יותר, עדיף להשתמש בקלאסיקה <b>
תג להדגשה כדי למנוע מתן משמעות נוספת לתוכן שאינו זקוק לו. וזכור, חלק מהאלמנטים כמו כותרות כבר מוצגים בהדגשה, הודות לסגנונות ברירת המחדל של הדפדפן. אין צורך להוסיף דגש חזק עוד יותר.
שימוש בכתב נטוי בתוכן מודגש (ולהיפך)
ישנם מקרים לגיטימיים שבהם ייתכן שיהיה עליך להטות חלק משורה שכבר הודגשה. או אולי להוסיף דגש על קצת טקסט שכבר נטוי.
ציטוט בלוק יכול להיות דוגמה טובה. ראיתי הרבה פעמים שבהם הם נטויים לסגנון, למרות שסגנונות ברירת המחדל של דפדפן לא עושים זאת:
blockquote { font-style: italic;
}
מה אם נצטרך להזכיר שם סרט בציטוט הזה? זה צריך להיות נטוי. אין צורך בהדגשת לחץ, אז <i>
תג יעשה. אבל זה עדיין מוזר להטות משהו כשהוא כבר מוצג כך:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
במצב בו אנו מנסחים משהו בתוך תוכן נטוי כמו זה, אנו אמורים להסיר את הנטוי מהאלמנט המקנן... <i>
במקרה הזה.
blockquote i { font-style: normal;
}
שאילתות בסגנון מיכל יהיה מאוד שימושי למצוא את כל המופעים האלה אם נקבל אותם:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
הקטע הקטן הזה מעריך את ציטוט הבלוק כדי לראות אם הוא כן font-style
מוגדר italic
. אם כן, אז זה יוודא ש <em>
, <i>
, <cite>
, ו <address>
אלמנטים מוצגים כטקסט רגיל, תוך שמירה על המשמעות הסמנטית אם קיימת.
אבל בחזרה להדגשה בתוך ההדגשה
לא הייתי מקנן <strong>
בתוך <em>
ככה:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…או קן <em>
בתוך <strong>
במקום זאת:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
העיבוד בסדר! וזה לא משנה באיזה סדר הם נמצאים... לפחות בדפדפנים מודרניים. ג'ניפר קירנין מזכירה את זה חלק מהדפדפנים מציגים רק את התג הקרוב ביותר לטקסט, אבל לא נתקלתי בזה בשום מקום במבחנים המוגבלים שלי. אבל יש משהו שצריך לשים לב אליו!
הסיבה שלא הייתי מקנן צורה אחת של הדגשה אחרת היא כי זה פשוט לא נחוץ. אין כלל דקדוק שמחייב זאת. כמו סימני קריאה, מספיקה צורת הדגשה אחת, ואתה צריך להשתמש בזו שתואמת למה שאתה מחפש בין אם זה דגש חזותי, משקל או מוצהר.
ולמרות שחלק מקוראי המסך מסוגלים להכריז על תוכן מודגש, הם לא יקראו את הסימון בחשיבות או דגש נוסף. לכן, גם אין הטבות נגישות נוספות, למיטב ידיעתי.
אבל אני באמת רוצה את כל הדגש!
אם אתה במצב שבו הבוס שלך הוא כמו שלי ורוצה הכל מה היא דגש, הייתי מגיע לתג HTML המתאים לסוג ההדגשה, ואז מיישם את שאר הסגנונות עם שילוב של תגים שאינם משפיעים על הסמנטיקה עם CSS כדי לעזור להסביר כל מה שסגנונות דפדפן לא יתמודדו.
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
אולי אפילו אעשה את זה עם <strong>
תג גם כאמצעי הגנתי:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
כל עוד אנחנו משחקים בהגנה, אנחנו יכולים לזהות שגיאות שבהן הדגשים מקוננים בתוך הדגשים על ידי הדגשתן באדום או משהו כזה:
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
אז כנראה שהייתי משתמש בקטע הזה מהקטע האחרון שמסיר את ברירת המחדל של סגנון הנטוי מאלמנט כאשר הוא מקונן באלמנט נטוי אחר.
עוד משהו?
אולי כן:
- הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
- Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
- מקור: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- נגישות
- חֶשְׁבּוֹן
- נוסף
- כתובת
- כתובות
- להשפיע על
- משפיע
- לאחר
- תעשיות
- לבד
- כְּבָר
- אמריקה
- ו
- הודיע
- מכריז
- אחר
- בְּכָל מָקוֹם
- החל
- גִלגוּל
- בחזרה
- רקע
- כי
- לפני
- להיות
- מוטב
- קצת
- סיכה
- גבול
- בּוֹס
- אריזה מקורית
- קופה
- דפדפן
- דפדפנים
- תקציב
- שיחות
- מסוגל
- מקרה
- מקרים
- שינויים
- משתנה
- קלאסי
- צֶבַע
- צור קשר
- מכיל
- תוכן
- CSS
- בְּרִירַת מֶחדָל
- גופי בטחון
- הגנתי
- מעוצב
- אחר
- לא
- לא
- לְהַכפִּיל
- מאמץ
- או
- אלמנטים
- אמייל
- דגש
- להדגיש
- הדגיש
- עֲנָקִי
- מספיק
- שלם
- שגיאות
- אֲפִילוּ
- דוגמה
- דוגמאות
- אקספרס
- נוסף
- קרבות
- תרשים
- ראשון
- מסומן
- הבא
- טופס
- החל מ-
- לקבל
- נותן
- נתינה
- ברחבי עולם
- Go
- הולך
- טוב
- גדול
- לטפל
- לעזור
- כאן
- להבליט
- הדגשה
- HTML
- HTTPS
- רעיון
- לזהות
- חשיבות
- חשוב
- in
- מידע
- תובנה
- במקום
- IT
- ג'ניפר
- אחרון
- מוגבל
- קו
- קְצָת
- מקומות
- ארוך
- נראה
- עשוי
- לעשות
- עושה
- סימן
- דבר
- משמעות
- למדוד
- אזכורים
- יכול
- מִילִיוֹן
- מודרני
- מומנטום
- יותר
- סרט
- סרטים
- NAB
- צורך
- קן
- נוֹרמָלִי
- צפון
- צפון אמריקה
- מספרים
- המיוחדות שלנו
- Office
- ONE
- פתיחה
- להזמין
- אחר
- חלק
- ביצועים
- הטבות
- טלפון
- גופני
- מקום
- אפלטון
- מודיעין אפלטון
- אפלטון נתונים
- משחק
- שפע
- נקודות
- עמדה
- כנראה
- מוּגָן
- אַך וְרַק
- לְהַגִיעַ
- חומר עיוני
- הקוראים
- טעם
- Red
- לזכור
- טיוח
- REST
- שמירה
- כלל
- אותו
- מסך
- קוראי מסך
- סעיף
- סמנטיקה
- תחושה
- משפט
- סט
- צריך
- בפשטות
- מצב
- So
- כמה
- משהו
- קול
- מָקוֹר
- עוד
- לחץ
- חזק
- סגנון
- מציע
- סוּפֶּר
- אמור
- תָג
- בדיקות
- השמיים
- המקור
- דבר
- דברים
- פִּי
- כותרת
- ל
- צליל
- גַם
- נָכוֹן
- דחוף
- להשתמש
- אזהרה
- שעון
- בסוף השבוע
- לשקול
- מִשׁקָל
- מה
- אם
- בזמן
- מי
- יצטרך
- בתוך
- לְלֹא
- מילים
- היה
- כתיבה
- אתה
- זפירנט