En otros capítulos hemos visto el uso de sectores y otras cuestiones de CSS, no quiere decir esto que eso fuera CSS2 y ahora pasemos a CSS3.

La versión 3 es una evolución que simplemente aporta nuevos elementos a los que ya había y quizá elimina otros que quedan obsoletos según las nuevas formas de diseñar las páginas web.

Compatibilidad de CSS3 en navegadores

Para bien o para mal, CSS3 consta de múltiples módulos que están en constante evolución. Podemos ver el estado y evolución de los mismos en www.w3.org/Style/CSS/current-work

También podemos consultar en caniuse.com

A consecuencia de lo anterior, es posible que haya cosas que no se visualicen de la misma forma en los diferentes navegadores.

Para paliar el problema podemos agregar prefijos específicos para hacer que las reglas funcionen según el motor del navegador. Estos prefijos van precedidos por un guión -, siendo los siguientes:

  • -moz para el motor Gecko de Firefox
  • -webkit para Safari y Chrome
  • -o para Opera
  • -ms para los de Microsoft
  • -khtml para ciertos navegadores Linux

Un ejemplo sería:

-moz-border-radius: 10px;

Podemos trabajar con la librería -prefix-free para olvidarnos de este problema.

Puedes probar el funcionamiento de prefixfree descargando el archivo en el destino del enlace anterior y posteriormente llamándolo en el head del HTML mediante:

<script src="estilos/prefixfree.min.js"></script>

Dónde en src va la ruta a dónde hayamos puesto el código descargado.

Un ejemplo en el que se puede observar un funcionamiento distinto según el navegador es con la pseudo-clase ::placeholder, con la que podemos estilar el texto del atributo placeholder de un input de formulario:

::placeholder {color: red;}

El código anterior en principio no surte efecto en Edge, para el que deberíamos agregar lo siguiente:

::-ms-input-placeholder { 
/* Microsoft Edge */  color: red; }

Podemos entonces en su lugar agregar prefixfree para ver que lo soluciona.

Ejemplos de estilado de elementos HTML específicos con CSS3

Estilado de enlaces con CSS

Como sabemos, los navegadores aplican un estilado predefinido a los enlaces. Por ejemplo, color de fuente azul subrayada y que cuando visitamos el enlace pasa a estar de otro color.

Por tanto, además de aplicar lo que hemos aprendido hasta ahora, también debemos saber que existen pseudo-clases que sirven para definir estados especiales de elementos como los enlaces.

Estas pseudo-clases son selectores que podemos emplear para aplicar estilos en los diferentes estados.

Para enlaces tenemos:

a:link

Estado por defecto de un enlace cuando no ha sido visitado.

a:visited

Enlace que ya ha sido visitado.

a:active

Para el momento en que seleccionamos el enlace.

a:hover

Cuando pasamos el ratón por encima.

Ejemplo:

a:hover {color:green;}

Truco para incrementar el área clicable de un enlace

a {     
   display: inline-block;     
   position: relative;    
   z-index: 1;     
   padding: 2em;     
   margin: -2em; 
}

En el código anterior se asigna a los enlaces inline-block para que podamos asignarles padding y margin y position relative para poder aplicarle el z-index.

El z-index lo aplicamos para que el enlace quede por encima del resto de elementos a su alrededor. Al agregar padding estamos incrementando el área clicable y con el margin negativo conseguimos que el resto de elementos no se vean desplazados por causa del padding.

Estilado de listas con CSS

Con la propiedad list-style-type especificamos el tipo de viñeta que se va a mostrar en una lista. Algunos valores posibles son:

  • none. Nada
  • disc. Disco
  • circle. Círculo
  • square. Cuadrado
  • decimal. Número decimal.
  • lower-roman. Número romano minúscula.
  • upper-roman. Número romano mayúscula.

list-style-image nos sirve para mostrar una imagen o icono en lugar de la viñeta. El valor que escificamos incluye la URL de destino al recurso:

list-style-image: url ('imagen.png');

list-style-position nos sirve para ubicar la viñeta. Puede tener los valores inside outsite. Con outside posicionamos la viñeta fuera del flujo de texto y con inside dentro.

list-style. Propiedad shorthand que nos permite usar las anteriores en una en el siguiente orden: type, position, image. ejemplo:

list-style: disc inside;

Esto de puede aplicar en li, ol y ul.

Estilado de tablas con CSS

border-collapse: Propiedad que sirve para determinar cómo se van a separar los bordes de una tabla. El valor predefinido es separate, con el que, si tenemos dos celdas contiguas, veremos los bordes de cada una de ellas y u