CSS. Как подружить Webkit с FireFox?

[Fesali]

Здравствуйте.  Имею очень красивый текстовый эфект блика CSS скачаный с гугла. Работает на всём кроме FireFox, уже добавлял префиксы -moz- ничего неполучается. Может кто подскажет как поправить код чтоб заработало в Фаерфоксе& Код CSS ниже, пожалуйста кто понимает подскажите, буду очень признателен!  

.shine
{
    background: #222 -webkit-gradient(linear, left top, right top, from(#222), to(#222), color-stop(0.5, #fff)) 0 0 no-repeat;
    -webkit-background-size: 125px;
    
    color: rgba(255, 255, 255, 0.1);
    -webkit-background-clip: text;
    
    -webkit-animation-name: shine;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes shine
{
    0%
    {
        background-position: top left;
    }
    100%
    {
        background-position: top right;
    }

пожалуйста кто понимает подскажите, как подружить с FireFox? 

Edited September 6, 2016 by Fesali

[Igor Schnaider]

-webkit-background-clip: text;

Так это чисто вебкитовая тема. Поэтому и не работает в лисе. И в ие не будет.

Можно через @supports проверять и фолбэчить на solid color, например:

h1 {
  color: orangered;
}

@supports (-webkit-background-clip: text) {
  h1 {
    color: transparent;
    background-image: linear-gradient(0deg, red, gold);
    -webkit-background-clip: text;
  }
}

 

[jdk]

А если -moz попробовать?

[SelenIT]

Забудьте про -moz! Не тревожьте покой мертвеца. Те редкие случаи, когда он нужен (в основном шаманства с формами, типа пресловутого ::-moz-focus-inner) обычно уже учтены во всяких ресетах-нормалайзах и трогать их руками не нужно. И вообще эпоха префиксов прошла года три назад, сейчас эпоха флагов (надолго ли — другой вопрос). Сейчас, чтоб что-то заработало, надо не добавлять префиксы, а убирать их (как минимум — дублировать -webkit-вариант беспрефиксным аналогом).

Кстати, как раз беспрефиксный вариант бедняге Фоксу всё-таки пришлось с 49-й версии поддержать. Так что если делать не «для вебкитов» и «для фокса», а для браузеров (т.е. не с -moz/-shmoz, а вообще без префиксов — и для @keyframes, что важно, тоже!), то через пару месяцев должно волшебным образом заработать. А пока есть стандартный альтернативный вариант (как минимум для белого/черного фона).