EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Pseudo-clases pseudo-elementos
            Pseudo-clases y pseudo-elementos en CSS
            12/10/2019
            Buenas prácticas CSS
            Buenas prácticas CSS
            12/10/2019

            Prefijos CSS de los navegadores

            prefijos css de los navegadores

            prefijos css de los navegadores

            11. Prefijos CSS de los navegadores

            Actualmente los navegadores tienen implementadas muchas de las nuevas características de CSS3 utilizando sus propias versiones de cada propiedad mediante prefijos. Esto se hace así para evitar los posibles errores ocasionados por las primeras implementaciones que aún no son estables. Por ello, los navegadores proporcionan valores utilizando sus prefijos propios y una declaración sin prefijo.

            Después de un tiempo, cuando las especificaciones son estables, se eliminarán las propiedades con prefijo. Los prefijos para los navegadores más comunes son los siguientes:

            PrefijoNavegador
            -moz-Firefox
            -webkit-Safari y Chrome
            -o-Opera
            -khtml-Konqueror
            -ms-Internet Explorer
            -chrome-Google Chrome

            Así por ejemplo para transformar un elemento en Firefox, es necesario utilizar la propiedad -moz-transform; en los navegadores basados en WebKit, como Safari y Google Chrome, se utiliza la propiedad -webkit-transform. Por este motivo, no es de extrañar que en algunos casos, tengamos que añadir hasta cuatro líneas de código para una única propiedad CSS.

            Se pueden ver los navegadores que soportan una determinada propiedad CSS o un elemento HTML5 en la página caniuse.com.

            Extensión Autoprefixer para Visual Studio Code

            Para ahorrar tiempo y facilitarnos la tarea de incluir los prefijos de las propiedades CSS que todavía no son estables podemos hacer uso de la extensión «Autoprefixer» en Visual Studio Code.

            prefijos css navegadores autoprefixer
            Figura 1. Extensión autoprefixer para Visual Studio Code.

            Como vimos en la anterior unidad, para instalar una extensión en Visual Studio Code tenemos que acceder a view /extensions. Una vez instalada la extensión, en view /command palete (o Ctrl+shift+p) escribimos «autoprefixer run» para añadir todos los prefijos necesarios en una hoja de estilos. 

            Puedes probar que funciona añadiendo esta propiedad en un estilo CSS y viendo cómo se insertan sus correspondientes prefijos:

            user-select: none; /* controla si el usuario puede seleccionar el texto */

            Desde los ajustes de la propia extensión se puede indicar que se busque sin faltan prefijos cada vez que se guarda el documento.

            Ejercicio propuesto

            Realiza la instalación de la extensión y añade rápidamente todos los prefijos necesarios sobre una hoja de estilos que disponga de propiedades CSS que aún no sean estables.

            Compartir

            UD3. CSS básico

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Buenas prácticas CSS
            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Formatos de las fuentes en CSS y utilización de repositorios
            • 16. Estilos en formularios CSS
            • 17. Herramientas útiles, test de verificación y referencias
            • 18. Resumen CSS
            • 19. Prácticas CSS
            • 20. Test de conocimientos CSS
            • 21. Propiedades Personalizadas CSS

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results