CSS -Moz-Available Equivalent in Webkit

Equivalent of Chrome CSS display: -webkit-box on other browser

display: box; is 2009 flexbox spec...

See here: Flexible box model - display : flex, box, flexbox?

What's the equivalent -webkit-gradient of this CSS?

Here you go. -webkit-gradient was only used in Chrome 4-9 and Safari 4-5. I'm surprised that it's still supported in the Safari 9:

background:
    -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(224,224,224,1)), color-stop(10%, rgba(224,224,224,1)), color-stop(11%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0))),
    -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(249,252,246,1)), color-stop(100%, rgba(187,230,191,1)));

Demo

Try before buy

IE equivalent to -webkit-appearance?

By simply Googling "CSS appearance MDN" we get

Feature         Chrome   Edge         Firefox (Gecko)    Internet Explorer  Opera   Safari (WebKit)  
Basic support   1.0      (Yes)  1.0   (1.7 or earlier)   No support         ?       3.0
                -webkit               -moz[1]                                       -webkit

You can easily conclude that there is no even basic support in Internet Explorer for such property.

Considering that IE has been outdated by Edge, there is no reason to believe that there appearance will ever be supported.

Also appearance has been dropped, as today, from future CSS specifications.

webkit-clip-path:inset equivalent in Firefox

If your concern is browser support, I would suggest a different approach for the same output : using height rather than clip-path.

This will provide browser support for (at least) chrome, Firefox, IE, safari, opera... :

function UpdateImage(id) {    image_elem = document.getElementById(id);    layers = image_elem.getElementsByClassName("layer");    range = 100 - document.getElementById("range1").value;    layers[1].setAttribute("style", "height:" + range + "%");}

.frame {    position:relative;    width: 375px;    height: 250px;}.frame .layer {    position:absolute;    bottom:0;    width: inherit;    height: inherit;    background-size: 100% auto;    background-position: left bottom;}#image1 .layer:nth-child(1) {    background-image:url("http://rlc.site90.net/images/img1_layer0.jpg");}#image1 .layer:nth-child(2) {    background-image:url("http://rlc.site90.net/images/img1_layer1.jpg");}#range1 {    width:375px;}

<div id="image1" class="frame">    <div class="layer"></div>    <div class="layer"></div></div><input id="range1" type="range" value=0 max=100 oninput="UpdateImage('image1');"/>

Tool to process CSS file converting unsupported styles to web-kit equivalent?

Are you looking for http://lesscss.org/?

The dynamic stylesheet language.
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.
LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

[EDIT]

After answering, i found this website http://prefixr.com/index.php where they use a script to reformat css declarations. Maybe you could study this one.

Does WebKit have an equivalent for the CSS pseudo-class -moz-drag-over?

I haven't found the equivelant (YET) but you can use javascript dragging properties to get some control of a drag-over action.

This shows how to do it using JavaScript. However, this article presents a cross-browser solution (also, JS) that faces the issue and acts as a common denominator.

---

Related Topics