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.