Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Drop Shadow su internet explorer

    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

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,725
    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:
    codice:
    @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:

    codice:
    .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
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.