זה לא סוד ש- MDN הוציא עיצוב חדש עוד במרץ. זה משגע! ויש בו כמה פניני CSS-y מתוקות שכיף להסתכל בהן. אחת מהפנינים האלה היא האופן שבו רכיבי כרטיס מטפלים בטקסט קטום.
די מגניב, כן? אני רוצה לקרוע את זה רק קצת, אבל כמה דברים באמת מושכים אותי לגישה הזו:
- זו דוגמה לניתוק תוכן בכוונה. התייחסנו לזה כאל אובדן נתונים של CSS במקומות אחרים. ולמרות שאובדן נתונים הוא בדרך כלל דבר רע, אני אוהב את השימוש בו כאן מכיוון שקטעים נועדו להוות טיזר לתוכן המלא.
- זה שונה מחיתוך טקסט עם
text-overflow: ellipsis, נושא שעלה די לאחרונה כאשר אריק אגרט משותף החששות שלו עם זה. הטענה העיקרית נגדה היא שאין דרך לשחזר את הטקסט שנחתך בחיתוך - טכנולוגיה מסייעת תכריז על כך, אבל למשתמשים רואים אין דרך לשחזר אותו. גישת MDNs מספקת קצת יותר שליטה במחלקה הזו מכיוון שהקטיעה היא חזותית בלבד.
אז איך MDN עשה את זה? שום דבר מפואר מדי כאן מבחינת ה-HTML, רק מיכל עם פסקה.
<div class="card">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore consectetur temporibus quae aliquam nobis nam accusantium, minima quam iste magnam autem neque laborum nulla esse cupiditate modi impedit sapiente vero?</p>
</div>אנחנו יכולים להכניס כמה סגנונות בסיס כדי לחזק את הדברים.
שוב, שום דבר מפואר מדי. המטרה שלנו היא לחתוך את התוכן אחרי, למשל, השורה השלישית. אנחנו יכולים להגדיר א max-height על הפסקה והסתיר את ההצפה בשביל זה:
.card p {
max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
overflow: hidden; /* Cut off the content */
}וואו וואו, מה נסגר עם זה calc() דברים? שימו לב שהקמתי א --base משתנה מלפנים שיכול לשמש כמכפיל משותף. אני משתמש בו כדי לחשב את font-size, line-height, padding עבור הכרטיס, ועכשיו את max-height של הפסקה. אני מוצא שקל יותר לעבוד עם ערכים קבועים במיוחד כאשר הגודל שאני צריך באמת מבוסס על קנה מידה כזה. שמתי לב ש-MDN משתמש בדומה --base-line-height משתנה, כנראה לאותה מטרה.
לגרום לשורת הטקסט השלישית הזו לדעוך? זה קלאסי linear-gradient() על הסעיף :after פסאודו-אלמנט, המוצמד לפינה הימנית התחתונה של הכרטיס. אז אנחנו יכולים להגדיר את זה:
.card p:after {
content: ""; /* Needed to render the pseudo */
background-image: linear-gradient(to right, transparent, var(--background) 80%);
position: absolute;
inset-inline-end: 0; /* Logical property equivalent to `right: 0` */
}שימו לב שאני מתקשר א --background משתנה שמוגדר לאותו ערך צבע הרקע שבו נעשה שימוש ב- .card עצמו. כך נראה שהטקסט נמוג אל הרקע. וגיליתי שאני צריך להתאים את עצירת הצבע השנייה במעבר הדרגתי מכיוון שהטקסט אינו מוסתר לחלוטין כאשר השיפוע מתערבב עד 100%. מצאתי 80% להיות נקודה מתוקה לעיניים שלי.
וכן, :after צריך height ו width. ה height איפה זה --base משתנים חוזרים לפעולה כי אנחנו רוצים את זה בקנה מידה של הפסקה line-height על מנת לכסות את הטקסט בגובה של :after.
.card p:after {
/* same as before */
height: calc(1rem * var(--base) + 1px);
width: 100%; /* relative to the .card container */
}נראה שהוספת פיקסל נוסף אחד של גובה עשתה את העבודה, אבל MDN הצליחה להוציא אותו בלעדיו כשהצצתי ב-DevTools. אז שוב, אני לא משתמש top (אוֹ inset-block-start) כדי לקזז את השיפוע גם בכיוון זה. 🤷♂️
עכשיו p:after ממוקמת לחלוטין, עלינו להכריז במפורש על מיקום יחסי בפסקה שיש לשמור :after בזרימה שלו. אחרת, :after ייגרר לחלוטין מזרם המסמכים ויתגלגל מחוץ לכרטיס. זה הופך ל-CSS המלא עבור .card פסקה:
.card p {
max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
overflow: hidden; /* Cut off the content */
position: relative; /* needed for :after */
}סיימנו, נכון? לא! שיפוע הדאנג פשוט לא נראה במיקום הנכון.
אני מודה שהפלצתי במוח על זה והפעלתי DevTools ב-MDN כדי לראות מה לעזאזל אני מפספס. הו כן, :after צריך להיות מוצג כרכיב בלוק. ברור כשמש כשמוסיפים לו גבול אדום.🤦♂️
.card p:after {
content: "";
background: linear-gradient(to right, transparent, var(--background) 80%);
display: block;
height: calc(1rem * var(--base) + 1px);
inset-block-end: 0;
position: absolute;
width: 100%;
}כולם ביחד עכשיו!
וכן, נראה נשמע כאילו VoiceOver מכבד את הטקסט המלא. עם זאת, לא בדקתי קוראי מסך אחרים.
שמתי לב גם שהיישום של MDN מסיר pointer-events החל מ- p:after. כנראה טקטיקה הגנתית טובה כדי למנוע התנהגויות מוזרות בעת בחירת טקסט. הוספתי אותו והבחירה בטקסט מרגישה קצת יותר חלקה, לפחות בספארי, פיירפוקס וכרום.
