При разработке сайта возникла необходимость поставить одному из элементов фоновый градиент.
Прописываю в css следующий код:
background: #e8e3d5 url(../img/submenu_gradient.png) top repeat-x;
background: -moz-linear-gradient(top, #fff,#e8e3d5);
background: -webkit-gradient(linear,0 50%,0 100%,from(#fff),to(#e8e3d5));
Этот код делает ровно то, что от него требуется: в мозилле и сафари он рисует правильный градиент средствами самого браузера, остальным же ставит на фон картинку. Но меня немного смущает, что правило, идущее первым, всё равно обрабатывается всеми браузерами, и эту картинку загружают в том числе и мозилла и сафари, которым она просто не нужна. Как лучше сделать, чтобы правильные браузеры игнорировали это правило и картинку не грузили?
Примечание:
L.Ar'e, так условные комментарии работают только для браузеров от Microsoft. Для других всё намного хитрее. То есть, вы предлагаете прописать стили явно для каждого браузера без умолчаний?
Примечание:
Franchesko, обратите внимание:
1) любая картинка — это плюс одно лишнее http-соединение с сервером. Ненужная нагрузка.;
2) даже в 1px картинка будет весить больше, чем три-четыре строки кода css;
3) чем больше раз необходимо произвести отображение картинки (а в случае с шириной 1px это как правило сотни раз), тем больше нагрузка на браузер. IE так вообще подвисает на подобных задачах. Проведите эксперимент: замостите картинкой в 1px*1px всё рабочее пространство окна браузера. Подождите, пока браузер это отобразит. Посмотрите на индикатор загрузки процессора (слабонервным не смотреть!), в случае IE сходите, попейте чаю. Не за этим приходит посетитель на сайт;
4) вопрос был поставлен так, цитирую: «Как лучше сделать, чтобы правильные браузеры игнорировали это правило и картинку не грузили?». Это означает, что не устраивает ситуация, когда загружается картинка лишний раз. Это ощначает, что ищется способ полностью отказаться от загрузки ненужного контента. Это означает поиск решения в целях оптимизации производительности. Ответ «откажись от оптимизации» не является правильным ответом на данный вопрос.
Примечание:
k_max, но всё же это уже не решение средствами css.
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.