Participe também!

O Joomla! é um premiado gerenciador de conteúdo (CMS) livre e gratuito. Junte-se a nós, aprenda, interaja e ajude a aprimorar o Joomla! cada vez mais!

Cadastre-se
Tutoriais > CSS hack´s

CSS hack´s

E-mail Imprimir PDF
Confira este primeiro artigo que mostra uma pequena introdução sobre CSS hack´s.


{mosauthorinfo} Pequena INTRODUÇÃO:

O que é CSS? (Cascading Style Sheets)

CSS é uma folha de estilo, uma tecnologia utilizada por programadores Web que, normalmente estão 'escondidas' no código fonte do site, para delimitar padrões a serem seguidos por ele mesmo (site). Enfim, é o que os tornam mais exatos, podendo-se padronizar amplamente todo o seu código html (seja o conteúdo em si ou a sua estrutura/layout).

Sejam estes padrões por exemplo:

* Todos os textos dentro de uma tabela deverão possuir cor Azul, serem justificados, em modo negrito.

Assim, em todas as <table></table> que você criar no seu código HTML, terão conseqüentemente, a cor de seu texto azul, justificado e em negrito! Deu para entender? Então eu acredito que você também imagine a tamanha utilidade do CSS para o desenvolvimento de sites Web.


CSS Hack - Parte 1:


Buenas indiada! Sejam bem vindos ao Mambopros e este é o meu primeiro artigo, de muitos evidentemente!Neste artigo, pretendo somente esclarecer um pouco sobre o que é exatamente CSS hack e também, é claro, postar alguns exemplos para que você possa ter uma idéia bem clara do assunto.

CSS hack é quando o programador manipula os códigos CSS, de maneira que ele consiga adaptar o seu código a diferentes tipos de navegadores, (Internet Explorer, Firefox, Opera, Konqueror ...) fazendo com que seu layout não tenha problemas de visualização do usuário final, como por exemplo, quebras de linha ou de tabela etc...

Bom, mas o CSS hack não é programado para ser interpretado pelos browsers Netscape, Firefox, ou Internet Explorer para Mac, e sim para ser funcional ao Internet Explorer para PC´s (Personal computers), e por quê isso? Vamos ver em frente...

Então vamos a um exemplo:

* código normal:

div {
  width:500px;
 }

No código acima estamos setando que todos os <div> terão 500 pixels de largura.


* código alterado:

 div {
  width:500px;
  _width:400px; */ a posição do hack SEMPRE será após a opção CORRETA. */
 }

Já neste código alterado, todos os navegadores vão interpretar o css da mesma forma,  ou seja, todos os <div> terão 500 pixels de largura, porém o Internet Explorer para PC´s interpretará a segunda opção, que no caso é de 400 pixels. Não se sabe qual o motivo pelo qual o IE interpreta o _ (underline) na linha de código e portanto seu layout irá funcionar perfeitamente em qualquer browser.

Bom, isso é só um primeiro exemplo. Uma boa fonte que você poderá utilizar para seus hack´s são os sites de busca.

Em um próximo artigo, vou postar mais exemplos. Até lá !!!!


Fontes:  [Tableless] [MXstudio] [Google]

Comments (9)
1 Ter, 26 de Agosto de 2008 18:06
roberta
mtio bom
2 Ter, 02 de Setembro de 2008 15:30
Patris
ok, obrigada, aguardando o próximo!
3 Seg, 17 de Novembro de 2008 17:21
All
Lembrando que, no ie 7, este hack não funciona e tb não é necessário, já que o mesmo se aproxima mais dos outros navegadores.
4 Qua, 19 de Novembro de 2008 14:25
Helion
Muito bom o tutorial!!!
Novidade envie para Este endereço de e-mail está protegido contra SpamBots. Você precisa ter o JavaScript habilitado para vê-lo.
5 Sáb, 02 de Maio de 2009 03:46
Larissa Nepomuceno
funciona tambem com *

;)
6 Seg, 29 de Junho de 2009 14:34
ry
posta ai amigao...
7 Qui, 23 de Julho de 2009 18:19
Cowboy
Simples, Rápido e objetivo! Isso aê!
8 Seg, 21 de Dezembro de 2009 16:07
Netto
Ótimo!
Básico mas direto ao assunto.
9 Qui, 11 de Março de 2010 15:40
aNTONIO
gostaria de modificar o rodape do meu site pois estava hospedago em um certo host e permiti que colocase o end deles mais a empresa acabou e nao sei tirar o nome

toda vez que clicava no nome da empresa entrava no site deles






Copyright © 2010 www.nome do meu site. Todos os direitos reservados.
www.nome da empresa .com - Hospedagem


agradeço pela auda

Add your comment

Your name:
Your email:
Comment:
  The word for verification. Lowercase letters only with no spaces.
Word verification:
 

Busca Rápida

 

Veja Também