Sobre CSS 3

Como ya sabemos los desarrolladores web, CSS es un lenguaje estándar para presentaciones web que combinada con lenguaje estructural como HTML, XHTML o XML proporciona a los navegadores la información necesaria para presentar contenidos.

CSS se compone de selectores que se aplican a elementos estructurales para darles estilo visual como bordes, espacios entre letras, imágenes de fondo, colores, etc...

Para los que habitualmente desarrollamos websites y estamos acostumbrados al uso de CSS lo que verdaderamente nos interesa saber es cuáles son las novedades en el nuevo CSS 3 y por supuesto, si el nuevo CSS 3 es compatible con todos los navegadores o no.

Así pues, antes de comenzar a desglosar selectores será mejor tener bien claro la compatibilidad de CSS 3 con los navegadores.

Compatibilidad de CSS 3 con los navegadores

Aunque CSS 3 está todavía en fase de desarrollo, los selectores que se mencionarán a continuación pueden ser utilizados ya en algunos navegadores.

Safari en particular da un extenso soporte a estas nuevas funciones de CSS 3. Lamentablemente, el porcentaje de usuarios de este navegador no es muy alto aunque está en constante crecimiento.

Al contrario que en el caso de Safari, Firefox tiene un número elevadísimo de usuarios y desde su versión 3.1 ya da soporte a una amplia gama de funcionalidades en CSS 3.

Google Chrome da a CSS 3 más o menos el mismo soporte, en cuanto a funcionalidad se refiere, que Safari. Y además cabe tener en cuenta que desde su lanzamiento muchos usuarios de Windows lo han reeemplazado por Internet Explorer.

La cara negativa de la moneda una vez más, es Internet Explorer, cuyos usuarios no podrán disfrutar de esta nueva funcionalidad. Al respecto se rumorea que Internet Explorer 9 ya dará soporte a CSS 3, pero como siempre habrá que esperar. Aquellos que sean verdaderamente valientes podrán utilizar algunos de los parches existentes para simular algunos de los efectos. Para el resto, los no tan valientes pero a los que nos gusta implementar esas pequeñas mejoras intentaremos hacerlo siempre creando código alternativo para Internet Explorer.

Aspectos negativos del uso de CSS 3

A parte de que, según las estadísticas, el 50% de los usuarios utilizan Internet Explorer existen otros 3 aspectos negativos a tener en cuenta:

  • CSS 3 está aún en desarrollo, el código es experimental (del tipo -moz-border-color para Firefox y -webkit-border-color para Chrome) y por lo tanto no será válido según los estándares.
  • Del punto anterior se deriva que obtendremos un exceso de código CSS al intentar compatibilizarlo con todos los navegadores que lo soporten.
  • Debido a lo novedoso del lenguaje, es probable que en muchos websites nos encontremos un exceso de estilismo CSS 3 como ya ocurrió en otras ocasiones con versiones nuevas.
Consejo: No bases tus diseños web al 100% en CSS 3, utiliza los selectores que se adapten al estilo de tu web creando siempre las debidas opciones para todos los navegadores pero no dejes de experimentar.

Selectores nuevos con CSS 3

Muchas son las novedades que CSS 3 incorpora, no obstante a continuación se van a detallar algunas de las más interesantes y que ya están implementadas en algunos navegadores como Firefox, Konqueror, Opera y Safari.

Etiqueta

Código y Demo
border
border-color

Permite crear desgradados en los bordes de un elemento

 
-webkit-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-webkit-border-top-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
-webkit-border-left-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
-webkit-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors:  #555 #666 #777 #888 #999 #aaa #bbb #ccc;
border: 8px solid #000;

Demo

Bordes degradados. Sólo en Firefox.
border-image

Permite usar una imagen como borde

 
-webkit-border-image: url(images/border.png) 27 repeat;
-moz-border-image: url(images/border.png) 27 repeat;

Demo

Funciona en Safari y Firefox
 
-webkit-border-image: url(/themes/theproces/images/border.png) 27 stretch;
-moz-border-image: url(/themes/theproces/images/border.png) 27 stretch;

Demo

Funciona en Safari y Firefox
border-radius

Permite redondear los bordes de los bloques

 
-webkit-border-radius:5px;
-moz-border-radius:5px;

Demo

Funciona en Safari y Firefox
 
-webkit-border-radius:0px 5px 0px 5px;
-moz-border-radius:0px 5px 0px 5px;

Demo

Funciona en Safari y Firefox
box-shadow

Permite dar sombra a elementos de bloque. Tiene 3 propiedades: la distancia horizontal de la sombra, la distancia vertical de la sombra y el desenfoque.

 
-moz-box-shadow:3px 3px 6px #888888;
-webkit-box-shadow:3px 3px 6px #888888;

Demo

Funciona en Safari y Firefox
backgrounds
background-origin

Sitúa un fondo dentro de un bloque a partir de las especificaciones dadas. Tiene 3 propiedades: border-box, padding-box y content-box.

 
-moz-background-clip:border;
-moz-background-origin:border !important;
-webkit-background-clip:border;
-webkit-background-origin:border !important;

Demo

El fondo se extiende hasta el borde
background-clip

Determina si el fondo se extiende hasta el borde o no. La propiedad por defcto es border-box que indica que sí que se extiende hasta el borde

 
-moz-background-clip:border;
-moz-background-origin:padding !important;
-webkit-background-clip:border;
-webkit-background-origin:padding !important;

Demo

El fondo empieza en el borde 
-moz-background-clip:padding;
-moz-background-origin:content !important;
-webkit-background-clip:padding;
-webkit-background-origin:content !important;

Demo

El fondo empieza en el contenido
background-size

Permite especificar en pixels o en %, el tamaño del fondo de un elemento de bloque. Si se especifica como %, el % especificado será relativo al ancho o alto del área señalada con el parámetro background-origin

 
-moz-background-clip:border;
-moz-background-origin:padding;
-o-background-origin:padding;/* Opera */
-webkit-background-origin:padding;/* Chrome */
-khtml-background-size: 200px 50px; /* Konqueror */
-webkit-background-size: 200px 50px;
-khtml-background-size: 200px 50px;

Demo

Sólo para Ópera, Safari, Konqueror y Chrome.
La imagen de fondo debería verse estirada.
múltiples backgrounds

Permite utilizar varias imágenes de fondo, la etiqueta es la de background con las referencias a los fondos separadas por comas.

 
background: url(/themes/theproces/images/border.png) top left no-repeat, 
url(/themes/theproces/images/border.png)  top 11px no-repeat, 
url(/themes/theproces/images/border.png) bottom left no-repeat;

Demo

Sólo para Konqueror y Chrome.
Deberían verse varias imágenes como fondo.
color
opacity

Permite ajustar la transparencia de un elemento.

 
filter:alpha(opacity=50);/*para Internet Explorer*/
opacity:0.5;

Demo

Opacidad de negro al 50%. Funciona en Firefox, Safari y Chrome.
Existe opción filter:alpha(opacity=x) para IE 7 e IE 8.
efectos de texto
text-shadow

Permite dar sombra a un texto. Sus propiedades son distancia horizontal, distancia vertical, desenfoque y color de la sombra.

 
text-shadow: 1px 1px 1px #000000;

Demo

Funciona en Firefox, Safari, Opera y Chrome.
word-wrap

Permite separar palabras muy largas dentro de un elemento de bloque

 
word-wrap:break-word;

Demo

Funciona en Firefox, Safari e IE. Alserunacedandetextomuylarga, deberíaverseseparadaenalgúnmomento.
layout
column-width, column-count y column-gap

Permite crear columnas de texto y definir el ancho, el número y el ancho

 
-moz-column-width: 50px;
-webkit-column-width: 50px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;

Demo

Funciona en Firefox y Safari.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean egestas blandit ipsum. Morbi nulla metus, luctus et, ullamcorper sit amet, commodo quis, nisl. Ut blandit lacus nec nibh. Phasellus eleifend enim et risus. Nam condimentum. Praesent euismod auctor dui. Nunc ut leo vel magna adipiscing tempor. Donec pretium, ligula et hendrerit faucibus, sem velit accumsan tortor, sodales tempor est ligula non velit. Nulla sagittis, odio quis porta nonummy, mauris arcu gravida odio, quis aliquam lacus elit non libero. Proin aliquam augue accumsan augue. Quisque ut eros at erat ultrices sodales. Nunc vitae ipsum. Mauris in elit in dolor imperdiet interdum. Vivamus egestas sagittis justo. Sed lorem. Sed vel neque in ipsum gravida nonummy. Nulla tempor blandit elit.
font-face

Permite utilizar tipografías diferentes a las estándar

 
<style type="text/css" media="all">
@font-face {
font-family: Delicious;
src: url('Delicious-Roman.otf');
}
@font-face {
font-family: Delicious;   
font-weight: bold; 
src: url('Delicious-Bold.otf');
}
</style>
                    

font-family:Delicious,Verdana,sans-serif;
font-size:200%;

Demo

Funciona en Internet Explorer, Firefox y Safari.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.