1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Como utilizar prefixfree y olvidarnos de los prefijos de navegador

Tema en 'Tutoriales de Javascript' comenzado por FalconMasters, 8 de Enero de 2015.

  1. FalconMasters

    FalconMasters
    Administrador
    Miembro del Equipo

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    392
    Me gusta recibidos:
    322
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Diseñador Web
    Página web:
    Hola que tal amigos, hoy en este tutorial les voy a enseñar como utilizar prefixfree una librería de javascript que nos va a agregar todos esos prefijos de nuestras propiedades CSS, prefijos como: -moz-, -o-, -ms-, -webkit-.

    -prefix-free

    Si aun no sabes de que prefijos estoy hablando aquí pongo un ejemplo:
    Cuando queremos agregar la propiedad por ejemplo box-shadow:box-sizing; tenemos que agregar estos prefijos para que funcione en otros navegadores, lo mismo para border-radius, transition y otras propiedades CSS.

    Código (Text):
    * {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    }
    Bueno pues con prefixfree nos vamos a olvidar de tener que agregarlos y también de tener que buscar si una propiedad lleva prefijos o no.

    Instalación

    La instalación es muy fácil, es como cualquier otra librería, lo unico que tenemos que hacer es descargar el archivo, para eso nos vamos a su sitio web oficial y descargamos el archivo .js
    http://leaverou.github.io/prefixfree/

    Lo instalamos como cualquier otra librería.
    HTML:
    <script src="https://raw.githubusercontent.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js"></script>
    Y listo, es lo único que tenemos que hacer, no hay necesidad de ejecutar alguna función ni nada por el estilo.
    A partir de ahora solo debes escribir las propiedades css normalmente y esta librería agregara los prefijos en el navegador, te comento esto para que no esperes que por arte de magia aparezcan en tu editor de código, porque no lo harán, solo en el navegador.
     
    A Ferdi342, brandon y chivodev les gusta esto.
  2. devsign

    devsign Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    3
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    Localización:
    Barcelona
    Página web:
    Falcon no se si lo conoces pero hay una herramienta que yo considero mejor, es un post-processor y no supone ninguna carga a la web, se llama pleeease aquí lo podeis probar http://pleeease.io/play/. Yo lo tengo instalado y tiene muchas mas herramientas a parte del prefix también minifica y hace fallbacks de px a rem. La instalación es añadir el paquete en node.js y simplemente compilar tu style.css .

    Haré un articulo en mi blog cuando tenga la pagina lista en unos 4 dias.
     
    A chivodev le gusta esto.
  3. Side Master

    Side Master
    Moderador

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    257
    Me gusta recibidos:
    208
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Página web:
    Buen aporte compañero, al parece hay muchos que tienen este problema!.
     
  4. chivodev

    chivodev Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    53
    Me gusta recibidos:
    15
    Puntos de trofeos:
    8
    Género:
    Hombre
    No tenia conicimiebto de estas herramientas, ponerla a prueba a ver con cual me quedare...
     
  5. FalconMasters

    FalconMasters
    Administrador
    Miembro del Equipo

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    392
    Me gusta recibidos:
    322
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Diseñador Web
    Página web:
    No lo conocía, pero muchas gracias por el aporte, yo el que uso es prepros que también esta cool pero es de paga.
     
  6. AyuukJaay

    AyuukJaay Miembro Activo

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    149
    Me gusta recibidos:
    69
    Puntos de trofeos:
    28
    Género:
    Hombre
    Página web:
    tambien estan los preprocesadores principalmente stylus con ayuda del plugin nib hace los mismo aparte de eso trabaja con mixins, minificacion de css, y genera automaticamente los archivo.css con solo agregarle un parametro este tambien corre bajo nodejs y en terminal.
     
    A FalconMasters le gusta esto.
  7. griselcesar

    griselcesar Miembro Activo

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    135
    Me gusta recibidos:
    61
    Puntos de trofeos:
    28
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Venezuela
    Página web:
    Gracias por el aporte, No sabia de esto...
     
  8. Ferdi342

    Ferdi342 Nuevo Miembro

    Se incorporó:
    11 de Enero de 2015
    Mensajes:
    16
    Me gusta recibidos:
    5
    Puntos de trofeos:
    3
    Género:
    Hombre
    Página web:
    Wow! No lo sabía. Muchas gracias :)
     

Comparte esta página