Los 9 errores más comunes al usar CSS Grid

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Uriel Jurado.

Es fácil tener muchos errores usando una tecnología nueva, especialmente algo que tuvo un gran cambio desde la versión anterior, tal como en CSS Grid. En este vídeo (en inglés) explico los 9 errores más comunes que la gente tiene al usar esta tecnología, con consejos y tips para evitar estas trampas y romper viejos hábitos.

Enlace al vídeo en Youtube

Error 1: Creer que CSS Grid lo es todo

Flexbox vs CSS Grid – ¿Cuál es mejor?

Usando Flexbox y Grid juntos

Eliminar Cajas con CSS Shapes

Error 2: Usar únicamente porcentajes en las dimensiones

Mínimo y Máximo, dimensionando contenido en CSS Grid

Unidades FR en CSS Grid

MinMax en CSS Grid

Error 3: Asumir que necesitas breakpoints

Diseño asombrosamente sencillo con CSS Grid

Error 4: Confundirse al enumerar

Diseñador Gráfico Ingenioso y Práctico con CSS Grid

Lo Básico de CSS Grid: El gran cuadro

Error 5: Siempre usar 12 columnas

Explico esto al final de “Unidades FR en CSS Grid”

Error 6: Ignorar el poder de las filas

Flexibilidad y dobleces

Espacio Blanco en la Web

Error 7: Buscar un Framework

Error 8: Esperar a la muerte de IE11

¿Internet Explorer + CSS Grid?

Serie de 7 partes sobre escribir CSS flexible que trabaje en todos los navegadores

Error 9: Titubear en vez de jugar

Mondrian Responsivo

CSS Grid como si fueras Jan Tschicold

Anuncios

La vida después de Flash: multimedia para la Web abierta

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por juliabis.

Flash hizo llegar vídeo, animación, sitios interactivos y, sí, anuncios a miles de millones de usuarios durante más de una década, pero ahora se se está marchando. Adobe dejará de soportar Flash para el año 2020. Firefox ya no lo soporta “fuera de la caja”, y Chrome tampoco. ¿Qué es lo siguiente? Hay toneladas de estándares abiertos que pueden hacer lo que Flash hace, y aun más. Sigue leyendo

Quantum de cerca: ¿qué es el motor de un navegador web?

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Sergio Carlavilla Delgado.


En octubre del año pasado Mozilla anunció el Proyecto Quantum – nuestra iniciativa para crear un motor de navegación web de nueva generación. Ya estamos en marcha con el proyecto. De hecho liberamos nuestra primera pieza significativa de Quantum con Firefox 53.

Pero sabemos que para personas que no construyen navegadores web (¡y eso es la mayoría de la gente!), puede ser difícil ver por qué algunos de los cambios que estamos realizando en Firefox son tan importantes. Después de todo, muchos de los cambios que estamos haciendo serán invisibles para los usuarios.

Con esto en mente, estamos lanzando una serie de publicaciones para proporcionar una visión más profunda de lo que estamos haciendo con el proyecto Quantum. Esperamos que esta serie de publicaciones te brinde una mejor comprensión de cómo funciona Firefox y las formas en que Firefox está construyendo un motor de navegación web de nueva generación para mejor aprovechar el hardware de los ordenadores modernos. Sigue leyendo

Entendiendo el modelo de cajas de CSS para los elementos en línea

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Sergio Carlavilla Delgado.

En una página web, todo elemento se representa como una caja rectangular. El modelo de cajas describe cómo el content (contenido), padding (relleno), border (borde) y margin (margen) del elemento determinan el espacio ocupado por el elemento y su relación con otros elementos de la página. Sigue leyendo