הפונקציה ClipboardItem.supports() זמינה עכשיו בגרסה הבסיסית

קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

Thomas Steiner

תאריך פרסום: 30 באפריל 2025

אירוע חגיגי: התכונה הזו לאינטרנט זמינה עכשיו בכל שלושת מנועי הדפדפן העיקריים, והיא תהיה זמינה כחלק מ-Baseline החל מ-30 במרץ 2025.

בעזרת Async Clipboard API, העבודה עם הלוח הפכה להיות הרבה יותר קלה ממה שהיא הייתה בעבר. במקום השיטות הקודמות לניהול הלוח, אפשר עכשיו להשתמש ב-navigator.clipboard.writeText() לתוכן טקסט פשוט או ב-navigator.clipboard.write() ל'כמעט' כל דבר אחר, כמו תמונות, תוכן טקסטואלי או HTML.

עם זאת, עד כה חסר פריט אחד: הערכה כמותית של ה'כמעט'. לדוגמה, לא ניתן לדעת אם ה-API תומך ב-SVG עד שמנסים, ואז, במקרה של חוסר תמיכה, תופסים את החריגה שהופיעה. זו לא הייתה דרך ארגונומית מאוד לקבוע את התמיכה, ולכן צוינה הפונקציה הסטטית ClipboardItem.supports().

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

const format = 'image/svg+xml';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support image/svg+xml."

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

const format = 'image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does not support image/avif."

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

const format = 'web image/avif';
const supportsFormat = ClipboardItem.supports(format);
console.log(`This browser does${supportsFormat ? '' : ' not'} support ${format}.`);
// "This browser does support web image/avif."

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

if (ClipboardItem.supports('web image/avif')) {
  // Fetch remote AVIF image and obtain its blob representation.
  const blob = await fetch('image.avif').then((response) => response.blob());

  try {
    // Write the image data to the clipboard, prepending the blob's actual
    // type (`"image/avif"` with the string `"web "`, so it becomes
    // `"web image/avif"`.
    const clipboardItem = new ClipboardItem({
      'web image/avif': blob,
    });
    await navigator.clipboard.write([clipboardItem]);
  } catch (err) {
    console.error(err.name, err.message);
  }
}

עכשיו, כשהפונקציה ClipboardItem.supports() זמינה בגרסת Baseline, מפתחי אינטרנט יכולים לזהות בצורה מהימנה תמיכה בלוח העריכה בסוגים שונים של MIME, כולל פורמטים מותאמים אישית לאינטרנט. השיפור הזה מאפשר עבודה חזקה וחזותית יותר עם הלוח, וכך משפרת את חוויית המשתמש בכל הדפדפנים.