Firefox OS Media Query
Firefox OS is an awesome new HTML5-based mobile operating system. Some would says it's epic, I just think it's...super epic. The "native" languages are HTML, CSS, and JavaScript -- it's enough to make a Web Developer weep. Anyways, it's important to know how to target currently released Firefox OS devices with CSS media queries. Here's how!
The CSS
The Firefox OS base media query (for popular released devices) is actually that of a common small mobile phone:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* styles go here */
}
This media query accommodates for both landscape and portrait views of released Firefox OS devices.
As Firefox OS is ported to watches, tablets, and other devices, you'll need to keep accommodating other media queries, as you should already. Keep in mind that Firefox OS doesn't have set dimensions, but this will cover to released phones to this point.
![Creating Scrolling Parallax Effects with CSS]()
Introduction
For quite a long time now websites with the so called "parallax" effect have been really popular.
In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...
![Tips for Starting with Bitcoin and Cryptocurrencies]()
One of the most rewarding experiences of my life, both financially and logically, has been buying and managing cryptocurrencies like Bitcoin, Litecoin, Ethereum. Like learning any other new tech, I made rookie mistakes along the way, but learned some best practices along the way. Check out...
![MooTools Image Preloading with Progress Bar]()
The idea of image preloading has been around since the dawn of the internet. When we didn't have all the fancy stuff we use now, we were forced to use ugly mouseover images to show dynamism. I don't think you were declared an official...
![MooTools 1.2 Tooltips: Customize Your Tips]()
I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...
But why *would* you target Firefox OS? It seems to me that the best approach is to build a web app that works great across all viewport widths. It’s useful to know which MQ widths are currently used on Firefox OS devices, but hard-coding it into the CSS? I don’t know.
Yes, building a site that looks good everywhere is still the key, but knowing the media query that targets those devices is still important. :)