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

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

Mariko Kosaka
X

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

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

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

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

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

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

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

תמיכה בדפדפן

  • Chrome: 37.
  • קצה: 79.
  • Firefox: 98.
  • Safari: 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;
}

תמיכה בדפדפן

  • Chrome: 104.
  • קצה: 104.
  • Firefox: 72.
  • Safari: 14.1.

מקור

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

יחידות תצוגה חדשות

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

תמיכה בדפדפן

  • Chrome: 108.
  • קצה: 108.
  • Firefox: 101.
  • Safari: 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);

תמיכה בדפדפן

  • Chrome: 98.
  • קצה: 98.
  • Firefox: 94.
  • Safari: 15.4.

מקור

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

המחלקה המדומה :focus-visible

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

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

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

תמיכה בדפדפן

  • Chrome: 86.
  • קצה: 86.
  • Firefox: 85.
  • Safari: 15.4.

מקור

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

הממשק של TransformStream

ממשק TransformStream של ה-Stream API מאפשר לבצע צינורות עיבוד נתונים בסטרימינג אחד לשני.

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

תמיכה בדפדפן

  • Chrome: 67.
  • קצה: 79.
  • Firefox: 102.
  • Safari: 14.1.

מקור

סיכום

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

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

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