JavaScript print Occasions

Media queries present an effective way to programmatically change habits relying on viewing state. We will goal kinds to machine, pixel ratio, display screen dimension, and even print. That stated, it is also good to have JavaScript occasions that additionally permit us to alter habits. Do you know you are supplied occasions each earlier than and after printing?

I’ve at all times used @media print in stylesheets to manage print show, however JavaScript gives beforeprint and afterprint occasions:

operate toggleImages(cover = false) {
  doc.querySelectorAll('img').forEach(img => {
    img.fashion.show = cover ? 'none' : '';
  });
}

// Disguise pictures to save lots of toner/ink throughout printing
window.addEventListener('beforeprint', () => toggleImages(true))
window.addEventListener('afterprint', () => toggleImages());

It might sound bizarre however contemplating print is essential, particularly when your web site is documentation-centric. In my early days of internet, I had a shopper who solely “considered” their web site from print-offs. Styling with @media print is normally the perfect choices however these JavaScript occasions might assist!