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

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

תאריך פרסום: 10 במאי 2023

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

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

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

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

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

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

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

כדי להשתמש בו, מגדירים את רכיב המודאל ואז פותחים את תיבת הדו-שיח על ידי קריאה ל-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;
}

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

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

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

העתקה מעמיקה ב-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);

פרטים נוספים זמינים במאמר העתקה לעומק ב-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;
}

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

הממשק TransformStream

ממשק TransformStream של Streams API מאפשר להעביר מקורות נתונים זה לזה.

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

סיכום

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

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

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