Search code examples
cssinternet-exploreriwebkit

iWebkit CSS for IE 9 and older


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/


Solution

  • 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 */