HOME | DD
kemayo — Media queries and you
Published: 2012-10-04 21:53:46 +0000 UTC; Views: 26369; Favourites: 46; Downloads: 0
Redirect to original
Description
body div#devskin8613212 blockquote { border-left:3px solid #444; padding-left:3px; } body div#devskin8613212 .gr-box .gr-body { background:#fffffa; } @media only screen and (max-width: 767px) { body div#devskin8613212 .gr-box .gr-body { background:#333; color:#eee; } } @media only screen and (max-width: 767px) { body div#devskin8613212 .gr-box .gr-body a { color:#ffa; } } @media only screen and (max-width: 767px) { body div#devskin8613212 blockquote { border-color:#ccc; } }
First, a quick primer, which probably consists of information that most of you already know.
So, you want to write an article with cool CSS, and you want to make it work nicely when it's displayed on the tiny screen on your smartphone. Tricky! However, with media queries it becomes pretty easy. By writing
.text { color: blue; }
@media only screen and (max-width:480px) {
.text { color: red; }
}
...suddenly you have blue text at normal resolutions, and red text on a smartphone. Or on a browser which has been resized down to be really narrow.
In fact, try it out on this article! If you resize your window right now to make it narrower, it should magically invert its colors. Madness!
As an example of where this might be particularly useful, let's consider the #hq site update articles with that big ol' sidebar.
It looks like:
If we add this CSS:
@media only screen and (max-width:480px) {
.sidebar { display:none; }
.text { padding-left:33px; }
.gr-box { background-image:none; }
}
It can now look like:
This is awesome, and makes writing skins targeting multiple resolutions far easier. Unfortunately, dA skins don't support it. It'd be a pain to add in support for writing arbitrary media queries, because our CSS parser just plain isn't set up to handle it at the moment.
So we're adding in a way to target mobile resolutions with a special class.
Instead of @media only screen and (max-width:480px), you'll add a class selector like .da-media[mobile], and it'll be magically transformed onto a media query wrapping that rule.
The above example becomes:
.da-media[mobile] .sidebar { display:none; }
.da-media[mobile] .text { padding-left:33px; }
.da-media[mobile] .gr-box { background-image:none; }
Right now [mobile] is the only media type supported. We may add others in the future, which is why we decided to have it explicitly stated in the current code.
A few things to keep in mind:
- It's called "mobile", but that doesn't mean it'll only trigger when you're viewing the mobile version of dA. Anyone with a narrow enough browser window will see it. You can even watch it switching back and forth by resizing your window.
- "Narrow enough" in this case means 767px. We might choose to tweak this value in the future, if it seems to make sense to do so.
- This still won't help with pages like the blog index page , where you can have a pretty wide screen and still be forced into a narrow column.
Enjoy.
Related content
Comments: 45
Hi! I have a question. I tried adding this to my journal, but upon trying to save I get the follow error;
"Saving skin failed - only descendant, class, sibling and attribute selectors are allowed: Media only screen and (max-width:767px)"
Do you perhaps have any idea why it does this? I must admit that I am pretty much a noob when it comes to coding ^^"
👍: 0 ⏩: 0
Where do I write .text { color: blue; }
Media only screen and (max-width:480px) {
.text { color: red; }
}
👍: 0 ⏩: 0
I keep trying to make a deviation for a story i've made, the problem is that it keeps coming out as a journal not a deviation, pls help.
👍: 0 ⏩: 0
Thanks for the insight, this will help especially now that the official dA mobile app is out!
By the way, I hope that the new design guidelines will soon be applied to dA in general... The website looks so '90s compared to the app.... 
👍: 0 ⏩: 0
You might find it interesting to note that since the @ mentions came out, all instances of @media became a link to the user ~Media 
👍: 0 ⏩: 0
Are queries usable in all places CSS is allowed? I tried applying these to my journal and it said they're not allowed.
👍: 0 ⏩: 0
Hey, um... I tried using that for my journal, and for some reason when I click the journal header from my profile page, it messes up. Or at least, the footer part of it messes up. Any idea why?
This is the code I used:
.da-media[mobile] .gr-top {background: url("http://fc01.deviantart.net/fs70/f/2012/223/b/5/daskinimg1_by_asjjohnson-d58q4ko.png") no-repeat 97% top; background-size: 85%;
}
.da-media[mobile] .lowertext {background: url("http://fc01.deviantart.net/fs71/f/2012/223/a/c/daskinimg2_by_asjjohnson-d58qb7s.png") no-repeat 97% 100%; background-size: 109%;
}
The images I used for the header and footer, I noticed they get cut off when resizing a window, so I thought that mobile code would help with that. And I thought it was working okay, except, I found that one specific link messes it up, as though the window thinks it's smaller than it is or something, and the 109% code makes the footer huge. It doesn't seem to effect the header image, though.
👍: 0 ⏩: 0
Didn't actually know about media queries; interesting. Speaking of mobile, is it true that the mobile website serves a page of the exact same size as the same page on the desktop website?
👍: 0 ⏩: 1
it depends. if you would go to facebook.com with your mobile for example you would get the same as on a desktop. if you would go to m.facebook.com though it would be way smaller and 0.facebook.com doesnt even have images, so it really depends.
👍: 0 ⏩: 1
I was talking about dA in particular.
👍: 0 ⏩: 1
if it looks the same its the same size
👍: 0 ⏩: 1
The size of the page sent to the requester, not the literal physical appearance of the elements on the page.
👍: 0 ⏩: 1
yea i mean that. if the page looks like the one on your desktop on your mobile its the same amount of data
👍: 0 ⏩: 1
Oh wow, that's no good. That'll kick the mess out of loading times on a tiny little phone.
👍: 0 ⏩: 1
depends on your connection really
👍: 0 ⏩: 1
I imagine that my connection on my iPhone should be about as strong as it is on my laptop, but it sure as hell doesn't have the same processing power and it's terribly slow to load everything even though it's supposed to be a mobile website. 
And that's an iPhone. A guy who tried browsing the website on his Palm got hilariously bad results. It was extraordinary.
👍: 0 ⏩: 1
hmm i dont think the processing power is so much of a problem
Are you using the same connection for your laptop and your iPhone?
👍: 0 ⏩: 1
I can't play 3D anything with my stupid phone, I know that much. And yes, same exact wireless.
👍: 0 ⏩: 1
wht kind of iPhone do you have? O.o
👍: 0 ⏩: 1
hmm I meant 3D as in simulated 3D in racing games etc. xD
👍: 0 ⏩: 0
Glad to see more support for mobile browsers! dA is keeping up with the times!!!
👍: 0 ⏩: 0
We don't, this article is describing how we provide limited support for responsive designs without fully supporting media queries in skins css.
👍: 0 ⏩: 2
Thank you, o outsourced journal-responder.
👍: 0 ⏩: 0
Alright. I gotta give it a go next time I code a skin then!
👍: 0 ⏩: 0
Great addition, thanks!
Seeing that you're currently in the act of making changes to the CSS rules anyway, would it be possible to add support for CSS3 gradients and transitions as well? I've already seen them being used in some staff members' Journals, and it would be great if they could be made available to all of us.
👍: 0 ⏩: 1
Gradients are just a matter of time. (I'm awaiting approval from our "product marketing" people, who do the announcements.) Transitions... well, are also a matter of time, but possibly a longer time, since IE doesn't support them until 10, and we prefer to not allow widely-incompatible properties where possible.
👍: 0 ⏩: 2
I would love to be able to use transitions in my skins!
I agree with =jonarific . It wouldn't hurt to be able to use transitions in skins. They don't affect the design at all, just transitions between different states. Users whose browsers don't support transitions will just see an immediate change of state instead of a nice transition, nothing more. It won't ruin their ability to read the content of the journal, etc. According to caniuse.com gradients are seen by 63.03% of internet users, whereas transitions are seen by 66.9% of internet users 
👍: 0 ⏩: 0
That's great to hear, looking forward!
About the transitions: Of course I understand your point of view towards somewhat unsupported properties. However, in contrast to many other properties, the absence of transitions does not influence the design's layout and appearance in any way, so adding them can't negatively affect the user experience, even if they're missing in some browsers. Regarding that, I suppose you could possibly make an exception there, couldn't you?
👍: 0 ⏩: 1
Oooh, i always figured/hoped CSS would just be overwritten when viewed on mobile.
I am just wondering now if I "need" to apply any changes to my skins… or well, plan for the new ones
👍: 0 ⏩: 1
Depends greatly on your skins. Lots work just fine on a mobile browser.
👍: 0 ⏩: 1
I guess it will only be a problem with fixed-width layouts. Luckily I work with max-width
👍: 0 ⏩: 0
Ooooohhhh. *drags window edge around for rest of evening*
👍: 0 ⏩: 1
Great to know you guys thought about this as well
👍: 0 ⏩: 0