Yayınlanma tarihi: 30 Nisan 2025
Kutlama: Bu web özelliği artık üç büyük tarayıcı motorunda da kullanılabilir ve 30 Mart 2025'ten itibaren yeni temel özellik olarak sunulacaktır.
Async Clipboard API, panoyla çalışmayı geçmişe kıyasla çok daha kolay hale getirdi. Artık panoyu yönetmek için önceki yöntemler yerine düz metin içerik için navigator.clipboard.writeText() veya resim, metin içeriği ya da HTML gibi "neredeyse" her şey için navigator.clipboard.write() işlevini çağırabilirsiniz.
Ancak şu ana kadar "neredeyse" ifadesini ölçemiyoruz. Örneğin, API'nin SVG'yi destekleyip desteklemediğini denemeden bilemezdiniz. Desteklenmiyorsa, oluşturulan istisnayı yakalarsınız. Bu, desteği belirlemenin çok ergonomik bir yolu değildi. Bu nedenle statik ClipboardItem.supports() işlevi belirtildi.
Bu işlev artık Referans Değeri Yeni Kullanılabilir durumuna ulaştı. Bu durum, panosla çalışmanın daha da iyi olacağı anlamına geliyor. Bir tarayıcının belirli bir biçimi destekleyip desteklemediğini öğrenmek için ilgilendiğiniz biçimin MIME türünü işleve iletin.
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."
Daha önce "neredeyse" her şeyi yazdım. Asıl ilginç olan kısım şimdi başlıyor. Web özel biçimleri, tarayıcının doğal olarak desteklemediği biçimlerle çalışmanıza olanak tanır. Örneğin, tarayıcı varsayılan olarak AVIF resimlerini desteklemez.
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."
Ancak web özel biçimlerini kullanarak AVIF resimleriyle çalışabilir ve bunları kopyalayıp istediğiniz yere yapıştırabilirsiniz. Bunun için alıcı tarafın da web özel biçimini nasıl kullanacağını bilmesi gerekir.
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() işlevi sayesinde artık web özel biçimi için de pano desteği durumunu doğru şekilde algılayabilir ve bu özelliğin çalıştığından emin olabilirsiniz.
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() işlevi artık Temel düzeyde kullanıma sunulduğundan web geliştiricileri, web'e özel biçimler de dahil olmak üzere çeşitli MIME türleri için pano desteğini güvenilir bir şekilde algılayabilir. Bu iyileştirme, tüm tarayıcılarda kullanıcı deneyimini iyileştirerek panosla çalışmayı daha sağlam ve tahmin edilebilir hale getirir.