דף זה תורגם על ידי Cloud Translation API.

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

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

Rachel Andrew

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

באוגוסט, הדפדפנים Firefox 104, Chrome 104 ו-Chrome 105 הציגו את היציבות.

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

גרסת Chrome 104 כוללת מאפיינים נפרדים בשביל המרות 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 הוא גרסה מלהיבה שמביאה לפלטפורמת האינטרנט את התכונה שכולם חיכו לה 'שאילתות בקונטיינרים'. באמצעות שאילתות מדיה אפשר להריץ שאילתות על גודל אזור התצוגה, ואילו שאילתות קונטיינר מספקות שיטה לשליחת שאילתות לגבי גודל מאגר התגים.

תמיכה בדפדפן

מקור

כדי להשתמש בשאילתות של קונטיינרים, צריך להפעיל הפרדה באמצעות המאפיין 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() בבורר המשפחתי.

תמיכה בדפדפן

105
105
121
15.4

מקור

ממשק API של Sanitizer

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

תמיכה בדפדפן

מקור

עוד ב-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()

תמיכה בדפדפן

97
97
104
15.4

מקור

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

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

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

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

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