respeta para pagina navegadores internet habilitar compatibilidad codigo bien html css internet-explorer internet-explorer-7 internet-explorer-6

html - para - He decidido no incluir IE6. ¿Qué sabrosas recetas de CSS puedo usar?



internet explorer no respeta css (5)

Ok, primero, esta no es una discusión sobre si debería estar atendiendo IE6. Estoy seguro de que hay cientos de temas en SO en los que puedes discutir los pros, los contras, las cuotas de mercado, los Javascript shivs y todas las demás cosas que vienen con él.

Digamos que he puesto dos dedos en IE6 y estoy ignorando su existencia.

¿Qué puedo hacer ahora de manera diferente en la forma en que estilo mis páginas?

Pseudo-selectores?

Selectores padre / hijo?

¿Otra cosa ordenada?

¿Cuáles son las nuevas libertades que vienen con el abandono de IE6?

Sé que algunos de ustedes estarán ansiosos por decirme por qué debería soportar ie6 o sobre correcciones js que signifiquen que puedo usar selectores avanzados, etc. etc. - ¡No pierda su / mi / nuestro tiempo!

Ahora puede comenzar a usar estándares web ...

Con IE6 fuera del camino, puede comenzar a usar montones de cosas realmente agradables. A continuación hay una lista de cosas específicas de IE6 .

Nuevas características

Errores corregidos en IE7:

Cosas no técnicas:

  • Ahorre tiempo y dinero
  • Bote el 90% de los hacks de CSS

Asumiendo que todavía eliges apoyar IE7, esa será tu nueva línea base.

Esta publicación de blog del equipo de IE describe las mejoras que IE7 realizó en IE6: http://blogs.msdn.com/b/ie/archive/2006/08/22/712830.aspx?wa=wsignin1.0

En su mayoría se reduce a menos errores de los que preocuparse (muchos errores CSS, problemas de transparencia PNG).

La nueva funcionalidad de CSS es limitada pero útil:

  • background-attachment: fijo
  • : coloca el cursor sobre todos los elementos
  • posicionamiento fijo
  • ancho / alto mínimo / máximo
  • mejoras en el selector (hijo y atributo)

Depende realmente de qué navegadores quieras apuntar. Todavía hay muchas cosas que buscar.

Aquí hay una lista de características no compatibles en IE6 que ahora puede usar:

  • selector de niños (div> p)
  • selector de hermanos adyacentes (h1 + p)
  • selector general de hermanos (h1 ~ p)
  • selectores de clase encadenados (.class1.class2)
  • selector de atributos (a [href])
  • selector descendiente después de: hover pseudo-class (div: hover span)
  • pseudo-clases encadenadas (a: first-child: hover)
  • : desplazarse sobre elementos que no son ancla
  • :primer hijo
  • "dimensiones virtuales" (dimensiones determinadas por arriba, derecha, izquierda, abajo cuando la posición es absoluta)
  • min-height, min-width
  • altura máxima, ancho máximo
  • color de borde transparente
  • posición: fija
  • background-attachment: trabajos fijos solo en el elemento raíz

Un recurso realmente bueno que puede ver es http://caniuse.com/ para ver qué es compatible con dónde.

Y finalmente, una lista de errores de IE6 que se corrigieron en IE7. Más información aquí.

  • soporte png básico transparente alfa
  • selector de niños css
  • ! importante funciona más correctamente
  • : soporte de primera letra
  • error de clic parcial
  • window.XMLHttpRequest se hizo presente, en lugar de ActiveXObject
  • etiqueta abbr es reconocida
  • El error select z-index se resuelve a medida que se convierte en sin ventana

Sobre todo la libertad es tu momento ahora que no tienes que lidiar con errores de IE6 pero la gran ganancia que Greg no mencionó es los selectores relacionales adicionales: > , + y ~ (hijos y hermanos) y no te preocupes por hasLayout tanto.

Quirksmode te dirá lo que puedes y no puedes hacer ahora.

Utilicé este sitio para estar al día con IE6 / ~ IE6 + rarezas / soluciones alternativas:

http://work.arounds.org/

Podrías revisar qué es lo que funciona en IE6, y darte una palmadita en la espalda para no tener que volver a hacerlo;) Creo que eso es un ''regalo'' en sí mismo ... ¡se ahorró tiempo!

Al menos ahora puedes enfocar 0 veces en IE6, y más tiempo en IE7, IE8 emite ...