Pode uma folha de estilo para os compatíveis com imagens de carregamento

Question

Eu tenho uma folha de estilo para desktops e outra para os computadores de mão. A página da web exibe algumas imagens quando exibida na área de trabalho, mas esconde essas imagens quando exibidas nos computadores. A página aparece como projetada para desktops e computadores de mão.

Quando verifico os logs do servidor, acho que o computador de mão ainda está carregando as imagens, mas não as exibindo. Existe uma maneira de impedir que o computador de mão carregue completamente as imagens, pois não precisa delas, sem ter que manter dois conjuntos de páginas da web? Pode ser feito usando apenas folhas de estilo?

Desde já, obrigado.

Ray Mond

Answer 1

Inclua as imagens que você não deseja exibir nos dispositivos móveis como imagem de fundo. Na folha de estilo do navegador, você pode usar

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

Enquanto estava na folha de estilo de mão, você simplesmente não define uma imagem de fundo, então, dependendo do uso exato, você pode usar

.element {
    display: none;
}

ou

.element { 
    background: #FFF;
}

No entanto, não será possível remover as imagens que você inclua com <img src="" /> depois através das regras do CSS (apenas display: none etc, mas isso não os impediria de carregar, como você notou).

Answer 2

Envie sua folha de estilo por cabeçalho HTTP antes da a marcação:

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

Em seguida, o navegador portátil mais usado - Opera - não carrega as imagens. Webkit (Safari) ainda faz, no entanto - até imagens de fundo para elementos ocultos!