Em que ou qual browser me baseio para fazer meu css?

[Lucas Macêno 0]

Olá a todos. Fiz um website me baseando no internet explorer. Fazia meu css e via as alterações somente no ie, porém depois que fui ver no firefox e chrome ficaram desalinhados. Já com o projeto em andamento quase no final tentei usar um css reset, não funcionou muito bem. Por exemplo "list-style:none" no firefox aparece "circle". Então surgiu a dúvida, por onde ou por qual navegador me baseio para fazer meu css? Por exemplo me baseio pelo firefox e depois coloco um hack ou um "if ie" para chamar no meu index? Ou faço o contrário?

Obrigado!

[William Bruno 1501]

Cara, 'nenhum'.

Essa é a reposta que julgo certa.

 

Qndo eu faço meus recortes CSS, eu me baseio pelo que sei como vai ficar. Conheço as propriedades, e sei oque cada uma faz.

É o total controle sobre as propriedades. Existem diversos browsers no mercado. Desenvolver focando em um deles, mesmo que este siga as recomendações da w3c, ou implemente melhor, sem tantos bugs todas as propriedades CSS, não é a resposta para a questão.

 

A resposta, é estudar o suficiente do assunto, para saber como vai ficar antes de testar.

Esteja certo do que oque está fazendo. Não é com 'chute e erro', que você chegará no melhor código.

[Kakashi_Hatake 267]

Cara, eu na verdade não me baseio em um único navegador, meu esquema é o seguinte:

 

1. começo desenvolvendo o css e já começo os testes nos navegadores.

 

2. conforme a complexidade e a diversidade do código, acabo criando outros arquivos css especificos com apenas as alterações que foram necessárias conforme as necessidades de cada navegador.

 

3. por fim acabo implementando os arquivos css no index de forma que supra as exigencias de cada navegador e suas versões problemáticas, assim a página fica exatamente como deveria estar, independente de qual navegador e versão esteja a usar.

[Thiago Retondar 18]

Resposta melhor que a do Bruno acho que não tem! http://forum.imasters.com.br/public/style_emoticons/default/natal_laugh.gif

 

Só complementando: se você está em fase de aprendizado em CSS, o ideal é você testar/estudar através de browser que seguem bem os padrões da W3C. Por que? Para entender melhor a semântica do seu código.

 

Eu raramente uso hack ou comentário condicional, mas no meu início de aprendizado era o que eu mais usava. :P

 

1. começo desenvolvendo o css e já começo os testes nos navegadores.

Este é um ponto importante, principalmente para quem está iniciando em CSS! Sempre testar aos poucos a sua página em todos os browsers. Se testar depois que tudo estiver feito, vai dar mais trabalho para ajeitar depois.

 

2. conforme a complexidade e a diversidade do código, acabo criando outros arquivos css especificos com apenas as alterações que foram necessárias conforme as necessidades de cada navegador.

Criar um CSS para cada browser é osso, em cara? Faça o que eu disse acima, estude e entenda a semântica do que está fazendo em browsers que seguem - ou tentam seguir ao máximo - a especificações W3C.

 

3. por fim acabo implementando os arquivos css no index de forma que supra as exigencias de cada navegador e suas versões problemáticas, assim a página fica exatamente como deveria estar, independente de qual navegador e versão esteja a usar.

Pois é, cara, mas e quem ainda tem um velocidade de internet não tão baixa? Você vai carregar coisas desnecessário e várias vezes.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Lucas Macêno 0]

Cara, 'nenhum'.

Essa é a reposta que julgo certa.

 

Qndo eu faço meus recortes CSS, eu me baseio pelo que sei como vai ficar. Conheço as propriedades, e sei oque cada uma faz.

É o total controle sobre as propriedades. Existem diversos browsers no mercado. Desenvolver focando em um deles, mesmo que este siga as recomendações da w3c, ou implemente melhor, sem tantos bugs todas as propriedades CSS, não é a resposta para a questão.

 

A resposta, é estudar o suficiente do assunto, para saber como vai ficar antes de testar.

Esteja certo do que oque está fazendo. Não é com 'chute e erro', que você chegará no melhor código.

 

Mas depois como você os adapta a cada navegador?

[William Bruno 1501]

Não adapto!

 

Simples assim. Eu faço correto.

A maioria das dúvidas aqui nesse fórum sobre 'incompatibilidade entre navegadores', é na verdade o mau uso das propriedades CSS.

Basta entendê-las, e conhecer os 'bugs' que já são muito bem documentados e simples de resolver.

 

Não existe fórmula milagrosa, e nem é necessário ficar testando em tudo quanto é lugar, depois que você sabe exatamente o que está fazendo.

No começo, não é assim, e você precisa abrir 4~5 navegadores para ver como ficou, mas depois de um tempo, com a experiência, e maior controle sobre o código, atualmente eu já faço recortes completos, que já termino validados, e sem nenhum bug 'incorrigível'..

[Lucas Macêno 0]

William, a quanto tempo tu meche com css? Quando você faz estes códigos em css, tipo fica do mesmo jeito em todos os navegadores? Você não usa nenhuma condicional nem hack?

[William Bruno 1501]

William, a quanto tempo tu meche com css?

'apenas 2 anos.

Quando você faz estes códigos em css, tipo fica do mesmo jeito em todos os navegadores?

sim, a estrutura dos sites, já ficam perfeitas em todos os navegadores.. ( não desenvolvo mais para IE5.x )

 

Você não usa nenhuma condicional nem hack?

 

hack ?

apenas para bugs como: margin duplicada do IE6 em elementos flutuados, e para simular min-height.

 

condicional ?

apenas para corrigir o problema de transparência no IE6 em imagens .PNG

 

Cara, não 'cabe' muito aqui nessa dúvida, e nem é a intenção do teu tópico, mas vou postar alguns dos ultimos layouts que recortei.

http://www.construtivo.com/

http://www.ofertasdasantaefigenia.com.br/

http://www.pesquisaoncologia.com.br/novo/

http://www.bestschool.com.br/

..

[Lucas Macêno 0]

Pô que bacana. Achei massa o ofertas da santa efigênia. Tem como você me mandar o css desse?

Utilizou php também?

[Thiago Retondar 18]

É só pegar o CSS no código fonte do site. ;)

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Lucas Macêno 0]

Thiago Obrigado!

 

William, quanto tempo você demora para fazer um site destes? este demorou quanto tempo (santa efigenia)?

[William Bruno 1501]

o Santa Efigênia, eu tive 45 dias para entregar 'funcionando'.

Usei php sim. O site é completamente gerenciável.

 

Possui um painel de controle geral que administra até os banners do site, e cada lojista possui um painel próprio, para colocar seus produtos.

Tiveram algumas modificações, mas apenas o CSS dele, fiquei quase 5 dias.

 

Daria pra levar menos tempo, mas esse foi um Freelancer que fiz. Então eu ainda tinha outras obrigações como faculdade, e trabalho fixo.

E cara, não vai lhe ajudar muito o CSS dele não ^_^

 

Cada site é um site. O lay desse nem possui nada de 'complicado', apenas coisas simples.. tem alguns efeitos bacanas de CSS, e técnicas mais avançadas aqui: http://forum.imasters.com.br/index.php?/topic/354140-repente-css-menus/

 

Único conselho, se é que vale de algo.. estude. Aprenda a usar corretamente. Tenha controle sobre oque está fazendo.

Erre.

Conserte.

Apague tudo.

Recomece.

Pesquise.

Quebra a cabeça.. e por ai vai :lol:

[Rodrigo Resende 1]

Bom... primeiramente eu gosto de usar o css reset do Eric Meyer que é completo e reseta todos (ou a maioria) dos elementos, quando desenvolvo o html/css eu deixo aberto o Firefox, Chrome e o IE 7 aberto (nao faço mais sites para ie6 ;P) e vou testando em ambos pois apresentam algumas diferenças e é melhor perceber isso no inicio do projeto do que no final do projeto. E quanto a usar comentário condicional não acho legal e como o Thiago disse é complicado e chato fazer um css para cada navegador.

 

Então é isso... Se baseie em todos :D

 

Abraços e sucesso !

 

http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

[Kakashi_Hatake 267]

O caso é o seguinte: eu não crio vários arquivos css para cada navegador, apenas um arquivo com algumas alterações para corrigir "bugs" do IE6 e IE5.5, também uso meu css otmizado inline, deixando assim um arquivo css com no máximo 10 a 15 linhas para um site inteiro e sprite com menos requisições ao servidor, tornando o carregamento veloz.

[Paulo de Tarso F. M. 24]

Mas é sabido que utilizar CSS inline torna a manutenção mais complicada, pois você precisa acessar cada página individualmente, e se utilizar um CSS externo, você concentra tudo em um único local. Dessa forma, você só precisa ter acesso apenas ao CSS, deixando a estrutura e o conteúdo intactos, sem a necessidade de acessá-los para que seja feita qualquer alteração no visual do site.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Kakashi_Hatake 267]

Mas é sabido que utilizar CSS inline torna a manutenção mais complicada, pois você precisa acessar cada página individualmente, e se utilizar um CSS externo, você concentra tudo em um único local. Dessa forma, você só precisa ter acesso apenas ao CSS, deixando a estrutura e o conteúdo intactos, sem a necessidade de acessá-los para que seja feita qualquer alteração no visual do site.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Cara, acho que não fui muito claro em minhas respostas anteriores, é claro que que se eu tiver css em cada pagina e tiver que fazer manutenção eu estou ferrado, eu só uso css externo.

exemplo pra ficar mais claro:

#conteiner .topo{height:200px;background:#999999 url(../imagem/topo-center.jpg) repeat-x;margin:0 auto;color:#000000;}#conteiner .topo span.logo{background:#999999 url(../imagem/sprite/topo2.jpg) no-repeat center;width:616px;height:200px;display:block;float:left;color:#990099;background-position:-18px 0;}#conteiner .topo span.bg-left{display:block;width:18px;height:200px;}#conteiner .topo span.bg-right{display:block;width:18px;height:200px;}#conteiner .topo .bg-left{background:#999999 url(../imagem/sprite/topo2.jpg) no-repeat;float:left;width:18px;background-position:0 0;}#conteiner .topo .bg-right{background:#999999 url(../imagem/sprite/topo2.jpg) no-repeat;float:right;width:18px;background-position:-634px 0;}

Como uso meu css desta forma a algum tempo, já estou acostumado, e não tenho dificuldades de fazer manutenção em css otmizado desta forma mas para quem não tem costume fica bem massante fazer alterações. Não recomendo para iniciantes!

[Rodrigo Resende 1]

Eu particularmente não gosto de fazer meu css inline pois isso fica ruim para possíveis alterações e também para se trabalhar em equipe.

 

O que eu faço é criar uma pagina chamada estilos.php onde eu coloco um script PHP que coloca todo o meu css em um linha só e ainda remove os comentários, mas no arquivo de origem (ex: estilo.css) ta normal (uma linha para cada propriedade).

 

http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

[Kakashi_Hatake 267]

Eu particularmente não gosto de fazer meu css inline pois isso fica ruim para possíveis alterações e também para se trabalhar em equipe.

 

O que eu faço é criar uma pagina chamada estilos.php onde eu coloco um script PHP que coloca todo o meu css em um linha só e ainda remove os comentários, mas no arquivo de origem (ex: estilo.css) ta normal (uma linha para cada propriedade).

 

http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

 

Interessante o seu método. http://forum.imasters.com.br/public/style_emoticons/default/natal_laugh.gif

[JuniorZoi_Designer 0]

Como já disseram acima... Primeiramente procure estruturar o seu site e teste os pequenos pontos em vários navegadores diferentes, pois cada ponto pode ser fatal depois da estrutura completa do site achar um simples erro no inicio. então aconselho a ir montando e testando! http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

[Paulo de Tarso F. M. 24]

Só para finalizar a questão do CSS inline então... Percebi que estão usando o conceito de inline de maneira, digamos, não tão apropriada para a situação...

 

CSS inline é quando utilizamos o CSS por meio do atributo HTML style, e não simplesmente remover espaços e quebras de linhas nos arquivos CSS. Só tomem cuidado quanto a isso. Neste caso eu preferiria utilizar o conceito de "código comprimido" ou que tal chamar de "código sem espaços e quebras de linhas"? Fica mais objetivo e não gera confusão, como o que aconteceu... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

Até mais!