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

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

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

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

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

צוות 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 עם מאפייני טרנספורמציה נפרדים.

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

בנייד, גודל אזור התצוגה מושפע מנוכחות או מחסרות של סרגלי כלים דינמיים.
לפעמים סרגל כתובות ה-URL וסרגל הכלים של הניווט גלויים, אבל לפעמים סרגי הכלים האלה מוסתרים לגמרי.
הגודל בפועל של אזור התצוגה ישתנה בהתאם לכך ששורות הכלים גלויות או לא.
יחידות חדשות של חלון תצוגה, כמו 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 של ה-Stream API מאפשר לבצע צינורות עיבוד נתונים בסטרימינג אחד לשני.

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

סיכום

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

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

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