InMy.Live

Les requêtes multimédias offrent un excellent moyen de modifier par programmation le comportement en fonction de l’état d’affichage. Nous pouvons cibler les styles sur l’appareil, le ratio de pixels, la taille de l’écran et même l’impression. Cela dit, il est également agréable d’avoir des événements JavaScript qui nous permettent également de modifier le comportement. Saviez-vous que des événements vous sont proposés avant et après l’impression ?

j’ai toujours utilisé @media print dans les feuilles de style pour contrôler l’affichage de l’impression, mais JavaScript fournit beforeprint et afterprint événements:

function toggleImages(hide = false) {
  document.querySelectorAll('img').forEach(img => {
    img.style.display = hide ? 'none' : '';
  });
}

// Hide images to save toner/ink during printing
window.addEventListener('beforeprint', () => toggleImages(true))
window.addEventListener('afterprint', () => toggleImages());

Cela peut sembler étrange, mais il est très important de prendre en compte l’impression, en particulier lorsque votre site Web est centré sur la documentation. À mes débuts sur le Web, j’avais un client qui ne “voyait” son site Web qu’à partir d’imprimés. Coiffer avec @media print est généralement la meilleure option, mais ces événements JavaScript peuvent vous aider !