Contenido

-prefix-free, dí adios a los prefijos CSS

11 May

+ 5

Ayer vimos la cantidad de líneas de código que debemos incluir en nuestros CSS’s para disponer de ciertas funcionalidades en los diferentes navegadores, no es algo nuevo, hace ya tiempo nos quejábamos de ello. Y parece que a medida que van saliendo más y más propuestas por parte de los diferentes navegadores estos prefijos se están haciendo más y más populares.

El problema, radica en que dentro de X años esos prefijos dejarán de ser necesarios por que por lo general adoptan una nomenclatura estándar, lo que nos obligará a recorrer todos nuestros CSS’s para adaptarlos a los atributos del momento.

Para solventar prácticamente por completo ese problema aparece prefix-free, un librería Javascript que se encarga de gestionar estos prefijos por nosotros dejándonos a nosotros la nomenclatura estándar y él adaptándose al navegador que está visitando nuestra aplicación web.


// Nuestro CSS
border-radius: 1em; // Para cuando se cumplan los estandares.

// Resultado
-moz-border-radius: 1em; // Mozilla 
-ms-border-radius: 1em; // Internet Explorer 8 (No soportado) 
-webkit-border-radius: 1em; // WebKit y Safari 

Como podemos ver el cambio es significativo, y únicamente hemos de añadir un fichero JS a la carga de nuestra aplicación web.

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

Compatibilidad

Actualmente está disponible para los principales navegadores, IE9+ Opera 10+, Firefox 3.5+, Safari 4+ y Chrome para escritorio y Mobile Safari, Android browser, Chrome y Opera Mobile para móviles.

Problemas detectados.

En CristaLAB comentaban que nos funcionan en:

  • CSS’s cargados mediante @include.
  • ficheros CSS’s locales en Chrome y Opera.
  • Estilos inline
  • y CSS’s de diferentes dominios

Aún así, el trabajo que nos ahorramos a largo plazo es realmente interesante para tenerlo en cuenta.

  • ¿Cuándo se vana poner las pilas los de IExplorer y van a comenzar a soportar las mismas funcionalidades que los demás, van a implementar la misma seguridad que los demás, etc.?

    Parece mentira que sean quienes son… Por no hablar de los dolores de cabeza que nos dan para que todo se vea más o menos parecido en los distintos navegadores…

    Enhorabuena por tu trabajo y por las lecciones que nos das, maestro. 😉

    • @Álvarodelcastillo: Gracias Alvaro! 😀
      Internet Explorer desde una posición de dominante se encuentra tambien en una posición delicada, ya que cada cambio que incluye, aunque sea un cambio para bien, puede provocar problemas muy, pero que muy gordos a nivel mundial.

      Por poner un ejemplo, si decidieran deshacerse de ActiveX() una gran cantidad de páginas de bancos, intranets, … dejarían de funcionar y/o necesitarían rehacerse, lo que podría ser catastrófico…

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.