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.
2 comentarios, 3 referencias
+
#