Hacks CSS para IE, Safari, Opera, Firefox, Chrome

0 comentarios

Listado de hacks css para los diferentes tipos de navegadores y versiones.

No suelo utilizar este tipo de hacks en las hojas de estilos, pero me parece interesante y a continuación teneis un listado de hacks css dividido entre selectores y atributos proporcionado por Paulirish en su blog:

Selectores

/* IE6 y superiores */
* html #uno  { color: red }
 
/* IE7 */
*:first-child+html #dos { color: red }
 
/* IE7, FF, Safari, Opera  */
html>body #tres { color: red }
 
/* IE8, FF, Safari, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 y superiores, Safari 2 */
html:first-child #cinco { color: red }
 
/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
 
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}
 
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}
 
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }
 
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }
 
/* Everything but IE6-8 */
:root *> #quince { color: red  }
 
/* IE7 */
*+html #dieciocho {  color: red }
 
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }
 
/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

Atributos

/* IE6 */
#once { _color: blue }
 
/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }
 
/* Everything but IE6 */
#diecisiete { color/**/: blue }
 
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
 
/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }
 
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; }

Condicionales para Internet Explorer

1 comentario

A veces es necesario el uso de condicionales de IE, especialmente si deseamos corregir errores de maquetación en las hojas de estilo para versiones desfasadas del Internet explorer.

Un ejemplo de condicionales que debemos insertar dentro del de nuestra web para filtrar los estilos CSS de las diferentes versiones de IE6, IE7, IE8:

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

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

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

CSS hacks Internet Explorer 5-8

0 comentarios

El objetivo principal de este artículo, no es el de usar estos 10 hacks para IE, pero si para entender lo que hacks se han estado utilizando por algunos webmasters… Para solucionar estas diferencias CSS entre navegadores (en este caso IE), yo recomiendo crear diferentes hojas de estilos, y así evitamos ensuciar nuestro archivo CSS. Si es cierto que si solo es algo puntual puede que si merezca la pena aplicarlos en nuestra hoja de estilos.

1. IE 8

.color { color: #f00/; }

2. IE 7

*+html .box { background:#f00; }  
*:first-child+html .box { background:#f00; }

3. IE 7 y anteriores

*:first-child+html {} * html {}

4. IE 7 y anteriores

.box { *background: #f00; }

5. IE 6

.box { _background/**/:/**/ #f00; }

6. IE 6

.box { _background: #f00; }

7. IE 6

*html .box { background:#f00; }

8. IE 6 y anteriores

.box { _background: #f00; }

9. IE 5.5

.box { _background:/**/ #f00; }

10. IE 5.0

.box { _background/**/: #f00; }

jQuery: Detectar Internet Explorer 6

1 comentario

Vemos 2 maneras diferentes de detectar IE6 o inferior utilizando jQuery y comentarios condicionales de Internet explorer.

Detectar IE6 con jQuery:

var IE6 = $.browser.msie && parseFloat($.browser.version) < 7;

if(IE6==true){
    alert('Utilizas Internet Explorer 6 o inferior');
}

$.browser.msie, nos dice si el navegador es internet explorer
$.browser.version, son muestra la versión del navegador

Detectar IE6 con comentarios condicionales:

<script type="text/javascript">
    var IE6 = false;
</script>
<!--[if lte IE 6]>
   <script type="text/javascript">
   IE6 = true;
   </script>
<![endif]-->

La variable IE6 se inicializa por primera vez en un fragmento de JavaScript que se ejecuta en todos los navegadores como false, y luego en función de si utilizamos IE6 se cambiará a true.

HTML5 Powered with CSS3 / Styling, Device Access, and Semantics