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

Rachel Andrew

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

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

התכונה הזו מוסיפה לפונקציה הקיימת 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.

שירותי 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;
}

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

ועוד.

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

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

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

קריאה נוספת

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

להרשמה

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

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