GIFs relacionados ao espaçador

Um GIF espaçador é uma imagem GIF pequena e transparente usada em web design e codificação HTML. Eles eram usados ​​para controlar o layout visual dos elementos HTML em uma página web, numa época em que o padrão HTML por si só não permitia isso. Eles se tornaram obsoletos após a guerra dos navegadores - a adição de atributos de layout às tags de tabela HTML 2.0, e quase não eram usados ​​​​quando as Cascading Style Sheets se tornaram amplamente adotadas.

História

O livro de David Siegel , Criando Sites Assassinos, de 1996, foi o primeiro conhecido a publicar a técnica Spacer GIF. Segundo Siegel, ele inventou o truque em sua sala. ^{[1] [2]}

O padrão Cascading Style Sheets (CSS) diminuiu o uso de GIFs espaçadores para o layout de páginas da web. CSS pode obter os mesmos efeitos de várias maneiras, como alterando a margem ou o preenchimento de um determinado elemento ou definindo explicitamente uma posição relativa.

Uso

Foi reconhecido desde o início que, embora o tamanho das células da tabela não pudesse ser definido diretamente, cada célula poderia conter uma imagem por meio de uma IMGtag. O tamanho das tags de imagem pode ser definido de forma independente, com seus atributos WIDTHe HEIGHT. A célula da tabela seria então redimensionada automaticamente para conter apenas esta imagem. Percebeu-se também que o tamanho exibido era controlado inteiramente pelos atributos e era independente do tamanho real do arquivo de imagem utilizado (embora um arquivo de imagem real ^{[nota 1]}ainda era necessário). Conseqüentemente, o mesmo arquivo de imagem poderia ser usado para todas as muitas imagens espaçadoras necessárias em uma página da web. A única exigência era que essa imagem fosse invisível, seja por ser da mesma cor da página, seja por ser transparente.

Os próprios GIFs espaçadores eram pequenos arquivos de imagem transparentes. Arquivos GIF foram usados ​​por ser um formato comum que suportava transparência , ao contrário do JPEG . Esses arquivos eram comumente chamados de spacer.gif, transparent.gifou 1x1.gif. Antes da adoção generalizada de Cascading Style Sheets (CSS), os GIFs espaçadores eram usados ​​para controlar o espaço em branco dentro de uma página web , que pode ser redimensionado de acordo com os atributos HTML que lhe são atribuídos. A razão pela qual um GIF espaçador é invisível é para que um HTMLo desenvolvedor pode criar uma célula da tabela e preencher o fundo com uma cor específica que pode ser visualizada através do GIF espaçador transparente. Por exemplo, um desenvolvedor que deseja criar uma caixa quadrada azul de 500 pixels de lado pode usar um gráfico azul separado de 500×500 às custas de largura de banda adicional. Em vez disso, o desenvolvedor pode especificar a cor de fundo da célula da tabela e as dimensões de um GIF espaçador transparente pré-existente.

Desvantagens

Os designs produzidos muitas vezes pareciam perfeitos na tela do designer, mas podiam parecer totalmente diferentes na tela do leitor. Diferentes resoluções de tela, mecanismos de renderização do navegador, bem como preferências de fonte do usuário, podem alterar consideravelmente o layout do design. Muitos designs tornaram-se simplesmente ilegíveis, especialmente à medida que telas pequenas e dispositivos móveis se tornaram populares.

Implementar um design com GIFs espaçadores pode ser extremamente tedioso – principalmente ao fazer pequenas alterações em um design existente.

Obsolescência

A técnica estava obsoleta para projetar páginas da web por volta de 1998. A implementação do CSS permitiu que os tamanhos dos objetos HTML fossem definidos diretamente. Embora a adoção do CSS tenha sido lenta, devido às implementações deficientes do navegador e à inércia do desenvolvedor, a capacidade básica de controlar o posicionamento dos elementos, possibilitada pelo uso de GIFs espaçadores, era utilizável por volta de 1997.

Além disso, os layouts baseados em tabelas e grades foram substituídos ^{[ carece de fontes ]} por layouts fluidos na tentativa de responder ao uso crescente de dispositivos móveis para acessar conteúdo da web . Estas metodologias de design abandonaram a tentativa de controlar o layout bidimensional entre os elementos. ^{[ citação necessária ]} Em vez disso, os elementos seriam oferecidos ao navegador do leitor e o navegador os colocaria da melhor maneira possível, de acordo com o tamanho da janela de navegação do leitor. Layouts de design fluido tornaram a configuração dos tamanhos dos elementos da página no navegador do usuário menos importante. ^{[ carece de fontes ]}Isto ficou particularmente evidente quando eliminou a necessidade de definir tamanhos em unidades absolutas, como pixels. Como o web designer nunca conseguiu controlar o tamanho da janela da tela do leitor, a tentativa de definir tamanhos de maneira rígida sempre foi um erro.

Referências

links externos

• Truque GIF de pixel único @ CKWS, por David Siegel
• Exemplo de GIF espaçador
• Especificação do modelo de caixa CSS2, World Wide Web Consortium
• Exemplo de PHP para gerar programaticamente o menor GIF possível
• representações de espaçadores como URLs de arquivos e dados em formato GIF e PNG
• O menor GIF de todos os tempos
• Módulo nginx ngx_http_empty_gif_module