Использование CSS градиента вместо изображений - PullRequest
Новая
       4

Использование CSS градиента вместо изображений

4 голосов
/ 25 марта 2010

Использование CSS для создания градиентов вместо изображений, имеет ли он какой-либо негатив?

Например, следующий код: 

 #gradient {
  color: #fff;
  height: 100px;
  padding: 10px;
  /* For WebKit (Safari, Google Chrome etc) */
  background: -webkit-gradient(linear, left top, left bottom, from(#00f), to(#fff));
  /* For Mozilla/Gecko (Firefox etc) */
  background: -moz-linear-gradient(top, #00f, #fff);
  /* For Internet Explorer 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF);
  /* For Internet Explorer 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)";
 }

Спасибо.

Ответы [ 3 ]

2 голосов
/ 25 марта 2010

Градиенты еще не стандартизированы, и многие браузеры не поддерживают его, в вашем примере -moz-linear-gradient работает в Firefox 3.6, но в более старой версии - нет. Если ваш сайт предназначен для общедоступных целей, многие люди не увидят ваши градиенты, поэтому вы можете проверить, какую версию браузера они используют, и использовать градиенты или изображения на основе этого. Я использую градиенты на сайте интрасети (где я могу заставить пользователей использовать определенный браузер). Если браузер, если не Firefox 3.6 или выше, на сайте будет отображаться только сообщение, которое говорит пользователю об обновлении, но это не очень хорошо Кстати, если вы выходите на публику.

Так что я выбираю негатив для публичных сайтов. :)

0 голосов
/ 24 января 2012

CSS-градиенты используются на многих крупных веб-сайтах, используя используемые вами запасные варианты. Я бы тоже добавил PIE.htc. Если вы используете PIE, помните, что он должен быть абсолютно или относительно позиционирован, чтобы появиться.

Если вам нужно поддерживать действительно старые браузеры, лучше всего придать им запасной сплошной фоновый цвет.

Глупо ожидать, что старые браузеры вообще будут отображать градиенты. Если вам абсолютно необходимо, вы можете настроить условно загруженную таблицу стилей: 

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="http://mysite/css/ie7_hacks.css" /><![endif]-->

Там вы можете объявить повторяющийся градиент на основе изображения. Так же, как это было до CSS3.

Делая так, вы делаете свой сайт немного быстрее для современных веб-браузеров.

0 голосов
/ 25 марта 2010

Как вы показали в своем примере, в настоящее время нет единого способа сделать это, который бы работал во всех широко используемых браузерах. Я бы посчитал это «отрицательным» для обслуживания и читабельности кода.

Немного конструктивной критики: вы ищете слово "вместо", а не "мгновенно".

...