Welcome Guest!
 arqHP
 Previous Message All Messages Next Message 
=?iso-8859-1?Q?Re:_Diferen=E7as_devido_ao_DOCTYPE?=  Irapuan Martinez
 Aug 11, 2003 08:33 PDT 

At 11:24 30/5/2003 -0300, DNA wrote:
 Só queria entender melhor essa parte aqui:
         /* inicio ie5 win hack */
                 voice-family: "\"}\"";
                 voice-family:inherit;
                 width: 260px;
         }
o que seriam esses voices? E eu testei o código aqui em um site, e só
funcionou quando eu tirei esse segundo width do código...

Hack de CSS é uma espécide de desvio: Aproveitam que alguns browsers se
confudem com um determinado código para passar parâmetros que funcionam
apenas em navegadores que não se confudem no código em questão.

Entenda o "Tantek box model hack" assim: Você tem um elemento de HTML que
deseja que ele tenha 5px de largura, 10px de padding e no total, ocupe
300px de largura.

Segundo o quirk mode (IE 4 e 5.x; IE 6 e Opera sem doctype), bastaria:

         .megatron {
                 border-size: 5px;
                 padding: 10px;
                 width: 300px;
         }

Segundo o que que prega o W3C, com seu strict mode (IE 6 e Opera com
doctype, Mozilla), seria:

         .megatron {
                 border-size: 5px;
                 padding: 10px;
                 width: 270px;
         }

Preste atenção:
         5px (borda) +
         10px (padding) +
         270px (width) +
         10px (padding) +
         5px (borda) +
--------------------------------
         = 300px de largura total.

Em hack, isso significaria:

         .megatron {
                 border-size: 5px;
                 padding: 10px;
                 width: 300px;

         /* inicio ie5 win hack */
                 voice-family: "\"}\"";
                 voice-family:inherit;

                 width: 270px;
         }

         html>body .megatron {

                 width: 270px;

         /* fim ie5 win hack */
         }

Traduzindo seria:

         .megatron {
         border-size: 5px; (todos os browsers)
         padding: 10px; (todos os browsers)
         width: 300px; (todos os browsers)

         /* inicio ie5 win hack */
         voice-family: "\"}\"";
                 (a partir da linha acima, o IE 4 e 5.x considera
                 que a linha se encerrou)
         voice-family:inherit;
                 (Isso permite que o hack da linha acima
                 não intefira em propriedades do voice-family
                 eventualmente definidas em outro lugar
                 no CSS)
         width: 270px;
                 (Como o IE 4 e 5.x já encerrou a propriedade duas
                 linhas acima, ignorará esse width repetido.
                 Os IE 6 assumirá esse novo valor)
         }

         html>body .megatron {
                 width: 270px;
                 (Todos os IEs ignoram instâncias contendo ">".
                 Os demais browsers, aceitam. E assumem o valor
                 em strict mode.)
         /* fim ie5 win hack */
         }

Aio servir o hack, adicione o doctype para XHTML.


 
 Irapuan Martinez .>__________________________________________
                                     http://www.hypergraph.com.br
	
 Previous Message All Messages Next Message 
  Check It Out!

  Topica Channels
 Best of Topica
 Art & Design
 Books, Movies & TV
 Developers
 Food & Drink
 Health & Fitness
 Internet
 Music
 News & Information
 Personal Finance
 Personal Technology
 Small Business
 Software
 Sports
 Travel & Leisure
 Women & Family

  Start Your Own List!
Email lists are great for debating issues or publishing your views.
Start a List Today!

© 2001 Topica Inc. TFMB
Concerned about privacy? Topica is TrustE certified.
See our Privacy Policy.