Islavisual.com - Listado Articulos sobre Internet Explorer

CSS Hacks para Chrome, Firefox, Opera, Safari, e Internet Explorer

Todos los que estamos en el maravilloso mundo de la maquetación conocemos lo tedioso que se hace, a veces, realizar el famoso efecto de que las páginas web se vean exáctamente iguales en todos los navegadores. Los Hacks, aunque a veces más que ayudar nos ofusquen, juegan un papel importante en la compatibilidad Cross Browser. Un CSS Hack es una especificación para conseguir que un navegador se comporte de manera distinta a los demás. Hay muchos Hacks, a cada cual más difícil de pronunciar y memorizar pero, gracias a este artículo, los podremos consultar siempre que queramos.

Cuándo utilizar el elemento Defs de un gráfico SVG

Una etiqueta que verás contínuamente en SVG es defs. Es crucial que se entienda cuándo usar el elemento defs en SVG ya que es como una alerta que le indica al parser XML que está a punto de definir algo. Al igual que cualquier otra etiqueta XML, defs debe tener una etiqueta de apertura y cierre en el código. La etiqueta defs es un contenedor que contiene otros elementos. Cuando colocamos otras etiquetas dentro defs, se está creando un conjunto identificable que puede ser usado una vez o varias veces. La etiqueta defs permite, por tanto, establecer una definición que no se mostrará hasta que se requiera. Se podría pensar en defs como un modelo. Se crea un único esquema que se puede utilizar para construir otras estructuras múltiples.

Como hacer que la imagen de fondo se adapte al tamaño de la pantalla con CSS3

En CSS2.1, lás imágenes de fondo se aplicaban a un recipiente o DIV conservado sus dimensiones fijas. Afortunadamente, CSS3 introduce la propiedad background-size que permite que los fondos de pantalla sean estirados o distorsionados. Por defecto, la anchura y la altura del fondo o background se establece a auto que mantiene las dimensiones originales de la imagen.

Reflexión o efectos espejo en CSS3

Antes de CSS3, cuando queríamos hacer un efecto espejo o un reflejo teníamos que usar jQuery. Eso estaba bien ya que a los usuarios de internet les encantan los efectos visuales y, por norma general, la vistosidad. Ahora con CSS3, hacer esto es muy sencillo. El código que debajo os propongo está dentro de la normativa Cross Browsing, por lo que funciona en todos los navegadore. Hay que decir que en IE8 e inferiores el efecto no es maravilloso pero no queda mal del todo.

Usar jQuery 2.0 y seguir dando soporte a versiones anteriores a IE9

En el blog de jQuery han anunciado hace algún tiempo que esperaban sacar la versión 2.0 a primeros de 2013, no mucho después de la 1.9 que se espera a finales del 2012. La versión 2.0 apoyará las mismas API que jQuery 1.9 hace, pero elimina el soporte para IE 6/7/8. A continuación de esta afirmación, los desarrolladores de jQuery nos indican que si queremos dar soporte a IE8 o anteriores debemos elejir la versión 1.9 y si no podemos usar la 2.0.

Transparencias en CSS3

Antes de CSS3, las transparencias sólo se podían hacer en Internet Explorer con la propiedad filter y en los demás con opacity. Esto era un poco caótico y encima funcionaba de aquella manera ya que tenía las limitaciones de aplicarse a todo el recipiente o contenedor. Ejemplo

Gradientes y degradados en CSS3

Los degradados y gradientes son uno de los recursos más utilizados por los diseñadores para hacer que las las webs sean más vistosas y la verdad es que dan mucho juego para mejorar el aspecto de la página. No obstante, hasta la llegada de CSS3, también tenían una desventaja importante, ya que para implementarlos necesitábamos usar imágenes de fondo para los elementos. A medida que ha ido avanzando y creciendo el CSS3, se ha mejorado el soporte y, entre otras cosas, también en el uso de degradados.

Sombras en CSS3

Un estilo que, posiblemente, nos librará más de una vez de usar imágenes y Photoshop es el efecto shadow de CSS3. Este tiene 2 variantes, sombra en recipiente o contenedor y sombra en texto. Cuando IE9 fue lanzado, estabamos contentos de ver a todas las grandes características de CSS3 como Transformaciones 2D, selectores avanzados, bordes redondeados, RGBA / HSLA colores, fuentes WOFF ... se fuesen a incluir. Sin embargo, nos decepcionó que IE9 no fuera compatible con text-shadow y, claro, eso nos lleva a, otra vez, ensuciar el código.