Hugo Suárez López

¿SABES cómo se CALCULAN las TRANSFORMACIONES CSS?

Resulta que una rama de las Matemáticas, denominada ÁLGEBRA LINEAL, propone un nuevo tipo de ente abstracto conocido cómo "MATRIZ"; en un inicio, nos permitieron resolver a nivel GOD, muchas ECUACIONES algebraicas al MISMO TIEMPO. Así, siguiendo esta misma línea de pensamiento, las matrices permiten a las computadoras lograr que un elemento gráfico en 2D o 3D, dentro del área de la pantalla, tenga la capacidad de TRASLADARSE, ROTAR y/o ESCALAR; lo mejor de todo esto, es que para una computadora, resulta en ocupar POCOS de sus recursos para realizar estas operaciones complicadas para nosotros.

¡ADVERTENCIA!

¿Sueles utilizar el valor "1" en la propiedad « flex » para TODOS los flex items, con el fin de lograr anchos/alturas UNIFORMES y flexibles? Pues bien, te sorprenderá saber que bajo ciertas CIRCUNSTANCIAS los flex items NO tienen el mismo tamaño, aunque tengan el MISMO factor de CRECIMIENTO, el mismo factor de ENCOGIMIENTO y el mismo TAMAÑO INICIAL. Te explico. Debido a que un flex item TAMBIÉN puede cambiar su tamaño (ancho/altura) de acuerdo con la CANTIDAD de texto en su interior; una palabra extremadamente larga en el texto, puede IMPONER un ancho (centrándonos en el modo de escritura horizontal) MAYOR al ancho CALCULADO por el navegador para establecer anchos iguales a TODOS los flex items. A continuación, te comparto el siguiente ejemplo con mi PROPIO código fuente, para que comprendas gráficamente el efecto en cuestión. El proyecto consta de un flex container con un ancho FIJO a 340px y con dos flex items en su interior. La problemática se centra en el segundo (a la derecha) flex item, que contiene la palabra "extremadamente"; ésta palabra es suficientemente LARGA, para OBLIGAR al flex item a IMPONER SU ancho MÍNIMO IGUAL al ancho de la palabra misma. Lo que a su vez, OBLIGA al primer (a la izquierda) flex item a ADOPTAR TODO el espacio SOBRANTE; aunque signifique que su ancho sea visiblemente MENOR que el ancho del segundo flex item. Por supuesto, existen propiedades CSS para ROMPER palabras extensas dentro de un contenedor, pero VISUALMENTE, ¡NO son una opción viable ni atractiva!

¡CURIOSIDAD de Flexbox!

¿Sabías que la propiedad << flex-basis >> se comporta de diferente forma con el valor "0" que con el valor "0%"? Recordemos que la propiedad longhand << flex-basis >> determina el TAMAÑO INICIAL en el main axis, para un flex item; con el fin de que el navegador realice los cálculos necesarios para establecer el crecimiento/encogimiento de los flex items, dentro de su contenedor. Para entender tal diferencia entre el valor "0" SIN unidades y con el signo de PORCENTAJE, deben cumplirse cada una de las siguientes tres CONDICIONES: 1. El flex container NO debe tener un TAMAÑO DEFINIDO. 2. Al flex item se le impone una restricción con la propiedad << min-width >> / << min-height >>; de acuerdo con la dirección del main axis. 3. El MISMO flex item debe poseer un CONTENIDO que lo obligue a crecer MÁS ALLÁ de la anterior RESTRICCIÓN. A continuación, te comparto tanto MI código fuente cómo una captura de pantalla del navegador, para que notes la DIFERENCIA entre la interpretación del MISMO valor "0", pero con diferentes UNIDADES. Ahora, con el fin de visualizar mejor el efecto, cada flex container se establece cómo un elemento inline, escribiendo la declaración: << display: inline-flex; >>. Además, se cambia la orientación del main axis a vertical, con la declaración: << flex-direction: column; >>. Para el primer (a la izquierda) flex item, la propiedad << flex-basis >> tiene el valor de "0". Por lo que el navegador muestra su CONTENIDO hasta el límite impuesto a 200px; más allá de ésta ALTURA, es necesario utilizar una barra de SCROLL vertical para visualizar el RESTO de su contenido. Por otro lado, para el segundo (a la derecha) flex item, el valor de la propiedad << flex-basis >> es "0%". Así, en este caso en PARTICULAR, el navegador interpreta a TODO el contenido dentro del flex item cómo su TAMAÑO INICIAL; el hecho anterior sucede de esta forma por que su flex container NO tiene un tamaño DEFINIDO y por lo tanto, NO hay punto de REFERENCIA para el PORCENTAJE. Lo que a su vez, puede ROMPER con la restricción impuesta al tamaño del flex item. Si deseas profundizar sobre éste inusual comportamiento de Flexbox, te comparto la información referente en "MDN Web Docs", cómo un buen punto de partida: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#flex_basis_0_vs_0

¡Muchas FELICIDADES por concluir el curso de Flexbox y Grid! Ahora, una pequeña ACTUALIZACIÓN:

¿Has oído hablar sobre el NUEVO valor "subgrid" para la propiedad << grid-template-rows >> / << grid-template-columns >>?

Es una nueva característica de CSS Grid, que permite de una forma SENCILLA la ALINEACIÓN para una cuadrícula ANIDADA (un grid item con la declaración "display: grid;") con respecto al grid container PRINCIPAL. En pocas palabras, el valor "subgrid" HEREDA al nuevo grid container el TAMAÑO y el ESPACIADO entre las grid TRACKS del grid container PRINCIPAL; permitiendo una vía para solucionar varios problemas en el diseño del layout con CSS Grid.

Si tienes más curiosidad de cómo aprovechar al 100% éste nuevo feature, totalmente soportado por los navegadores desde el año 2023, te comparto el contenido que nos proporciona "MDN Web Docs" al respecto:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid

¡RECOMENDACIÓN!

Puedes saltarte el video de esta clase y verlo tras haber concluido el curso; para que puedas comprender a detalle y SIN que tu cabeza ESTALLE en mil pedazos, todos los efectos de las propiedades de CSS Grid usadas durante el diseño del layout de la galería responsive. Así que ve a estudiar completamente el siguiente y último módulo para que regresando a éste video, lo consideres cómo el proyecto final.

¡ACTUALÍZATE! Al día de hoy NO implementes más las propiedades << grid-row-gap >>, << grid-column-gap >> y su shorthand << grid-gap >> en tus proyectos; la causa es por qué están parcialmente OBSOLETAS. En su lugar debes usar << row-gap >>, << column-gap >> y << gap >>, respectivamente; pues ahora, el cambio en ésta especificación está totalmente SOPORTADO por TODOS los navegadores, a partir del año 2021; incluso para el diseño del layout tanto con Flexbox, cómo con Multi-column.

¿Te quedó la DUDA si son 6 ó 7 grid lines horizontales?

En el diagrama de ejemplo, a partir del minuto 8:20 de la reproducción del video; la segunda línea horizontal, contando de arriba a abajo, NO fue tomada en cuenta. Así que sin más, ¡la cantidad total de grid lines HORIZONTALES es 7!

¡REFLEXIONA de MI COMENTARIO ANTERIOR! Si deseamos conocer el número de líneas requerido para crear una cantidad específica de columnas dentro de una cuadrícula. Podemos constatarlo fácilmente trazando línea vertical tras línea vertical (colocándolas por ahora de izquierda a derecha) y asumiendo que por cada línea agregada es una columna más creada; siendo ésta misma línea, el borde IZQUIERDO de la nueva columna. Por lo tanto, para posteriormente CERRAR la cuadrícula, se debe colocar una línea extra para la última columna; resaltando el hecho de que tal línea NO es compartida con ninguna otra columna.

Así concluimos en que hemos demostrado que justamente por la observación anterior que, el número de LÍNEAS SIEMPRE SUPERA por una UNIDAD al número de COLUMNAS. ¡Y sí! Sucede de forma similar la misma situación con los RENGLONES de una cuadrícula.

¡Hola comunidad de EDteam! Frecuentemente comento en los videos de los cursos que estoy estudiando y suelo compartir mi código fuente para resolver alguna duda o para aportar con algo significativo al contenido de la clase. Sin embargo, al momento de copiar el código que había escrito en VS Code y pegarlo en alguna caja de comentarios acá en EDteam; antes de publicarlo el código se ve tal cual en el editor, pero una vez ya publicado se DESESTRUCTURA de una forma ininteligible.

¿Qué debo hacer para que el código no se desorganice? Cabe resaltar que mi propósito al copiar y pegar mi código, es para que cualquier compañero en EDteam tenga acceso inmediato para comprobar el algoritmo en su propia PC.

Por ejemplo, hice un pequeño documento HTML de muestra para que vean claramente de lo que hablo. También les adjunto una captura de pantalla del mismo código en VS Code para que noten la gran diferencia visual en ambas plataformas. Sin más, he aquí el copy-paste del código fuente de muestra:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Subgrid layout</title> <link rel="stylesheet" href="style.css"> </head> <body>

<span style="color: #7ca668;"><!-- Creación del grid container --></span>
 <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"container"</span><span style="color: #808080;">></span>
     <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>01<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
     <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>02<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
     <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>03<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
     <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"subgrid"</span><span style="color: #808080;">></span>
         <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"subitem"</span><span style="color: #808080;">></span>I<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
         <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"subitem"</span><span style="color: #808080;">></span>II<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
         <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"subitem"</span><span style="color: #808080;">></span>III<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
         <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"subitem"</span><span style="color: #808080;">></span>IV<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
     <span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
     <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>04<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
     <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>05<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
     <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>06<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
     <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>07<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
     <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span> <span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"item"</span><span style="color: #808080;">></span>08<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>
 <span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span>

</body> </html>

¿Conoces la RELACIÓN entre el efecto COMPOUNDING y la unidad REM?

En la práctica, suele ser común declarar la propiedad «font-size» con las unidades EM; sin embargo, ésta práctica puede provocar un problema denominado Compounding (Composición).

El efecto Compounding se presenta cuando se anida un elemento HTML dentro de sí mismo, y al que se le ha establecido un valor en EM para su propiedad «font-size». Con la finalidad de visualizar el problema, consideremos el siguiente ejemplo práctico:

---------- index.html ----------

---------- style.css ----------

.red { font-size: 1.5em; }

.green { font-size: 1.5rem; }

.father { border: 5px solid crimson; }

.father.green { border-color: green; }

Ahora, auxiliándonos con la imagen adjunta a éste comentario y recordando que el TAMAÑO BASE del TEXTO es por defecto de 16PX.

Se puede observar que un primer elemento «div» con clase "red" alberga en su interior a otro elemento «div» con la misma clase "red"; especificando para AMBOS una «font-size» con el valor de 1.5EM. Así que, mientras el contenedor PRINCIPAL (con la clase adicional "father") RENDERIZA el TEXTO a 24PX (1.5 x 16), su HIJO renderiza el TEXTO a 36PX (1.5 x 16 x 1.5).

Por otro lado, a continuación se encierra un elemento «div» con la clase "green" dentro de sí mismo, usando el MISMO valor de 1.5 pero utilizando las unidades REM. Lo que da cómo resultado un DESPLIEGUE del TEXTO en AMBOS elementos con un TAMAÑO de 24PX.

En conclusión, las unidades REM fueron INVENTADAS para sobrellevar el efecto COMPOUNDING. Si deseas conocer más al respecto, te comparto la documentación en MDN Web Docs:

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#description