IE-friendly mobile-first CSS with Sass 3.2

Posted . Visible to the public.

Building CSS mobile-first is the way forward, because blah blah blah progressive enhancement blah. Problem is, Internet Explorer prior to 9 ignores anything within media query blocks, leaving those browsers with mobile styles.

Not all of us can get away with that, but thankfully, as Chris Eppstein points out, Sass 3.2 (not yet released) can generate a separate stylesheet with everything it needs to create a "desktop" look.

This page was built mobile-first where smaller width devices get a single column layout, but IE8 and below still get a two column layout.

jakearchibald.github.com
Henning Koch
makandra.de
Say thanks
License
Source code in this card is licensed under the MIT License.

Related cards:

Testing with IE6, IE7 and IE8 on VirtualBox | Shape Shed

I've recently moved from using Parallels for browser testing to Sun's Open Source VirtualBox. Here's a walkthrough on how to get a browser testing suite for free on OSX or Ubuntu.

How to use CSS to rotate text by 90° in IE8 (and modern IEs)

If you want to rotate text, you can use CSS transforms in somewhat modern browsers to rotate the container element.
However, if you need to support IE8, transform is unavailable (if need only IE9 support, ignore the following and use `-ms-transf...

About PIE – CSS3 PIE: CSS3 decorations for IE

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are d...

Styling and scaling for mobile devices

If you want your application to display properly on iPad, iPhone or Android there are two things to do:

Define a stylesheet for mobile devices

Using the media attribute on stylesheet HTML tags allows you to have a CSS for mobile browsers...

Different CSS for IE using Sass

At times, it might be unavoidable to have different CSS rules for Internet Explorer than for sane browsers. Using Sass, this can be achieved in a relatively non-hackish way without CSS hacks.

Step 1

Move your curr...

CSS: Opacity is not inherited in Internet Explorer

Non-static elements will not inherit their parent's opacity in IE for no good reason. This can lead to unexpected behaviour when you want to fade/hide an element and all its children.

To fix it, give the parent element defining the opacity a non-...

Generate CSS Sprites on the Fly with Lemonade

Lemonade’s goal as a sprite generator is to be incredible easy to use, so you’ll use ist for every project—just because there’s no overhead. It needs no configuration, no Rake task, no Photoshop, just a little change in your Sass or SCSS files.

CSS box-shadow not working in IE9 inside tables with collapsing borders

Though Internet Explorer 9 supports the box-shadow CSS property there is a nasty bug which sometimes prevents it from rendering the shadow properly.

Consider this HTML:

<table style="border-collapse: collapse">
  <tr>
    <td>
...

Here’s what we’ve learned about doing UI for mobile web apps with WebKit

Lately, we’ve been exploring ways to offer web apps that perform like native apps on mobile devices. For this short sprint we targeted mobile WebKit browsers—especially the default browsers on iOS and Android—because of their widespread use and ex...

Print-Friendly Images and Logos with CSS

The trick is this: send a low-resolution version of your image to the screen, and a high-resolution version to the printer.

Posted by Henning Koch to makandra dev (2012-06-04 09:33)
This website uses short-lived cookies to improve usability.
or learn more