Может ли таблица стилей для портативных устройств пропускать загрузку изображений?

Question

У меня есть таблица стилей для настольных компьютеров и еще одна для портативных компьютеров.Веб-страница отображает некоторые изображения при отображении на рабочем столе, но скрывает эти изображения при отображении на портативных устройствах.Страница выглядит так, как предназначена как для настольных компьютеров, так и для портативных устройств.

Когда я проверяю журналы сервера, я обнаруживаю, что контроллер на самом деле все еще загружает изображения, но не отображает их.Есть ли способ запретить карманному компьютеру полностью загружать изображения, поскольку они ему не нужны, без необходимости поддерживать два набора веб-страниц?Можно ли это сделать, используя только таблицы стилей?

Заранее спасибо.

Рэй Монд

Answer 1

Включите изображения, которые вы не хотите отображать на мобильных устройствах, в качестве фонового изображения.В таблице стилей браузера вы можете использовать

.element { 
    background: #FFF url('image.png') no-repeat left top; /* or whatever */
}

в то время как в портативной таблице стилей вы просто не устанавливаете фоновое изображение, поэтому, в зависимости от конкретного использования, вы можете использовать

.element {
    display: none;
}

или

.element { 
    background: #FFF;
}

Однако удалить изображения, добавленные вами, будет невозможно. <img src="" /> впоследствии с помощью правил CSS (просто display: none и т. д., но это, как вы заметили, не помешает им загрузиться).

Answer 2

Отправьте таблицу стилей для каждого HTTP-заголовка до разметка:

Link: <compact.css>; rel="stylesheet"; media="handheld"

Тогда самый используемый портативный браузер — Opera — не будет загружать изображения.Однако WebKit (Safari) по-прежнему поддерживает — даже фоновые изображения для скрытых элементов!