Diseño web: máxima compatibilidad: Tips & tricks

Buenas!

Llegamos a la última entrega de diseño web, la que seguramente sea la más extensa, y la que llevará más carga práctica.

Ya que será una entrega larga y con varios puntos, vuelvo a dejar el índice:

1. Porcentajes
2. Agrupar contenido en clases superiores
3. Inherit, initial u omitir
4. Contenido "centrado"
5. Contenido que se "redimensiona"
1. Fondo
2. Contenido
6. Jugar con la transparencia
7. Efectos "misc"
1. Scroll modificado
2. Cajas con borde
3. Modificar "select"
4. Scroll "dependiente"
5. Editar listas
8. Div vs Span
9. Compatibilizar con otros navegadores

• Porcentajes

Los porcentajes pueden usarse en los atributos:

• Top
• Left
• Width
• Height

Sirven para indicar medidas porcentuales, es decir, no son medidas fijas (como lo sería "width: 25px;")

Al ser un porcentaje, cogerán el valor de su parent node (padre) como 100%.

Un ejemplo: supongamos la siguiente estructura:

<div class="clase1">

  <div class="sclase1">

    <div class="sclase2">

    </div>

    <div class="sclase3">

    </div>

  </div>

</div>

style:

.clase1{width:200px;height:200px;top:0px;left:0px;position:relative;}

.sclase1{width:50%;height:50%;top:20%;left:10%;position:relative;}
.sclase2{width:10%;height:100%;top:0;left:0;position:relative;}
.sclase3{width:40%;top:20px;position:relative;}

Bien, analicemos cómo quedaría:

Esta es la representación del navegador del ejemplo. A destacar dos aspectos: he añadido un "background-color" a cada clase; y he añadido "height:1px" a ".sclase3", para que se vea (ya que si no tiene los atributos "width" o "height", se adapta al contenido; y a contenido vacío, el div "desaparece").

Ahora veamos las medidas "reales" de cada div:

• Clase1:
• Width: 200px
• Height: 200px
• Top: 0px;
• Left: 0px;
• Sclase1:
• Width: 100px (50% de parent - 200px -)
• Height: 100px (50% de parent - 200px -)
• Top: 40px (20% del largo - height - de parent - 200px -)
• Left: 20px (10% del ancho - width - de parent - 200px -)
• Sclase2:
• Width: 10px (10% de parent - 100px -)
• Height: 100px (100% de parent - 100px -)
• Top: 0
• Left: 0
• Sclase3:
• Width: 40px (40% de parent - 100px -)
• Height: variable (1px en el ejemplo)
• Top: 20px (20% de parent - 100px -), pero son en total 120 px partiendo desde la esquina superior izquierda de "Sclase1" (verde), ya que "Sclase2" ocupa todo el largo.
• Left: 0

• Agrupar contenido en clases superiores:

Esto es algo que tendremos que hacer a posteriori de que el CSS esté listo.

Esta medida da como resultado un CSS más pequeño y manejable, y se basa en el siguiente concepto:

"Si todos los hijos (child node) tienen una misma característica, ésta la puede implementar el padre (parent node) y que así, la hereden los hijos".

Es decir, si yo tengo algo así:

.clase1{top:0px;left:0px;}

.sclase1{font-family: arial;font-weight:700;}

.sclase2{background-color:blue;}

.sclase3{font-family:arial;}

.sclase4{font-family:arial;font-weight:700;}

<div class="clase1">

  <div class="sclase1">

     HOLA, SCLASE1

  </div>

  <div class="sclase2">

    <div class="sclase3">

       HOLA, SCLASE3

    </div>

    <div class="sclase4">

       HOLA, SCLASE4

    </div>

  </div>

</div>

El resultado sería el siguiente:

• HOLA, SCLASE1: Texto en negrita, fuente arial
• HOLA, SCLASE3: Texto normal, fondo azul, fuente arial
• HOLA, SCLASE4: Texto en negrita, fondo azul, fuente arial.

Como vemos, todo el texto es en arial, por lo que podríamos añadir "font-family: arial" a "clase1" y eliminarlo de las demás. De este modo, todos los hijos (a no ser que se definiera una regla específica) heredarían la fuente de "clase1".

Con esto, ahorramos algo de espacio en el CSS, lo que lo hará más pequeño, y por tanto, más fácil de descargar para el navegador.

• Inherit, Initial, Omitir

Inherit es un valor de atributo que equivale a "heredar" de un parent. En chrome, y versiones recientes de IE, dejar un atributo vacío equivale a hacer "inherit", si el parent tiene dicho atributo definido.

Initial es un valor de atributo que equivale a dejar el atributo a "por defecto" del navegador. Si, por decir algo, la fuente por defecto de nuestro navegador es "calibri", y dentro de un div con "font-family:arial" ponemos un div con "font-family:initial", el texto de éste será "calibri". El valor initial no es soportado por todos los navegadores (me refiero a algunas versiones de IE...)

Omitir el atributo en cuestión es dejar que el explorador decida: por lo general se sigue la siguiente norma: si el parent tiene el atributo, el child lo hereda; en caso contrario, se hace "initial". Aquí está la trampa, ya que cada navegador puede tener sus reglas de "omitir" y de "initial"...

Yo personalmente siempre intento definir el máximo de atributos (es decir, intentar dejar el mínimo de omitidos, omitiendo solamente los que quiero heredar), y evito usar "initial", ya que algunos exploradores no lo aceptan. Inherit también da problemas con IE, así que muchas veces no lo uso (por eso uso el omitir).

• Contenido centrado

Siempre queremos centrar el contenido de nuestras webs... ahora os daré un par de "trucos" para que siempre quede todo bien centrado:

• Contenido centrado: para ello, lo metemos todo en un div, y le añadimos las siguientes reglas de estilo:
• margin-left: auto
• margin-right: auto
• margin-top: auto
• Texto centrado verticalmente: para conseguirlo, modificaremos el interlineado, del siguiente modo:
• line-height: **height del div**

• Redimensionar contenido

Para hacer un fondo que se redimensiona, basta con hacer un par de cambios:

Creamos un div, fuera de cualquier otro, y dentro insertamos el fondo (como <img>). A la imagen le ponemos el siguiente estilo:

z-index:1;position:absolute;width:100%;height:100%

Y voliá!

Para que el contenido se redimensione, tenemos que jugar de nuevo con los porcentajes en nuestro div principal. El "inconveniente" es que al redimensionar el contenido, todo tendrá que cambiar de tamaño, y, por tanto, tendremos que ir siempre con porcentajes.

• Jugar con la transparencia

La transparencia de un objeto es algo que se puede usar para crear efectos que hagan destacar unos elementos sobre otros. Por ejemplo, algo que está fuera de un rango, puede tener cierta transparencia para indicar que precisamente está fuera del rango.

El sistema recomendado para la transparencia es el siguiente:

filter:alpha(opacity=X);-moz-opacity: .X;opacity: .X

Donde X variará entre 0 (transparente) y 100 (opaco). Daros cuenta de que los dos últimos atributos van precedidos de "." (es decir, son del estilo 0.X, pero se puede omitir el "0").

El primer atributo es para que la transparencia se vea en IE; el segundo para mozilla; el último es de propósito general.

Hay que tener cuidado con la opacidad, ya que siempre se hereda (aunque se modifique el atributo en una child class). Por ello, siempre que queráis hacer un div con transparencia, y "dentro" (visualmente hablando) un div sin transparencia, lo que recomiendo es hacer los dos div "hermanos" (al mismo nivel), y ajustar las alturas para que de la sensación de que uno está dentro del otro.

• Efectos "misc"

• Scroll modificado

Se puede modificar el scroll a varios niveles: desde hacer que desaparezca forzosamente, hasta cambiar su aspecto.

Para el primer propósito, haremos uso de los atributos "overflow", y sus variantes "overflow-x" y "overflow-y". Los valores que pueden adoptar, son: hidden, visible, auto (initial, inherit).

Hidden esconde siempre el scroll; visible lo muestra siempre; auto deja que el explorador decida.

Para modificar el scroll, podemos recurrir a métodos propios de los navegadores, tales como -webkit-XXX, o modificar el body para IE. Otra manera es recurrir a jquery (supongo...).

• Cajas con borde:

Podemos jugar con el borde de un div, para que enmarque información u otras funciones. Al atributo "border" se le pueden añadir sufijos, como "-bottom", "-top"... para especificar solo una parte del div. Con ello podemos conseguir líneas rectas.

• Modificar Select:

El select es un input que no se puede cambiar mucho, pero podemos adaptarlo un poco para darle un estilo propio (sin necesidad de jquery).

Para ello, vamos a ver unos ejemplos:

Ejemplo 1: metemos el select dentro de un div, le cambiamos el fondo, le quitamos el borde y lo hacemos más pequeño:

VoidValor 1

Ejemplo 2: partiendo del ejemplo 1, hacemos el select más ancho que el div, de manera que la flecha desaparezca. A su vez, le ponemos un fondo al div, el cual sea una imagen de una flecha, y la colocamos al borde, simulando que es el botón. Al hacer click sobre la imagen (o cualquier otro punto) se desplegará el select.

• Scroll dependiente

Para ello, usaremos un poco de JavaScript. Añadiendo el manejador "onresize" podemos controlar cuándo la página se redimensiona.

Dentro del manejador, podemos controlar el tamaño de la pantalla o de cierto div, y modificar el CSS para que el scroll pase, por ejemplo, de hidden a visible.

• Editar listas

Para editar una lista desordenada (ul) no tenemos más que cambiar el estilo, de la siguiente manera:

.clase li {background: #FFFFFF url("imagen") 0 10px no-repeat;padding: 0 0 5px 22px;}

Analicemos: el background lo establecemos así: fondo blanco; con la imagen especificada en "url"; con una posición de 0,10 (la modificaremos sobre la marcha para que quede en la posición que queramos);la imagen no se repetirá, y tendrá una distancia al parent de 0,0,5,22 (esto también lo modificamos sobre la marcha).

Entonces, en nuestra "ul", le añadimos esta clase y ya lo tenemos.

• Div vs Span

Como elementos contenedores, tenemos básicamente "div" y "span".

El primero es un bloque, mientras que el segundo es como una capa. Es decir, si un span tiene especificados un ancho y un alto, es muy probable que no los adopte; mientras que el div si (ya que es un bloque).

Yo personalmente no uso mucho los span; los uso especialmente para definir estilos de texto concretos (ya que el span no es un bloque). Para el resto, uso div.

• Compatibilizar con otros navegadores

Esta es la parte más difícil de todas... cada navegador tiene sus propias reglas... por lo que a veces pensamos: "¿un CSS para cada navegador?"; podemos hacer eso, usando una función JS que determine qué navegador y versión está siendo usada... pero hay otras opciones, los llamados "hacks".

Ahora os explicaré una serie de reglas para crear reglas específicas para navegadores en concreto:

• Para IE:
• 8 y anterior: antes del ";" si añadimos "\9", dejaremos esa regla solo para estas versiones de IE. 
• 7 y anterior: si ponemos un "*" antes de la regla, dejaremos esa regla solo para estas versiones.
• 6 y anterior: si ponemos un "_" antes de la regla, dejaremos esa regla solo para estas versiones.
• Para FF:
• @-moz-document url-prefix(){}
• Dentro de las llaves reescribiremos todas las clases que queramos cambiar solo para FF
• Para Opera:
• @media not screen and(1){}
• Dentro de las llaves reescribiremos todas las clases que queramos cambiar solo para Opera

Es decir, si tenemos las siguientes clases:

.clase1{top:10px;_top:20px;*top:30px;top:40px\9;}

@-moz-document url-prefix(){.clase1{top:60px;}}

@media not screen and(1){.clase1{top:70px;}}

Para cada navegador se verían diferentes top, a saber:

• Default: 10px
• IE 8: 40px:
• IE 7: 30px;
• IE 6: 20px;
• FF: 60px;
• Opera: 70px;

Aplicando estas reglas, podemos hacer que el estilo esté todo en un archivo, y a la vez que sea específico para cada explorador.

Finalmente decir que quedan por explotar muchos aspectos de CSS, como hacer div girados X grados, los fondos con degradado, sombras... todo ello quizás lo expongo en una nueva sección de CSS, quién sabe (queda anotado en mi tablón!).

También comentar, a todo gurú del CSS que lea esto, que se que es posible que hayan cosas inexactas... sed indulgentes con mis conocimientos de CSS!

Supongo que esta será la última entrada del año en el blog... así que hagamos planes para el año que viene!

• BuscaM!nas: lo siento, pero me veo obligado a dejar el proyecto de lado durante mucho mucho tiempo, ya que tengo un montón de proyectos por en medio que quiero acabar antes de ponerme de nuevo con esto.

• Blog: Para el año que viene, intentaré ser más novedoso, e introducir paranoicos programas que hagan que os preguntéis qué me tomo para programar esas cosas... jeje... dejo una lista de temas que tengo pendientes de meter en el blog:
• CSS avanzado
• Optimización PHP
• Uso de htaccess
• HPL2
• M!nas
• MSAccess
• COBOL
• PHP
• Varios (relleno) -> solo por si acaso...
• PPHP -> paranoia en la que en breve me pondré a trabajar
• COBOL avanzado
• ASM
• "Hacking"
• cURL
• VB.net
• Procesos
• FTP
• HTTP
• D - COBOL -> trabajando en ello
• NS - NA -> trabajando en ello
• Control remoto -> trabajando en ello
• PS2Cloud -> trabajando en ello
• Criptografía -> ampliando conocimientos cada día...

• Personal: Como propósitos para el próximo año tengo (en cuanto a informática):
• Adelantar mi libro (ya tengo uno terminado y registrado... ya os comentaré si me lo publican)
• Quizás empezar uno nuevo
• Adelantar mis proyectos (al menos PS2Cloud  y el control remoto tienen que estar para este año)
• Adelantar la definición de mi "lenguaje de programación" (sí, estoy tan mal de la azotea que estoy creando un lenguaje de programación - bueno, estoy a un nivel teórico aún)
• Hacer al menos 5 series de entradas en el blog
• Terminar ISPA
• Aprender algo de IA
• Aprender sobre algún tema de Hardware
• Aprender sobre algún tema de Software
• Aprender sobre algún tema "misc" (vulnerabilidades, exploits, "bajo nivel" del S.O...)

Como veis, siempre trato de aprender cosas nuevas, y es que me gusta aprender cosas nuevas...

En fin, supongo que hasta el año que viene no volveré a escribir... así que

¡Hasta la próxima!