Enter your contact information.
Enter your project information.
Step 3Choose the PHP programmers you want to hire.
Compare Free PHP Quotes
Using Sass to Help Internet Explorer Handle ‘Mobile-First’ Designs
*Attention PHP Programmers* - Add A Free Listing! Get more clients.
If you’ve embraced a mobile-first approach to responsive design, you’re probably building your CSS in layers. One common method is to start with a base layer of CSS that applies to all screen sizes — like font definitions, colors, etc — and then using CSS 3 @media queries to add in floats and the like for larger screens.
This approach works well with most browsers, except of course our old friend Internet Explorer, which, prior to IE 9, doesn’t know what to make of @media. Naturally there are solutions to the IE 6/7/8 problem. You could use a polyfill like Respond.js or css3-mediaqueries.js, both of which use JavaScript to make media queries work in older web browsers.
Sometimes though you don’t want the JavaScript dependency. What’s more, most of the time you don’t really even care if IE actually understands @media, you just want it to apply the CSS inside the @media block.
Developer Nicolas Gallagher recently outlined a different, JavaScript-free approach to making older versions of IE apply your @media rules. Gallagher’s technique builds on an idea developer Jeremy Keith uses to work around a bug in Windows mobile. If you’re looking for a simple, JavaScript-free means of serving up a mobile-first design without abandoning older versions of Internet Explorer, this is one of the best solutions I’ve seen (provided you’re already using Sass).
Here’s Gallagher’s description:
The basic idea is to produce two versions of your compiled CSS from the same core code. One version of your CSS includes CSS 3 @media queries and is downloaded by modern browsers. The other version is only downloaded by IE 6/7/8 in a desktop environment and contains no CSS 3 @media queries.
Be sure to read through Gallagher’s post for the full details on how and why it works. Obviously if you’re not a fan of Sass, then this approach isn’t for you (Less fans should check the comments on Gallagher’s post as developer Peter Wilson has a link to a Less version of the same idea).
Source http://www.webmonkey.com/?p=52948Thu, 01 Dec 2011 16:01:16 GMT
Tags: CSS, responsive design, Visual Design,
*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
responsive design
Tips, Tricks and Best Practices for Responsive Design
Unless you’ve been too busy wake boarding the Alps to notice, there’s a movement afoot amongst web designers — Responsive Design. Ethan Marcotte coined the term responsive design to describe the process of using liquid layouts and media
Take Responsive Design Beyond the (Fluid) Grid
We’ve given you a look at some best practices for responsive design, but beyond the nuts and bolts of @media queries and flexible grids, there is something more subtle, and more important, at work behind the moniker responsive design. Good design ha
Screenfly: The Easy Way to Test Responsive Web Designs
If you’ve embraced responsive web design — and we sincerely hope you have — you know that fluid layouts, helpful as they are, can be tricky. Combine them with @media queries to re-size and re-position elements on the fly and you’ll
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
How to Have Your @Media Queries and Eat IE Too
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 i
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
PHP/MySQL Developer
Zrenjanin, Vojvodina RS
website creator chennai, web development firm chennai, product development in chennai, software developer in chennai, website designer in chennai, portal developing firm chennai SEO and SEM solutions
Chennai, Tamil Nadu IN
Easy Low-Cost Web Site Solutions. ANY web site, quick and fast! Turn your dream into reality today! I''M THE HOUSE M.D. OF WEB DESIGN AND DEVELOPMENT.
Rancho Cucamonga, California US
Spectrum Nashville is committed to providing reasonable, excellent business technology solutions that simply work.
Franklin, Tennessee US
Let Hamilton Arts assist you with your web design needs. We can assure you that our design will not only impress but also work within your budget.
Mesa, Arizona US
Google Adds Pagination Tools to its Bag of Indexing Tricks
The Google Webmaster blog has posted an overview of how to use the often overlooked HTML link elemen
Worst Website Ever II: The Brother IntelliFax 2800 App Store
Probably the funniest thing to come out of this year’s SXSWi conference, the second “Wor
The Current State of Responsive Images
The BostonGlobe.com on mobile, tablet and laptop screens We’ve looked at several different wa
Google Easter Egg Brings a White Christmas to Your Web Browser
Google's latest Easter egg brings snow and frost to its search results page. Just type "let it snow"
YouTube Begins Serving Up Native WebM Video
YouTube has announced it will begin offering HTML5 videos in the WebM codec to web browsers that sup
Article Tags
PHP Programmers Articles
Live Help Chat Software
Web Design Quote
Web Design