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

Rachel Andrew

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

הפונקציה המתקדמת attr() של CSS מאפשרת להשתמש בסוגים שונים מלבד <string>, וגם בכל מאפייני ה-CSS.
שאילתות CSS לגבי מאגרים של מצב גלילה מאפשרות להשתמש בשאילתות לגבי מאגרים כדי להגדיר סגנון של צאצאים של מאגרים על סמך מצב הגלילה שלהם.
‫CSS text-box,‏ text-box-trim ו-text-box-edge מאפשרים שליטה מדויקת יותר ביישור האנכי של הטקסט
ויש עוד הרבה אפשרויות.

פונקציה מתקדמת של CSS‏ `attr()`

התכונה הזו היא תוספת לפונקציה הקיימת attr(), והיא כוללת תכונות שמוגדרות ב-CSS רמה 5. כך אפשר להשתמש בסוגים אחרים מלבד <string> בכל מאפייני ה-CSS (בנוסף לתמיכה הקיימת בתוכן של פסאודו-אלמנט).

בדוגמה הבאה, הערך של המאפיין color עבור div הוא הערך ממאפיין data-color. הערך של המאפיין הזה מנותח ל-<color> באמצעות attr() ו-type(). ערך ברירת המחדל מוגדר כ-red.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

מידע נוסף זמין במאמר שדרוג של שירות CSS attr().

שאילתות בנוגע למאגר של מצב הגלילה ב-CSS

אפשר להשתמש בשאילתות של מאגרי מידע כדי להגדיר סגנון של צאצאים של מאגרי מידע על סמך מצב הגלילה שלהם.

קונטיינר השאילתה הוא קונטיינר גלילה או רכיב שמושפע ממיקום הגלילה של קונטיינר גלילה. אפשר לשלוח שאילתות לגבי המצבים הבאים:

‫stuck: קונטיינר עם מיקום קבוע צמוד לאחת מהקצוות של תיבת הגלילה.
‫snapped: קונטיינר עם יישור של גלילה לתמונה ממוזערת מוצמד כרגע אופקית או אנכית.
‫scrollable: האם אפשר לגלול בקונטיינר גלילה בכיוון שנשאל.

סוג חדש של מאגר תגים: scroll-state מאפשר לבצע שאילתות על מאגרי תגים. לדוגמה:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

מידע נוסף והדגמות זמינים במאמר CSS scroll state queries.

CSS `text-box`,‏ `text-box-trim` ו-`text-box-edge`

המאפיין text-box-trim מציין את הצדדים לחיתוך, למעלה או למטה, והמאפיין text-box-edge מציין איך לחתוך את הקצה.

המאפיינים האלה מאפשרים לכם לשלוט במרווח האנכי בצורה מדויקת באמצעות מדדי הגופן.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

כאןtext-box-trim מוסבר איך להשתמש במאפיינים החדשים האלה ב-CSS.

ועוד!

כמובן שיש עוד הרבה.

Animation.overallProgressנותן לכם ייצוג נוח ועקבי של מידת ההתקדמות של האנימציה לאורך האיטרציות שלה, בלי קשר לאופי ציר הזמן שלה.
‫Node.prototype.moveBefore מאפשרת להעביר אלמנטים בעץ DOM בלי לאפס את מצב האלמנט.
ממשק FileSystemObserver מודיע לאתרים על שינויים במערכת הקבצים.
השיטה PublicKeyCredential getClientCapabilities() מאפשרת לכם לקבוע אילו תכונות של WebAuthn נתמכות על ידי הלקוח של המשתמש.

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

קריאה נוספת

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

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

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

מה חדש בגרסה 133 של Chrome קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

פונקציה מתקדמת של CSS‏ attr()