1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Melhor medida de forma a maximizar a compatibilidade com browsers?

Discussão em 'Web Development' iniciada por xuxaki, 28 de Julho de 2009. (Respostas: 15; Visualizações: 1566)

  1. xuxaki

    xuxaki Power Member

    • px
    • em
    • %
     
    Última edição: 28 de Julho de 2009
  2. Yokozuna

    Yokozuna Power Member

    Boas,

    Penso que o ideal seria usar o em. Principalmente por ser "escalável" (se é que posso usar este termo aqui). Mas o uso tem que ser feito "inteligentemente".

    Uma maneira de ver as coisas é que existem vários browsers e vários tamanhos de ecrã.

    Usando em podes definir que, por exemplo, os espaços entre os textos aumentam consoante o tamanho da fonte usada.
     
  3. masterArt

    masterArt Power Member

    em segundo as normas w3
     
  4. K0mA

    K0mA Power Member

    Não é por utilizares px em % que consegues compatibilidade.
    As diferenças entre browsers são muitas vezes nos valores padrão das propriedades CSS por isso uma das coisas que se costuma fazer é redefinir todas as proprieadades logo no inicio.
    Código:
    * {
        padding: 0;
        margin: 0;
        border: 0;
        }
    Também é possivel ter código apenas destinado a um navegador
    <!--[if IE]> ... .... ... <![endif]-->

    Ou até mesmo visando uma versão especifica
    <!--[if IE 6]> ... .... ... <![endif]-->

    É possivel ter duas folhas de estilo:

    <!--[if IE ]>
    <link rel="stylesheet" type="text/css" href="para_ie.css" />
    <![endif]-->
    Documentação da microsoft
     
    Última edição: 28 de Julho de 2009
  5. Yokozuna

    Yokozuna Power Member

    Eu penso que ele só se referia à "medida" a usar.

    É, no entanto, informação sempre útil a ter em conta.
     
  6. K0mA

    K0mA Power Member

    Sim, o problema é que mudando apenas px para em ou de px para % não vai resolver grande coisa.
     
  7. manwhosaysnii

    manwhosaysnii Power Member

    K0ma isso são os comandos exactos ou só exemplos?
    tens algum site de referencia que aconselhes a visitar para perceber como isso que descreves funciona?

    ty
     
  8. danfergo

    danfergo Power Member

    Para as diferentes folhas de estilo e assim : http://maujor.com/tutorial/condcom.php
    penso que o K0mA tem razão, não é por usares em ou px que vai mudar alguma coisa, usar % pode te ajudar a resolver problemas com a resolução dos ecrãs.
    Quanto ao redefinir propriedades à partida acho a melhor solução.
    visto que os padding's; border's e margin's diferem de explorador para explorador, pequenas diferenças mas que em casos rigorosos fazem diferença.
     
  9. xuxaki

    xuxaki Power Member

    A situação é mesmo essa. Tenho vários componentes dentro de uma tabela, com estilos diferentes, que têm de encaixar "na perfeição". No chrome e firefox funciona tudo bem, mas no IE as coisas aparecem mais "apertadas" >(
     
    Última edição: 29 de Julho de 2009
  10. Yokozuna

    Yokozuna Power Member

    Corrige-me se estiver errado, mas usando % no tamanho de um objecto ele não atribuir um valor relativo ao tamanho do ecrã usado?

    Por exemplo: se usares um ecrã 800x600 e colocares 60% no tamanho do tabela, ele atribui-lhe 480px (algo perto disso) à mesma, certo?
    Mas se usares um ecrã maior, qual seria o tamanho da tabela? Proporcional ao ecrã, certo? Se ele tiver uma imagem na tabela fica com espaços em branco ou estica, conforme a parametrização da img. E mesmo o texto ficaria mais disperso...

    Mas, mais uma vez, concordo com o Koma e colocaria se calhar vários stylesheets, conforme o utilizador / visitante da página, para prever tamanhos de ecrã, de browser, etc...
     
  11. K0mA

    K0mA Power Member

    Exemplo da wikipedia:
    Código:
            <link rel="stylesheet" href="/skins-1.5/common/shared.css?230" type="text/css" media="screen" />
            <link rel="stylesheet" href="/skins-1.5/common/commonPrint.css?230" type="text/css" media="print" />
            <link rel="stylesheet" href="/skins-1.5/monobook/main.css?230" type="text/css" media="screen" />
            <link rel="stylesheet" href="/skins-1.5/chick/main.css?230" type="text/css" media="handheld" />
            <!--[if lt IE 5.5000]><link rel="stylesheet" href="/skins-1.5/monobook/IE50Fixes.css?230" type="text/css" media="screen" /><![endif]-->
            <!--[if IE 5.5000]><link rel="stylesheet" href="/skins-1.5/monobook/IE55Fixes.css?230" type="text/css" media="screen" /><![endif]-->
            <!--[if IE 6]><link rel="stylesheet" href="/skins-1.5/monobook/IE60Fixes.css?230" type="text/css" media="screen" /><![endif]-->
            <!--[if IE 7]><link rel="stylesheet" href="/skins-1.5/monobook/IE70Fixes.css?230" type="text/css" media="screen" /><![endif]-->
            <link rel="stylesheet" href="/w/index.php?title=MediaWiki:Common.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=2678400&amp;action=raw&amp;maxage=2678400" type="text/css" />
            <link rel="stylesheet" href="/w/index.php?title=MediaWiki:Print.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=2678400&amp;action=raw&amp;maxage=2678400" type="text/css" media="print" />
            <link rel="stylesheet" href="/w/index.php?title=MediaWiki:Handheld.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=2678400&amp;action=raw&amp;maxage=2678400" type="text/css" media="handheld" />
            <link rel="stylesheet" href="/w/index.php?title=MediaWiki:Monobook.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=2678400&amp;action=raw&amp;maxage=2678400" type="text/css" />
            <link rel="stylesheet" href="/w/index.php?title=-&amp;action=raw&amp;maxage=2678400&amp;gen=css" type="text/css" />
            <!--[if lt IE 7]><script type="text/javascript" src="/skins-1.5/common/IEFixes.js?230"></script>
            <meta http-equiv="imagetoolbar" content="no" /><![endif]-->
     
  12. dvd.ribeiro

    dvd.ribeiro Power Member

    Tenham também em conta as "cacetadas" que se podem dar no css:


    .myClass{
    width:200px;
    !width:210px;
    }

    Quando se usa o ! é específico para o IE6/7 :lol:

    Outra é para centrar conteúdos no Firefox. Para o IE o align="center" ou o textalign:center parecem servir bem, mas no Firefox tem que ser margin:0px auto; para centrar conteúdo :cool:
     
  13. ImAnAlcoholic

    ImAnAlcoholic Power Member

    isso é problema do box-model do iexplorer =)
    evita usar paddings, e começa a usar margins.
     
  14. xuxaki

    xuxaki Power Member

    Problema resolvido! O problema estava numa tabela que eu estava a por dentro de um fieldset, no qual não defini o padding. Então por defeito o IE devia estar a por uns 3 ou 4 px e ficava tudo mal. Defini o padding para 1px e já fica tudo certinho ;)

    Obrigado de qq forma
     
  15. ImAnAlcoholic

    ImAnAlcoholic Power Member

    mmm... tens boa soluçao para evitar que isso aconteça no futuro =)
    usa o reset css da yahoo para eliminar essas pequenas diferenças entre browsers

    so tens de acrescentar
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">

    no head do documento =)

    podes ler mais sobre isso aqui (so estou a sugerir o da yahoo porque esta mesmo muito completo... mas existem outros =) )
    http://developer.yahoo.com/yui/reset/
     
  16. ricmrq

    ricmrq Power Member

    pessoal ja comecei a ter estes problemas de incompatibilidade entre browsers.
    como tal usei alguns "reset.css" mas não consigo depois formatar divs, tabelas, etc.
    simplesmente não ficam como eu alterei o class deles. qual será o problema?
     

Partilhar esta Página