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

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;
}

CSS – Media types

Marcio Misumi — Tue, 16 Sep 2008 03:07:52 +0000

Uma das principais funções do CSS é especificar como cada tipo de documento irá se comportar na presença de diferentes tipos de media. Determinadas propriedades só funcionam em conjunto com determinados tipos de media, exemplo cue-before só funciona em media aural.

Especificando media types:

1. É possível especificar um media type direto em um arquivo CSS, usando @media ou @import:

@import url('css-aural.css') aural;

@media print {
#footer { display: none; }
...
}

2. Outra maneira é colocar diretamente no meta tag:

Regras @media:

Pode-se usar @media para um ou mais tipos de media type separados com vírgula:

@media print {
#container { color: #fff; }
}

@media screen {
#container { color: #000; }
}

@media screen, print {
#container { font: Arial; }
}

Media types conhecidos:

all – Adequado para todos os dispositivos.

aural – Usado para sintetizadores de fala.

braille – Usado para software de braile tátil.

embossed – Usado para software de impressão em braile.

handheld – Usado para dispositivos handhelds (tela pequena, tela monocromática, banda larga limitada, etc).

print – Usado para material opaco, impressão e documentos visualizados em “print preview mode”.

projection – Usado para apresentação em projetores.

screen – Usado principalmente em computadores com tela colorida.

tty – Usado para teletipos (teletypes), terminais, ou dispositivos móveis com capacidade de display limitada.

tv – Usado para dispositivos de televisão (baixa resolução, cor, som, e pouco espaço para usar scroll).

Para maiores informações visite o site oficial do W3C sobre Media Types.

CSS Hacks

Marcio Misumi — Mon, 11 Aug 2008 23:15:56 +0000

Hacks são códigos utilizados para corrigir problemas de renderização que podem ocorrer entre os navegadores. Este tipo de incompatibilidade são causados porque eles não seguem totalmente as regras W3C.

É possível evitar o uso dos hacks se o desenvolvedor fizer uma codificação (X)HTML bem-planejada e bem-estruturada.

Uma dica importante quando estiverem estruturando um site em CSS é ficar com os navegadores abertos (Internet Explorer 6.0 e 7.0, Firefox, Opera, etc..) e ir testando em cada um deles ao fazer qualquer alteração, desta maneira se algum detalhe ficar diferente entre eles, você já sabe onde está o erro e assim fica mais fácil corrigir.

Hacks simples para o Internet Explorer

A maioria dos bugs CSS ocorrem no Internet Explorer, principalmente nas versões 6 e anteriores. O Internet Explorer 7 corrigiu muitos destes bugs, mas ainda aprensentam problemas de renderização. Veja a seguir alguns hacks para o Internet Explorer:

Hack underscore

O hack underscore, um dos mais conhecidos, é entendido pelo IE6 e anteriores. Apesar deste hack funcionar perfeitamente, ele está sendo abandonado, sobretudo pelo fato de não ser reconhecido pelo validador CSS do W3C.

Exemplo:

div {min-height: 100px;} /* para navegadores padrão */
div {_height: 100px;} /* para IE6 e anteriores */

As recomendações para CSS recomendam que se um seletor foi escrito com sintaxe errada ou o navegador não entende o que foi escrito, a declaração CSS deverá ser ignorada. Para efeito de estilização, tudo se passa como se a declaração não existisse.

Hack estrela html

O hack estrela é entendido pelo IE6 e anteriores.

Exemplo:

div {min-height: 100px;} /* para navegadores padrão */
* html div {height: 100px;} /* para IE6 e anteriores */

Hack asterisco

Este hack consiste em colocar um sinal de asterisco (*) antes do seletor e casa com as versões a partir do IE5.0 até IE7.

Exemplo:

*div {height: 100px;} /* para IE5.x, IE6 e IE7 */

Hack estrela +

Este hack aplica a regra CSS para IE5 e IE7.

Exemplo:

* + html div {height: 100px;} /* para os navegadores IE5 e IE7 */

Podcast com o Maujor

Marcio Misumi — Wed, 30 Jul 2008 16:52:41 +0000

O Maujor, uma grande referencia em CSS no Brasil, deu uma entrevista publicada em podcast pela GrifeMídia. Ele contou como começou a se interessar por CSS e Web Standars, e ainda aproveitou para contar todas as novidades sobre o CSS3.

Uma das novidades do CSS3 que eu achei muito interessante é a possibilidade de podermos inserir mais de uma imagem de background em um mesmo elemento.

Escute online (32 min) ou baixe o arquivo para escutar offline (29,3MB).

Zen Garden – A Beleza em Design CSS

Marcio Misumi — Sun, 08 Jun 2008 15:02:11 +0000

Uma demonstração do que pode ser conseguido visualmente por meio de um design baseado em CSS. Você escolhe qualquer folha de estilo em uma lista. Ao clicar em qualquer uma delas, a folha de estilo correspondente será carregada na página. O código html permanece o mesmo, a única coisa que muda é o arquivo .css externo.

O CSS permite o controle completo e total sobre o modo como um documento é renderizado. O único modo pelo qual esse fato pode ser demonstrado de uma maneira que entusiasme as pessoas é demonstrar quão verdadeira é a realidade do mesmo uma vez que as rédeas são colocadas nas mãos daqueles que são capazes de criar beleza a partir da estrutura.

Para visualizar acesse: http://www.csszengarden.com/tr/portuguese

É isso aí pessoal, CSS foi a melhor coisa que inventaram para nós que trabalhamos com Web.

Tutoriais HTML e CSS

Marcio Misumi — Thu, 29 May 2008 21:58:39 +0000

Foi lançada a versão traduzida para o português de dois excelentes tutoriais sobre HTML e CSS publicados no site HTML.net.

Os tutoriais foram originariamente publicados em inglês no site dinamarquês HTML.net e em parceria com o Maujor foram traduzidos e publicados em português.

Você encontra a versão traduzida do site e dos tutoriais em: http://www.pt-br.html.net

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

Image Replacement com CSS

marcio misumi

PNG Transparente no IE6 com background position e repeat

Tag com underline no IE

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

PNG Transparente no IE6

CSS – Media types

CSS Hacks

Podcast com o Maujor

Zen Garden – A Beleza em Design CSS

Tutoriais HTML e CSS

Tag ^{com underline no IE}