iWebkit CSS for IE 9 and older

Question

iWebkit is written primarily to work with Chrome and Safari as far as I know. Now I am using the iwebkit in a website (for desktop screens), and I want it to be compatible with both Firefox and IE 9 (and older).

Now I found the webkit stylesheet for firefox, but I cannot get one for IE, and since IE CSS styling differs a lot from chrome and firefox, editing the firefox stylesheet for IE might just take a lot of time and effort( and also, there are some styles in the firefox webkit css file that are not supported by IE, such as border-image), so it is not that I'm just lazy.

So I would basically like to know if there is such a stylesheet for IE, and if not, customizing each of the firefox/chrome/safari css properties and styles for IE might be a very painstaking task, since those properties differ a lot between IE and firefox, chrome/safari.

Any suggestions on what I should do to get this iWebkit stylesheet working on IE6-10?

Here is the link to the Firefox iWebkit stylesheet I was talking about: http://svn.trynull.com/iwebkitmozilla/tags/

ok updated my question, please unmark the downvote if I corrected the reason for the downvote. thanks — DextrousDave, May 15 '12 at 18:57
Why would you choose to use iWebKit in the first place if you need IE6+ support? — thirtydot, May 21 '12 at 08:55
You're not listening @DextrousDave there is no such thing as iWebkit for IE. It's a shame you've wasted 50 rep for this :| — sg3s, May 22 '12 at 06:34

score 1 · Accepted Answer · answered May 17 '12 at 16:50

You can go to http://colorzilla.com/gradient-editor/, and just plug in the iWebkit or Mozilla styles into the editor and it will spit out the IE equivalent. As for other styles such as -webkit-border-image, you can just w3school search them and see if an IE equivalent exists. (border-image would be the equiv in this case...) An example from Mozilla:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdd5df), color-stop
(0%,#6d84a2), color-stop(99%,#6d84a2));

IE

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdd5df',   
endColorstr='#6d84a2',GradientType=0 ); /* IE6-8 */

That link you sent me is very helpful, especially with regards to transforming some of those linear gradients to IE. This is an amazingly helpful website. Any web developer should have this as a bookmark...thanks! — DextrousDave, May 17 '12 at 16:53

score 0 · Answer 2 · answered May 17 '12 at 03:21

You could probably use a Chrome Frame. https://developers.google.com/chrome/chrome-frame/

Beyond that, iWebKit works on chrome and safari because they are WebKit based browsers. (Thus the name) The CSS uses a lot of vendor specific prefixes.

Things like this:

#leftnav a
{
    -webkit-border-image:url("../images/navlinkleft.png") 0 5px 0 13px;
    z-index:3;
    margin-left:-4px;
    padding-right:4px;
    -webkit-border-top-left-radius:16px;
    -webkit-border-bottom-left-radius:16px;
    -webkit-border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    float:left;
    border-width:0 5px 0 13px;
}

will not ever run natively on IE. You could significantly rewrite the code (not even just the css, again, browser specific features), but why would you want an iOS interface in IE to begin with?

Thank you for your answer, but I have the safari, chrome and firefox part covered of this. I went and manually changed the stylesheet to work in IE, took me a while, but it works. So it has an iOS like appearance within IE. I am developing a mobile site, and I want to incorporate the mobile look and feel into the main website...that is why I want the webkit style to work with IE — DextrousDave, May 17 '12 at 16:32
Hi DextrousDave, do you mind sharing the changes you've made to make it IE and firefox compatible? That would be much appreciated. — kos, Mar 07 '15 at 20:29

iWebkit CSS for IE 9 and older

2 Answers2