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

Mariko Kosaka
X

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

קוראים לי Marik Kosaka. נצלול פנימה ונראה מה חדש למפתחים ב-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 בתוך כללי at-rule שמייצגים את 16 תיבות השוליים באמצעות תוכן שנוצר.

במספור דפים, אפשר להשתמש גם בספירה עם page למספר הדף הנוכחי ועם pages למספר הכולל של הדפים.

הסבר מפורט יותר זמין במאמר של Rachel‏ הוספת תוכן לשוליים של דפי אינטרנט כשהם מודפסים באמצעות CSS .

ועוד.

ויש עוד הרבה דברים.

  • תמיכה במשאבי SVG חיצוניים לרכיבים 'clip-path',‏ 'fill',‏ 'stroke' ו-'marker'.
  • WebHID מופעל בהקשרים של עובדים ייעודיים.
  • אפשר לשלוט בהתנהגות של אמוג'י באמצעות מאפיין ה-CSS font-variant-emoji.

קריאה נוספת

הסקירה הזו כוללת רק כמה נקודות עיקריות. בקישורים הבאים מפורטים שינויים נוספים בגרסה 131 של Chrome.

להרשמה

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

קוראים לי מריקו קוסקה, ואחרי שגרסת Chrome 132 תושק, נעדכן אותך כאן על מה שחדש ב-Chrome.