Mejorando las cosas: redefiniendo las posibilidades técnicas de CSS

Robin recientemente lamentó la queja común de que CSS es frustrante. Existen ideas erróneas sobre qué es y qué hace. Hay debates sobre qué tipo de lenguaje es. Incluso hay diferentes opiniones sobre dónde debería escribirse.

Rachel Andrew tiene disponible una nueva charla de An Event Apart DC 2019 que nos hace retroceder; Volvamos a las raíces de los problemas que solíamos tener con CSS y los “trucos” que usamos para superarlos. CSS ha cambiado mucho en los últimos años y, si bien esos cambios a veces han parecido complejos y confusos, están diseñados para resolver lo que siempre quisimos que hiciera CSS.

La hora completa que lleva ver la charla bien vale la pena. Aquí hay algunas pepitas que se destacaron. En primer lugar, algunas desacreditaciones de quejas comunes de CSS:

• Nunca se sabe qué tan alto es algo en la web. Los flotadores nunca resolvieron esto porque solo acercan las cosas unas a otras en lugar de conocer los elementos que las rodean. Los nuevos métodos de diseño, incluidos CSS Grid y Flexbox, realmente analizan nuestros elementos y los ayudan a comportarse de manera consistente.
• Flexbox es extraño y poco intuitivo. No es el método de diseño que podría pensar. Si lo vemos como una forma de alinear las cosas una al lado de la otra, se sentirá extraño y también se comportará de manera extraña. Pero si lo vemos tal como es (un método que analiza elementos de diferentes tamaños y devuelve el diseño más lógico), empieza a tener sentido. Asigna espacio, en lugar de aplastar cosas en una caja.

Rachel continúa dándonos un vistazo al futuro de lo que CSS quiere hacer por nosotros:

• CSS quiere evitar la pérdida de datos. Las nuevas palabras clave de alineación como safey unsafenos darán control adicional para definir si queremos que CSS evite agresivamente el contenido que se oculta involuntariamente o permite que suceda.

.container {  display: flex;  flex-direction: column;  /* Please center as long as it doesn't result in overflow */  align-items: safe center;} 

• CSS quiere ayudarnos a ser realistas con el desbordamiento. Las palabras clave min-contenty max-contentpermiten crear cuadros que sean lo suficientemente anchos para el contenido pero no más anchos, y cuadros que sean tan grandes como el contenido puede ser.

.container {  width: min-content; /* Allow wrapping */}

• CSS quiere diseñar las cosas de forma lógica. La web no es de izquierda a derecha. Grid y Flexbox introdujeron silenciosamente una forma de pensar de principio a fin que es independiente de la dirección. Esto ha provocado una nueva especificación para valores y propiedades lógicas.
• CSS quiere hacer que el contenido sea más portátil. Las regiones CSS nos permiten hacer fluir contenido de un elemento a otro. Si bien probablemente sea una comparación defectuosa, es algo así como las tuberías de los juegos de Mario Bros. de la vieja escuela, donde saltar en una tubería en un lugar hará que tu personaje salga de otra tubería en otro lugar… pero podemos definir esas fuentes nosotros mismos y sin enojarnos. plantas que intentan comernos en el camino.

De todos modos, esto es sólo una muestra de lo que Rachel cubre en su charla. Es un buen recordatorio de que An Event Apart tiene una biblioteca completa de valiosas charlas de oradores increíbles y que asistir a un evento de la AEA es una experiencia invaluable que vale la pena visitar. La charla de Rachel fue del evento del año pasado en Washington DC y resulta que el próximo evento se llevará a cabo allí del 13 al 15 de abril. Si no puede asistir a ese, hay varios otros durante todo el año en todo Estados Unidos.

¡Ah, y por supuesto tenemos un código de descuento para ti! Úselo AEACPpara obtener $100 de descuento en cualquier espectáculo.

Enlace directo →