CSS, XHTML, Web Standards, Tableless, Estatísticas, SEO, Wordpress | marcio misumi » Web Standard

Image Replacement com CSS

Marcio Misumi — Mon, 14 Dec 2009 02:29:09 +0000

Image replacement é uma técnica CSS que pode ser traduzido para “Substituição por imagem”, isto signfica que no documento (X)HTML você irá encontrar o texto, porém visualmente esse texto será substituído por imagem. Essa técnica é muito importante por questão de acessibilidade, isso porque se o texto simplesmente for inserido ao documento utilizando o elemento IMG e alguém utilizar um leitor de tela não conseguirá ler o que está escrito.

Normalmente utilizamos essa técnica para escrever um texto, que utiliza uma fonte que não é de sistema, usando imagem. Vale utilizar o bom senso e não utilizar o image replacement para todos os textos do seu documento.

Essa técnica que vamos aprender consiste em deslocar o texto da área visual do usuário. Vamos utilizar o logo deste blog para exemplificar a técinica de image replacement:

Estrutura HTML:


marcio misumi

Formatação CSS:

h1 {
	display: block;
	text-indent: -500000em;
	background: url(logo.png) 0 0 no-repeat;
	height: 139px;
	width: 345px;
}
h1 a {
	display: block;
	height: 139px;
	width: 345px;
	overflow: hidden;
}

O que faz o texto se deslocar da área visual é a propriedade text-indent com valor negativo. Como background nós utilizamos a imagem que nós queremos que substitua o texto. É importante também definir as dimensões (width e height) da imagem utilzada.

Aqui podemos visualizar o exemplo mostrado anteriormente da técnica de image replacement. Desabilite o CSS ou veja o código fonte para ver o texto.

PNG Transparente no IE6 com background position e repeat

Marcio Misumi — Wed, 23 Sep 2009 01:21:47 +0000

Em outubro de 2008 eu postei um tutorial explicando como corrigir o problema do PNG no Internet Explorer 6.0, porém a solução que eu mostrei não era possível utilizar background position e repeat. A algum tempo encontrei um JavaScript que corrigia este problema, mas antes de publicar um tutorial eu preferi testa-lo em alguns sites para ter certeza que funcionava legal.

Como aplicar a correção para o PNG Transparente no IE6

Primeiro você deve salvar o arquivo iepngfix.htc. Procure deixar este arquivo no mesmo diretório do arquivo CSS.

No arquivo iepngfix.htc existe uma variável “IEPNGFix.blankImg” que referencia uma imagem. O caminho (path) desta imagem é em relação ao arquivo HTML. Esta imagem pode ser salva como blank.gif, deve ser transparente e ter as dimensões de 1×1.

...
IEPNGFix.blankImg = 'images/bground/blank.gif';
...

Para utilizar PNG transparente utilizando a tag img diretamente no HTML é necessário utilizar o seguinte código CSS:

img {
	behavior: url("css/iepngfix.htc");
}

Qualquer seletor/propriedade que tiver imagem PNG transparente deverá ser adicionado no código acima, separado por vírgula.

img, div.conteudo, h1, h2, input {
	behavior: url("css/iepngfix.htc");
}

OBS: O caminho (path) para o arquivo iepngfix.htc é em relação ao arquivo HTML.

Agora para que o background position e repeat funcione, nós precisamos do arquivo iepngfix.js. Vamos fazer a chamada deste arquivo dentro da tag do html utilizando a condicional para que somente o IE6 faça a requisição deste arquivo, evitando assim que todos os navegadores façam o download deste arquivo desnecessariamente.

...



...

Para links com o fundo transparente, no primeiro tutorial que postei, mostrava que era necessário definir no css os links com posição relativa. Isso não é mais necessário porque este JavaScript que nós utilizamos corrige este problema.

Problema encontrado

Depois de fazer diversos testes antes de criar esse tutorial, eu descobri um problema com esse JavaScript. Se por acaso você tiver uma funcionalidade em teu site que seja necessário colocar display: none; em algum elemento e depois ao clicar em algum botão este elemento passa para display: block; e justamente ele tiver um PNG transparente, essa imagem não receberá o filtro que deixa transparente no IE6.

Exemplos das soluções demonstradas neste tutorial

OBS: Não esqueçam de visualizarem os exemplos acima no IE6.

Esta solução foi desenvolvida por http://www.twinhelix.com

Deixem seus comentários.
Abraço.

Tag ^{com underline no IE}

Marcio Misumi — Tue, 28 Apr 2009 03:08:40 +0000

A tag ^{(superscrito) ao ser utilizada com underline não funciona corretamente no Internet Explorer. É possível corrigir este problema com CSS.}

Antes de apresentar a solução vamos visualizar o problema gerado no Internet Explorer:

" />

Para solucionar este problema do underline no Internet Explorer nós precisamos utilizar o seguinte CSS:

a sup {
    border-bottom: 1px solid #000;
    padding-bottom: 3px;
    font-size: 93%;
    text-decoration: none;
}
Marcio Misumi^®

A propriedade “font-size” pode ser alterada conforme a sua necessidade. Se o valor dessa propriedade for alterada, provavelmente será necessário modificar o valor da propriedade “padding-bottom”. A cor da propriedade border-bottom pode ser alterada também conforme a necessidade.

Uma sugestão é fazer esta correção utilizando hack para o Internet Explorer.

Espero ter ajudado.
Qualquer dúvida deixem comentários.

Hack asterisco utilizado para o IE6 e IE7 tambem é entendido pelo Google Chrome

Marcio Misumi — Wed, 11 Feb 2009 10:44:55 +0000

O hack asterisco consiste em colocar um sinal de asterisco (*) antes do seletor e funciona nas versões a partir do IE5.0 até IE7.

Normalmente utilizamos este hack quando precisamos corrigir um mesmo problema ocasionado no IE6 e no IE7.

Um dia precisei deste hack e como de costume fui testar a alteração feita no Firefox 2 e 3, Internet Explorer 6 e 7, Opera, Safari e Google Chrome. Para a minha surpresa descobri que o Google Chrome também entende este hack, portanto evitem a sua utilização.

Exemplo:
*div {margin-left: 10px;} /* para IE5.x, IE6 e IE7 */

PNG Transparente no IE6

Marcio Misumi — Mon, 13 Oct 2008 02:26:39 +0000

A seguir vamos aprender como utilizar png transparente utilizando a tag img diretamente no HTML ou inserindo em background no CSS.

Usar png transparente na tag img diretamente no HTML

Primeiro você deve salvar o arquivo png.htc. Procure deixar este arquivo no mesmo diretório do arquivo CSS.

No arquivo png.htc existe uma variável “blankSrc” que referencia uma imagem. O caminho (path) desta imagem é em relação ao arquivo HTML. Esta imagem pode ser salva como blank.gif, deve ser transparente e ter as dimensões de 1×1.

...
var blankSrc = "images/background/blank.gif";
...

Agora você precisa colocar em seu código CSS:

img {
	behavior: url("css/png.htc");
}

OBS: O caminho (path) para a URL também é em relação ao arquivo HTML.

Usar png transparente como background no CSS

Para usar png transparente como background no CSS é necessário utilizar o seguinte código:

div#conteudo {
      height: 420px;
      width: 500px;
      background-image: url(images/imagem-transparente.png) !important;
      background-image: none;
      filter: none !important;
      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,sizingMethod=crop src=’images/imagem-transparente.png’);
}

OBS: No filtro, o caminho (path) para a URL da imagem é em relação ao arquivo HTML.

A propriedade sizingMethod pode ser crop, scale ou image. O mais usado é o scale, pois ele não "cropa" (corta) a imagem.

crop – Corta a imagem para adaptar as dimensões do objeto;
scale – Estica ou encolhe a imagem para preencher as bordas do objeto;
image – Default. Aumenta ou diminui a borda do objeto para ajustar as dimensões da imagem.

Links com fundo transparente

Ao utilizar imagem png como background, o Internet Explorer 6.0 passa a interpretar os links como uma camada abaixo do background, de forma que o mouse não os alcance. Para solucionar este problema e tornar clicáveis os links é necessário definí-los no CSS com posição relativa.

div#conteudo a {
	position: relative;
}

Web Standards

Marcio Misumi — Fri, 23 May 2008 16:17:19 +0000

Web Standards pode ser traduzido como Normas para Web, tem por objetivo a criação de uma Web Universal.

Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e
destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos,
independentemente dos dispositivos usados ou de suas necessidades especiais.

Fonte: Wikipédia, a enciclopédia livre.
http://pt.wikipedia.org/wiki/Web_standards

Link relacionado:
http://www.maujor.com/w3ctuto/faqwsp.html