@media | print, screen & only
Hey, i have a couple questions for some
@media rules-
1) What type of things/content on your site would warrant changing in regards to the print rule? essentially, what would you want to change when printing out a page of your site?
2) i've heard the screen rule represents exactly what it says, being a screen of a certain size. That makes something like @media (min-width: 500px) different since it refers to a window size right? but aren't they technically the same?
3) What does the only rule really do? i've heard it hides media queries from older browsers but why is that? is it for support reasons?
Thanks in advance.20 Replies
what would you want to change when printing out a page of your site?This depends but most times you don't want backgrounds/colors maybe to make it just headings and text etc. Might want to change fonts/sizes #itDepends #testToKnow
hide menus
hide footers
hide floating shits
hide the rest of the page for floating shits (like dialogs)
hide videos
show urls of links
change the font size for printing
change the font for a more ink-friendly font
hide images
hide sidebars
format the tables differently
avoid overflow as much as possible
force margins
add watermarks
add print-specific information
hide all css effects
hide forms
hide buttons
hide tabs
...
there's so much you might want to do with a page before printing
removing gradients is also a good one
for point 2, it's not just a screen of a size, but resolution too
and some capabilities, like it being a grayscale-only screen
for point 3, it hides the styles from browsers that don't support media queries, according to my quick research
woah thats a lot of things to consider haha. With would you say adding styles for print is a "must" in a project? For example, the bare minimum is getting the layout in, the additives beyond that would be interactivity, progressive enhancement, accessibility, optimization etc. Would it be something that's considered good practice to add in?
ah okay i see, I see regular min/max width media queries function on every screen size (as intended i assume), so are queries for things such as resolution a really niche use case?
i assume that's things like ie right? i assume that rule will be redundant now/very nearly since people don't cater for ie anymore and most browsers support media queries?
i would assume it is extremely close to useless, now-a-days
yeah, it depends
for example, a display that's 340px wide with a 192dpi, you might want to use a 680px image instead of one that's 340px, for a background
or you can do the same by checking the ddpi
none is a "must"
oh okay that makes sense then
what do you mean, sorry?
you arent required to do anything
but if you want to allow printing, having all these things into consideration is important
ah okay i see, so it's just an it depends or preferance thing
basically, yes
okay, got it. i appreciate the help. thanks
thank you too b1
you're welcome
I did a reasonably complex print stylesheet for my online résume that let me generate a pretty enough PDF that I could send it to potential clients replete with hyperlinks back to more detail on items on my site.
same
and it automatically translated to portuguese and english
ah that's pretty cool, so you both altered your site to look more formal on paper in a way?
no, the page was just showing my cv as if it was a word document, but with bootstrap ui
ah i see, a lot of these ideas are actually really cool
mine is something that should never be repeated
Oh, how come?
every since piece of text is in a
::before or ::after, set in css, using variables
over 2500 lines of hand-written cssOh wow haha, what made you decide to take that approach?
css variables
also, didnt want to use js for it