Solving printing issue (with css styling) in Chrome and Firefox with Javascript

I was having a serious issue with printing (with css styling) in Chrome and Firefox. I need to have the Styling also printed/applied in printing Preview and the print result. I've tried some workrounds sugessted like adding -webkit-print-color-adjust: exact!important; etc, but still it didnt work in my case

Until i figured out that the Style need to have !important attribute. When working with WYSWYG Editor, you generally would have inline-styles css applied to the element and this could be a problem for printing. So I need to add !important to every css style attribute found in every element.

Here's how I solved it using jQuery

//add !important rule to every style found in each element
//so the browser print render the color/style also
var el = $('.content *');

if (el.length) {
    el.each(function(item) {
        var _this = $(this);
        var attr = _this.attr('style');
        var style = '';
        if (typeof attr !== typeof undefined && attr !== false) {
            if (attr.split(';').length) {
                attr.split(';').forEach(function(item) {
                    if (item.trim() != '') {
                        style += item.trim() + '!important;-webkit-print-color-adjust: exact!important;';
                    }
                });

                _this.attr('style', style);
            }
        }
    });
}

Here's the result in Printing Preview before and After adding the Code Hack