TiloWR » CSS

Usando Seletores Avançados no IE6 – JavaScript + CSS

Tilo — Tue, 30 Mar 2010 16:06:35 +0000

Hoje foi a prova final desse javascript, já estamos usando ele há algum tempo aqui na agência e ele vem tendo um ótimo desempenho, chegou a um ponto que meu IE6 lê seletores que o IE8 não lê, você poderá usar coisas como:

Seletores Avançados
Selector type	Pattern	Description
Seletor para sub string de atributo	E[att^="val"]	Casa com qualquer elemento E cujo valor do atributo att começa com “val”.
Seletor para sub string de atributo	E[att$="val"]	Casa com qualquer elemento E cujo valor do atributo att termina com “val”.
Seletor para sub string de atributo	E[att*="val"]	Casa com qualquer elemento E cujo valor do atributo att contenha a sub string “val”.
Pseudo classe estrutural	E:root	Casa com o elemento raiz do documento. Em HTML o elemento raiz é sempre o elemento HTML.
Pseudo classe estrutural	E:nth-child(n)	Casa com qualquer elemento E que seja o n-th (enésimo) filho do elemento pai.
Pseudo classe estrutural	E:nth-last-child(n)	Casa com qualquer elemento E que que seja o n-th (enésimo) filho do elemento pai, a contar do último filho.
Pseudo classe estrutural	E:nth-of-type(n)	Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo.
Pseudo classe estrutural	E:nth-last-of-type(n)	Casa com qualquer elemento E que seja o n-th (enésimo) elemento irmão do seu tipo, a contar do último filho
Pseudo classe estrutural	E:last-child	Casa com qualquer elemento E que seja o último filho do elemento pai.
Pseudo classe estrutural	E:first-of-type	Casa com qualquer elemento E que seja o primeiro elemento irmão do seu tipo.
Pseudo classe estrutural	E:last-of-type	Casa com qualquer elemento E que seja o último elemento irmão do seu tipo.
Pseudo classe estrutural	E:only-child	Casa com qualquer elemento E que seja o único filho do elemento pai.
Pseudo classe estrutural	E:only-of-type	Casa com qualquer elemento E que seja o único elemento irmão do seu tipo.
Pseudo classe estrutural	E:empty	Casa com qualquer elemento E que não tenha filhos (incluindo os nós de texto).
Pseudo classe :target	E:target	Casa com um elemento E que seja o destino da URL.
Pseudo classe estado de elemento de UI	E:enabled	Casa com qualquer elemento E de interface de usuário (um controle de formulário) e que esteja habilitado (enabled).
Pseudo classe estado de elemento de UI	E:disabled	Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja desabilitado (disabled).
Pseudo classe estado de elemento de UI	E:checked	Casa com qualquer elemento E de interface de usuário (um controle de formulário) que esteja marcado (checked).
Pseudo-elemento fragmentos de elemento de UI	E::selection	Casa com a parte de qualquer elemento E que tenha sido selecionado ou destacado pelo usuário.
Pseudo classe negação	E:not(s)	Casa com qualquer elemento E que não case com o seletor simples s.
Elemento de combinação irmão em geral	E ~ F	Casa com qualquer elemento F que seja precedido pelo elemento E.

Baixe o arquivo aqui!

para que funcione corretamente, limite no html que apenas os IE’s abaixo do 8 leiam esse arquivo com o seguinte código:

CSS Reset – iguale todos os navegadores com css

Tilo — Tue, 30 Mar 2010 15:33:20 +0000

Um CSS Reset bem estruturado é fundamental para evitar diferenças no html que será renderizado pelo navegador, desligando medidas e espaçamentos que os navegadores não tem como padrão, segue o CSS Reset que eu uso atualmente:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after {
    content: '';
    content: none;
}

a {
    text-decoration: none;
    color: #171717;
}

:focus {
    outline: 0;
}

ins {
    text-decoration: none;
}


del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

hr
{
    display: none;
}

para ficar melhor organizado, crie um arquivo Reset.css para esse código dessa forma, quando for começar um projeto novo apenas importe esse arquivo!

Curso para Iniciação em XHTML/CSS UniItalo

Tilo — Thu, 25 Mar 2010 18:06:58 +0000

Há um tempo fiz um curso de XHTML/CSS pra dar uma reciclada e saí triste, afinal, a professora é que precisava de uma reciclada, notei que muita gente quer entrar pro font-end da internet, mas não sabe como, pois bem, daí veio a idéia, por que não dar um curso de XHTML/CSS que seja condizente com a realidade do mercado de trabalho? Entrei em contato com o DEAC da UniItalo e o curso foi aprovado, a faculdade disponibiliza sua estrutura para o curso (Salas, Computadores e Etc…) e fornece o diploma de conclusão de curso. O mais legal é que não precisa ser aluno, o curso é aberto para todos. Seguem informações do curso:

XHTML – CSS (DESENVOLVIMENTO DE WEB SITES)

Profº. Wítalo Rebouças

Datas: 10/04 à 19/06 (sábados)

Horário: 9h às 12h

Investimento: R$ 50,00 mensais

PROGRAMA:
Introdução à Web (história e fundamentos) e os navegadores.
Padrões W3C, WebStandard e Tableless
Elementos em bloco e Elementos em linha
Imagens e Hiperlinks
Formulários
Folha de estilos em cascata
Herança e Hierarquia

Para participar, procure o DEAC da UniItalo!

Adele Silva Pedrão
DEAC
Tel.: 55 11 5051-0127
adele.silva@italo.br

localização da UniItalo:
Avenida João Dias, 2046 – 04724-003‎
Santo Amaro – São Paulo – SP
11 5645-0099‎

Google Maps

Qualquer dúvida sobre o curso me pergunte nos comentários!

Abraços!

Hack para Safari 4, Firefox 3.5, Chrome 3 e muito mais com um JS

Tilo — Thu, 03 Sep 2009 01:01:41 +0000

Que o IE6 é um lixo, todo mundo sabe, agora, o que você faz quando os browsers que você confia te deixam na mão? Pois é, na ultima semana descobrimos que FF 3.5, Safari 4 e Chrome 3 estão renderizando de forma diferente, ai o que fazer? Bem, minha sugestão era ir ao banheiro, e chorar por 2 minutos sozinho no escuro, porem hoje o Alister chegou com a solução milagrosa um JS muito simples que faz uma coisa bem bacana.

A idéia é colocar uma classe na tag com o nome do navegador utilizado, o JS dá suporte aos seguintes Browsers:

.ie – Internet Explorer (All versions)
.ie8 – Internet Explorer 8.x
.ie7 – Internet Explorer 7.x
.ie6 – Internet Explorer 6.x
.ie5 – Internet Explorer 5.x
.gecko – Mozilla, Firefox (all versions), Camino
.ff2 – Firefox 2
.ff3 – Firefox 3
.opera – Opera (All versions)
.opera8 – Opera 8.x
.opera9 – Opera 9.x
.konqueror – Konqueror
.webkit or safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
.chrome – Google Chrome

Imagina que agora na herança você tem uma classe com o nome do browser, basta agora você colocar uma classe antes do seletor que você deseja fazer o hack.

Exemplo:

 .ie  .example {
  background-color:  yellow;
  }
  .ie7  .example {
  background-color:  Orange;
  }
  .gecko  .example {
  background-color:  Gray;                              
  }
  .win.gecko  .example {
  background-color:  Red;
  }
  .linux.gecko  .example {
  background-color:  Pink;
  }
  .opera  .example {
  background-color:  Green;
  }
  .konqueror  .example {
  background-color:  Blue;
  }
  .safari  .example {
  background-color:  Black;
  }
  .chrome  .example {
  background-color:  Cyan;
  }
  .example  {
  width:  100px;
  height:  100px;
  border:  1px solid black;
}

Teste

Uma forma simples de fazer, e que evita o uso de hack’s que poluem o código, e atrapalham na validação.

Para baixar o JS
Para ver um exemplo funcionando
Para seguir o Alister no Twitter

Troca de Classe com JavaScript

Tilo — Wed, 10 Jun 2009 16:36:31 +0000

A ideia é que uma div receba um efeito “Hover”, que só é aceito nos browsers superiores ao IE6:

Vamos usar esse HTML como Exemplo:

 Salvar
 Cancelar

Agora crie o CSS:

.bt {
width: 150px;
font: normal 12px/15px 'arial';
text-align: center;
text-decoration: none;
border: solid 1px black;
padding: 5px;
margin: 5px;
color: #fff;
}

.on { background-color: #006600; }
.off { background-color: #990000; }

pra garantir que ele tenho uma aparencia de botão, vou colocar a propriedade “cursor: pointer;” apenas para essa DIV que usaremos como Botão:

div.bt { cursor: pointer; }

o JavaScript entra agora para dar o efeito “Hover”

function LigaDesligaBotoes(botao) {
botao.className = botao.className == "bt off" ? "bt on" : "bt off";
}

pra finalizar basta chamar no Evento onmouseover=”" para quando o maouse está sobre a DIV e onmouseout=”" para quando o mouse sai da DIV:

Salvar
Cancelar

espero ter ajudado.

Exemplo Funcionando

min-height para IE6

Tilo — Thu, 14 May 2009 19:41:56 +0000

Todo Desenvolvedor Front-End já precisou de uma div com uma altura minima (min-height) mais não funcionava no lixo do IE6, pois é agente teve problema com um site de cliente que se naum tivese um minimo ele ficava muito estranho, depois de bater a cabeça na parede e tentar se jogar da janela do prédio sem sucesso , pois estavam todas trancadas depois da crise de 29 (não entendeu a piada? Ouve esse podcast!), fui obrigado a procurar uma solução, e cheguei a essa:


.alturaminima100 {
min-height: 100px;
height:auto !important;
height:100px;
}

o segredo é colocar o min-height para o Firefox e todos os outros Browsers e pro IE6 colocar as duas linhas da sequência:

height:auto !important;
height:100px;

o IE 6 vai desenhar o tamanho minimo e almentar quando receber conteudo, lembrando que sempre a melhor opção é Matar o IE6!

Hack’s, lá e de volta outra vez.

Tilo — Sat, 07 Mar 2009 18:02:51 +0000

quem desenvolve web concerteza já passou por um momento como esse ilustrado pelo nerdson, a questão é que não adianta em quanto a microsoft nào fezer com o IE o mesmo que ela faz com o MSN, a atualização Obrigatoria, nos vamos continuar a fazer Hacks pro IE6.

porem qual o hack certo para ser usado?

eu conheço algumas formas de fazer hack, e hoje vou tentar explicar como usa-los;

HTML tag:

Todas as Versões do IE

IE7 e Superior

IE7 e Anterior

esses Hack são principalmete para um conteudo que não está sendo renderisado no IE, você pode colocar uma marcação adicional para ele.

CSS Selector:

IE 7

*:first-child+html body seletor { propriedade: valor; }

IE 6

* html body seletor { propriedade: valor; }

Chrome e Safari

body:nth-of-type(1) seletor { propriedade: valor; }

Opera 9 e anteriores

html:first-child seletor { propriedade: valor; }

use essa forma apenas quando você precisa que uma determinada classe seja vista apenas pelo navegador em questão, isso ajuda muito quando você criou um hack no HTML e precisa tratar esse elemento.

Diferença de Margin – Padding

Tilo — Thu, 05 Mar 2009 14:56:53 +0000

Ai vai uma dica rápida…

Muita gente tem duvida sobre a diferença das propriedades CSS margin e padding, ai vai uma explicação bem rápida.

Margin = Margem


.classe { margin: auto; }

Espaço do limite do elemento pra fora.

Padding = Preenchimento


.classe { padding: auto; }

Espaço do elemento pra dentro.

Exemplo:

Padding: O espaço entre o inicio do paragrafo e a primeira letra. lembrando que se o paddin e um preenchimento você não pode usar em elemento IMG.

Margin: espaço entre o fim de um elemento e o proximo.

você pode usar as dua propriedades da forma completa:


.classe {
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}

.classe {
padding-top: auto;
padding-right: auto;
padding-bottom: auto;
padding-left: auto;
}

ou da forma shot (atalho):


.classe { margin: auto auto auto auto; }
.classe { padding: auto auto auto auto; }

a ordem dos elemento é a mesa da completa:

para cima, direita, abaixo e esquerda; dessa forma você já declara todos os valores em uma unica linha, porem se escrever apenas uma vez ele distribui o mesmo valor 4 vezes.

caso você queira que acima e abaxo tenham um valor, e para direita e esquerda tenha outro valor você pode usar o shot2:

o primeiro valor vai para acima e abaixo e o segundo valor para esquerda e direita:


.classe { margin: 0 auto; }
.classe { padding: 0 auto; }

espero ter ajudado…

Menu Horizontal Simples

Tilo — Fri, 27 Feb 2009 03:10:17 +0000

Estava lendo um forum, e tinha uma dúvida sobre como fazer um menu horizontal com hover, então, fica a dica:

Link do Exemplo:

CSS do Exemplo:

* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}

ul {
margin: 0 auto;
width: 500px;
border: solid 1px #000000;
height: 30px;
}

ul li {
float: left;
}

ul li a {
line-height: 30px;
text-align: center;
display: block;
width: 100px;
background-color: #333333;
color: #CCCCCC;
font-family: 'tahoma';
font-size: 12px;
}

ul li a:hover {
background-color: #666666;
color: #FFFFFF;
}

HTML do exemplo:


Item 1
Item 2
Item 3
Item 4
Item 5

Espero ter Ajudado!

TiloWR » CSS

Usando Seletores Avançados no IE6 – JavaScript + CSS

Leia Também:

CSS Reset – iguale todos os navegadores com css

Leia Também:

Curso para Iniciação em XHTML/CSS UniItalo

Leia Também:

Hack para Safari 4, Firefox 3.5, Chrome 3 e muito mais com um JS

Leia Também:

Troca de Classe com JavaScript

Leia Também:

min-height para IE6

Leia Também:

Hack’s, lá e de volta outra vez.

Leia Também:

Diferença de Margin – Padding

Leia Também:

Menu Horizontal Simples

Leia Também: