דברים שעליך לדעת:
- הירושה של הדגשת תוסף ה-CSS משתנה.
- סגנון CSS נוסף עבור הרכיב
<details>
. - פריסה קלה יותר להדפסה עם תיבות של שוליים של דפים.
- ויש עוד הרבה.
אני מריק קוסאקה. נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 131.
תורשה של הדגשה ב-CSS
הירושה של הדגשה של CSS משתנה למחלקות המדומה ::selection
ו-::target-text
. כך נוצר מודל אינטואיטיבי יותר לירושה של סגנונות, והוא תואם לסוגי הסיווג המזויפים ::highlight
, ::spelling-error
ו-::grammar-error
שנוספו לאחרונה.
חשבו על קטע הקוד הזה עם טקסט מודגש.
p {
color: deeppink;
}
.blue::selection {
color: blue;
}
<p class="blue">
This is
<em>emphasized</em>
text.
</p>
בגרסאות קודמות של Chrome, כשבוחרים טקסט מודגש, הצבע של הטקסט לא משתנה לכחול למרות הגדרת פסאודו-הקלאסה ::selection
ברכיב הפסקה ההורה.
הסיבה לכך היא שהיא הוטמעה באמצעות מודל הירושה של הרכיבים המקוריים. במקרה כזה, המתודה ::selection
מתאימה רק לרכיבים עם המחלקה הכחולה, שלא קיימת ברכיב שבתוך הפסקה הזו.
בעקבות השינוי בהעברת ההדגשה בירושה, כשבוחרים את אותו טקסט ב-Chrome 131, הצבע שלו ישתנה לכחול.
יש עוד כמה שינויים שקשורים לנושא הזה, לכן כדאי לעיין במאמר שינויים בירושה של סגנון הבחירה ב-CSS, שנכתב על ידי סטיבן צ'ני (Stephen Chenney) מ-Igalia, שעבד על התכונה הזו.
שיפורים בסגנון של <details>
ו-<summary>
עכשיו יש לך יותר אפשרויות לעצב את המבנה של הרכיבים <details>
ו-<summary>
כדי ליצור ווידג'טים של גילוי נאות או אקורדיון.
השינויים שנוספו במהדורה הזו מאפשרים להשתמש במאפיין display
, ומוסיפים פסאודו-אלמנט ::details-content
כדי להגדיר סגנון לחלק שמתרחב ונסגר.
בעבר לא ניתן היה לשנות את סוג התצוגה של הרכיב details
.
הגבלה זו הוסר עכשיו, ועכשיו אפשר להשתמש בפריסות כמו רשת או פריסה גמישה.
בדוגמה הבלעדית הזו של חלונית נפתחת, שמכילה כמה אלמנטים מסוג details
, כשאחד מהאלמנטים מסוג details
מורחב, התוכן שלו ממוקם לצד ה-summary
.
כדי לעשות זאת, משתמשים בפריסה גמישה (flex) באלמנט details
. אפשר גם לנסות עוד דפוסי פריסה עם ערכי תצוגה אחרים, כמו grid
.
הסבר מפורט יותר זמין במאמר של Bramus בנושא אפשרויות נוספות לעיצוב <details>
.
@page
תיבות שוליים
נוספה תמיכה בתיבות של שולי הדף כשמדפיסים מסמך אינטרנט או מייצאים אותו כקובץ PDF.
תיבות של שולי דף מאפשרות לכם להגדיר את התוכן באזור השוליים של הדף. כך תוכלו לספק כותרות עליונות ותחתונות בהתאמה אישית במקום להשתמש בכותרות העליונות והתחתונות המובנות שנוצרות על ידי הדפדפן.
שוליים הדף מוגדרים באמצעות הכלל @page
ב-CSS.
@page :right {
@bottom-left {
content: "My book";
font-size: 9pt;
color: #333;
}
}
המראה והתוכן של תיבת שוליים מצוינים באמצעות מאפייני CSS בתוך הכללים שמייצגים את 16 תיבות השוליים של התוכן שנוצר.
במספור דפים, אפשר להשתמש גם בספירה עם page
למספר הדף הנוכחי ועם pages
למספר הכולל של הדפים.
הסבר מפורט יותר זמין במאמר של Rachel הוספת תוכן לשוליים של דפי אינטרנט כשהם מודפסים באמצעות CSS .
ועוד.
וכמובן, יש עוד הרבה.
- תמיכה במשאבי SVG חיצוניים עבור 'clip-path', 'fill', ' עדכונים' ו-'Mark'.
- WebHID מופעל בהקשרים של עובדים ייעודיים.
- אפשר לשלוט בהתנהגות של אמוג'י באמצעות מאפיין ה-CSS
font-variant-emoji
.
קריאה נוספת
הסיכום מכסה רק חלק מהעדכונים העיקריים. בקישורים הבאים מפורטים שינויים נוספים בגרסה 131 של Chrome.
- נתוני הגרסה של Chrome 131
- מה חדש בכלי הפיתוח ל-Chrome (גרסה 131)
- רשימת השינויים במאגר המקור של Chromium
- לוח הזמנים של הגרסאות החדשות של Chrome
להרשמה
כדי להישאר מעודכנים, נרשמים לערוץ YouTube של מפתחי Chrome, ומקבלים התראה באימייל בכל פעם שנשיק סרטון חדש.
אני Mariko Kosaka, מיד לאחר השקת Chrome 132, נגיע לכאן כדי לספר לכם מה חדש ב-Chrome!