Mostrando las entradas con la etiqueta CSS. Mostrar todas las entradas
Mostrando las entradas con la etiqueta CSS. Mostrar todas las entradas

miércoles, noviembre 16, 2011

La guía defitiva de hacks css

Años y años de probar uno y otro, fallar y acertar, utilizar javascript para corregir la visualización en los sitios en los diversos navegadores, me llevó a tener una colección de hacks (los cuales no son de mi autoría, sino que los he encontrado en diversos blogs) que hoy quisiera compartir para quienes se encuentran en ese momento, buscando y buscando por donde sea un código que nos haga hacer que el navegador muestre nuestra página tal y como la concebimos.
De entrada debo decir que usarlos todos al mismo tiempo es un error; seguramente nuestra hoja de estilos esta mal y es necesario replantearlo.
Los hacks aquí presentados son para ser usados en caso de REALES emergencias, de ser posible no usarlos ya que, la mayoría no pasan la validación en la W3C.
Pero cuando se dan esos casos en los que no sabemos qué sucedió, esta lista ayudará para salir avante de estas situaciones cuando el tiempo (que seguramente así es en todo momento) es crucial.
No son todos los que existen, pero estos son los que a mi me han funcionado, espero a alguien más le sirvan:

HACKS PARA FORZAR A NAVEGADORES A CUMPLIR LAS REGLAS (ESPECIALMENTE IE)
No todos estas reglas cumplen con los estándares de la W3C, por lo que la validación no pasará en algunos casos. Usarse sólo en caso muy necesario.

#selector: clase, id u objeto al que se requiera aplicar la regla (por ejemplo: #container, .main).
atributo: objeto css al que se haga referencia (margin, padding, float, etc.)
propiedad: propiedad del atributo css al que se haga referencia (left, right, 0px, etc.)

REGLA PARA IE6 Y ANTERIORES:
NOTA: Si los objetos se encuentran flotados (float), es necesario utilizar el atributo "zoom: 1" y "display: inline";

* html #selector { atributo: propiedad;}


Para el :hover, :active y :focus en IE6, es necesario incluir el archivo csshover3.htc, el cual se descarga de la página http://peterned.home.xs4all.nl/csshover.html
Descarga la versión 3 y ponla en tu sitio, y aqui corrige la dirección relativa hacia el archivo.


#selector { behavior: url(csshover3.htc);}

Para las transparencias en IE6, es necesario incluir los archivos iepngfix y blank.gif, los cuales se descargan de la página http://www.twinhelix.com/css/iepngfix/
Descarga los archivos y lee las instrucciones, y aqui corrige la dirección relativa hacia el archivo.

#selector { behavior: url(iepngfix.htc); }

Para los bordes redondeados en IE6, es necesario incluir el archivo border-radious.htc, el cual se descarga de la página http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Descarga la última versión y ponla en tu sitio, y aqui corrige la dirección relativa hacia el archivo.
NOTA: Este hack no funciona en los inputs.

#selector { behavior: url(border-radius.htc); }

REGLA PARA IE7 Y ANTERIORES

*:first-child+html #selector { atributo: propiedad; }

REGLAS PARA IE7 UNICAMENTE:

*+html #selector { tributo: propiedad; }

REGLAS PARA IE8, requiere los asteriscos, las diagonales entre el atributo y los dos puntos, así como la diagonal invertida y el 9 al final:

#selector { atributo /*\**/: propiedad \9; }

REGLAS PARA NAVEGADORES A PARTIR DE IE7 (Chrome, Firefox, Safari, IE8, etc.)

html>body #selector { atributo: propiedad; }

REGLAS PARA NAVEGADORES MODERNOS (Incluye IE8+)

html>**/body #selector { atributo: propiedad; }

REGLAS PARA CHROME: 

body:nth-of-type(1) #selector { atributo: propiedad; }

REGLAS PARA FIREFOX:

@-moz-document url-prefix() {
#selector { atributo: propiedad; }
}

REGLAS PARA SAFARI: 

html[xmlns*=""] body:last-child #selector { atributo: propiedad; }

REGLAS PARA SAFARI 3.0 Y OPERA 9: 

@media screen and (-webkit-min-device-pixel-ratio:0) {
#selector { atributo: propiedad;}
}

UNICAMENTE OPERA 9: 

html:first-child #selector { atributo: propiedad; }

OPERA 11:

@media not screen and (1) {
#selector { atributo: propiedad; }
}

martes, septiembre 18, 2007

Cosas sencillas

Pequeñas herramientas para webdesigner/webdevelopers:
Cosas sencillas: Avatar
Cosas sencillas

Optimizando CSS

La herramienta que puedes instalar en tu máquina (requiere PHP 4.0 + y Windows, Linux o OSX):
CSSTidy

La misma herramienta pero en línea:
Clean CSS

Bordes redondeados con CSS sin imágenes

Spiffy Corners

Generador de cajas con bordes redondeados en CSS

Si tienes flojera de hacerlos a manita ;), pues puedes usar esta herramienta:
Generador de cajas con bordes redondeados en CSS

Stripe Generator

Generador de líneas diagonales para usar en web:
Stripe Generator

Prueba tus páginas desde diferentes navegadores

Test your web design in different browsers

martes, julio 03, 2007

Generar texto con otra fuente

Con un método implementado por Shaun Inman, se pueden poner encabezado con un script y un flash.... Este método lo llama IFR:
IFR: Revisited and Revised

miércoles, enero 17, 2007

viernes, diciembre 08, 2006

jueves, diciembre 07, 2006

Altura mínima

Finalmente encontré la solución a mis problemas de altura con los divs:

.divCualquiera{
min-height: 125px;
height: auto !important;
height: 125px;

padding:5px;
}

Donde min-height le dice al navegador la altura mínima, sin embargo, Internet Explorer no reconoce dicha etiqueta, por lo que con height lo hará, pero empiezan los problemas con Firefox, este entiende que esa es la altura PERMANENTE y se desbordan los elementos que esten contenidos dentro de este div, por lo que la etiqueta height: auto !important lo hará...

Medios Paginados

Para hacer el CSS de impresion:

Medios Paginados