Hacks CSS: Selectores para un navegador en particular

Distingir entre Google Chrome y Safari con CSS pese a que los dos usan el mismo motor de renderizado

/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName {
/* properties go here */
}
/* Safari hack */
body:first-of-type .elementOrClassName{
/* properties go here */
}

Depurar estilos en Firefox, ie6 e ie7

#MyDiv {margin : 10px 10px 10px 10px;}
/* IE6 Only (start html hack)*/
* html #MyDiv {margin : 5px 5px 5px 5px;}
/* IE7 Only */
*:first-child+html #MyDiv {margin : 2px 2px 2px 2px;} 
/* IE7 and IE6 */
*:first-child+html {} * html {}
/* Safari 3 y Opera 9 Only*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
 /* Reglas de Safari 3.0 y Opera 9  */
}

Hack para IE7 y navegadores modernos

 html>body #content {} 

Hack para navegadores modernos no IE7

 html>/**/body #content {} 

Hack para Opera 9 y anteriores

 html:first-child #content {} 

Hack para Safari

 html[xmlns*=""] body:last-child #content {} 

Star-html hack, no valida

 /* Hides from IE5-mac \*/
 * html .buggybox {height: 1%;}/*Holly Hack*/
 /* End hide from IE5-mac */ 

alternativa, usar !important, si valida

/* Hides from IE5-mac \*/
.buggybox {
 height: auto !important;
 height: 1%;
}
/* End hide from IE5-mac */

• CSS Hack para Chrome y Safari
• Hacks CSS mediante selectores
• Evita los hacks en tu css
• Selectores CSS especificos para ciertos navegadores
• Diseñar en css para Firefox, ie6 e ie7

Posición absoluta vs relativa

La posición absoluta y relativa es siempre con respecto al padre del elemento que estamos posicionando.

Simplemente que la absoluta no entra en el flujo del documento y la relativa sí. Es decir con una relativa y con un clear puedes hacer que el texto de otro div al mismo nivel no se ponga encima del primer div relativo. Esto con la posición absoluta no se puede hacer.

Vía Ovillo

Tipos de medios en CSS 2

Existen 10 tipos de medios (interfaces) en CSS 2.

1. all (todos): todos los dispositivos
2. aural (fonética): sintetizadores de voz
3. braille (braille): destinados a la retroalimentación táctil dispositivos Braille
4. embossed (en relieve): variación de Braille, al parecer, es para impresoras Braille, y por lo tanto, ofrece paginación
5. handheld (de mano): para usar en un teléfono móvil u otros dispositivos de mano como PDA´S
6. print (imprimir): presentaciones de documentos destinados a la impresión
7. projection (proyección): documentos destinados a la proyección, por ejemplo, proyectores de transparencias, impresoras de transparencias, cañones. Ofrece paginación
8. screen (pantalla): la que siempre usamos cuando trabajamos para las pantallas de ordenador
9. TTY: Destinados a los medios de comunicación a través de una instalación de visualización tipo parrilla, como teletipos, terminales, o dispositivos portátiles con capacidades limitadas de pantalla
10. TV: Destinado a dispositivos tipo televisión

El tipo de medio al que va dirigida una hoja de estilo puede especificarse en el atributo media en los elementos link o style (separados por comas en el caso de ser más de uno):

<link href="pantalla.css" media="screen" type="text/css" rel="StyleSheet" />
<style media="screen,print" type="text/css"></style> 

También definidos con las reglas de tipo @media, como si fuera un estilo más

@media print {
h2 { page-break-after:avoid; }
}

o definidos con las reglas de tipo @import

@import url("estilos_basicos.css") screen;
@import url("estilos_impresora.css") print; 

Vía Intenta

Resetear los estilos CSS predeterminados

Por defecto los navegadores representan los distintos elementos HTML de una determinada manera no coincidiendo siempre entre ellos. Para evitarlo tratamos de empezar un diseño (layout) con una hoja de estilos "nuestra" por defecto que sea previsible con lo que queremos ver en todos los navegadores (cross-browsing).

• Estilos generales
• Estilos de los formularios

Una forma rápida de hacer todo esto es utilizando el selector universal (*) pero parece que no es del todo correcto pues sobrecarga el navegador.

Más propuestas sobre este tema:

• SIDAR
• Yahoo! UI Library
• Torres Burriel
• Eric Meyer

Cómo ordenar las propiedades CSS al escribirlas

Se trata de una propuesta para escribir las propiedades CSS que consiste en ir de fuera hacia dentro

1. Comportamiento: display, overflow, clear
2. Posición: position, float, top, left, ...
3. Tamaño: width, height
4. Márgenes y bordes: margin, border, padding
5. Texto: font, text, ...
6. Fondos y colores: background, color

Vía Daniel Mota