תכונות בסיסיות שאפשר להשתמש בהן היום

ריכזנו כאן רק חלק מהתכונות שכלולות ב-Baseline.

Mariko Kosaka

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

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

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

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

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

רכיב תיבת הדו-שיח

הרכיב <dialog> הוא רכיב HTML חדש ליצירת הנחיות בתיבת דו-שיח, כמו חלונות קופצים וחלונות מודולריים.

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

• 37
• 79
• 98
• 15.4

מקור

כדי להשתמש בו, מגדירים את רכיב המודאל ואז פותחים את תיבת הדו-שיח על ידי קריאה ל-method‏ showModal() ברכיב תיבת הדו-שיח.

<dialog id="d">
  <form method="dialog">
    <p>Hi, I'm a dialog.</p>
    <button>ok</button>
  </form>
</dialog>

<button onclick="d.showModal()">
  Open Dialog
</button>

כרכיב HTML מקורי, הוא כולל תכונות מובנות כמו ניהול המיקוד, מעקב אחר כרטיסיות ושמירת ההקשר של העריכה. מידע נוסף זמין במאמר יצירת רכיב של תיבת דו-שיח.

מאפייני טרנספורמציה נפרדים של CSS

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

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

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

• 104
• 104
• 72
• 14.1

מקור

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

יחידות חדשות של אזור תצוגה

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

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

• 108
• 108
• 101
• 15.4

העתקה מעמיקה ב-JavaScript

בעבר, כדי ליצור עותק מעמיק של אובייקט ללא הפניה לאובייקט המקורי, השתמשו בהאק פופולרי ששילב בין JSON.stringify לבין JSON.parse. זה היה טריק נפוץ כל כך, ש-V8 (מנוע ה-JavaScript של Chrome) שיפר באופן משמעותי את הביצועים שלו. אבל אין צורך יותר בהאק הזה עם structuredClone.

const original = {id: 0, prop: {name: "Tom"}}

/* Old hack */ 
const deepCopy = JSON.parse(JSON.stringify(original));

/* New way */
const deepCopy = structuredClone(original);

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

• 98
• 98
• 94
• 15.4

מקור

פרטים נוספים זמינים במאמר העתקה לעומק ב-JavaScript באמצעות structuredClone.

פסאודו-הקלאס :focus-visible

כמפתחי אינטרנט, כולנו מכירים את 'טבעת המיקוד' שמופיעה כשמנווטים בדף באמצעות מקלדת או לוחצים על רכיבי קלט. זוהי תכונה הכרחית לנגישות, אבל לפעמים היא מפריעה לעיצוב החזותי של המשתמשים השונים. פסאודו-הקלאס :focus-visible ב-CSS בודק אם הדפדפן סבור שהאזור שבו מופיע המיקוד צריך להיות גלוי. עכשיו אפשר לציין סגנונות רק למקרה שבו המיקוד צריך להיות גלוי.

/* focus with tab key */
:focus-visible {
    outline: 5px solid pink;
}

/* mouse click */
:focus:not(:focus-visible) {
    outline: none;
}

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

• 86
• 86
• 85
• 15.4

מקור

מידע נוסף זמין בקטע 'התמקדות' ב-Learn CSS.

ממשק TransformStream

ממשק TransformStream של Streams API מאפשר להעביר סטרימינג אחד לתוך סטרימינג אחר.

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

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

• 67
• 79
• 102
• 14.1

מקור

סיכום

יש עוד הרבה תכונות שהפכו לאחרונה לניתנות לפעולה הדדית ולשימוש יציב בפלטפורמת האינטרנט. בהמשך, נעבוד עם קבוצת הקהילה של WebDX כדי להבהיר את קבוצות התכונות הבסיסיות האלה. פרטים נוספים זמינים בכתובת web.dev/baseline.

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

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