1. 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.
2. Z-Index y posicionamiento
Z-index puede ser algo misterioso 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.
3. Auto Margen
Utilizando auto margen en un tema 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.
4. 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:
- #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.
5. 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:
- 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á.
6. 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.
- .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.
7. 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:
- "text" name="name" /> "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.
8. 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.
- filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
9.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.
- .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*/ }
10. 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.
11. Usa los comentarios condicionales para soportar IE 6
Con demasiada frecuencia, los desarrolladores web se ven obligados a introducir nuevas reglas CSS y declaraciones que sólo se aplican a determinadas versiones de IE. Si no están familiarizados con un comentario condicional, el código de abajo sólo linkeará a una hoja de estilo, si el navegador del usuario es menor o igual a IE 7:
Este código podría ir en la sección de cabecera de tu archivo HTML. Si el CSS no parece estar teniendo lugar en el IE después de haberse vinculado a su hoja de estilo específica, prueba volverte más específico con tus selecciones CSS para reemplazar los estilos predeterminados.
12. Especificidad CSS
Como se mencionó anteriormente, los estilos CSS siguen un orden de especificidad y valores de punto para determinar cuándo los estilos se anulan unos a otros o tienen prioridad. Nettuts recientemente ha tenido un buen artículo en el que se explican los valores de punto para CSS. Los mismos son:
* Elementos - 1 points
* Clases - 10 points
* Identificadores - 100 points
* Estilo dentro del código (inline) - 1000 points
En caso de duda, se más específico con tus declaraciones de estilo. También puedes utilizar la declaración !important para propósitos de depuración si fuera necesario.
13.Logrando una altura mínima en todos los navegadores.
En el desarrollo, a menudo nos damos cuenta de que necesitamos que un elemento tenga por lo menos una cierta altura, y luego se extiendan para dar cabida a más contenido, si es necesario. Desafortunadamente, IE no reconoce la propiedad min-height correctamente. Para ello, tenemos lo que se conoce como el "Min-height fast Hack", que va así:
- #yourId { min-height:300px; height:auto !important; height:300px;/*Needs to match the min height pixels above*/ }
Simple, eficaz, y se valida perfectamente. Este es también uno de los pocos casos en que la propiedad !important se vuelve muy útil.
14. El * HTML hack
Si necesitas o deseas evitar hacer link a hojas de estilo IE específicas, se puede utilizar el * HTML hack. En un mundo perfecto, el elemento HTML siempre será el elemento raíz, por lo que cualquier * antes de HTML no se aplicaría. Sin embargo, IE trata esto como una declaración perfectamente legítima. Así que si necesitábamos hacer target a un cierto elemento en IE, podríamos hacer esto:
- * html body div#sideBar { display:inline; }
15. Técnica Sliding Doors
Un problema importante con el uso de imágenes para los botones de navegación, es que se corre el riesgo de que el texto de los clientes sea demasiado largo y se extienda más allá del botón, o se corte. Usando dos imágenes y la técnica CSS de las puertas corredizas, podemos crear botones que se ampliarán para ajustar el texto dentro. La idea detrás de esta técnica, es utilizar dos imágenes para cada botón, y la aplicación de las imágenes a través de una declaración de fondo en CSS. Por ejemplo:
- HTML Markup: Your Title CSS: a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Image height */ margin-right: 6px; padding-right: 20px;/*Image Width*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Image Height */ padding: /*Change to how you see fit*/ }
Y ahí lo tienes, una lista de 15 técnicas CSS para ayudarte a la hora de desarrollar un tema. CSS es ideal para diseñadores gráficos, ya que nos permite ser creativos con el código y utilizar nuestras propias técnicas para llevar a cabo un trabajo. Dicho esto, ¿Cuáles son algunas de las técnicas de los desarrolladores qué añadirías a la lista?
Fuente: Woods
No hay comentarios:
Publicar un comentario