Contenido

Microsoft Internet Explorer 8 y los prefijos CSS

9 sep

+ 16

No soy muy partidario de que los navegadores creen sus propias propiedades CSS, pero de alguna forma tienen que ir mostrándonos las novedades que se van implementando y las propuestas que podrían llegar a implementarse en algún momento.

Esto nos origina una cantidad de propiedades como las que nos podemos encontrar en Mozilla (-moz) o WebKit (-webkit). Ahora Microsoft anuncia que para la nueva versión de Internet Explorer 8 dispondremos de una nueva y que será una muestra de que están haciendo bien su trabajo.

-ms-propiedad

No son milisegundos, sinó que es el nuevo prefijo que los desarrolladores web tendremos que conocer para lidiar con el CSS de este navegador.

Property Type W3C Status
-ms-accelerator Extension
-ms-background-position-x CSS3 Working Draft
-ms-background-position-y CSS3 Working Draft
-ms-behavior Extension
-ms-block-progression CSS3 Editor’s Draft
-ms-filter Extension
-ms-ime-mode Extension
-ms-layout-grid CSS3 Editor’s Draft
-ms-layout-grid-char CSS3 Editor’s Draft
-ms-layout-grid-line CSS3 Editor’s Draft
-ms-layout-grid-mode CSS3 Editor’s Draft
-ms-layout-grid-type CSS3 Editor’s Draft
-ms-line-break CSS3 Working Draft
-ms-line-grid-mode CSS3 Editor’s Draft
-ms-interpolation-mode Extension
-ms-overflow-x CSS3 Working Draft
-ms-overflow-y CSS3 Working Draft
-ms-scrollbar-3dlight-color Extension
-ms-scrollbar-arrow-color Extension
-ms-scrollbar-base-color Extension
-ms-scrollbar-darkshadow-color Extension
-ms-scrollbar-face-color Extension
-ms-scrollbar-highlight-color Extension
-ms-scrollbar-shadow-color Extension
-ms-scrollbar-track-color Extension
-ms-text-align-last CSS3 Working Draft
-ms-text-autospace CSS3 Working Draft
-ms-text-justify CSS3 Working Draft
-ms-text-kashida-space CSS3 Working Draft
-ms-text-overflow CSS3 Working Draft
-ms-text-underline-position Extension
-ms-word-break CSS3 Working Draft
-ms-word-wrap CSS3 Working Draft
-ms-writing-mode CSS3 Editor’s Draft
-ms-zoom Extension

Como podemos ver, se han implementado muchas opciones y esto nos permite añadir más opciones a nuestros diseños gracias a estas propiedades CSS, el único problema es el resultado en nuestra hoja de estilos:

-moz-border-radius: 1em; // Mozilla
-ms-border-radius: 1em; // Internet Explorer 8 (No soportado)
-webkit-border-radius: 1em; // WebKit y Safari
border-radius: 1em; // Para cuando se cumplan los estandares.

¿Un poco feo no?

Anotación

Quiero remarcar el gran trabajo que están haciendo con Internet Explorer 8, dejando a un lado el odio hacia Microsoft, hay que reconocer que esta versión será digna de competir en la guerra de los navegadores, sin duda va a ser muy interesante.

  • Lo que yo no comprendo es por que no evitan los prefijos y nos ahorran tiempo al escribir CSS y ahorran tiempo a los usuarios descargandolos… creo que hace tiempo que se perdió de vista eso de que los navegadores web sirvan para ver la información publica de internet y se ha convertido en una guerra de egos por ver quien tiene mas cupo de mercado…

    Si todos bajaran un poco del burro el mundo seria mas fácil *-)

  • @Antares: “Si todos bajaran un poco del burro…”
    XDD

  • Anotar que la mayoría de las que figuran como ‘Extension’ (se me escapan 2) no son novedades, éstas ya existen en Internet Explorer 6 y 7, sólo que no incluyen el prefijo ‘-ms-‘, lo que (y ésto va por Antares) produce problemas, dado que cuando te las encuentras (por ejemplo, si alguna vez trabajas con VisualStudio y te las mete automáticamente o te las ofrece, o te las cuela Word al pasar a html un documento) y aparecen como un elemento ‘normal’ o ‘estándar’ que crees funcionará en cualquier navegador. Nada más lejos de la realidad.

    El no usar prefijos complica, dado además, que pueden producirse colisiones (y se han provocado, en su día, entre Netscape e IE, con propiedades de mismo nombre y comportamiento distinto o ligeramente distinto, de las cuales algunas finalmente formaron parte de CSS 2, pero aún siguen comportándose de distinto modo en IE en comparación al estándar -y Microsoft lo mantiene así ya que implica compatibiliad con páginas creadas para versiones anteriores de IE, sobre todo IE-6 que mantiene la mayor cuota de mercado todavía-)

    El usar prefijos nos informa automáticamente que son opciones limitadas a un navegador-versión concretas, lo que nos advierte de usarlas con cuidado, o no usarlas, tan sólo testearlas a modo de probar cosas nuevas, que si son aceptadas por desarrolladores y competencia podrán convertirse en parte de un futuro estándar.

    El problema surge ante la lentitud de la W3C. Ejemplos como el del ‘border-radius’ de anieto2k son prueba evidente de algo que ‘gusta’ a desarrolladores web, cuyas dificultades fueron superadas por los navegadores y han sido adoptados por éstos, y que ahora sólo esperan un cambio de nombre en cuanto el estándar (al fin!) se termine.

    En cuanto a Microsoft, llegan muy tarde a emplear prefijos, y hay muchas páginas empleando elementos como filter, zoom (para hacks) y scrollbar-x

  • Pues es una tristisima noticia para los desarrolladores. Vamos a acabar locos programando para n navegadores.

    Yo desde luego me niego a usar algo si no estoy seguro de que es estándar para al menos explorer y mozilla.

  • @largoRSL, lo de mantener la compatibilidad con webs anteriores me parece correcto, pero el problema sigue siendo que si no utilizan todos el mismo sistema y la misma palabra acabamos escribiendo el triple de codigo y las webs no acaban de evolucionar.
    Ademas.. si todos hemos podido aprender Hacks para discriminar entre navegadores y aplicar cada extensión y propiedad en cada momento no creo que les sea tan difícil a los navegadores hacer lo mismo con las paginas detectando la antigüedad o el motor que tienen que aplicar para interpretarlo…

    me quedo con @Manu.. no se puede innovar sin una seguridad de estandarización y usando extensiones y extensiones…

  • He sido malinterpretado.

    1- Por supuesto que quiero que la web avance

    2- NO, no estoy dispuesto a escribir el triple de código

    3- Justamente, no tener que preocuparnos de la compatibilidad con webs anteriores es lo ideal (si éstas cumpliesen normas ‘estables’ en su día, y así mismo los navegadores, usando el ‘doctype’ adecuado, avanzaríamos con nuevas normas que podrían romper compatibilidad hacia atrás sin problemas, por emplear nuevos ‘doctype’)

    Y PARA CONSEGUIR LO ANTERIOR LO MEJOR ES QUE SE USEN PREFIJOS!!!

    Yo entiendo que:

    – Los prefijos existen para ‘exhibir’ nuevas posibilidades de los navegadores (INNOVAR), NO para emplearlas ‘en serie’ o ‘en producción’, digamos.

    – Actualmente, con los Hacks que usamos en nuestras webs, las 4 líneas del ejemplo del ‘border-radius’ serían muchas más líneas (y menos parecidas y lógicas que esas, con códigos muy dispares -imagínate, para IE6 y IE7, tener que simular el borde redondeado con imágenes, mientras usas ‘border-radius’ para los otros-)

    – Así y a todo, yo no pienso usar el -ms-border-radius ni el -moz-border-radius, etc, hasta que se finalice la norma css3 y la implementen los navegadores con el nombre ‘border-radius’. Pero sí, probaré mientras a ver cómo funciona, y en los distintos navegadores, aprendiendo cómo podré usarla en un futuro.

    – Si los navegadores actuales implementasen el ‘border-radius’ (por poner un ejemplo de muchos) con ese nombre (sin prefijo), ésta propiedad sería usada en documentos sin doctype o con un doctype erróneo, y ésto producirá (de cara a un posible html5 o 6 y css4) que se repita el punto 3. -el ser humano es el único animal que tropieza 2 veces (o más) en la misma piedra, no?-. Además ¿y si la W3C modifica el comportamiento del border-radius cara la versión final de CSS3? todo estaría mal hecho!!

    – Si bien, reitero, no deben usarse las nuevas propiedades con extensión.
    – Y tener en cuenta que NO TODAS ESAS EXTENSIONES FORMARÁN PARTE DE LA NORMA y serán obsoletas de por vida
    Piensa por ejemplo en las propiedades ‘scrollbar’, que existen al menos desde IE5.5 (y sólo en IE), no pertenecen a ningún estándar y parece que No será parte tampoco de CSS3, por lo cual, nunca debieron haber sido usadas

    Mi conclusión:
    – No usar extensiones
    (estando éstas bien diferenciadas de la norma -y nada mejor que los prefijos para diferenciarlas-)
    – Atenerse al estándar actual
    (no premeditarse al css3 ni ninguno otro, por si es modificado)

    Ésto es lo que nos asegura que podemos (permíteme parafrasearte):

    ‘innovar con una seguridad de estandarización’

  • PD: siento dar la brasa con comentarios tan grandes, pero no se explicarme con menos palabras

  • Hola:

    Vuelvo a comentar hoy tras leer una noticia (de hace tan sólo 2 días!) que corrobora lo que he dicho ayer en cuanto a la ‘inestabilidad’ de nuevos elementos como ‘border-radius’, el desaconsejo de emplearlos y lo bueno de que sólo se añadan como extensiones todavía:

    ‘Nuevos cambios del W3C para CSS3′. Básicamente, nueva sintaxis abreviada (‘shorthand syntax’) para border-radius, y nuevas opciones para backgrounds.

    Ésto significa que actualmente NINGÚN motor web (ningún navegador) implementa esa nueva especificación. Y quienes hayan empleado en sus desarrollos los -extension-border-radius podrían dejar de verse éstos igual cuando los navegadores implementen los nuevos cambios -o los que aún puedan venir-.

    Un saludo

  • Ah, pero… ¿funciona -ms-border-radius?

  • Gozalo –

    Claro funciona aqui te dejo estos ejemplos CSS

    -moz-border-radius: 0px 0px 0px 0px; <– Mozilla Firefox
    -ms-border-radius: 0px 0px 0px 0px; <– IE 8
    -webkit-border-radius: 0px 0px 0px 0px; <– Chrome, Safari
    -khtml-border-radius: 0px 0px 0px 0px; <– Konqueror

  • Logré hacer mis Divs con bordes redondeados para todos los navegadores.

    Pero menos para internet explorer 8. De verdad no funciona esta propiead para IE8. Alguien lo ha comprobado??

  • Yo probé la propiedad -ms-border-radius y no funciona…

  • Yo también la probé y tampoco me funciona.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.