Clicky

CSS3: Buenas prácticas para diseñadores

Algunas herramientas útiles para analizar tu código CSS3

CSS3 estiloSi eres un diseñador y has comenzado a aprender CSS recientemente, probablemente has incorporado algunas de las nuevas características de CSS que se han añadido al lenguaje CSS3.

Pero si no tienes mucha experiencia con CSS, entonces probablemente estarás tratando de averiguar cuál es la mejor manera de controlar algunos de los desafíos que surgen del uso de prefijos de varios navegadores, que utilizan las versiones anteriores de Internet Explorer, y otros dilemas específicos de CSS3.

En este artículo, voy a tratar de cubrir algunas de las cosas importantes para recordar cuando se trata de estos temas. Ten en cuenta que aquí nada está escrito en piedra, estas sólo deben ser algunas de las directrices que te ayudarán a escribir código más eficaz, fácil de mantener y a prueba de futuro.

Conoce algunas tablas de soporte

Probablemente no querrás memorizar el soporte que aceptan todos los navegadores. En la mayoría de los casos, CSS3 no funcionará en todos los navegadores. Y en algunos casos, incluso las versiones más recientes de los navegadores no lo soportan.

Así que lo primero que debemos hacer es entender que el soporte es insuficiente. El primer recurso que puedes usar es el sitio When can I use"¦ , que incluye cartas para CSS3, HTML5 y toneladas más. Puede incluso dejar a un lado las comparaciones con diferentes navegadores, como se muestra en la siguiente imagen que se compara el apoyo CSS3 en Firefox 3.6 vs IE9 :

Aunque When can I use"¦ es probablemente el único que soporta el caracter gráfico que necesitas, aquí hay algunas otras opciones a considerar:

•  CSS3 Click Chart
•  CSS contents and browsers compatibility
•  CSS Compatibility and Internet Explorer
•  Comparison of Layout Engines (CSS)

Pero también debemos conocer que aunque una característica de CSS se puede enumerar en alguna parte como "soportada", eso no quiere decir que esté libre de errores o inconsistencias. Así que hay que probar a fondo.

No uses Polyfills de forma excesiva

Debido a la presión del cliente o la agencia, o simplemente el hecho de que quieres que todo se vea y funcione igual en todas partes, podrías verte tentados a utilizar diversos Polyfill CSS ( Polyfill es un trozo de código (un plugin) que proporciona la tecnología que el desarrollador espera obtener del navegador de forma nativa).

Sin embargo, muchos de estos scripts puede disminuir tus páginas de forma considerable - especialmente si utilizas más de uno. Hay muchos estudios y fuentes que muestran la importancia de la velocidad de un sitio web, por lo que cualquier polyfill deben ser considerado cuidadosamente con tu sitio web o aplicaciones en general.

Para ayudarte a decidir lo que debe y lo que no debe el polyfill permitir y sólo degradar a una menor experiencia, utiliza el sitio HTML5 Please. Como se muestra en la pantalla de ejemplo de abajo, HTML5 a menudo recomiendan evitar polyfills para ciertas características:

html5 please

Prueba lo que degradan las características

Si estás evitando un montón de polyfills, entonces, naturalmente, vas a tener que permitir que muchas características de CSS3 se degraden a una experiencia más primitiva en los navegadores más antiguos (por lo general IE6-8). Pero no asumas que esto ocurra automáticamente.

En muchos casos (por ejemplo, cuando se utilizan varios fondos), tendrás que declarar una propiedad que se sobrescribe mediante la característica de CSS3, pero que aún se mostrará en los navegadores más antiguos.

Por ejemplo, para los fondos múltiples, es posible que hagas lo siguiente:

.element {
background: url(images/fallback.jpg) no-repeat;
background: url(/images/example.png) center center no-repeat,
    url(images/example-2.png) top left repeat;
}

Observa que la imagen de fondo solo declaró ante el fondo de las imágenes de varias líneas. Los navegadores que no lo soportan mostrarán solo la imagen, pero ignorarán la 2ª línea. Los navegadores que lo soporten leerán las dos líneas, pero la primera línea será reemplazada por la segunda.

Algunas otras características de CSS3 que podrían beneficiarse de este tipo de código son los colores, los colores RGBA, HSLA y los degradados.

Para ayudarte a ver cómo se degradan los navegadores más antiguos en función de CSS3, puede utilizar un bookmarklet llamado deCSS3.

decss3

En la actualidad sólo funciona en Chrome y Safari, sólo tienes que arrastrar el enlace a tu barra de favoritos y, a continuación, hacer clic en el enlace en cualquier sitio que desea ver en "des-CSS3 'y te mostrará el sitio con las sombras del texto, esquinas redondeadas y otro nuevo material removido. Por supuesto, esto no es un sustituto de pruebas del navegador real, pero puede servir como una guía útil para un desarrollo más rápido antes de hacer tu prueba final para la finalización del proyecto.

Otra herramienta de ayuda para hacer frente a retrocesos es la biblioteca de JavaScript Modernizr. Pero si te siente intimidado por las bibliotecas, no te asustes. Modernizr no es difícil de tratar desde una perspectiva de CSS. Echa un vistazo a este tutorial para una introducción.

Tratar con los prefijos de navegadores

Una de las partes sucias de CSS3 es tener que lidiar con todos los prefijos de diferentes navegadores. Mantener el código que utilizan todos es tedioso y en algunos casos no se necesita todos ellos. ¿Quién puede recordar cuándo debe incluir "-o-" o "-ms-" y cuándo no?

Bueno, como se ha mencionado, te ayudará utilizar las tablas de soporte. Aquí hay algunas otras sugerencias para ayudar a lidiar con los prefijos de los navegadores.

Usa un preprocesador CSS

Los preprocesadores están de moda en estos momentos. Sin embargo, los principiantes de CSS y diseñadores que no son desarrolladores o programadores incondicionales pueden tener dificultades para hacer frente a estas nuevas herramientas.

Así que, aunque los preprocesadores no son ciertamente para todo el mundo, definitivamente vale la pena considerarlos, porque realmente pueden mejorar tu producción y tiempo de mantenimiento.

Un amplio debate de preprocesadores está sin duda más allá de este artículo, pero aquí hay algunos enlaces para empezar:

•  LESS
•  Sass
•  Compass
•  Stylus

Y si te encuentras con que el material es muy pesado, Chris Coyier de CSS-Tricks tiene algunas ideas sobre preprocesadores que podrían ayudarte a obtener una visión de conjunto. Y aquí hay un post en Nettuts + que cubre algunas de las características y beneficios del uso de algunos de los preprocesadores CSS más populares.

Se consistente en tu código

Si decides no preprocesar el CSS con una de las tecnologías antes mencionadas, entonces tendrás que lidiar con el mantenimiento de todos los prefijos de los navegadores. Así que asegúrate de elegir un estilo y el orden de los prefijos de los navegadores y aférrate a él. De esta manera, el código será más fácil de leer y mantener.

Por ejemplo, algunos desarrolladores de CSS pusieron sus líneas de prefijo de navegador en orden alfabético, y utilizan la sangría de manera que los valores den toda la formación, así:

.element {
-moz-transition: background-color linear .8s;
-ms-transition: background-color linear .8s;
-o-transition:  background-color linear .8s;
-webkit-transition: background-color linear .8s;
transition: background-color linear .8s;
}

Eso es sólo una manera de hacerlo. Pero sea cual sea el método que elijas, se consistente a lo largo de tu código. Esto sería especialmente importante si trabajas en un equipo en el que otros tienen que leer y/o mantener tu código.

Por supuesto, no todas las características de CSS3 son tan fáciles de organizar (por ejemplo, el código para las animaciones de fotogramas clave es mucho más complicado), pero para la mayoría de las características tener un estilo consistente hace que el desarrollo y el mantenimiento más fáciles.

¿Qué pasa con la propiedad estándar?

Usted notará en el ejemplo en la sección anterior que la última propiedad declarada después de las líneas de los navegadores es la versión estándar de la propiedad. Si vas a incluir la propiedad estándar, esta es definitivamente la manera que debería hacerse.

Esto es para asegurarse que la aplicación de la característica del navegador es sobrescrita por la aplicación estándar. Pero hay una precaución aquí.

Para algunas animaciones complejas e interacciones, es concebible que la aplicación podría cambiar tanto que cuando el navegador se inicia el apoyo a la propiedad estándar, podría tener efectos no deseados. Así que en algunos casos, puede ser mejor dejar de lado la propiedad estándar por completo.

Este tema se trata más a fondo en el blog de Louis Lazaris, si quieres un análisis más exhaustivo de este tema.

Utiliza Prefixr

Una de las maneras más fáciles para hacer frente a todas las rarezas de multi-navegadores es utilizar una herramienta muy útil que se llama Prefixr. Con Prefixr, acabado de desarrollr tu código como siempre, es posible que utilices un prefijo único de proveedor (por ejemplo, sólo "-moz-") para todos sus CSS3. Luego, cuando hayas terminado la prueba en que el navegador de un trabajo y tenerlo todo de la manera deseada, pega tu código en Prefixr y generará para ti todo el código de un navegador adicional.

Prefixr también se puede integrar de forma automática con tu editor de texto e incluye soporte para el código clave de animaciones de fotograma largas. Como alternativa, también puedes probar una herramienta llamada Animation Fill Code que añade el código de un navegador adicional para animaciones de fotogramas clave.

Prueba a fondo

La última sugerencia es que tenemos que probar a fondo en todos los navegadores que estamos apoyando. Puedes utilizar docenas de herramientas y librerías para ayudarte en tu desarrollo de CSS3, pero nada puede sustituir a pruebas exhaustivas en entornos reales de tu navegador.

Y este consejo es especialmente importante si estás tratando con una gran cantidad de respuestas relacionada con el diseño de CSS3 (por ejemplo, las consultas de los medios de comunicación), y un uso intensivo de las características tipográficas. Debemos conseguir que el contenido sea útil y de fácil lectura en todos los navegadores, incluso si no están disponibles las características de CSS3.

Artículo original de Louis Lazaris: CSS3 Best Practices for designers

Jesus_Caceres