El posicionamiento absoluto dentro de un elemento posicionado relativamente
Poner un elemento absolutamente posicionado dentro de un elemento en posición relativa se traducirá en la posición calculada sobre su antepasado más cercano posicionado. Esta es una excelente técnica para conseguir que un elemento se pose en un determinado lugar en que lo necesites, por ejemplo, una insignia de cabecera.
Z-Index y posicionamiento
La variable Z-index puede ser algo misteriosa para los desarrolladores. A menudo, se encuentran a los diseñadores poniendo un valor z-index muy grande en un div o elemento con el fin de tratar de conseguir que se superponga a otro elemento. Lo que tenemos que tener en cuenta, es que z-index sólo se aplica a los elementos a los que se les da un valor de "posición". Si encuentras un elemento que no se adhiere a una norma de z-index que has aplicado, añade "position: relative" o "position: absolute" al div problemático.
Auto Margen
Utilizando auto margen en un código css es una fantástica manera de conseguir que un elemento se centre en la pantalla sin preocuparse por el tamaño de la pantalla de los usuarios. Sin embargo, "margin: auto" sólo funciona cuando se declara un ancho para el elemento. Esto también significa que para aplicar margin: auto a los elementos en línea, la primera presentación se debe cambiar a bloque.
Utilizar el padding cuidadosa y adecuadamente
Un error que a menudo se hace cuando se empieza con CSS es utilizar el padding sin conocer todos los efectos y el modelo de caja CSS. Tengan en cuenta que, según el modelo de caja, el padding se añade a la anchura total del elemento. Esto puede causar una gran frustración con elementos de cambio fuera de lugar. Por ejemplo:
Ejemplo: #div { width:200px; padding: 30px; border:2px solid #000; }
Es igual a un ancho total de 264px (200 + 30 + 30 + 2 + 2). Además, recuerde que el padding, a diferencia de los márgenes, no puede contener valores negativos.
Ocultar texto con text-indent
Digamos que tienes una imagen que estás utilizando para el logo de tu web. Esta imagen estará dentro de una etiqueta H1, que es bueno para el SEO, sin embargo, también queremos tener nuestro título del texto escrito en la etiqueta H1 para que los motores de búsqueda puedan leerlo fácilmente. Algunos pueden sentirse tentados a usar "display: none" en un elemento. Por desgracia, habría que separar la imagen del logo de la etiqueta H1 si se utiliza esta técnica. Usando text-indent y los valores negativos, podemos pasar esto:
Ejemplo: h1 { text-indent:-9999px;/*Hide Text, keep for SEO*/ margin:0 auto; width:948px; background:transparent url("images/header.jpg") no-repeat scroll; }
Esto asegurará que todo el texto no es visible en cualquier resolución, mientras que lo que le permite es permanecer en el interior del elemento h1 que contiene el logotipo. Esto tampoco va a esconder el texto de los lectores de pantalla como "display none" lo hará.
Bugs de IE Double Float Margin
Estoy seguro que todos hemos tratado con éste, ya que este es uno de los "hacks" que más que tenemos que utilizar. Si no has visto este error antes, básicamente, un elemento flotante con un margen determinado que de repente se ha duplicado el margen en IE 6 y ¡Ha caído de su posición! Afortunadamente, la solución es súper simple. Sólo cambiamos la visualización de los elementos que flotaban a "inline" como se ve a continuación.
Ejemplo:
.yourClass { float: left; width: 350px; margin: 20px 0 15px 100px; display: inline; }
Este cambio no tendrá efecto en ningún navegador dado que es un element float, pero por alguna razón en IE soluciona el problema del margen doble.
Usando CSS para combatir el Spam
Esto es algo que podrías añadir para darle saber a la descripción de tu tema. Una forma es ésta:
Ejemplo:
<label for="Name">Name:</label> <input type="text" name="name" /> <label class="captcha" for="captcha">Answer?</label> <input type="text" name="captcha" id="captcha" />
Para el captcha ID, se utiliza una imagen de fondo vía CSS. Esto requeriría que los scripts spam encontrarán el elemento HTML, escanearán tu css, compararán los selectores, encontrarán el selector determinado y la imagen de fondo, y luego leerán la imagen de fondo. Es bastante seguro decir que la mayoría no será capaz de hacer esto. La desventaja es que si alguien no está navegando con CSS activo, no sabrá qué hacer.
PNG en Correcciones de IE 6
Estoy seguro de que todos estamos de acuerdo que tratar con PNG transparentes en IE 6 es un verdadero dolor de cabeza. Las correcciones van desde complejas técnicas Javascript a sólo usar un filtro propietario de Microsoft, hasta el uso de comentarios condicionales para intercambiarlos por un jpg. Tengan en cuenta que todos estos, a excepción de los comentarios condicionales se basan en el AlphaImageLoader de Microsoft.
Ejemplo: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
Transparencia CSS a través de distintos navegadores
Lo creas o no, es bastante simple obtener una decente transparencia a través dediversos navegadores usando CSS, Podemos cubrir IE, Firefox, Safari, Opera, y los navegadores antiguos, como Netscape. Chris Coyier recientemente vino a nuestro rescate demostrando una vez más estas técnicas.
Ejemplo: .yourClass { filter:alpha(opacity=50);/*Needed for IE*/ -moz-opacity:0.5;/*Older mozilla broswers like NN*/ -khtml-opacity: 0.5;/*Old versions of Safari and "KHTML" browser engines*/ opacity: 0.5;/*FF, Safari, and Opera*/ }
Uso de imágenes CSS Sprites
Los Sprites CSS son una fantástica manera de cargar muchas imágenes CSS a la vez, además de reducir las peticiones HTTP y el tamaño del archivo de tu tema. Además, no tendrás que hacer frente a las imágenes que "parpadean" en estado hover. Los Sprites CSS se consiguen poniendo muchos de los elementos de tu imagen de todos en una sola imagen. A continuación, se utiliza el CSS para ajustar la posición de fondo, el ancho y la altura para conseguir la imagen que queremos.
Los diseñadores y desarrolladores web, han aprendido algunos trucos y técnicas de CSS que les ayudan a realizar mejores diseños. Algunos de estos trucos pueden solucionar la grandes problemas al crear diseños con CSS.
