IE posts

IE 10 and CSS Grid Layout

in

IE 10 has recently graduated from beta and is now the current official release. It started out Windows 8 only, but now is available on 7 as well as a preview release. Hopefully that will allow it to grab more IE users quickly. IE, which has long been the bane of web developers, has been getting better and better with each release. IE 6 has always been a pain to develop for, having many bugs/quirks in rendering pages. In all but fairly simple sites, it always took me a fair amount of time to fix after getting things looking right in other browsers. Luckily, the market share is low enough that at work we don’t even worry about it anymore. IE 7 was better. Using a subset of HTML4/CSS2 level development, I usually have had to do only minor tweaks unless the sites were fairly complex. Luckily, It’s share is almost to the cutoff point where we stop developing for it as well. With IE 8, I’ve been able to do most HTML4/CSS2 level stuff without worries. display: inline-block;, :before, :after, onhashchange, etc. It still remains a limiter in using some selectors and in making use of HTML5/CSS3 level techniques, though using an HTML5 shiv and CSS3 PIE or allowing for progressive enhancement to skip over some features in it works rather well. IE 9 has brought some HTML5/CSS3 stuff to the table, like selectors, HTML5 semantic elements, SVG, though it’s missing some important ones, like CSS3 columns and HTML5 form stuff. Since I develop to support IE 8 usually without browser specific tweaks, IE 9 basically works automatically, and has some style enhancements over 8.

And now there’s IE 10. IE 10 has added a lot more and is finally coming close to other browsers in implementing the not-yet-fully-standardized standards. It’s still missing some good ones, but the list of things that have to be skipped, worked around, etc, for IE’s current version has shrunk a good bit. It even implements some features that others haven’t yet.

The big one is the CSS3 grid layout module, which is the one I’m most excited about for the future. This module is pretty close to allowing for a real decoupling of markup from style that CSS has promised finally for page layout.

Continue reading post "IE 10 and CSS Grid Layout"

CSS: IE Shadows and Rounded Corners With HTC

in

[Update Synopsis] I’ve improved color support, now working for hex, rgb, and rgba at the beginning or end, re-added Nick’s text-shadow support while giving it the same color support as box-shadow, and added an -ms- prefix to target IE for these properties with. I’ve made a simple example page and you can find the file for download in this Google Groups thread. [/Update]

At Cogneato we use a lot of drop-shadows on elements in our designs, and a number of sites use rounded corners as well. In the past, images had to be used for shadows and rounded corners, using a variety of techniques and often adding to page weight and requiring new images be made for site changes. But CSS 2 and 3 introduced properties text-shadow, box-shadow, and border-radius to handle these display niceties without images. These have slowly gained support among browsers, and now, with vendor specific versions, are supported by the most used non-IE browsers. But IE still offers no support for them up to version 8.

HTC’s (basically javascript that can be attached to CSS selectors in IE) have been used to handle a number of IE issues, and Remiz Rahnas created one to support these CSS properties. It has been updated by Nick Fetchak and moved to Google Code. It allows you to add behavior: url('ie-css3.htc'); to any elements with those properties and the properties are automatically applied in IE. It works rather well, though it does still have some issues. For instance, on sites with fading and other animations like the one I started using this on at Cogneato, the shadows don’t fade or move with the rest of the content.

Another issue I had with the script is its handling of the color attributes of the box-shadow property. If you place the color attribute before the unit declarations like I do (ie box-shadow: #123456 5px 5px 5px;), the htc doesn’t work at all. This was easy to change in the htc to get working. It uses regex, so I just removed the ^ character, which denotes the beginning of a string, so the regex could be matched anywhere in the property.

It also happens that the htc doesn’t support color for shadows.

Continue reading post "CSS: IE Shadows and Rounded Corners With HTC"

My New Computer

in

I had never owned a Windows or X86 computer (though I did borrow one from school for a number of months), yet it is very important, as a web developer, to test in IE. IE is of course discontinued for Mac, and has been for 10 years or something like that. IE happens to be the hardest browser to develop for, especially the dreaded IE6, and it (IE in general) still has the market share, so it is very important to test for. I recently got a job and some actual income, so I decided to buy something.

I’ve been considering getting a netbook for a while now to fill my IE needs. It would be relatively cheap, and would be awesome to have a tiny computer to easily carry around. I carry my iBook around a lot, but it’s big and heavy and I have to think if I really want it. The netbook I’d not really have to worry about so much.

I did a lot of research and looking into netbooks. I wanted a touchscreen one with good handwriting recognition, but the current attempts aren’t fully to my satisfaction. There are some new models expected to come out at some point, who knows when. So I could buy a cheap one use it for a reasonable amount of time, when better touchscreen netbooks are out, sell my cheap netbook. I’ve never really been a fan of frequent computer purchases, but I could try it. I could also buy one of the current touchscreen ones and hope it’s good enough for my needs.

At my job, though, I use a mac with Windows installed virtually with Parallels. It provides a fairly good workflow for testing, since I can test many browsers and code all on the same computer. There are a few issues, but for the most part I’ve liked it. So I got to thinking that I could perhaps upgrade my main computer rather than get an extra one. I could get a Macbook and Parallels and Windows. That would be pricy, but I’d have a much more powerful computer, only one to deal with, and possibly better workflow.

Continue reading post "My New Computer"

Stearns: Internet Explorer workarounds

in

We’ve had to do a bit of work to get our site working properly in IE, mostly version 6. I’ve recently started using a conditional stylesheet just for IE6 on my own site, like:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url')?>/styleIE6.css" />
<![endif]-->

and we did the same for Stearns.

Box Model

One issue we dealt with for IE6 in the conditional stylesheet was box model issues. IE6 handles margins, padding, and borders differently than other browsers, so we compensated for this in some places. One big issue was with our floated columns: The third would float below the second on some wide pages.

Continue reading post "Stearns: Internet Explorer workarounds"