Enter your contact information.
Enter your project information.
Step 3Choose the PHP programmers you want to hire.
Compare Free PHP Quotes
How to Have Your @Media Queries and Eat IE Too
*Attention PHP Programmers* - Add A Free Listing! Get more clients.
CSS 3 media queries make building a mobile version of your site incredibly simple — just add a few lines of CSS to handle the smaller screen size of tablets and phones. The only problem is that not every web browser understands @media queries, and in those that don’t your elegant, responsive design is going to fall apart.
There are several ways around this problem. Since the main culprit when it comes to not understanding @media is Internet Explorer, conditional comments can load an entirely separate stylesheet for older versions of IE. But if you’re starting with a purely vertical layout (for mobile phones) and then applying your floats and positional rules for larger screens — which is the design pattern we recommend — that means you’ll need to handle older versions of other browsers as well.
If the extra http requests of additional stylesheets (to say nothing of maintaining those stylesheets) isn’t appealing, there are a couple of very nice polyfill solutions that use JavaScript to apply @media rules to browsers that don’t understand them.
Respond is a very lightweight (~1KB) JavaScript library that will detect CSS 3 media query support and apply the rules to browsers that don’t natively understand them. All you need to do is end every min/max-width media query block with a comment: /*/mediaquery*/.
The main downside to Respond is that, in order to keep it fast and small, developer Scott Jehl chose to only support min-width and max-width media queries and media types. That means if you’re using orientation or other media queries, Respond won’t solve your problems.
For something more robust, you can use the css3-mediaqueries-js library. Css3-mediaqueries-js supports just about every type of media query, but of course it takes a bit longer to render the page and it’s a significantly larger file for browsers to download (15.6 KB minified).
Don’t want to rely on JavaScript at all? Well, then you’re stuck with multiple stylesheets. Developer Jeremy Keith has a nice overview of how he handles media queries on Huffduffer without the need for JavaScript.
See Also:
- Make a Big Splash on Tiny Screens With Media Queries
- Slide Show Time: Rethinking the Mobile Web
- Mobile Safari Gets More HTML5 Love in iOS Update
Tue, 12 Apr 2011 14:42:44 GMT
Tags: CSS, CSS 3, Visual Design, Web Basics, Web Standards,
*Attention PHP Programmers* - Add A Free Listing! Get more clients.
CSS
The Future of CSS: Finally, Sane Layout Tools
Woolly, the CSS sheep. HTML5 and CSS 3 offer web designers new semantic tags, fancy animations, server-side fonts and much more, but that’s not the end of the story. The next major development in web design will likely revolve around one of the thi
Quickly Create CSS 3 Animations with ‘Ceaser’
CSS 3 has some awesome new animation capabilities for web developers — rotating objects, fading them in and out and more — but writing the code is a bit more complicated than most CSS rules. To make your animating job a bit easier, developer M
Simplify Your Stylesheets With CSSPrefixer
Woolly, the CSS sheep. CSS 3 has some awesome new features, like 3D transforms, smooth transitions, border images and gradients. Since most browsers already support these features there’s no reason you can’t use them today, provided you grac
CSS 3
Microsoft, Mozilla Battle Over What Makes a ‘Modern’ Web Browser
Microsoft and Mozilla are trading barbs over the coming Internet Explorer 9. Microsoft has been touting its HTML5 support in IE9, claiming that it renders HTML5 better than Firefox (and Chrome, Safari and Opera). Mozilla then turned around and released an
Visual Design
Decoding Web Fonts With ‘What Font’
Designers have been bemoaning the state of typography in the browser since the dawn of the web. However, CSS 3 and the @font-face rule go a long way toward improving your font options. Throw in tools like lettering.js and easy-to-use font services like Ty
CSS 3 Brings Iconic Mad Men Titles to Life on the Web
Web developer Anthony Calzadilla has recreated the opening title sequence of AMC’s Mad Men using only CSS 3 animations and some carefully crafted images. The result is an impressive showcase of what you can do with the animation powers available in
ABC Digital is a design studio based in Aotearoa New Zealand. We specialise in web design and development, graphic design / design for print, sound design and audio / soundtrack production.
Mapua, Tasman NZ
Spectrum Nashville is committed to providing reasonable, excellent business technology solutions that simply work.
Franklin, Tennessee US
Creating unique design solutions that are both affordable and inspiring. Specializing in design, layout & production of printed materials, logos & illustrations.
Rocky River, Ohio US
German freelance PHP programmer with 5 years of experience in PHP, MySQL, HTML, CSS, AJAX, Photoshop, PHP frameworks (CodeIgniter, Typo3, Joomla, etc.), Linux Server administration, JAVA, C# and C++.
Melbourne, Victoria AU
Get More Out of Your Browser’s Developer Tools
Every web browser now ships with some sort of developer tools built-in. The only exception is Firefo
Web Notifications API Hints at a Brave New Real-Time Web
Google recently added a desktop notification option to Gmail — whenever a new message arrives
Add a Little 3D ‘Tilt’ to Your Website
Tilt is a great new Firefox extension that uses a 3D model to visualize any web page DOM. Tilt is a
The Trials and Tribulations of HTML Video in the Post-Flash Era
Adobe reversed course on its Flash strategy after a recent round of layoffs and restructuring, concl
Mozilla Plans to Silently Update Future Firefox Releases
Borrowing another trick from Google's Chrome browser, Firefox will soon move its update process to t
Article Tags
PHP Programmers Articles
Live Help Chat Software
Web Design Quote
Web Design