So a no-print class is designed for controlling whether an element will be printed if someone prints the page. Quite simply, the CSS rule looks like:
.no-print{display:none!important;}
That would be in a print.css file or media query with the media being print.
For me, that is probably one of the only cases where I use !important because that declaration is otherwise not always going to apply.
When you go !important, you need to be absolutely sure that it is the final and ultimate transformation you want to do for matching elements. In print, I need the elements to be gone.
Similarly, you can have only-print classes which do the reverse though it gets harder because for some you might want display: block !important; and others display: flex !important;.
All of this being said, a class like this really is saying what it does rather than what it is, which you may look at as breaking semantic rules for class names.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
So a
no-print
class is designed for controlling whether an element will be printed if someone prints the page. Quite simply, the CSS rule looks like:That would be in a
print.css
file or media query with the media beingprint
.For me, that is probably one of the only cases where I use
!important
because that declaration is otherwise not always going to apply.When you go
!important
, you need to be absolutely sure that it is the final and ultimate transformation you want to do for matching elements. In print, I need the elements to be gone.Similarly, you can have
only-print
classes which do the reverse though it gets harder because for some you might wantdisplay: block !important;
and othersdisplay: flex !important;
.All of this being said, a class like this really is saying what it does rather than what it is, which you may look at as breaking semantic rules for class names.