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

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

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

במרץ 2022, Chrome 99, Chrome 100, Firefox 98 ו-Safari 15.4 התייצבו. כתוצאה מכך, נוספו לפלטפורמה הרבה תכונות חדשות, והרבה מהתוספות האלה הובילו לכך שהתכונה הפכה לזמינה בכל שלושת מנועי הדפדפנים. בפוסט הזה התרכזתי בתוספות שמאפשרות לנו יכולת פעולה הדדית בדפדפנים שונים, אבל כדאי לקרוא את נתוני הגרסה כדי לראות את כל התכונות שנוספו לכל מנוע.

Chrome 99 ו-Safari 15.4 כללו את שכבות הדירוג. ה-@layer ברמת הכלל מגדיר שכבת מדורג, ועוזר לכם לשלוט על הספציפיות. הם מצטרפים ל-Firefox, כך ש-Cacade Layers זמין כעת בכל שלושת מנועי הדפדפנים. מידע נוסף על שכבות-על זמינות במאמר שכבות-מדורגות מגיעות לדפדפן.

תמיכה בדפדפן

  • 99
  • 99
  • 97
  • 15.4

מקור

גרסה 100 של Chrome כוללת את הערך החדש של plus-lighter עבור המאפיין mix-blend-mode ב-CSS. הערך הזה שימושי כאשר מחליפים בין שני רכיבים כאשר לכל הפיקסלים או לקבוצת משנה יש ערכים זהים. מידע נוסף על הבעיה שאפשר לפתור זמין במאמר בשלב זה, לא ניתן לבצע שקיפות צולבת של שני רכיבי DOM.

תמיכה בדפדפן

  • 100
  • 100
  • 99
  • 9.1

ב-Safari 15.4 יש את המאפיין contain, שמאפשר הפרדה של CSS.

תמיכה בדפדפן

  • 52
  • 79
  • 69
  • 15.4

מקור

גם בגרסה 15.4 של Safari 15.4 היא accent-color, שמעניקה שליטה על הצבע המשני שנמצא בשימוש בפקדי טפסים מסוימים.

תמיכה בדפדפן

  • 93
  • 93
  • 92
  • 15.4

מקור

Firefox 98 ו-Safari 15.4 הובילו לרכיב <dialog>, שמייצג תיבת דו-שיח.

תמיכה בדפדפן

  • 37
  • 79
  • 98
  • 15.4

מקור

ב-Safari 15.4 הושלמה גם התמיכה בכיתה המדומה של :focus-visible. ההטמעה של הפרויקט הזה בוצעה על ידי Igalia.

תמיכה בדפדפן

  • 86
  • 86
  • 85
  • 15.4

מקור

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

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

גרסאות בטא חדשות בחודש מרץ היו Chrome 101 ו-Firefox 99.

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

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

תמיכה בדפדפן

  • 101
  • 101
  • 96
  • 15

מקור

Firefox 99 כולל את המאפיין pdfViewerEnabled של ממשק Navigator. המאפיין הזה מציין אם הדפדפן תומך בתצוגה מוטבעת של קובצי PDF.

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

תמיכה בדפדפן

  • 94
  • 94
  • 99
  • 16.4

מקור

תכונות הבטא האלה יושקו בקרוב בדפדפנים יציבים.

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