html - sea - meta tags seo

¿Cuál es la forma más fácil o más rápida de hacer que CSS rinda lo mismo en todos los navegadores? (27)

Hacer que una página web se muestre correctamente en todos los principales buscadores de hoy es una tarea que consume mucho tiempo.

¿Hay alguna manera fácil de hacer un estilo CSS idéntico en cada navegador? ¿O al menos tienes algunos consejos para facilitar este trabajo?

Ajustarse a un doctype estricto también se ocupará de muchas de las diferencias. Además, generalmente agrego una etiqueta <div> para encerrar todo dentro del cuerpo, porque he notado una diferencia en cómo Firefox vs, es decir, maneja la etiqueta corporal como un elemento de nivel superior.

Al principio es una pérdida de tiempo, especialmente si todavía estás aprendiendo las cuerdas de DIV + CSS. Sin embargo, después de haber practicado lo suficiente y haber encontrado suficientes problemas y haberlos resuelto todos, usted tendrá el conocimiento de lo que FUNCIONA y lo que NO FUNCIONA.

Es entonces cuando sabes cómo escribir el estilo más compatible posible en primer lugar, ahorrándote todo el tiempo en degugging y casi nunca tienes problemas con ninguno de los principales navegadores modernos: IE6, IE7, FF2, FF3, Opera 9, Safari. 3 Win / Mac.

Sí, es posible y tan fácil como puede ser. Practica y conquista uno por uno, entonces sabes cómo hacer las cosas bien en el primer intento.

Bueno, el único monstruo desconcertante debería ser IE6, supongo. Es en navegador. Aparte de eso, ff2, ff3, opera 9, safari win / mac, ie7, ie8 son relativamente similares en el motor de renderizado, al menos con muchos menos errores que con IE6.

Tengo algunas mejores prácticas para ti (una que acaba de comenzar su viaje en CSS) en la codificación para obtener la máxima compatibilidad con CSS:

Use un reset primero. Despeja su mente y se asegura de que cada paso de su trabajo.
No use relleno (izquierda y derecha) y ancho en el mismo elemento a menos que sepa bien cómo funcionará.
Si se flota un elemento, proporcione el desbordamiento principal : oculto y alto: 1% si el padre no tiene una altura.
No le dé a un elemento tanto margen superior ni margen inferior, sino solo margen superior o margen inferior. Debido a que los márgenes de los elementos adyacentes colapsan unos en otros, lo que hace que el posicionamiento sea algo impredecible para los principiantes.
Si un elemento está flotando, dele visualización: en línea .
No confíe en el índice z a menos que su scripting lo necesite.
Si sucede algo raro en IE6, use height: 1% en ese elemento.

De acuerdo con mis experiencias, estas son cosas que realmente te ayudarán a resolver problemas potenciales. Úselos y eliminan sus posibilidades de tropezar con cualquier problema que consuma tiempo en un 80% . De hecho, hay más consejos triviales que estos cuando se trata de etiquetas específicas, pero vamos a llamarlo un día.

Aplicando el Sombrero de Papel de Aluminio de Diseño

CSS:

*{display:none}

Asegúrese de incluir el DOCTYPE apropiado.

Todavía veo gente que regularmente lidia con los problemas del modelo de caja porque se olvidó de incluir un tipo de documento. Sin el doctype apropiado, Internet Explorer se renderiza en "modo peculiar", y también lo hacen otros navegadores en menor medida. Si incluye el tipo de documento correcto, los navegadores cambian al "modo estándar" y se comportan de manera similar entre sí.

Aparte de eso, si haces esto para ganarte la vida, recogerás y recordarás rápidamente aquellos casos de esquinas sutiles donde IE interpreta cosas ligeramente diferentes de Firefox, etc. Con algo de experiencia, es completamente posible diseñar toda la página en tu navegador favorito y solo haga pequeños retoques al CSS para que el renderizado casi perfecto en otros navegadores.

Desarrollar para Firefox primero. Puedes probar en otros navegadores pero no te preocupes por las soluciones hasta que funcione como lo quieres en Firefox. Luego pase a los otros navegadores basados en estándares, a saber, Safari y Opera. Si ha escrito buenos HTML y CSS, no debería requerir mucho trabajo en estos navegadores.

Luego pasa a la bestia del lote, IE. Use los comentarios condicionales para dirigirse a versiones específicas de IE. IE 7 debería ser bastante fácil, para IE 6 puede que tenga que sacrificar ciertas partes del diseño para que funcione fácilmente. Esto está bien, IE 6 está en camino, así que no se preocupe si no lo admite por completo. Los PNG transparentes suelen ser el mayor problema, AlphaImageLoader simplemente no funciona en todas las situaciones.

Como se mencionó anteriormente, un restablecimiento de CSS como el de Eric Meyer es un buen punto de partida; úselo para crear su propio restablecimiento en función de sus necesidades. Aparte de eso, la respuesta es simple: no hay una bala de plata.

En la base, no hay garantía de que tal cosa funcione alguna vez a la perfección. Mientras los desarrolladores de los navegadores encuentren maneras de hacer lo suyo en lugar de la forma "estándar" de hacer las cosas, usted tendrá diferencias.

He obtenido resultados positivos con el CSS Base de la interfaz de usuario de Yahoo , pero al final incluso eso no pudo hacer frente a los elementos más complejos que deberían ser posibles con CSS.

Al final, opté por una solución menos que perfecta y simplemente compruebo mi estructura si configuré hojas de estilo específicas del navegador.

Aquí hay un fragmento de PHP para ilustrar. Perdón por la solución específica para el idioma, pero creo que la idea es lo suficientemente clara como para implementarla en diferentes idiomas:

$sHTML .= "/t/t<LINK rel=/"stylesheet/" type=/"text/css/" href=/"".$sURLCSS.$sStyle."/" />/n"; if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension)) $sHTML .= "/t/t<LINK rel=/"stylesheet/" type=/"text/css/" href=/"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT.".".$sExtension."/" />/n"; if (file_exists($sPathCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension)) $sHTML .= "/t/t<LINK rel=/"stylesheet/" type=/"text/css/" href=/"".$sURLCSS.$sFileStyle."_".BROWSER_AGENT."_".BROWSER_VERSION.".".$sExtension."/" />/n";

Sin archivos perdidos, etiquetas no reconocidas u otro código que pueda ahogar a algunos navegadores, las páginas del marco de procesamiento se representan como queremos que se muestren en todos los navegadores solicitados por nuestros clientes. Lo que es más importante, lo hacen sin producir errores (es decir, una Consola de Error vacía en FireFox) que hace que la depuración cuando realmente se encuentre con un error sea mucho más fácil.

En primer lugar, podría intentar un reinicio, como algunas otras personas mencionadas aquí, puede hacer un margen rápido y restablecer el relleno con esta pieza de CSS:

*{margin: 0; padding: 0}

Cuando diseñe su CSS, asegúrese de estar usando un navegador moderno y compatible con los estándares (personalmente, recomendaría Firefox 3, que tiene una excelente barra de herramientas para desarrolladores web , con la cual puede editar CSS desde su navegador). Si lo hace, su sitio se verá bien en todos los navegadores nuevos.

La mayoría de los problemas de diseño que tendrá probablemente sean causados por la interpretación incorrecta de Internet Explorer del modelo de caja, puede evitar esto al nunca establecer un ancho y un margen o relleno al mismo tiempo. Esto puede parecer molesto pero no lo es, solo aplica el relleno o margen al contenido que está dentro de tu elemento que tiene un ancho establecido.

Por supuesto, existen más problemas, pero este es probablemente el más común y molesto, para cuestiones más específicas siempre puedes probar google. Además, últimamente estoy considerando ignorar IE6 y navegadores más antiguos si la audiencia de mi sitio lo permite, en un sitio de diseño web nunca encontrarás a nadie que use IE6, ¿verdad? Por supuesto, esto no es posible a menudo ya que muchas personas (locas) siguen usando IE6.

Además, si necesita probar su browsershots sitios es una forma gratuita de hacerlo rápidamente.

Estás haciendo una pregunta incorrecta, porque esta es la única forma de responder eso:

<!DOCTYPE html> <html> <head> <style>* { background: #fff }</style> </head> <body></body> </html>

No hay mucha respuesta, ¿verdad? :)

Todos los demás están aquí: haz que tu CSS funcione en todos los navegadores, no intentes que se vea igual . No puedes.

Esta es realmente una pregunta difícil de responder: ¿todos los navegadores? ¿Esto significa todas las versiones? Navegadores móviles? ¿Solo los de "línea principal" (ópera, firefox, es decir, safari)?

No encontrará incluso el cumplimiento total en el nivel 1 de CSS, por lo que habrá algunos ajustes que tendrá que realizar. En mi experiencia, Opera, Firefox y Safari se comportan de manera similar cuando se trata de cosas básicas (posicionamiento, flotadores, divs, etc.) y es solo IE por lo que tendrás que ajustar.

También puede usar una biblioteca o framework CSS probado como yahoo grids ( http://developer.yahoo.com/yui/grids/ ) o una interfaz programática como el toolkit web de google ( http://code.google.com/webtoolkit/ )

Estoy de acuerdo con todas las sugerencias de "reinicio" y las sugerencias de la "cuadrícula", pero quería agregar un consejo: el objetivo de idéntico en todos los navegadores es, en términos prácticos, inalcanzable porque no se puede controlar al cliente. Ejemplo: fuentes.

Usted declara sus estilos de fuente en CSS pero algunas máquinas Linux, algunas Mac, algunos navegadores móviles, no tendrán la fuente que especificó. Esta variación conduce a diferentes longitudes de texto y envoltura. Luego está la varianza de las versiones del navegador y los sistemas operativos que ejecutan cada uno; cómo diferentes navegadores implementan funciones de zoom; y el tamaño del texto puede ser ajustado por el usuario final. La representación idéntica es simplemente un objetivo inalcanzable.

¡Pero anímate! Esta es la parte "artística" de CSS: poder ser flexible en su diseño de manera que las variaciones entre los navegadores, los sistemas operativos y los ajustes del usuario final se manejen con elegancia. No se esfuerce por una representación idéntica; debe esforzarse por lograr consistencia de marca + experiencia apropiada + flexibilidad.

He tenido éxito usando el reinicio CSS de Eric Meyer disponible here . Básicamente, anula un grupo de estilos CSS del navegador que son predeterminados. Habiendo dicho eso, todavía hay muchas diferencias (probablemente algunas de las que le preocupan son las diferencias en el modelo de caja, etc. En ese caso, podría ser mejor usar Blueprint para manejar la mayoría de sus CSS).

La interfaz de usuario de Yahoo (YUI) tiene una implementación de restablecimiento de CSS que busca formar una línea base común en todos los navegadores. Esto debería acercarte bastante.

La fundación Yahoo css ayudará. Para estandarizar el formateo, querrás reiniciar y basar.

Los frameworks css ciertamente ayudan, aunque pueden ser muy pesados debido a un montón de estilos que no necesitará ni usará.

echale un vistazo a la orientación de IE usando comentarios condicionales y Just One Stylesheet en Posición lo es todo por una gran técnica para alimentar estilos específicos de la versión IE sin usar hacks de CSS; esto le permite mantener las reglas de estilo juntas por selector en lugar de por navegador.

Me gusta desarrollar primero contra Firefox, a menudo usando el YUI de Yahoo para restablecer (y las cuadrículas para la estructura básica de la página) y usar directivas condicionales de IE para anular los formatos que IE, en todo su sentido, maneja de manera diferente.

index.html

<head> <link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/base-min.css" /> <link rel="stylesheet" type="text/css" media="all" href="styles/yui/grids/grids.css" /> <link rel="stylesheet" type="text/css" media="all" href="styles/screen.foo.css" /> <link rel="stylesheet" type="text/css" media="print" href="styles/print.foo.css" />

 </head>

Organice su flujo de trabajo de la siguiente manera y reducirá una gran pérdida de tiempo.

Asegúrate de declarar un tipo de documento .
Use uno de los métodos de reinicio que otros han mencionado aquí.
Trabaja en tu estructura
Evite usar ancho y relleno en el mismo elemento donde pueda.
Siempre piense en reducir HTML y CSS innecesarios en lugar de agregar todo el tiempo.
Trate de no utilizar el margen izquierdo y derecho cuando los elementos flotantes.

Si se atiene a esos elementos, muchos de los problemas más comunes no aparecerán.

El artículo de PS One que olvidé mencionar fue hacer uso de los validadores en W3.

Pruebe su CSS en todos los navegadores a medida que avanza. Es horrible conseguir el píxel perfecto en el navegador de tu mascota solo para descubrir que está lejos en otros navegadores.

Tomando este enfoque te facilitará entender qué funcionará en todos los navegadores principales.

Recomiendo echar un vistazo a blueprintcss.org y 960 Grid System .

Además de realizar restablecimientos e incluir arreglos de CSS para Internet Explorer, ambos te proporcionarán una cuadrícula de diseño fácil de usar que se encargará de muchos ajustes tediosos al crear diseños basados en CSS.

Si necesita ser perfecto como un píxel, necesitará usar px en sus hojas de estilo. Use una hoja de estilo de restablecimiento de css , y luego califique todo en función de los píxeles.

Para asegurarse de que su CSS se está procesando correctamente en diferentes navegadores, es posible que encuentre útil un servicio como browsershots ; sin embargo, creo que le resultará muy difícil obtener una coherencia absoluta en todos los navegadores.

Mi preferencia personal es utilizar el marcado y el CSS correctos, omitir los navegadores y los diseños de diseño para degradar con gracia.

Siempre he creado una hoja de estilo CSS básica que funciona en W3C navegadores totalmente compatibles como Firefox y luego he creado hojas alternativas de estilo de navegador para corregir cualquier problema de estilo en otros navegadores, es decir, IE6, IE7, etc.

Puede usar el siguiente código dentro del HTML para seleccionar hojas de estilos de IE apropiadas.

También puede utilizar sitios web en línea como browsershots de browsershots para ver su sitio en diferentes navegadores.

También puede consultar un marco para css como Blueprint o css-boilerplate o el marco de grillas yui . Por lo general, estos marcos te configuran con un conjunto estándar de definiciones de clase css que puedes aplicar a elementos para diseñarlos de una manera específica y definida.

Tiendo a encontrar que el CSS de aspecto idéntico aparece si utilizo los flotadores para diseñar la página en cuadros. El modelo de flujo funciona como usted cree que debería, y se procesa fielmente en todos los principales navegadores. Sé que algunos me dirán que el uso de muchos flotadores está mal, pero funciona sorprendentemente bien.

Usar CSS Reset le dará a todo el mismo punto de partida, pero no ayudará mucho con los cambios que realice más allá de ese punto de partida. No puedo decir que haya realmente una manera fácil. Una solución es atenerse a un conjunto limitado de CSS que sepa que funciona bien en todos los navegadores que quiera admitir. Es posible que no pueda hacer muchas de las cosas más sofisticadas de CSS, pero su tiempo de depuración de CSS debería reducirse considerablemente.

Usualmente desarrollo contra el validador W3C CSS , luego verifico que las cosas se vean de la manera que quiero en los respectivos navegadores. Validar va un largo camino hacia un comportamiento consistente.

A veces voy a quitar la página solo a los estilos que se validan y se muestran correctamente en los navegadores principales a los que me dirijo, a veces la complementa con ajustes específicos del navegador, como han mencionado otros carteles.

intente usar un restablecimiento de css como el reinicio eric meyer o el reinicio YUI . ayudará pero no es una manera fácil o perfecta de hacer que las cosas se vean idénticas en cada navegador

¿Los sitios web deben verse exactamente iguales en todos los navegadores?

Aparte de eso, creo que la práctica hace la perfección. Y lea sobre todo lo que puede encontrar sobre los problemas potenciales con los que puede tropezar. Con los archivos de reinicio, los tipos de documento correctos, los validadores y los marcos pueden ayudarlo en cierta medida, pero al final usted tiene el control del código y solo usted sabe exactamente cómo quiere que se vea. El código podría ser válido y el navegador podría hacer exactamente lo que le indicó y aún no se parece a lo que desea.

Cuanto más uses CSS para el diseño, cuantos más problemas encuentres, más problemas encontrarás y más aprenderás. Después de bastantes años de hacer diseños completamente con HTML semántico estructurado y CSS ordenado, rara vez tengo que perder mucho tiempo corrigiendo fallas en uno u otro navegador.

Use un fragmento de restablecimiento
Desarrollar con estándares web
Valide su marcado y CSS
No use margen y relleno en las mismas partes de un elemento
Usar condicionales de IE
Prueba en todos los navegadores que quieras apoyar
Comprende que nada va a ser perfecto , pero puedes acercarte bastante.