Descubre excelentes hacks CSS compartidos en Generate NY.
Durante mucho tiempo, CSS no contuvo una gran cantidad de sorpresas. Desarrollado a un ritmo pausado, el lenguaje fue hecho para diseñar sus fuentes y flotar sus divs, mientras que los lenguajes como JavaScript hicieron mucho trabajo pesado.
Sin embargo, en los últimos años, el lenguaje ha disfrutado de un renacimiento de la mediana edad, con su grupo de trabajo W3C obteniendo mucho más bienes raíces en el panorama del desarrollo moderno. Ya sea que esté creando diseños de sitios web receptivos , animaciones meticulosamente diseñadas o construyendo componentes perfectos para píxeles, CSS ahora tiene una enorme cantidad de potencia bajo su capó. Pero si bien esto le ofrece un conjunto de herramientas completamente nuevo al diseñar sus sitios, significa que es fácil pasar por alto nuevos trucos que puede incorporar a su flujo de trabajo de desarrollo.
Mejores y más brillantes consejos de expertos en CSS de la industria
En Generate New York en abril de este año, nuestra audiencia tuvo la oportunidad de aprender algunos consejos directamente de algunos de los mejores y más brillantes expertos en CSS de la industria, como la defensora de diseñadores, desarrolladores de Mozilla y un miembro del Grupo de Trabajo CSS Jen Simmons. .
Pero en lugar de acumular estos trucos, queríamos compartirlos con usted y mostrarle algunas de las cosas interesantes que Simmons nos enseñó para ayudarlo a mejorar su juego de CSS. Puede ver la charla completa a continuación o seguir leyendo para conocer las conclusiones clave.
01. Crear diseños de cuadrícula CSS es muy sencillo
De acuerdo, probablemente sea seguro asumir que mucha gente ya ha recibido este mensaje. Pero, como la charla de Simmons deja en claro, la cuadrícula es una forma súper inteligente de diseñar sus sitios. En primer lugar, configurar su cuadrícula inicial es un juego de niños. ¿Desea crear una cuadrícula simple de 12 columnas para comenzar a diseñar sus divisiones y componentes principales? Todo lo que tiene que hacer es decirle a la cuadrícula que repita 12 columnas, siendo cada una una fracción igual de la cuadrícula:
.example-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
}Y en lugar de perder el tiempo con flotadores, colocar elementos es muy sencillo. Digamos que desea un div que abarque el centro de su sitio, dejando dos columnas de espacio en blanco a cada lado, nuevamente el código no podría ser más simple:
.example-div {
grid-column: 3 / 11;
}Cosas básicas hasta ahora. Pero lo que la charla de Simmons deja en claro es cuán inteligente es la red. Antes de definir la posición que desea que tome su contenido, la cuadrícula CSS distribuirá automáticamente el contenido en filas o columnas posteriores, lo que facilitará la visualización de los elementos que va a estructurar. Alternativamente, supongamos que se ha quedado atascado en el diseño y aún no ha definido su cuadrícula; en lugar de dejarlo mirando un diseño descorchado, CSS inferirá el número de filas y columnas que su cuadrícula debe tener a partir de los valores máximos de fila de cuadrícula y columna de cuadrícula que ha utilizado.
02. Grid no se parece en nada a las tablas HTML
Cuando surge algo nuevo, siempre habrá personas dispuestas a criticar el cambio. La cuadrícula CSS no es una excepción; sin duda fue recibido con una buena cantidad de detractores, quienes afirmaron que es solo un recalentamiento de la vieja y obsoleta práctica de diseñar sitios con tablas HTML.
Afortunadamente, la charla de Simmons puso esto en la cama. En los viejos tiempos oscuros del diseño web, las cuadrículas basadas en tablas eran cosas planas e inflexibles. En el segundo momento en que un desarrollador necesitaba dos elementos en celdas adyacentes para superponerse, se vieron obligados a descomponer y guardar contenido como imágenes estáticas, lo que se siente menos anticuado y más paleolítico.
Por el contrario, la cuadrícula no solo le permite apilar y superponer elementos, sino que le permite hacerlo de manera flexible y receptiva: en lugar de arreglar diseños en piedra, puede usarlo para dictar exactamente cómo los elementos responden y se deslizan unos sobre otros.
03. Subgrid agrega una capa completamente nueva a los diseños
Si las tablas HTML son el pasado oscuro y distante y la cuadrícula es el presente, la subcuadrícula es el futuro. Como puede ver en la charla de Simmons, la cuadrícula solo llega hasta cierto punto: una cuadrícula en un padre afecta a sus hijos, pero los nietos no heredan la cuadrícula. Y si bien puede colocar una nueva cuadrícula dentro de la cuadrícula original, no se adherirá a las filas y columnas de los padres, lo que lleva al tipo de trabajo de diseño desordenado que creía haber dejado atrás hace mucho tiempo.
Afortunadamente, la subcuadrícula resuelve este problema, lo que significa que, si lo desea, sus diseños pueden ser cuadrículas hasta el fondo. Y gracias al hecho de que se adhieren a las propiedades establecidas por sus cuadrículas principales, puede crear algunos diseños fantásticos con un nivel de control muy granular en sus cuadrículas.
04. Las fuentes variables son absurdamente versátiles
Como probablemente pueda deducir por el deleite de Simmons jugando con ellos en las herramientas de desarrollo de su navegador, las fuentes variables son un gran problema. Envíe una sola fuente variable con su sitio y puede hacer referencia a una variación casi infinita de pesos, seguimiento y estilos, lo que le permite realizar el trabajo pesado que normalmente es propiedad exclusiva de familias de fuentes completas. En definitiva, una herramienta de craqueo al crear nuevos diseños creativos.
05. CSS rompe diseños de tipo
Otro gran secreto de CSS es la flexibilidad con que maneja el tipo: un excelente ejemplo proviene del video de Simmons. Si desea utilizar idiomas que se transmiten de derecha a izquierda, simplemente puede usar la propiedad ‘direction: rtl;’ para que aparezcan como deberían. Alternativamente, digamos que desea que las líneas de su párrafo giren 90 grados en el sentido de las agujas del reloj, simplemente puede usar ‘modo de escritura: vertical-rl;’ – o ‘modo de escritura: vertical-lr’ si desea que su primera línea aparezca a la izquierda con cada línea posterior más a la derecha.
Si bien el soporte todavía es mixto para ‘vertical-rl’ y ‘vertical-lr’, vale la pena tener en cuenta estos ingeniosos fragmentos de CSS al agregar mejoras de estilo progresivo a sus sitios.
