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

מידע נוסף על חלק מהתכונות שכלולות ב-Baseline.

Mariko Kosaka
X

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

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

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

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

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

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

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

תמיכה בדפדפן

  • 37
  • 79
  • 98
  • 15.4

מקור

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

הפסאודו-class של :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

מקור

כדי לקבל מידע נוסף, אתם יכולים לעיין בקטע התמקדות ב'לימוד CSS'.

הממשק של TransformStream

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

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

תמיכה בדפדפן

  • 67
  • 79
  • 102
  • 14.1

מקור

סיכום

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

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

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