Arquivo da categoria: CSS

Como se prevenir para a chegada do IE8

O Internet Explorer 8 está chegando aí e seu lançamento pode servir tanto de alívio como dor de cabeça pra nós desenvolvedores, visto que vários bugs das versões “atuais” (IE’s 6 e 7) serão corrigidos, porém os hacks estrela (* html para IE6 e *+html para IE7) continurão o hack estrela para o IE7 (*+html) continua funcionando no IE8.

Trabalho é legal, mas re-trabalho é entediante…

Se você, como eu, é do tipo que não gosta de re-trabalho, é bom começar a pensar nisso. E é o que eu tenho feito nos meus últimos projetos. Tento evitar ao máximo o uso de hacks, mas quando não dá pra escapar, recorro aos recursos técnicos de emergência (aka gambiarra). A própria Microsoft (quem diria…) bem que nos avisou ainda na época do lançamento do IE7: prefiram os comentários condicionais.

Comentários condicionais? Mas isso não aumenta meu trabalho?

A grande desculpa esfarrapada para o não-uso dos comentários condicionais é que o número de arquivos CSS podem aumentar consideravelmente e isso em projeto grandes pode se tornar em um caos para administrar. O fato é que, apesar de não ter me envolvido em nenhum projeto grande até hoje, eu costumo pegar alguns layouts complexos pra codificar (<jabá>vide portfolio da Interag, desatualizado e prestes a sofrer alterações</jabá>) e, mesmo assim, é raro eu ter que criar mais de um arquivo CSS especificamente para os IE’s e esse único geralmente não tem mais do que 15 ou 20 linhas de código. Isso mesmo. Eu crio apenas um único arquivo CSS que cuida das incompatibilidades do IE6 e do IE7. Como?

<!--[if (IE 6)|(IE 7)]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection"><![endif]-->

Esse trecho de código faz a mágica. Nele nós dizemos que, caso o browser do usuário seja o IE na versão 6 ou 7, um novo arquivo ie.css deverá ser incluído na página. Colocamos esse código no <head></head> de nosso documento e pronto. Agora tudo o que temos que fazer é, dentro desse arquivo ie.css declarar as regras CSS específicas para o IE6, para o IE7 e para ambos:

/* ie6 e ie7 */
.clearfix { display:inline-block; }

/* apenas ie6 */
* html #geral { height: 1px; }

/* apenas ie7 */
*+html legend { text-indent: -5px; }

Mas olha os hacks ali! Você trapaceou!

Como dito anteriormente, apenas as versões 6 e 7 do navegador da Microsoft verão esse arquivo. Portanto, é OK usar hacks específicos para essas duas versões do browser dentro desse arquivo (e somente dentro dele). 😉

Um exemplo prático

Nada como um exemplo mais prático para compreendermos como funcionam as engrenagens. Vamos assumir que temos a seguinte marcação no nosso HTML:

<h1>Olá! Eu sou um exemplo prático. :)</h1>

OK, esse exemplo não foi nada prático. Mas continue seguindo, você não tem nada a perder…
Bem, suponhamos que queiramos que esse título assuma as seguintes formatações:

  1. azul com fundo branco nos browsers;
  2. branco com fundo azul no IE7;
  3. branco com fundo vemelho no IE6.

Para isso, precisaríamos ter em nosso arquivo CSS principal a seguinte regra:

h1 {
    color: #00B;
    background-color: #FFF;
}

E o nosso arquivo ie.css ficaria da seguinte forma:

/* ie6 e ie7 */
h1 { color: #FFF; }

/* apenas ie7 */
*+html h1 { background-color: #00B; }

/* apenas ie6 */
* html h1 { background-color: #B00; }

Se você testar esse código nos browsers de verdade (gentilmente incluindo o IE8 aqui, como colher de chá), verá que o título está azul com fundo branco, como previsto. Já nos IE’s 6 e 7 o título estará branco; no IE7 com fundo azul e no IE6 com fundo vermelho.

That’s all, folks. Em breve espero postar mais artigos pra movimentar novamente o blog. Ou não.

Anúncios

6 Comentários

Arquivado em Artigos, Browsers, CSS, Internet Explorer, Tutoriais, Web Standards

Django, Django e mais Django

No final de semana a Revista INFO chegou à casa de seus assinantes trazendo uma matéria sobre frameworks web. O artigo fala sobre Django, Ruby on Rails e outros frameworks ágeis. Eu ainda não tive a oportunidade de ler o artigo, porém, acompanhado a repercussão na lista de discussão Django Brasil, pude perceber que, como é de costume da INFO, falaram besteira sem saber o que estavam falando. Entre outras asneiras incoerências, chegaram a dizer que o defeito do Django é ter sido escrito em Python e, portanto, requerer que se aprenda a linguagem antes que de usá-lo pra desenvolver.

Mas eu não estou aqui pra falar mal da INFO. Eu venho anunciar que, no mesmo dia em que a edição da INFO chegou ao público, o site oficial da comunidade Django Brasil entrou no ar (já com PageRank 5!). O site ainda não está com todo o conteúdo inserido, mas já dá pra tirar muita dúvida a respeito do framework (e ver que boa parte do que foi escrito na INFO é besteira). Eu tive o prazer de contribui com o design, o HTML inicial (que, é claro, já não está como eu deixei) e o CSS do site. Ainda há muita coisa a fazer (e refazer), mas devagarinho a gente chega lá…

Trabalhar junto com a comunidade foi um enorme prazer e um aprendizado muito grande pra mim. Eu estou realmente satisfeito de ter participado (e ainda continuarei participando) desse projeto e acredito que projetos assim só têm a somar na experiência de quem participa. Agradeço a toa a comunidade e, em especial, ao Guilherme Gondim (Semente), que foi paciente me ensinando como funciona o Subversion (sim, foi meu primeiro projeto usando Subversion e eu achei simplesmente fantástico) e todo o sistema do Google Code.

Veja o que estão falando por aí sobre o site.

2 Comentários

Arquivado em Comunidade, CSS, Design, Django, Django Brasil, Estudos, Off Topic, Pessoal, Projetos, Python, XHTML

Construindo sites com CSS e (X)HTML


Excelente notícia pra você que está querendo aprender a construir sites com CSS e XHTML, ou mesmo pra você que já é desenvolvedor mas quer aprender mais sobre o assunto: O Maujor acaba de anunciar o lançamento de seu livro, que acontecerá em Fevereiro de 2008, pela editora Novatec.

O livro está em processo de revisão, já contando com 14 capítulos, distribuídos em 300 páginas e ainda há conteúdo a inserir. Finalmente teremos um bom título escrito por alguém que conhece bastante do assunto e originalmente em nossa linguagem. É esperar pra ver. 😉

3 Comentários

Arquivado em CSS, Livros, Web Standards, XHTML

Galeria CSS#8

3 Comentários

Arquivado em CSS, Galeria CSS

A sintaxe do CSS

Ultimamente tenho estado mais presente no fórum de Web Standards do iEvolution e tenho percebido que muita gente tem confundido, ou não compreendido direito as CSS. Frases do tipo Estou fazendo uns scripts CSS pro meu site e…, ou ainda que parâmetros CSS usar nesse caso?, e também: <script type="text/javascript" src="estilos.css"></script> têm aparecido com frequência lá no fórum.

E eu, como disseminador dos web standards, obviamente, não podia ficar parado diante de uma situação dessa. E é por isso que decidi escrever um pouco sobre a sintaxe do CSS. Bom, então vamos lá.

O básico do básico

Primeiramente, é preciso deixar bem claro o que CSS não é. CSS não é uma linguagem de programação, como Javascript, ASP, PHP, etc. Portanto, não existem scripts CSS ou parâmetros CSS.
CSS também não é uma linguagem de marcação, como o HTML ou XHTML e, por isso, não existem tags CSS.

O básico

Depois de ver o que CSS não é, vejamos o que ele é e qual sua sintaxe correta.
CSS é uma linguagem de formatação, ou seja, é a linguagem usada para dar forma ao seu código de marcação, seja ele HTML ou XHTML. Simples, não? Sua sintaxe é mais simples ainda. Observe:


seletor { propriedade: valor; }

Ou, pra citar um exemplo mais prático:


body { background-color: black; }

O que você vê acima é uma regra CSS, vamos quebrá-la em pedaços pra ficar mais fácil a compreensão.

  1. O seletor


    body

    O seletor é basicamente a tag (ou tags) que você quer estilizar. Para uma explicação mais detalhada sobre seletores, leia este excelente texto do Maujor.

  2. A declaração


    background-color: black;

    Isto é uma declaração CSS. Uma declaração CSS é composta por uma propriedade, seguida de dois-pontos, e um valor; declarações CSS devem vir seguidas de um ponto-e-vírgula, para indicar um “fim de comando”, caso contrário sua declaração pode não ser interpretada corretamente, assim como a declaração que a seguir. No caso de uma regra com uma única declaração ou da última declaração de uma regra, o ponto-e-vírgula é opcional, mas é de boa prática usá-lo assim mesmo.

Além disso, todo o conjunto de declarações deve estar entre chaves { }, para que os browsers consigam fazer distinção entre seletores, declarações e para que possa entender onde começa e termina cada regra.

Bom, pessoal, é isso. Espero ter conseguido ajudar àqueles que têm (ou melhor, tinham. hehe) dificuldades em relação à sintaxe do CSS. Quanto aos meus leitores mais experientes no assunto, peço desculpas pelo conteúdo de nível básico (que não é o foco do meu blog), mas senti muito a necessidade de falar algo sobre isso aqui. E, já que você chegou até aqui, que tal acrescentar algo? Não sei porquê, mas sempre fico com a impressão de que faltou algo a ser falado…

PS.: Preciso sair desse WordPress urgente! Não aguento mais esses templates! rsrs

5 Comentários

Arquivado em Artigos, CSS, Web Standards

Como você testa o CSS de seus sites?

O Henrique publicou um texto, e o Diego já tinha publicado o dele, sobre a metodologia deles para testar os sites em diversos browsers. A discussão me pareceu interessante, então eu resolvi fazer mais do que apenas comentar no artigo deles.

Bem, eu desenvolvo com o Firefox, IE6, IE7 e Opera abertos. Desta maneira, vou fazendo os testes “ao vivo” sempre que uso uma declaração que suspeito que vai quebrar em um dos IE’s, claro, via conditional comments.

O Opera tem ficado meio às margens, por muitas vezes não se encaixar no público-alvo de nossos projetos, mas mesmo assim costumo conferir como estão as coisas nele, para evitar problemas futuros. O que me deixa irritado com o Opera é que, por ser considerado o browser com maior suporte às CSS (e, de fato, o é), ele deveria ter uma renderização melhor que a do Firefox, mas na prática não é o que acontece. Parece que ele tem o dom de complicar declarações simples, ao passo que suporta declarações que nem o Firefox suporta.

Geralmente, apesar de construir layouts, digamos, não-convencionais, não necessito de muitas linhas de código pra consertar as coisas no IE6, e muito menos no IE7. Palmas para a Micro$oft, que conseguiu dificultar menos a nossa vida, com o IE7.

Eu ouvi falar em IE5? Não, não… acho que estou ouvindo demais…

5 Comentários

Arquivado em Browsers, Cotidiano, CSS

Galeria CSS #7

And the Oscar goes to:

2 Comentários

Arquivado em CSS, Galeria CSS