נכס ה-CSS initial-letter יקל מאוד על העבודה.
תמיכת דפדפן
איפה אפשר לנסות את initial-letter? אפשר להשתמש בה ב-Safari וב-Chrome 110. ב-Safari, הנכס צריך את הקידומת -webkit-. יש בעיה פתוחה בנוגע להטמעה ב-Firefox.
בדיקת תמיכה ב-initial-letter באמצעות:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
הפתרונות הנוכחיים
איך תוכלו לעצב כבר היום אירוע של טיפת כובע ב-CSS?
המפסאודו-רכיב של ::first-letter מפריע לנו.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
עם זאת, סביר להניח שתצטרכו להגיע למאפיינים כמו 'float' בזמן חישוב הגודל לאות הראשונה.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
ההשקה של יחידות CSS חדשות כמו lh יכולה להקל חלק מהכאב. אבל גם באפשרויות האלה יש תמיכה מוגבלת (כרגע יש תמיכה ב-lh רק ב-Chrome).
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
חדש: אות ראשונה
המאפיין initial-letter מספק שליטה מדויקת יותר על הסגנון הזה של כובע שחרור. הוא מקבל שני ערכים שמופרדים באמצעות רווח:
p::first-letter {
initial-letter: 3.5 3;
}
- הארגומנט הראשון מגדיר את גודל האות ואת מספר השורות שתכיל אותה. האות תוגדל תוך שמירה על יחס הגובה-רוחב שלה. אי אפשר להשתמש בערך שלילי, אבל אפשר להשתמש בערכים עשרוניים.
- הארגומנט השני מגדיר את sink האות. אפשר לחשוב על זה כקיזוז להצבת האות. הערך השני הוא אופציונלי ולא יכול להיות שלילי. אם לא מציינים אותו, ההנחה היא שהערך של גודל האות מוגבל למספר השלם הקרוב ביותר. הדבר מקביל לשימוש במילת המפתח "drop". ה-sink מקבל גם ערך אחר של מילת מפתח, "Upload" (העלאה) המקביל ל-sink 1.
כדאי לצפות בהדגמה הזו, שבה אפשר לשנות את הערכים כדי לראות איך השינוי משפיע על הסגנון של מודעת השחרור.
אם משלבים אותו עם ::first-line, יכול להיות שיופיע משהו כזה
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
אפשר גם לתת לה border. שימו לב שבדוגמה הבאה השתמשנו במילת המפתח 'drop', שתהווה ברירת המחדל אם היא תושמט, והיא משווה ל-3:
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
אולי כדאי להוסיף background או box-shadow:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
אפשר גם לחתוך את הרקע לטקסט:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
המון אפשרויות!
זהו זה, ועכשיו יש לך שליטה מדויקת יותר על העיצוב של קפיצת הדרופ כובע עם initial-letter! האם הייתם מוסיפים אותיות רישיות לטיפוגרפיה? איך תעצב אותם? שתף אותנו!