מה חדש בגרסה 131 של Chrome

Mariko Kosaka
X

דברים שעליך לדעת:

אני מריק קוסאקה. נצלול פנימה ונראה מה חדש למפתחים ב-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.

ווידג&#39;ט אקורדיון עם פריסת Flex

כדי לעשות זאת, משתמשים בפריסה גמישה (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.

להרשמה

כדי להישאר מעודכנים, נרשמים לערוץ YouTube של מפתחי Chrome, ומקבלים התראה באימייל בכל פעם שנשיק סרטון חדש.

אני Mariko Kosaka, מיד לאחר השקת Chrome 132, נגיע לכאן כדי לספר לכם מה חדש ב-Chrome!