Lo nuevo del CSS3

LO NUEVO DEL CSS3

.:ProgramaciónWeb:.

Todo desarrollador web, utiliza el CSS que es una tecnología desarrollada por el World Wide Web Consortium de siglas W3C la cual combinada con lenguajes de estructura tales como HTML, XHTML o XML, brindan a los navegadores la posibilidad de presentar la información de diferentes formas con lo cual se puede dar diferentes diseños a esta.

CSS es compuesta de diferentes tipos de selectores los cuales al aplicarlos a elementos estructurales de la programación nos permite darle diferentes estilos visuales tales como bordes, sombreados, imágenes de fondo, colores, etc.

Pero la realidad es que lo que para nosotros que somos desarrolladores y programadores lo que nos interesa saber es cuales son la novedades de este CSS3 y obviamente cual es la compatibilidad con los navegadores más comunes como Firefox, Safari, Goggle Chrome y nuestro “Gran Amigo” Internet Explorer.

Empecemos con la compatibilidad en los diferentes navegadores, cabe señalar que el CSS3 está en fase de desarrollo hay algunos selectores que todavía no pueden ser usados en los diferentes navegadores.

En lo referente a Firefox por la misma cantidad de usuarios que maneja se sabe que desde su versión 3.1 ya se da soporte a una amplia gama de funcionalidades que nos brinda el CSS3, el Goggle Chrome más o menos brinda el mismo soporte, en cuanto a funcionalidad se refiere, Safari en particular nos da un extenso soporte a las nuevas funciones del CSS3, hay que tener en cuenta que desde el lanzamiento de estos navegadores los usuarios de Windows han estado reemplazando al Internet Explorer por alguno de estos antes mencionados.

En el caso particular del Internet Explorer ya se tiene conocimiento que no se pueden usar todas las nuevas funciones, aunque se dice que el nuevo Internet Explorer  10 ya brindara soporte a CSS3, pero habrá que seguir esperando, en particular yo no recomiendo ya utilizar el Internet Explorer aunque si todavía aun así quieren seguir utilizándolo existen algunos parches para poder simular algunos de los efectos. En el caso del resto de personas a los que nos ayuda poder implementar estas nuevas funciones lo que podemos hacer es crear un código alterno para que de todas maneras la página web se pueda mostrar en el Internet Explorer.

Problemas aun con CSS

Uno de los mayores problemas que se tiene es que más del 50% de usuarios sigue utilizando como navegador al Internet Explorer .

Lo otro es que el nuevo CSS3 está todavía en fase de desarrollo eso quiere decir que hay código que está en proceso de experimentación y para cada uno de los navegadores todavía se utiliza de diferente forma por ejemplo en el caso de si se le quiere agregar un borde de color para Mozilla seria -moz-border-color, para Chrome seria -webkit-border-color, etc. Esto traería como consecuencia como antes se mencionó que para cada uno de los navegadores se deberá colocar un código para cumplir la misma función con lo cual se tendrá un exceso de código CSS.

Siempre trata de no utilizar 100% de código CSS, lo que debes hacer es ir adaptando los diferentes selectores que te brinda la programación para que estos se han vistos de igual forma en los diferentes navegadores y no tengas que codificar en exceso solo para poder dar un efecto.

Ahora para lo que se creó este tema en el Blog los nuevos selectores que nos brinda el CSS3

Lo primero con lo que vamos a empezar es con el link de la página de CSS3 la que nos proporcionara los estatus actuales donde usted podrá ver cómo es que cada uno de los módulos esta, si ya se terminó, si está en fase de prueba, si está estable, etc.; el enlace es www.w3.org/style/CSS/current-work.
Estos son algunos de los módulos:

• Modelo de Cajas
• Background y Bordes
• Colores
• Tipografía y efectos de textos
• Layout Multicolumna
• Animaciones y Transiciones

Ahora iremos adentrándonos en cada uno de los módulos en una vista general

Backgrounds y Bordes

• Fondos en CSS3 { background }
• Bordes en CSS3 {border}, {border-radius}, {border-image}
• Sombras en CSS3 {box-shadow}
• Salto de la decoración de caja {box-decoration-break}

Estas son las nuevas propiedades de CSS3

La propiedad Border CSS3

CSS3 {border-radius} Esquinas con bordes redondeados.

CSS3 {border-image} Son bordes con imágenes, todavía no tiene un soporte en los navegadores completo, las propiedades parciales son:

                CSS3 {border-image-source} Archivo del borde de la imagen

                CSS3 {border-image-slice} Recorte del borde de la imagen.

                CSS3 {border-image-width} Grosor del borde de la imagen.

                CSS3 {border-image-outset} Extensión del borde de la imagen.

   CSS3 {border-image-repeat} Repetición del borde de la imagen.

Esquinas redondeadas {border-radius}

Esta es una nueva propiedad del CSS3 con la cual podemos poner esquinas redondeadas en los bordes. {border radius} es una propiedad resumida del {border x radius} donde la x puede ser top, bottom, left o right radius, esto quiere decir que se declara cada esquina por separado.

Ejemplo 1:

<div style="background-color: red;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border: red solid 1px; color: white; float: left;
    font: bold 1.2em 'Lucida Sans';
    padding: 0.5em;
    text-align: center;
    width: 10em;">
   BORDER-RADIUS
</div>

Ejemplo 2:

<div style="border-radius: 20px; border: solid 1px;
   margin-left: 15em;
   padding: 0.5em;
   text-align: center;
   width: 10em;">
   BORDER-RADIUS
</div>

BORDER-RADIUS

BORDER-RADIUS

Bordes con imágenes CSS3

    {border-image-source} : Es una imagen que se sube para colocarlo en el borde

    {border-image-slice}: Es un recorte de la imagen para poder formar la matriz    lateral y esquinas. En Firefox y otros navegadores es necesario un valor.

    {border-image-width}: Se puede añadir junto al recorte (slice) una / y luego introducir un ancho de borde de imagen.

    {border-image-repeat}: Opcionalmente se puede colocar una repetición del mosacio de imágenes en la lateral. El valor inicial es stretch. Los navegadores no admiten el valor space.

Es gracioso como la tecnología va cambiando y haciéndonos la vida más fácil, me acuerdo que hace unos años atrás cuando se quería trabajar con bordes redondeados uno tenía que primero colocar 4 imágenes (borde superior izquierdo, borde superior derecho, borde inferior izquierdo, borde inferior derecho y los bordes laterales y superior). Con la finalidad de facilitar la carga de las imágenes, tanto los bordes superior, inferior y laterales se creaban con un ancho de 1 px, toda vez que estas imágenes se repetían.

              

  

Asimismo, como se puede apreciar las esquinas y los bordes llevaban el color de fondo igual que el de la pagina, ya que la gran mayoría de usuarios hacia uso de Internet Explorer 6, el cual no manejaba transparencias de archivos png. En algunas ocasiones para superar este inconveniente, se hacia uso de scripts de java para manejar transparencias en el referido navegador.

Aquí se muestra el resultado final

Otro ejemplo

Aqui se muestra una imagen que llamaremos border.png

 

#round

{

             -moz-border-image:url("border.png") 30 30 round; /* Firefox */

             -webkit-border-image:url("border.png") 30 30 round; /* Safari */

             -o-border-image:url("border.png") 30 30 round; /* Opera */

               border-image:url("border.png") 30 30 round;

}

#stretch

{

            -moz-border-image:url("border.png") 30 30 stretch; /* Firefox */

            -webkit-border-image:url("border.png") 30 30 stretch; /* Safari */

            -o-border-image:url("border.png") 30 30 stretch; /* Opera */

              border-image:url("border.png") 30 30 stretch;

}

 

Archivo borde de imagen {border-image-source}

Se debera utilizar una url la cual hara referencia a un archivo de imagen el cual podra ser utilizado en el borde en lugar del estilo simple dado anteriormente.

Las propiedades de {border-image} no estan implementads del todo en los navegadores, por lo que se recomienda utilizar para cada uno de los navegadores sus respectivas propiedades.

Esto quiere decir que debera ser de esta forma:

• -moz-border-image para Firefox
• -webkit-border-image para Safari y Chrome
• -o-border-image para Opera