Drop Shadow su internet explorer

[Andrew_88]

Ciao ragazzi, ho scritto questo codepen e vorrei avere un chiarimento da parte vostra. Ho un div con due pseudoelementi che formano delle frecce. Ho necessità di utilizzare il drop-shadow per evidenziare lo stato corrente di un wizard. Su tutti i browser il filtro funziona, su Internet Explorer 11 no. Avete delle soluzioni o suggerimenti?

Codepen: https://codepen.io/andy_888/pen/bGdKxjv

[KillerWorm]

Ciao, mi pare che IE11 non supporti in alcun modo i filtri CSS e le funzioni progid:DXImageTransform.Microsoft che erano disponibili fino, forse, a IE9.

Ad oggi personalmente non andrei a cercare sistemi per la retrocompatibilità di browser ormai datati, a meno che non ti serva includere specificatamente, nel tuo target di utenza, anche quella minima percentuale che ne fa uso.

In tal caso dovresti fare a meno di usare CSS non supportato da tali browser, o usare un qualche fallback (come più omeno stavi facendo, ma senza successo) per arrivare comunque ad un compromesso accettabile, anche se il risultato visivo dovesse risultare lontanamente simile o anche del tutto differente da quello impostato e ottenuto per i moderni browser.

Da quel che ho trovato in giro, potresti usare questo piccolo hack per applicare delle regole specifiche nel caso di IE10-11:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {...}

A questo punto potrai applicare delle regole specifiche che rendano in qualche modo evidenziato il tuo elemento "current" senza usare i filtri.

Valuta tu come meglio pensi di impostare la cosa (potrebbe essere un semplice cambio di colore del testo o dello sfondo).
Se vuoi restare sull'effetto ombra, un buon compromesso si potrebbe ottenere usando un po' di inventiva con la proprietà box-shadow (supportata chiaramente anche da IE11).

Qui giusto un esempio del CSS:

.container {
   padding: 10px 20px;
   display:flex;
}

div.arrow {
   width: 261.5px;
   height: 50px;
   background-color: #d3d3d3;
   border-color: #d3d3d3;
   position: relative;
   margin-right:30px;
   text-align: center;
   line-height: 50px;
}

.current {
   filter: drop-shadow(2px 3px 7px grey);
}

div.arrow::after ,
div.arrow::before {
   content: "";
   position: absolute;
   top: 0;
   border: 0 solid;
   border-width: 25px 10px;
   width: 0;
   height: 0;
}

div.arrow::after {
   left: 100%;
   border-color: transparent;
   border-left-color: inherit;
}

div.arrow::before {
   left: -20px;
   border-color: inherit;
   border-left-color: transparent;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10-11 hack */
   .current {
      box-shadow: -18px 3px 14px 2px #b5b5b5, 6px 3px 14px 2px #b5b5b5;
   }
}

Ho ottimizzato un po' anche le altre regole ma l'ultima parte è quella che fa il lavoro.

Vedi se per te può essere una soluzione valida.
Fai sapere, buon proseguimento