CSS Future Proof Linear Gradient

Question

Mam następujący fragment kodu Online:

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)); 

który działa dobrze.

Nie jestem ekspertem od CSS, ale zauważam, że wszystkie są poprzedzone prefiksem. Czy warto dodać także wersję bez prefiksu? Co by to było?

Answer 1

Czy warto dodać także wersję bez prefiksu?

Tak, należy zawsze zapewnić nieprefiksowanego wersję dowolnym prefiksem kodu CSS używasz.

Co by to było?

W przypadku gradientów wersja, którą posiadasz, jest taka sama jak standardowa; po prostu upuść prefiks.

Należy zauważyć, że istniał również wcześniejszy wariant składni zestawu webkit dla gradientów, który możesz również określić, jeśli chcesz obsługiwać starsze przeglądarki przeglądarek internetowych.

Powinieneś również uwzględnić zwykłe kolorowe tło jako zabezpieczenie dla nieobsługiwanych przeglądarek.

W przypadku jakichkolwiek wątpliwości dotyczących takich kwestii należy skorzystać z witryn takich jak CanIUse lub MDN.

Jeśli chcesz uzyskać kompatybilność z wieloma przeglądarkami, możesz również zauważyć, że IE9 i wcześniejsze nie obsługują wcale gradientów CSS (z prefiksem lub bez). Powoduje to powrót do zwykłego koloru, ale jeśli chcesz gradientu, istnieją alternatywne rozwiązania (moją preferowaną opcją jest ogólnie CSS3Pie, ale istnieją czyste opcje CSS, jeśli wolisz, ale nie są one ładne).

Answer 2

Nieprefixowany standard W3C, nazywa się linear-gradient.

Answer 3

Zawsze używam Ultimate CSS Gradient Generator. Działa idealnie.

Twój przykład skutkowałoby:

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

dla przyszłych dowodu gradient liniowy wystarczy dodać na końcu istniejącego kodu to:

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

tak, gdy przeglądarek upuść poprzedzić nadal będzie mógł używać ogólnego kodu.