CSS técnica de css reset

bruce alves · 31 de agosto de 2018

gente observem essa teoria:

Um dos grandes problemas encontrados pelos desenvolvedores web é a forma como os vários browsers interpretam de formas diferentes o mesmo código, não conseguindo o mesmo resultado a página desenvolvida.

Para resolver este problema, antigamente os desenvolvedores desenvolviam vários arquivos CSS para cada navegador.

Portanto, para resolver esse problema, desenvolveu-se uma técnica chamada “CSS Reset”, que se aplica uma folha de estilos básica para resetar toda formatação “original” aplicada pelo browser. Essa folha de estilos pode ser aplicada internamente HTML ou externamente, sendo esta a técnica mais comum, devido várias páginas poderão utilizar a mesma formatação.

Cada um pode desenvolver seu próprio arquivo CSS para efetuar o reset, mas na web existem vários já prontos e distribuídos para uso livre. Um dos mais conhecidos foi/é desenvolvido por Eric Meyer e disponibilizado em sua página pessoal.

Minha dúvida é a seguinte: Alguém já usou esse arquivo? Usei esse arquivo seguindo os passos do seguinte tutorial:

https://www.devmedia.com.br/como-utilizar-a-tecnica-css-reset/26797

Só que creio que a prática não ficou tão compatível com a teoria, vejam pela imagem como fica a mesma página em dois navegadores diferentes (chrome, firefox). Então, a exibição da página continua diferente em navegadores diferentes, ou só determinados itens é que ficam padronizados por esse código de css reset? alguém pode me ajudar?

DiF · 1 de setembro de 2018

@bruce alves Sempre vai haver uma pequena diferença de renderização, Lembre que os navegadores possuem engines diferentes.

Embora podemos minimizar as diferenças, nunca vai ser 100% igual em todos.

Eu uso bastante o CSS Reset. Principalmente o "normalize.css"

Ele basicamente reseta os elementos, como por exemplo retira o espaçamento de margin, retira as "bolinhas" de marcação dos elementos <li> enfim...

Essa prática realmente é útil e funciona. Resolve muitos problemas de renderização. Só lembre que algumas coisas padrões jamais serão mudadas, a menos que ache uma forma de sobrescrever como é o caso por exemplo dos campos selects. Por padrão no safari é diferente do chrome. Mas se personalizar com CSS pode deixar igual para todos.

Por fim, estou movendo seu tópico para o lugar certo e deixar com o prefixo correto.

Adriano_web · 1 de setembro de 2018

Exato! O CSS reset pode não alterar certos meios das folhas de estilo padrões dos navegadores como fontes, tamanhos de texto iguais, inputs com o type definido como "date" ou como "tel" iguais e muitos outros recursos. Como você já leu, tudo isso citado pode ser diferente em determinados navegadores, isso ocorre porque o programa de renderização de cada navegador tem os seus próprios meios de folha de estilo padrão. Cada navegador configura certas declarações usando os CSS e JS próprios para isso, para que possam definir e implementar os estilos. Por isso que os navegadores IE/EDGE nas versões 9 e anteriores não suportam novas propriedades do CSS3 e CSS4 e precisam de prefixos. Não espere que o CSS reset possa melhorar esses aspectos de estilização, isto seria impossível apenas com uma folha de estilo CSS. Talvez se CSS e JS trabalhassem juntos, eles poderiam resolver esse problema que você está tendo que por sua vez seria um vasto código extremamente complexo.