Alright, just by the title all of you must think this is a duplicate, but I have tried quite some results from StackOverflow, to no luck.

@media print worked for Firefox. When I tried using Chrome, it is a mess.

Lots suggested the use of @media screen and (-webkit-min-device-pixel-ratio: 0), which I did. But Chrome doesn't read all selectors and properties.

For example, I have:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    a[href]:after {
        content: none !important;
    }
}

This will not remove the href values in print view.

@media print {
    a[href]:after {
        content: none !important;
    }
}

This worked perfectly for Firefox. But, of course, since it's @media print, this doesn't work for Chrome at all.

I even tried * { transition: none !important }, which lots people say worked and it still didn't work for me.

Of course, I also added

Some even said "Use JavaScript to detect if it's Chrome user agent", which I tried too, but I've already deleted the code, so I can't post it here.

Lots of the results are from years ago. I think the most recent one is from 2014. I wonder if it's because Chrome updated or something, and that's why they used to work but not anymore.

These two sites are kind of the most popular ones, but still no luck trying what they wrote.

Print media queries not working?

Tips And Tricks For Print Style Sheets

Can anyone please give me an idea or does anyone know how I can make it work on Chrome?

Thanks in advance (hopefully this isn't a duplicate because I saw so many threads and all of them pretty much link to the answers I tried above).

If anyone has any suggestions on what I should do, please let me know.