@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
b1mind
b1mind4w ago
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
ἔρως
ἔρως4w ago
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
snxxwyy
snxxwyyOP4w ago
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?
ἔρως
ἔρως4w ago
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"
snxxwyy
snxxwyyOP4w ago
oh okay that makes sense then what do you mean, sorry?
ἔρως
ἔρως4w ago
you arent required to do anything but if you want to allow printing, having all these things into consideration is important
snxxwyy
snxxwyyOP4w ago
ah okay i see, so it's just an it depends or preferance thing
ἔρως
ἔρως4w ago
basically, yes
snxxwyy
snxxwyyOP4w ago
okay, got it. i appreciate the help. thanks thank you too b1
ἔρως
ἔρως4w ago
you're welcome
dys 🐙
dys 🐙4w ago
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.
ἔρως
ἔρως4w ago
same and it automatically translated to portuguese and english
snxxwyy
snxxwyyOP4w ago
ah that's pretty cool, so you both altered your site to look more formal on paper in a way?
ἔρως
ἔρως4w ago
no, the page was just showing my cv as if it was a word document, but with bootstrap ui
snxxwyy
snxxwyyOP4w ago
ah i see, a lot of these ideas are actually really cool
ἔρως
ἔρως4w ago
mine is something that should never be repeated
snxxwyy
snxxwyyOP4w ago
Oh, how come?
ἔρως
ἔρως4w ago
every since piece of text is in a ::before or ::after, set in css, using variables over 2500 lines of hand-written css
snxxwyy
snxxwyyOP4w ago
Oh wow haha, what made you decide to take that approach?
ἔρως
ἔρως4w ago
css variables also, didnt want to use js for it
Want results from more Discord servers?
Add your server