תכנים חדשים בפלטפורמת האינטרנט באוגוסט

במהלך אוגוסט 2022 נוספו כמה תכונות מעניינות לדפדפני אינטרנט בגרסת בטא ובגרסה יציבה.

Rachel Andrew

גרסאות יציבות של דפדפנים

באוגוסט, הגרסאות Firefox 104,‏ Chrome 104 ו-Chrome 105 הפכו לגרסאות יציבות.

טרנספורמציות ספציפיות

גרסה 104 של Chrome כוללת מאפיינים נפרדים לטרנספורמציות CSS. המאפיינים הם scale,‏ rotate ו-translate, שאפשר להשתמש בהם כדי להגדיר בנפרד את החלקים האלה של טרנספורמציה.

באופן הזה, Chrome מאחד את Firefox ו-Safari, שכבר תומכים במאפיינים האלה.

תמיכה בדפדפן

• 104
• 104
• 72
• 14.1

מקור

תחביר חדש של שאילתות מדיה

ב-Chrome 104 יש גם תחביר טווח של שאילתה לגבי מדיה. התוסף הזה כבר נשלח על ידי Firefox ועוזר לייעל שאילתות מדיה. לדוגמה, שאילתה של מדיה:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

אפשר לכתוב באמצעות אופרטור השוואה:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

תמיכה בדפדפנים

• 104
• 104
• 102
• 16.4

מקור

שאילתות בקונטיינרים

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

תמיכה בדפדפנים

• 105
• 105
• 110
• 16

מקור

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

.card-container {
  container-type: inline-size;
}

אם המדיניות container-type מוגדרת לערך inline-size, נשלחת שאילתה לגודל הכיוון המוטבע של תבנית ההורה. בשפות לטיניות כמו אנגלית, זה יהיה רוחב הכרטיס, כי הטקסט זורם בתוך השורה משמאל לימין.

עכשיו אפשר להשתמש במאגר הזה כדי להחיל סגנונות על כל אחד מהצאצאים שלו באמצעות @container:

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

מידע נוסף על שאילתות בקונטיינרים זמין בפוסט @container ו-:has(): שני ממשקי API חדשים וחזקים עם תגובה דינמית שזמינים ב-Chromium 105.

פסאודו-המחלקה ההורה ‎ :has()

בפוסט שהוזכר למעלה יש גם אזכור של :has(). המחלקה החדשה, המחלקה המדומה של ה-CSS :has() pseudo-class מאפשרת לכם לטרגט את רכיב ההורה ואת האחיות והאחים על סמך תנאים. מידע נוסף זמין במאמר has() : הסלקטור המשפחתי.

תמיכה בדפדפנים

• 105
• 105
• 121
• 15.4

מקור

ממשק API לחיטוי

ב-Chrome 105 מופיע גם Sanitizer API. ממשק ה-API הזה מאפשר לבצע ניטרול בתוך הפלטפורמה כדי לעזור להסיר נקודות חולשה של סקריפטים חוצי-אתרים (XSS).

ב-Chrome 105 יש גם את פסאודו-המחלקה :modal ב-CSS. המצב הזה תואם לרכיב שנמצא במצב שבו הוא מחריג את כל האינטראקציה עם רכיבים מחוץ אליו. לדוגמה, <dialog> שנפתח באמצעות ה-API של showModal().

תמיכה בדפדפנים

• 105
• 105
• 103
• 15.6

מקור

השיטות של findLast() ו-FindLastIndex()

ב-Firefox 104 נוספה תמיכה באמצעות דגל בשיטות Array.prototype.findLast()‎,‏ Array.prototype.findLastIndex()‎,‏ TypedArray.prototype.findLast()‎ ו-TypedArray.prototype.findLastIndex()‎. השיטות האלה משמשות למציאת הערך והאינדקס (בהתאמה) של הרכיב האחרון במערך או ב-TypedArray שתואמים לפונקציית הבדיקה שסופקה.

תמיכה בדפדפנים

• 97
• 97
• 104
• 15.4

מקור

גרסאות של דפדפן בטא

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

בגלל תאריכי ההשקה שחלפו מחוץ לחודש, גרסת הבטא החדשה היחידה באוגוסט הייתה Firefox 105, שעדיין אין עליה הרבה פרטים.

גם גרסת הבטא של Safari 16 שצוינת ביוני עדיין פעילה.

חלק מהסדרה חדשות באינטרנט