CSS Conditional comments

Postado por: Pedro Rogério em
  • 15 jan
  • 8

Uma das operações mais comuns desenvolvidas pelos programadores em uma página web é detectar o tipo de navegador utilizado e versão para que o conteúdo seja entregue de forma conveniente ao usuário. Para isso podem ser utilizadas várias técnicas tanto do lado servidor como do lado cliente. Nesse tutorial você terá uma introdução aos conditional comments, uma forma simples de diferenciar folhas de estilo entre as diversas versões o Internet Explorer.

Benefícios de utilização

Os principais benefícios de utilização são:

Menor impacto do lado cliente
Quando o navegador encontra um comentário condicional que não diz respeito a ele, ele o considera como um simples comentário HTML e o conteúdo não é analisado, baixado, economizando recursos da máquina cliente.
Não é necessário o uso de Scripts
Conditional comments são utilizam nenhum tipo de Script ou DHTML, durante o carregamento da página ele é analisado e direcionado somente para o browser necessário.
Separa o código da lógica
Utilizando Conditional comments você separa seu código em pequenos segmentos, tornando mais fácil o entendimento e a manutenção.
Cross-browser
A utilização de Conditional comments não é restrita somente ao Internet Explorer, eles podem ser utilizados nos browsers que suportam comentários condicionais para personalizar o conteúdo e aqueles que também não suportam.

Continuar lendo »

Central Server

IE6 Double Margin / Duplicate Characters bug fix usando jQuery

Postado por: Pedro Rogério em
  • 8 jan
  • 14

Meus amigos desenvolvedores com certeza conhecem a fundo os mais famosos bugs do IE6, o da margem dupla e o bug da repetição de caracteres, se você não conhecia esses bugs, aconselho a dar uma lida nesses posts. Mas como conhecimento nunca é demais, acabei encontrando hoje uma simples solução para resolver esses bugs no IE6 utilizando jQuery:

$('*').each(function() {
  if ($(this).css('float') !== 'none') {
    $(this).css('display', 'inline');
  }
});

O resultado desse código é que ele irá procurar todos os elementos na página e aqueles que tenham float diferente de none será adicionado a propriedade css display:inline previnindo seu trabalho para que não ocorra esses bugs.

Via: Snipplr

Safari CSS Reference

Postado por: Pedro Rogério em
  • 6 jan
  • 3

Webkit Icon

Quando se está aprendendo CSS, é de extrema importância pesquisar quais propriedades CSS são suportadas pelos browsers, isso lhe ajuda a entender milhares de incompatibilidades que podem ocorrer durante o desenvolvimento do projeto. Hoje, vou apresentar aqui a referência CSS suportada pelo Safari, cujo motor de renderiação é o Webkit, motor esse também utilizado pelo Google Chrome.

Nesse guia, você irá encontrar especificações do tipo:

  • Uma breve explicação dos termos utilizados.
  • Propriedades CSS suportadas.
  • CSS Rules
  • Funções proprietárias

Você também possui a opção de baixar o Guia em PDF aqui.

Pseudo-seletores: O bug do seletor e as chaves

Postado por: Pedro Rogério em
  • 5 jan
  • 10

Em relação ao meu último post, sobre Drop Caps com CSS, um amigo me deu uma dica muito interessante por e-mail. Reparem que no tutorial anterior utilizamos o pseudo-seletor :first-letter para desenvolver o efeito de drop caps da seguinte forma:

p:first-letter {
    font-size: 4.2em;
    float: left;
    line-height: 0.6em;
    margin: 0.13em 0.13em 0.13em 0;
}

Reparem que existe um espaço entre o seletor e a abertura da chave, isso é obrigatório pois se esse espaço não for declarado, o efeito não funciona no IE6, parece brincadeira, mas é verdade, observem o código:

p:first-letter{
    font-size: 4.2em;
    float: left;
    line-height: 0.6em;
    margin: 0.13em 0.13em 0.13em 0;
}

Experimentem acessar esse exemplo com o Internet Explorer 6. Não sei dizer ao certo se esse bug atinge todos os pseudo-seletores, mas fica aí a dica.

Páginas:«1...12131415161718...24»