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

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

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

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

כך, Chrome מצטרף ל-Firefox ול-Safari שכבר תומכים בנכסים האלה.

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

  • Chrome: ‏ 104.
  • Edge: ‏ 104.
  • Firefox: 72.
  • Safari: ‏ 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.
}

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

  • Chrome: ‏ 104.
  • Edge: ‏ 104.
  • Firefox: 102.
  • Safari: 16.4.

מקור

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

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

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

  • Chrome: ‏ 105.
  • Edge: ‏ 105.
  • Firefox: 110.
  • Safari: 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()‎, מאפשר לכם לטרגט את רכיב ההורה ואת האחים והאחיות שלו על סמך תנאים. מידע נוסף זמין במאמר :has() הבורר של הקבוצה המשפחתית.

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

  • Chrome: ‏ 105.
  • Edge: ‏ 105.
  • Firefox: 121.
  • Safari: 15.4.

מקור

Sanitizer API

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

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

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

  • Chrome: ‏ 105.
  • Edge: ‏ 105.
  • Firefox: ‏ 103.
  • Safari: 15.6.

מקור

השיטות findLast() ו-findLastIndex()

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

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

  • Chrome: ‏ 97.
  • Edge: ‏ 97.
  • Firefox: ‏ 104.
  • Safari: 15.4.

מקור

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

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

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

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

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