CSS Future Proof Sfumatura lineare

Question

Ho il seguente pezzo di codice in linea:

background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:  -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:  -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 

che funziona bene.

Ora non sono un esperto di CSS ma noto che tutti quelli sono prefissati. È consigliabile aggiungere anche una versione senza prefisso? Cosa sarebbe?

Answer 1

È consigliabile aggiungere anche una versione senza prefisso?

Sì, si dovrebbe sempre fornire la versione non-prefisso di qualsiasi codice CSS prefisso che si usa.

Cosa sarebbe?

In caso di gradienti, la versione che hai è la stessa della norma; basta rilasciare il prefisso.

Ma si noti anche che esiste una variante precedente della sintassi del webkit per le sfumature, che si potrebbe anche voler specificare se si desidera supportare i browser Webkit precedenti.

È inoltre necessario includere uno sfondo a tinta unita come riserva per i browser non supportati.

In caso di dubbi su queste cose, consultare siti come CanIUse o MDN.

Se si desidera ottenere una compatibilità cross-browser, si può anche notare che IE9 e precedenti non supportano affatto i gradienti CSS (con o senza prefisso). Il fallback di colore normale funzionerà, ma se si desidera un gradiente ci sono soluzioni alternative (la mia opzione preferita è in genere CSS3Pie, ma ci sono pure opzioni CSS se si preferisce, ma non sono belle).

Answer 2

Il nome standard prefisso W3C è linear-gradient.

Answer 3

Utilizzo sempre il Ultimate CSS Gradient Generator. Funziona perfettamente.

tuo esempio potrebbe comportare:

background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,0) 100%); 

Answer 4

Per prova di futuro la sfumatura lineare è sufficiente aggiungere alla fine del codice esistente questo:

background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 

come questo, quando i browser cadere il prefisso è sarà ancora in grado di utilizzare il codice generico.