La proprietà CSS rispecchia la compatibilità?

Question

Esiste una proprietà simile a -webkit-box-reflect per Mozilla e altri browser? Non sono riuscito a trovare su Google quali altri browser hanno il supporto per questo. Quindi se qualcuno può dirmi o darmi un collegamento, sarebbe davvero bello.

Answer 1

Questo è possibile con non solo webkit (ultimo chrome o safari) ma anche in ultima firefox.

Ecco l'esempio: http://codepen.io/jonathan/pen/pgioE

HTML:

<div id="someid"> 
    <img src="image url" /> 
<div/> 

CSS (WebKit):

#someid { 
     /* need some space for the reflection */ 
     margin-bottom: 120px; 
     /* the gradient makes the reflection fade out */ 
     -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%); 
} 

CSS (Firefox - Gecko):

#someid { 
     position: relative; 
     /* need some space for the reflection */ 
     margin-bottom: 120px; 
} 

#someid:before { 
     content:""; /* needed or nothing will be shown */ 
     background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, -moz-element(#someid) 0px -127px no-repeat; 
     -moz-transform: scaleY(-1); /* flip the image vertically */ 
     position:relative; 
     height:140px; 
     width: 360px; /* should be > image width + margin + shadow */ 
     top: 247px; 
     left:0px; 
} 

Firefox utilizza -moz-element per eseguire le riflessioni (https://developer.mozilla.org/en-US/docs/CSS/element), mentre il webkit utilizza un prefisso del fornitore proprietario per le riflessioni.

Spero che questo aiuti!

Answer 2

La proprietà -webkit-box-reflect è supportata solo dai browser Webkit, ovvero Chrome e Safari. Poiché si tratta di una proprietà proprietaria del webkit, non esiste un equivalente per altri browser.

L'alternativa sarebbe utilizzare javascript per creare un elemento a specchio con opacità sfumata.