Os desenvolvedores familiarizados com CSS devem conhecer a tecnologia de substituição de imagens e seu significado. Dave Shea fez um resumo detalhado disso em um de seus artigos. Veja o excelente resumo de Dave Shea . , um novo método é proposto e denominado "Método do Estado". Este artigo apresentará detalhadamente o princípio deste método:
Desvantagens dos métodos existentes:
Novo método de substituição de imagem:
A nova tecnologia de substituição de imagem precisa ser implementada com a ajuda de js, mas é fácil de implementar. Você só precisa inserir um pequeno pedaço de js na cabeça. Depois que js for executado, ".image-on" será anexado à regra de resposta, desde que a imagem do cliente não esteja desabilitada, a regra entrará em vigor. A seguir está uma instrução aplicada ao "método de campo de status":
A primeira regra sempre entra em vigor, a segunda só entra em vigor quando a imagem não está desativada. "text-indent" desloca o texto para fora da tela. "overflow:hidden" é usado principalmente para colocar o ponto de ancoragem sob FF para que seu foco seja deslocado para fora da tela quando for clicado.
A segunda regra é encapsulada na tela @media e é usada principalmente para garantir que a substituição da imagem ocorra apenas no leitor de tela e não no estado de impressão. Se isso não for feito, quando a página for impressa, a maioria dos usuários verá uma grande lacuna em vez de um texto significativo.
A tecnologia é rápida de executar. Como o texto está deslocado da tela, a imagem pode conter elementos transparentes para que você não possa ver nenhum texto através da própria imagem. A execução do Js é muito rápida, quase instantânea, e aproveita ao máximo as características do próprio navegador.
Análise de método
O "método de campo de estado" é um método para fazer com que as regras CSS tenham efeito rapidamente em um estado assumido, com o fundo do contexto sendo o documento, evitando assim que o navegador atravesse a árvore DOM. Existem duas razões para aplicar a "abordagem do domínio estatal":
O "método de campo de estado" anexa uma classe ao html usando o script a seguir.
document.enableStateScope = function(scope, on)
{
var de = document.documentElement;
if (on)
de.className += " " + scope;
else
de.className = de.className.replace(
new RegExp(" \b " + scope + " \b "), "");
};
Há um pequeno problema com este js. A função de comutação não entra em vigor na página de exemplo. Eu revisei-o novamente.
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\s|^)'+cls+'(\s|$)'));
}
function addClass(ele,cls) {
if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\s|^)'+cls+'(\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}
document.enableStateScope = function(scope, on) {
var de = document.documentElement;
On ? addClass(de,scope) : removeClass(de,scope);
};
Os métodos hasClass, addClass e removeClass acima emprestam métodos fornecidos por "Pro JavaScript Techniques". Se você usou jquery, o método será mais simples.
O "campo de status" pode ser alterado através dos seguintes métodos:
if (condition == true) {
document.enableStateScope("myScope", true);
}
Se o "campo de estado" estiver "ativado", o nome do campo de estado será anexado ao seletor da regra. A regra a seguir mudará a cor da âncora para azul quando a condição for verdadeira.
a { color: red; }
.myScope a { color: blue; }
Como seria de esperar, a técnica de substituição de imagem no domínio do estado funciona verificando se a imagem está desativada. Se não estiver desabilitado, o campo de status “image-on” será ativado, o que é simples.
h1 {
largura: 100px;
altura: 50px;
}
@tela de mídia {
.imagens-on h1 {
recuo do texto: -10000px;
imagem de fundo: url(image.png);
estouro: oculto;
}
}