Publié le 30 avril 2025
Fête: cette fonctionnalité Web est désormais disponible dans les trois principaux moteurs de navigateur et devient disponible en tant que référence à partir du 30 mars 2025.
L'API Async Clipboard a rendu le travail avec le presse-papiers beaucoup plus facile qu'auparavant. Au lieu des méthodes précédentes de gestion du presse-papiers, vous pouvez désormais appeler navigator.clipboard.writeText() pour le contenu en texte brut ou navigator.clipboard.write() pour "presque" tout le reste, comme les images, le contenu textuel ou le code HTML.
Il manque cependant un élément pour quantifier ce "presque". Par exemple, vous ne pouviez pas savoir si l'API était compatible avec le format SVG avant de l'essayer, puis, en cas de non-compatibilité, de détecter l'exception générée. Ce n'était pas un moyen très ergonomique de déterminer la compatibilité. C'est pourquoi la fonction statique ClipboardItem.supports() a été spécifiée.
La fonction a maintenant atteint l'état "Nouveau disponible" de référence, ce qui signifie que l'utilisation du presse-papiers est encore plus efficace. Pour savoir si un navigateur est compatible avec un format donné, transmettez-lui le type MIME du format qui vous intéresse.
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."
Auparavant, j'écrivais presque tout le reste, et c'est là que les choses deviennent vraiment intéressantes. Les formats Web personnalisés vous permettent de travailler avec des formats que le navigateur n'est pas en mesure de prendre en charge en mode natif. Par exemple, par défaut, le navigateur n'est pas compatible avec les images 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."
Toutefois, en utilisant des formats personnalisés Web, vous pouvez travailler avec des images AVIF et les copier-coller librement, à condition que le destinataire sache également gérer le format personnalisé Web.
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."
Grâce à la fonction ClipboardItem.supports(), vous pouvez désormais détecter correctement la situation de compatibilité avec le presse-papiers pour le format personnalisé Web et vous assurer qu'il fonctionne.
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);
}
}
La fonction ClipboardItem.supports() est désormais disponible en tant que référence. Les développeurs Web peuvent ainsi détecter de manière fiable la prise en charge du presse-papiers pour différents types MIME, y compris les formats personnalisés Web. Cette amélioration rend l'utilisation du presse-papiers plus robuste et plus prévisible, ce qui améliore l'expérience utilisateur dans tous les navigateurs.