1 de fev de 2006

Isso está na especificação do CSS, é um bug do IE ou é burrice minha mesmo!?!

Opa... depois de um tempo sem escrever nada... vamos lá!!!

Estava eu ontem na faculdade, mais precisamente no laboratório de informática, desenvolvendo algumas coisas básicas em ASP. Um amigo sentou do lado e começamos a falar de CSS. Ele é bem leigo no assunto e, por isso, fui mostrando umas coisas básicas como formatação de texto, bordas, etc.

Aí eu lembrei do "first-letter" e fui mostrar o que se podia fazer com ele.

Então criei:

p:first-letter{
padding: 10px;
background: #ccc;
font-size: 18pt;
color: #000;
border: 1px solid #333;
}

Fomos visualizar no Firefox e tudo certinho. Mas quando fomos ver no IE... nada aconteceu!

Mas aí eu lembre que já vi no X-tudo do Caparica um teste com first-letter e first-line e que funcionava no IE. Acessei o site e funcionou perfeito. Não acreditei, peguei o código dele e comparei com o meu... tudo estava igual, exceto por um detalhe: no código dele, depois do seletor havia um espaço antes de abrir a chave.

Meu código:

p:first-letter{}

O dele:

p:first-letter {}

Coloquei o espaço no meu código e "pumba"... tudo funcionou perfeito.

Como nem ontem e nem hoje ainda tive tempo de ir atrás para ver o porque disso, deixo apergunta aqui: Isso é um bug do IE? Existe algo na especificação do CSS, no caso do first-letter, que dita que é necessário um espaço entre o seletor e a chave?

Achei muito estranho tudo isso, pois somente como first-letter isso me aconteceu... eu não costumo dar esse espaço depois do seletor. sei lá!!!

Quando eu descobrir algo eu posto aqui de novo!

24 Comments:

At 8:53 PM, Anonymous Rodrigo Muniz said...

Caramba, que estranho!
Eu costumo colocar o espaço, mas sempre tive a curiosidade de saber se a W3C recomenda o espaço ou não influencia em nada... Só que nunca me toquei em pesquisar isso.

 
At 3:49 AM, Anonymous Jonatas Oliveira said...

Sempre que uso o VIM para editar CSS e a chave não está separada do seletor por espaço, ele não faz highlight do bloco, mas achava que era algum problema de reconhecimento do VIM, nunca atentei para isso (Nota mental: nunca esquecer do espaço após o seletor).

Mas nunca coincidiu de dar problema no IE.

 
At 9:07 AM, Anonymous Tiago Ayer said...

Bom, oque falar sobre o IE...
Creio que a única forma do IE "funcionar", embora eu tbm não saiba a especificação da W3C, seria deixar de usá-lo e ter ele somente na lembrança como o NS4...

[]'s

 
At 10:07 AM, Anonymous Henrique Pimentel said...

É o IE sempre nos apronta uma ou outra surpresa.
Bom toda documentação da W3C é escrita utilizando um espaço antes das chaves.
Mas acredito que isso não deveria influenciar nada além da organização e padronização do código.
Vamos ver se o esforço do pessoal da MS em tornar o IE7 compátivel e mais fiel a W3C vai se tornar realidade mesmo.

 
At 10:25 AM, Anonymous Davis Zanetti Cabral said...

Se for bug, na versão 7.0 do IE foi corrigido. Pois aqui funcionou de ambas as formas.

 
At 10:36 AM, Anonymous Carlos Eduardo said...

Pois é Davis, não só na versão 7, mas na versão 6 também, pois fiz o teste aqui no IE6 e funcionou das duas formas.

 
At 1:49 PM, Anonymous Anônimo said...

Talvez tenha algo a ver com STRICT ou QUIRKS mode.. sei q eles interpretam o css de formas diferentes, inclusive no IE7

 
At 2:19 PM, Blogger Mario Sergio said...

eu sempre uso o espaço por questão de estética mesmo. legal saber disso.

 
At 3:05 PM, Anonymous Andre Noel said...

Esses dias me deparei com um problema parecido. Vi que uma página que fiz não exibia a imagem do título de jeito nenhum no IE6, sendo que nos outros estava tudo certo. O detalhe é que estava fazendo como sempre.
Até que percebi que o código estava assim:

background: #FFF url("url-da-imagem")no-repeat;

Eu tinha esquecido de dar um espaço antes do no-repeat. Coloquei o espaço e tudo funcionou.

 
At 4:56 PM, Anonymous dougsarr said...

Pessoal... FeNômenos estranhos é o que não faltam no IE, mas ele não é o unico afetado: O Firefox TAMBÉM tem bugs.

Se os dois maiores tem problemas de adaptabilidade, chegamos a conclusão que na verdade os
web-standards ainda não foram totalmente implementados.

Alguém de vocês já experimentou colocar uma figura em absoluto passando por debaixo de uma outra div que possua um texto. O IE e Opera fazem certinho... o Firefox não... e por aí vai. O Firefox redimensiona fontes com tamanho absoluto, o que é errado segundo a W3C.

Eu posso dizer que sou um cara que dominou os conteitos e tenho feito todos os meus trabalhos em "tableless", todos projetos comerciais.

Sabe, trabalhando com isso cotidianamente, cheguei a conclusão que esse negócio ainda não foi totalmente implementado, muito menos formatado. Estou torcendo para que o CSS 3.0 venha logo, porque já estou enojado com as limitações do atual formato.

Basta observar: já notaram que todos os sites "tableless" tem cara de blog? por que será?

Resposta: porque é mais fácil... caixinha aqui... caixinha lá. Agora o pega pra capar é fazer um site de jornal, ou portal de notícias. Eu consegui, mas o resultado pode ser desastroso pela quantidade de problemas que isso acarreta.

Precisamos de um pouco mais de parcimônia e menos OBA-OBA

 
At 6:10 PM, Anonymous Andre Viana said...

Cara entrei no teu blog pelo blog do tabless. Sem querer enrolar e indo direto por assunto, mais que bosta esse IE. Eu desisti do first-letter em um projeto meu pq no fire ele funcionava perfeito , já no ie. outro bug do nosso caro IE parecido com esse , e quando vc tenta dar um hover e um div.
Abração cara

 
At 6:44 PM, Blogger Walrus said...

Cara muito interessante esse bug..mas como sempre o IE deixa a gente na mão, valeu pela dica de como contornar +esse bug, vou te adicionar no meus links valeu ai

 
At 7:53 PM, Blogger ghostbuster said...

Com todo respeito ao tableless, eu tb uso direto, mas tem coisas que "nao dá mesmo" para fazer sem tabelas... acho que todos que programam dinamicamente sabem disso... tenta por exemplo fazer com que uma quantidade variavel de colunas (gerado dinamicamente) "espiche" uma div para acima de 100% da tela (ou seja, com scroll obrigatório)... ou tenta distribuir horizontalmente img's de largura variável em um espaço fixo...
Estes dois exemplos se resolvem facilmente com tabelas, mas sem elas...
Enfim, acho que o jeito é esperar pelo futuro mesmo...

 
At 8:41 PM, Anonymous spark said...

bem... design em css tem alguns problemas, quase sempre relativos à implementação dos browsers, e não aos padroes em si.

Algumas coisas sao dificeis de fazer sem tabelas, por causa dessas falhas dos navegadores, como por exemplo, o display:table do IE, que , pelas especificacoes, serviria para esses casos.

Mais sobre nao poder fazer alguma coisa sem tabelas: Tente fazer um site facil de atualizar sem mexer no codigo, usando tabelas. Tente fazer um site com 'skins'. Experimente pegar o codigo de outra pessoa, que tenha feito algo com tabelas, e veja quanto tempo demora para entender. Que tal fazer uma versao para celulares para o seu site ? num site semantico , é só fazer um css para dar uma cara melhor para seu codigo.
E acessibilidade ? tente ver um site usando um leitor de telas ...
Ou fazer um JS para mudar o tamanho das fontes...

Tudo tem prós e contras, afinal...

Sobre os sites com 'cara de blog', vejo dezenas de sites fora dos padroes, com a mesmissima estetica. Blogs são """'a onda'""" , blogs sao """mudernos""" , logo vou dar uma cara mais 'descontraída' para o meu site.
É uma coisa da época, design trends, assim como as caixinhas arredondadas...

ou nao :)

 
At 8:50 PM, Anonymous spark said...

ahm, e o firefox tem bugs, claro. mas eles são resolvidos em questao de dias ou semanas.
O IE e o bug das PNGs transparentes, por exemplo, vem desde o IE5.5 . Sao mais de SEIS ANOS !!!

http://www.richinstyle.com/bugs/
http://www.positioniseverything.net/explorer.html
http://css.nu/pointers/bugs-ie.html
http://www.onestab.net/a/pie/explorer/peekaboo.html

e por aí vai...

alias, ghostbuster, *adoraria* ter alguns desses exemplos que voce citou serem 'impossiveis com css', ou uma descrição mais detalhada, algo assim. gostaria de analisar esses casos aí ... djspark@gmail.com se quiser conversar :)

 
At 10:07 AM, Anonymous Guilherme Nunes said...

Gustavo,
se você estava usando ASP para fazer esse exemplo, acredito que tenha sido por isso.

Uma vez aconteceu um erro desses comigo e sabe aonde? No comentário. Tinha um comentário acima do código e, no IE, ele não interpretava. É como se aquele comentário tivesse envolvendo o código. Muito estranho!

Eu pegava o código gerado, salvava como HTML e funcionava normal.
Ou seja, a renderização do ASP tem lá seus bug´s também.


E outra foi ontem, quando estava trabalhando com .NET, e, por incrível que pareça, o CÓDIGO pro IE era um e para o Firefox era outro. Ou seja, ele renderizava de forma diferente para os browser´s. Para o Opera o código era o mesmo que o do Firefox. Acredito que ele faz um código para os BROWSERS e um outro para as tentativas de browser´s (IE).

Um abraço.

 
At 1:19 PM, Blogger Glaucia.Rezende said...

IE .esquisitus { x IE .estranhus{
Então minha gente, eu amei os comentários, aprendi mais essa! Espaços podem fazer a diferença! Valeu!

 
At 1:20 PM, Blogger Glaucia.Rezende said...

IE .esquisitus { x IE .estranhus{
Então minha gente, eu amei os comentários, aprendi mais essa! Valeu!

 
At 10:56 AM, Anonymous Felipe said...

Eu sempre uso o espaço por puro capricho. No entato, o IE é mesmo cheio de palhaçada, então valeu o toque.

 
At 3:48 PM, Anonymous Alessandro Moraes said...

Fala Gu,
vi o link lá no tableless... Muito curioso isso...
Ainda bem que deixamos o IE a tempos! :)
Pena que nem todos tem essa "luz"
abraço!

 
At 9:15 AM, Anonymous Newton de Góes Horta said...

Inspirado no seu post escrevi sobre um problema que verifiquei no Opera e que me deixou "encucado". Resolvi na época, mais não determinei precisamente a sua causa. Coloco-o para a análise de vocês. Quem se habilita?

Post Um bug do Opera?

 
At 1:26 PM, Anonymous Anônimo said...

IE força o padrão.
Amo o FF, uso, mas vamos ser realistas. Ele foi feito para desenvolvedores. O IE é padrão de mercado porque conquistou isso. Fez as regras. E de que forma? DANDO um produto que os concorrentes vendiam, e mostrando coisas que os outros não mostravam. Não adianta ficar choramingando, dizendo que é ruim, que não atende aos padrões. É uma questão matemática. Há MUITO mais gente vendo as páginas com IE do que com outros navegadores. E vai demorar MUITO para isso mudar. Então, o mínimo que espero do FF é que mostre o que o IE mostra. E que quem acesse com IE veja como eu quero as páginas. E com o tempo, talvez, mais e mais pessoas experimentem FF e aí, talvez, o IE se sinta ameaçado. O problema é que se ele (IE) se sentir ameaçado, vai esmagar os outros novamente... Enfim... Abraço a todos.

 
At 4:22 PM, Anonymous Anônimo said...

Alguem pode me ajudar ???

www.trf3.gov.br/index10.htm

esta página fica central. no IE mais no FF fica do lado esq., será um bug ou burrice minha conforme o título ???

aoioli@trf3.gov.br

Obs: Fora os padrões agora tem o tal Acessibilidade Visual para deficientes... no meu projeto já esta ok, de acordo com as normas exigidas... abrs

 
At 10:30 PM, Anonymous Anônimo said...

Cara vc ta preocupado se precisa dar espaço ou não, meu irmão vai arrumar alguma coisa pra fazer ....ptzz vc deve ser um caloro na faculdade , so pode...

 

Postar um comentário

<< Home