it-swarm-es.com

¿Cuáles son las mejores formas de implementar CSS cruzado del navegador?

¿Cuáles son las mejores formas de implementar CSS cruzado del navegador?

Regla: un enfoque para una respuesta.

4
stacker

Puede usar comentarios condicionales para solucionar problemas con Internet Explorer. Aparte de eso, nunca debería necesitar apuntar a Firefox/Chrome/Opera por separado, todos son compatibles con los estándares.

El almacenamiento en caché no debe entrar en él; deberías estar sirviendo el mismo código para todos los navegadores.

4
DisgruntledGoat

La mejor y más fácil forma es usar una biblioteca. Las bibliotecas como OOCSS, Blueprint o 960gs ya están diseñadas para replicar su pantalla en los principales navegadores. Todo lo que le queda después de eso, la mayoría de las veces, es asegurarse de que sus estilos personalizados sean compatibles con todos los navegadores y que su marcado no produzca ningún problema.

Evite hacks como la peste si es posible (sí, use condicionales).

2
Kenneth Love

Cuando leo preguntas y respuestas como esta, empiezo a pensar que podría estar loco, pero he escrito sitios web bastante complejos utilizando bastante CSS, incluido CSS3 y otros trucos, y nunca he tenido que recurrir incluso a comentarios condicionales.

Sin embargo, compruebo constantemente mi trabajo en varios navegadores (codifico predominantemente en Chrome y pruebo en Firefox y ie7) durante la codificación. Cuando veo que surgen problemas, simplemente doy un paso atrás, descubro por qué las cosas se presentan de manera diferente y, a menudo, elijo un enfoque ligeramente diferente.

Dicho esto, tengo un interés intelectual por estos diferentes hacks y métodos. Me gusta especialmente leer sobre las técnicas utilizadas por CSS3 PIE y modernizr.

La mejor manera de abordar la codificación entre navegadores es estar al tanto de las diferentes formas en que los diferentes navegadores interpretarán su código y escribirlo de una manera que no puedan evitar hacerlo correctamente.

1
Zach Lysobey

diseñar y desarrollar con estándares web
valide sus documentos y hojas de estilo constantemente!
prueba de navegador cruzado/plataforma cruzada diariamente!
al menos antes de enviar una solicitud de extracción o realizar una confirmación en un repositorio.

debería escribir documentos conformes de todos modos, pero esto es crucial para escribir CSS cruzado de navegador/multiplataforma.

nota: el verdadero poder de validación no se conforma el 100% del tiempo; obtendrá superpoderes una vez que comprenda lo que no necesita ser validado, puede posponerse y debe corregirse de inmediato.
y ese es el poder: la validación constante refuerza las reglas de las especificaciones, y estarás bien versado. las pruebas constantes entre navegadores y plataformas cruzadas lo mantienen interesado en las hojas de estilo de agente de usuario del navegador con las que está luchando más. conforma tus estilos como tal, tienes aún menos problemas.

puede usar bibliotecas y marcos si lo desea, pero está abstrayendo todo el daño y el dolor de sus flujos de trabajo y nunca obtendrá el ojo detallado para los estilos que está solicitando aquí. sin embargo, libs/frameworks hacen un buen trabajo al otorgarle ese poder, aunque eso generalmente viene con la hinchazón de la página.

reset.css, normalizr.css, e incluso el reinicio *{border:none; margin:0; padding:0) son armas en su arsenal para igualar el campo de juego entre el navegador y sus propios estilos.

sí, recomiendo el * "piratear", con otras dos opciones. cada uno tiene su propio lugar al luchar con los agentes de usuario.

además, es absurdo no aprovechar las fallas que tienen ciertos agentes de usuario, porque dichas fallas no se procesarán con una continuidad del 100% y deben abordarse. Al hacerlo, los defectos en sí mismos le proporcionan el gancho perfecto para detectar características, o incluso detectarlas, ¡para que puedan ser tratadas en consecuencia!

usa cada truco, falla, función o no función que puedas tener para doblar el dom y forzar a los navegadores en línea.

......si usted tiene que. pero si está desarrollando con estándares web, descubrirá que no los necesitará tanto como antes.

y dado que confía menos en ellos, cuando tenga la oportunidad de usar uno para abordar un problema, ¡úselo con rapidez! usted ya sabe cuál es el problema y también tiene una solución dirigida al problema y nada más.

cada navegador tiene sus propias formas de ser objetivo únicamente, los más obvios son los comentarios condicionales.
use comentarios condicionales para ie6-9, y use compilación condicional para representar estilos para ie10 y ie11.
pero de nuevo, si usted es dwws y dvwws, puede incluirlos en cada documento que cree, pero encontrará que las hojas de estilo son estériles, que albergan un puñado de estilos que solo apuntan a diferencias de 1-3 píxeles, o obtienen fondo -colores para estirar (o no) 100%, etc.

1
albert

Lo que hago es usar un CSS de restablecimiento y luego declaraciones condicionales. El restablecimiento CSS soluciona casi todos los problemas y el condicional soluciona cualquier problema en IE. Si hay diferencias entre los otros navegadores, generalmente trato de solucionarlos, como aumentar el ancho de todos los navegadores o un tamaño de fuente.

Yo personalmente uso el YUI reset CSS.

0
Darryl Hein

CSS3 PIE parece bastante prometedor como una capa de compatibilidad CSS3. Por supuesto, hay otras preocupaciones entre navegadores para versiones anteriores de CSS.

Pregunta relacionada con IE6, mucha información útil: ¿Debería molestarme en admitir IE6?

0
JasonBirch

Prefacio con una advertencia contra el uso de hacks CSS.

Desde un punto de vista de rendimiento puro, el almacenamiento en caché será más efectivo con un solo archivo si por ninguna otra razón responde a una sola solicitud HTTP del cliente. Además de servir el mismo archivo a todos los usuarios, independientemente del navegador, Los comentarios condicionales bloquean las descargas en algunas situaciones.

Para apuntar a todas sus diferentes versiones de Internet Explorer en un solo archivo, hay varios hacks CSS. Tenga en cuenta que esto hará que su CSS no sea válido (si la validación le preocupa).

cuerpo {
 color: rojo;/* todos los navegadores */
 color: verde\9;/* IE8 e inferior */
 * Color: amarillo;/* IE7 y menos */
 _Color: naranja;/* IE6 */
}

El bloqueo de comentarios condicionales es realmente solo un problema en algunos casos en IE8 cuando hay un comentario condicional. Dependiendo de lo que piense sobre el soporte de Internet Explorer, esto puede o no ser un problema.

Yo personalmente uso comentarios condicionales. Personalmente, creo que los hacks de CSS son horribles, y que cualquier golpe de rendimiento que provenga de comentarios condicionales, ya sea real o imaginado, no vale la pena que los hacks de CSS a menudo causa.

Los comentarios condicionales son relativamente fáciles de implementar, y hay un gran artículo sobre su uso en Quirksmode. Lo siguiente abordará solo IE6:

<! - [if IE 6]> 
 <link rel = "stylesheet" type = "text/css" href = "/ media/css/ie6.css" /> 
 <! [endif] ->

Existe una sintaxis que le permitirá orientar Internet Explorer con una versión igual, menor, mayor, menor o igual que, mayor o igual que un número de versión determinado. El ejemplo anterior es uno de igual a.

0
Bryson