Forem: Lupita Code 🌄

🌈 La propiedad border-radius para redondear esquinas en elementos CSS

Lupita Code 🌄 — Sat, 05 Oct 2024 22:37:18 +0000

¡Hola gente bonita!👋

Casi todos los botones, modales, cards, iconos y logotipos que ves en las interfaces tienen las esquinas redondeadas.

Puede establecer la curvatura en cada una de las cuatro esquinas de un elemento con la propiedad border-radius especificando el radio del circulo.

Cuanto mas grande es este radio mayor efecto de redondeo conseguiremos. El redondeo puede ser un circulo o una elipse.

Vamos a profundizar en la propiedad border-radius.

Si utiliza un único valor, significa que las cuatro esquinas se redondean por ese valor.

Si utiliza dos valores, se aplica el primer valor a las esquinas top-left y bottom-right y el segundo valor a las esquinas top-right y bottom-left.

ℹ️ Si se omite el valor inferior derecho (bottom-right) es igual que el superior izquierdo (top-left) y si se omite el inferior izquierdo (bottom-left) es igual que el superior derecho (top-right), es decir, La esquina opuesta en ambos casos.

Si utiliza tres valores, se aplica el primer valor a la esquina top-left, el segundo valor a las esquinas top-right y bottom-left y el tercer valor a la esquina bottom-right.

ℹ️ Como no hay un cuarto valor asignado, lo que se hace es tomar el de la esquina correspondiente. Cuando se llega a la esquina inferior izquierda (bottom-left) se toma el valor de la esquina que tiene enfrente, es decir, la esquina superior derecha (top-right).

Si utiliza los cuatro valores se aplica a cada esquina del elemento. Recuerda que empezamos por la esquina superior izquierda y vamos girando en el sentido de las agujas del reloj, hasta terminar en la esquina inferior izquierda.

Propiedades individuales de redondeo

También puede especificar cada una de las esquinas usando las propiedades individuales, esto es verboso pero tiene la ventaja de ser explicito para usted o cualquier futuro lector de su código.

También podemos utilizar dos valores en cada propiedad individual para crear una elipse. Por ejemplo:

Profundizaremos en esto en unos momentos...

Valores

La propiedad border-radius puede aceptar cualquier unidad de longitud CSS válida. Puedes especificar el valor de border-radius en porcentajes. Esto es útil para crear una forma de círculo o elipse:

.element {
  border-radius: 50%;
  width: 200px;
}

También podrías mezclar porcentajes con valores de longitud fija.

¿Cuál es la diferencia entre usar porcentajes y pixeles?

El valor del porcentaje se basa en la anchura y la altura del elemento dado, mientras que los pixeles no. Por lo tanto, si utiliza porcentajes en un rectángulo, ya no tendrá esquinas simétricas.

Aquí hay un ejemplo que muestra la diferencia entre border-radius: 50px y border-radius: 50% aplicado a un rectángulo.

¿Como funciona la propiedad `border-radius`?

Si dibujamos un elemento de 300px de alto y 300px de ancho y un border-top-left-radius: 100px, el elemento comienza a curvarse desde la esquina superior izquierda ya que empieza desde esa esquina y avanza hasta llegar a 100px de lo ancho del elemento.

Después hace lo mismo en el lado vertical que es la altura, es decir, comienza desde la misma esquina superior izquierda y baja 100px, por lo tanto, se crea esta área redondeada entre ambos lados.

Si dibujamos una caja, como la que vemos en la imagen, que solo tenga la parte de la esquina superior izquierda curvada, esa caja tendría 100px de ancho y 100px de alto, es decir el valor que le dimos a border-top-left-radius

Radios de borde superpuestos

Jay Sitter explicó lo que ocurre cuando el valor del radio de una esquina es tan grande que se solapa con el radio de otra esquina. Como en este ejemplo:

Estamos aplicando un radio de 40px en las esquinas superior izquierda e inferior izquierda, así que ¿por qué son cuadradas? Porque el valor 999em de las otras dos esquinas las está cubriendo. Jay profundiza en las matemáticas detrás de esto y cómo evitar que suceda, por lo que vale la pena leer su articulo para obtener más contexto.

Elliptical Border Radius

La propiedad border-radius también se puede utilizar para crear bordes elípticos. El radio elíptico se establece especificando dos valores para cada eje en la misma esquina, separados por espacio.

El primer valor es el radio es la dirección horizontal, el segundo es en la dirección vertical.

Cuando se utilizan radios elípticos con valores muy grandes, la curva de una esquina puede afectar a la curva de las esquinas adyacentes, especialmente las que tienen valores de radio más pequeños.

En este ejemplo, sólo cambiamos el valor de la curva de la esquina superior derecha. Observe, sin embargo, que todas las esquinas redondeadas del elemento son codependientes entre sí, incluso aquellas cuyos valores no estamos cambiando explícitamente.

Ocho valores separados por una barra

Ahora vamos a utilizar el shorthand border-radius para establecer todos los radios en valores diferentes para obtener esquinas irregulares

Para conseguirlo, solo hay que añadir una barra (/), los valores a la izquierda de la barra representan el radio horizontal para cada esquina, mientras que los que están a la derecha, representan el radio vertical.

Como puedes observar damos dos vueltas alrededor de nuestro elemento en el sentido de las agujas del reloj.

Radios anidados

Si tienes un elemento con bordes redondeados y esta dentro de otro que también tiene sus bordes redondeados y algo de padding, te habrás dado cuenta que, aunque ambos tengan el mismo border-radius, el elemento anidado no se va alinear bien con el elemento externo.

La razón es que, aunque coinciden en valor, no coinciden matemáticamente ya que la distancia que hay en las esquinas es mayor que el espacio de los lados del elemento.

Así que para calcular el radio ideal de un elemento anidado, debe utilizar una fórmula sencilla: outerRadius = innerRadius + spaceBetween (padding)

outerRadius: Radio del borde del elemento padre.
innerRadius: Radio del borde del elemento hijo.
spaceBetween: Espacio de padding entre el elemento padre e hijo.

Esta fórmula asegura que el elemento anidado encaje perfectamente dentro del elemento padre, dando como resultado un aspecto más armonioso.

Aquí puede ser muy útil usar las custom properties:

.parent {
  --padding: 8px;
  --radius: 20px;
 padding: var(--padding);
 border-radius: calc(var(--radius) + var(--padding));
}
.nested { border-radius: var(--radius); }

Generadores

Referencias

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
𝕏 (Twitter)
🎵Tik Tok
🔵Facebook
🐙GitHub
🔲Codepen
✍️Medium

Unidades de Medida en CSS: Fundamentos

Lupita Code 🌄 — Wed, 08 Sep 2021 22:08:27 +0000

¡Hola gente bonita!👋

Al escribir CSS hay muchas opciones para las unidades que puedes usar. En este articulo voy a mostrar un resumen de todas las unidades de medida en CSS.

Pero antes de eso, ¿sabias que en CSS también hay tipos de datos?, las unidades de medida en CSS también son un tipo de dato, ¡Vamos averiguarlo!

🔢 Tipos de Datos

En CSS también existen tipos de datos. Los tipos de datos básicamente son el valor que le asignamos a cualquier propiedad. Los términos son básicamente intercambiables: cuando veas algo en CSS denominado ‘tipo de datos’, en realidad es solo una forma elegante de decir ‘valor’.

NOTA: En las especificaciones de CSS y en la documentación de la MDN, podrás detectar los valores porque estarán escritos entre corchetes angulares, como <color> o <length> para diferenciarlos de las propiedades, pero esto solo es una notación que utiliza la documentación.

Estos valores (data types) pueden ser de diferentes tipos, por ejemplo las unidades CSS son un tipo de dato y las palabras clave o keywords como el color, “auto”, url, etc.

Algunas propiedades CSS, como por ejemplo width, margin, font-size reciben valores de longitud (px, em, rem, etc..). Este tipo de dato, como lo resalta la documentación de la MDN, denota medidas de distancia y sirven para expresar una dimensión.

Si se adjunta una unidad a un número, éste se convierte en una dimensión. Por ejemplo, 1rem es una dimensión. En este contexto, la unidad que se adjunta a un número se denomina en las especificaciones token de dimensión. Las longitudes son dimensiones que se refieren a la distancia.

Hay dos tipos de unidades de longitud: Relativas y Absolutas.

📏 Unidades Absolutas

Las medidas absolutas se llaman así porque no cambian y siempre mantienen el mismo tamaño independientemente del tamaño del dispositivo. Las unidades absolutas son las siguientes:

Syntax	Description
cm	Centímetros
mm	Milímetros
Q	Cuartos de milímetros
in	Pulgadas
pc	Picas
pt	Puntos
px	Pixeles

⚒️ Las unidades absolutas tienen su origen en unidades físicas, como los centímetros, milímetros y las pulgadas. Es por esto que a estas unidades absolutas también se les conoce como unidades del mundo real. Ya que en el mundo real muchos de nosotros las utilizamos para medir, por ejemplo los Ingenieros, Arquitectos, los carpinteros, etc utilizan las unidades de medida.

Sin embargo en el articulo de Smashing Magazine “There Is No Such Thing As A CSS Absolute Unit” (No existe una unidad absoluta de CSS) del experto en HTML/CSS Elad Shechter, nos explica que con el paso de los años, todas las unidades absolutas en CSS han perdido su conexión con el mundo físico o el mundo real y esto es porque se ven afectadas por la densidad de las pantallas y el sistema operativo del dispositivo.

Con los píxeles también pasa esto ya que la conexión entre los píxeles físicos reales (es decir, de dispositivo) y los píxeles CSS (es decir, lógicos) casi ha desaparecido, en un momento te explicare esto.

🤔 ¿Dónde puedo usar las unidades absolutas?

Entonces, ¿en donde puedo utilizar las unidades absolutas? Las longitudes absolutas pueden ser realmente útiles cuando se diseña para formatos impresos, a excepción de los pixeles donde su uso es mas frecuente en pantallas.

Ten en cuenta que el CSS se utiliza no sólo para el contenido digital, sino también para dar estilo al contenido impreso, Por ejemplo, si usas cm para el tamaño de un elemento y luego lo imprimes, debería ser preciso si lo mides con una regla. Sin embargo en pantalla esto no es así, ya que los centímetros en pantalla no son igual a los centímetros físicos, ¿Cómo es esto posible? 😱

👉 Si creas una caja con un ancho y un alto de 1 centímetro y le das un color de fondo y después mides el elemento con una cinta métrica real o una regla 📏, vas a poder comprobar que un centímetro en pantalla no es igual a uno físico. Aquí puedes ver la imagen de este ejemplo (Crédito de la imagen: Elad Shechter)

🖨️ Pero si imprimes esta demostración en una impresora láser si vas a obtener exactamente 1 centímetro, esto significa que, para las impresoras, todavía hay, tal vez, una buena razón para usar unidades CSS como puntos, pulgadas y centímetros.

✅ Sin embargo el único valor absoluto que usaras de forma frecuente es px (pixeles). Los pixeles son la unidad CSS mas popular y conocida. La vamos a conocer a detalle en el siguiente articulo especialmente dedicado a esta unidad absoluta.

📏 Unidades Relativas

Las medidas relativas son relativas a algo mas, pero ¿relativo a que? O ¿respecto a que?, por ejemplo, relativo al font-size de un elemento padre, al ancho/altura de un contenedor padre, o al ancho/altura del viewport.

✅ La ventaja de usar unidades relativas es que puedes lograr que el tamaño del texto u otros elementos escalen proporcionalmente en relacion con todo lo demás en la pagina. Las unidades relativas son las que se recomienda utilizar sobre todo para Responsive Web Design (RWD).

Las unidades relativas se pueden dividir en dos categorías:

Unidades relativas al tamaño de la fuente.
Unidades relativas al viewport.

Unidades relativas al tamaño de la fuente

rem: Siempre es relativa al tamaño de fuente del elemento raíz que es html. Por defecto, la etiqueta html tiene un tamaño de fuente de 16px, por lo que 1rem será igual a 16px. La mayoría de los navegadores tiene un estándar en que el tamaño base de la fuente que asignan al texto que vemos en un documento HTML sea de 16px (excluyendo los encabezados y el elemento small, entre otros).

em: Las unidades em para la propiedad font-size serán relativas al font-size del elemento padre. Las unidades em en otras propiedades que no sean font-size serán relativas al font-size del elemento actual.

ex: Basada en la altura de la “x” minúscula de la fuente del elemento (depende de la tipografía utilizada). La unidad ex es la mitad del tamaño de la fuente establecida por el navegador del usuario que por lo regular es 16px = 1em, entonces la mitad de 16px es 8, por lo que 8/16 = 0.5, por lo que 1ex es igual a .5em.

cap: Basada en la altura de las letras mayúsculas de la fuente actual del elemento.

ch: Basada en la anchura del glifo “0” de la letra del elemento.

ic: Es una medida nueva que tiene que ver con la anchura de los glifos. Para mas información puede consultar la especificación de la w3c.

lh: Altura de linea del elemento.

rlh: Altura de linea del elemento raíz (html).

Te recomiendo leer mi articulo mas completo sobre las unidades em y rem, donde explico cuando y como usar estas unidades y la diferencia entre ambas:

EM VS REM: ¿Cuál debería usar? | Medium

Lupita Code 🌄 ・ Sep 30, 2023 ・
lupitacode.Medium

Unidades relativas al viewport

vw (Viewport width) Relativo al ancho del viewport los valores van de 1-100.

vh (Viewport height) Relativo a la altura del viewport los valores van de 1-100.

vmax Entre vw y vh toma el que tenga el mayor valor.

vmin Entre vw y vh toma el que tenga el menor valor.

NOTA: Las unidades del viewport tendrán su propio articulo detallado.

Porcentajes %

Cuando especificamos un porcentaje como data type o valor en un elemento, este se calcula en base en la medida del elemento padre, para que esto funcione, la medida en el elemento padre debe estar especificada.

Te recomiendo leer mi articulo sobre los porcentajes donde explico lo siguiente:

✅ width:auto vs. width:100%
✅ height:auto vs. height:100%
✅ html, body { height: 100%}
✅ Porcentajes en la propiedad font-size

Unidades de Medida en CSS: Porcentajes | Lupita Code | Medium

Lupita Code 🌄 ・ Sep 27, 2023 ・
lupitacode.Medium

+50 unidades de longitud...

CSS ha tenido últimamente nuevas unidades de longitud dando un total hasta ahora de más de 50 unidades

Este Codepen de Adam Argyle expone todas las unidades de longitud:

🔎 Lecturas Recomendadas

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok

Palabras clave en CSS: "initial","inherit","unset" y "revert"🐱‍🏍

Lupita Code 🌄 — Thu, 12 Aug 2021 00:55:23 +0000

¡Hola gente bonita!👋

CSS tiene "Global Keywords" o palabras clave por defecto. En este artículo voy a hablar de cuatro de ellas: initial, inherit, unset y revert.

También se les conoce como palabras clave de restablecimiento de CSS porque nos permiten restablecer el CSS como queramos. Vamos a repasarlas:

initial

Cada propiedad de CSS tiene un valor inicial. Este valor inicial no tiene relación con el tipo de elemento HTML al que se aplica.

Por ejemplo, el valor por defecto de font-weight es normal Esto lo podemos comprobar con la documentación de la MDN en el cual se nos especifica los valores iniciales de cada propiedad:

Entonces al declarar font-weight: initial, es lo mismo que declarar: font-weight: normal. Veamos otro ejemplo:



.foo{ 
   position: absolute; 
   top: 20px; 
   left: 20px;
}
.bar .foo{   
   position: initial;  /* = static */
   top: initial;       /* = auto */
   left: initial;      /* = auto */
}

🧠 Recuerda, la palabra clave initial establece el valor de una propiedad CSS al valor inicial definido, lo que en cierto modo significa que "restablece" el valor.

Curiosamente todos los elementos HTML utilizan la propiedad display con el valor inline. Recuerda que que cada propiedad en CSS tiene sólo un valor por defecto y para la propiedad display, el valor inicial es siempre inline.

Si reseteamos la propiedad display en un elemento HTML cuyo valor por defecto es block, como el elemento <div>, esto nos devolverá al valor inline. ¡Vamos a comprobarlo!



div{ 
   display: block; /* browser default styles */
}

div {
    display: initial; /* es igual a inline */
}

Ahora la pregunta que debemos hacernos es: ¿Por qué el elemento HTML <div> es un elemento de bloque o se comporta con el valor display: block?
La respuesta está en el user-agent-stylesheet (hoja de estilo) del navegador.

Cuando creamos páginas web, el navegador carga su propia hoja de estilos CSS antes de que carguemos una sola línea de CSS, esto quiere decir, que cada navegador viene con cierta cantidad de CSS por defecto que llamamos user-agent-stylesheet.

Entonces todos los elementos HTML que por defecto tienen un valor de block, esto es sólo porque el navegador decide añadirles la propiedad display con un valor de block. Si inspeccionamos el elemento <div> tiene el valor de block por esta razon:

Esto quiere decir que muchas etiquetas HTML tienen asignado estilos CSS del navegador aunque no lo hayas especificado.

Todos los elementos tienen establecido un valor de la propiedad display que puede ser inline o puede ser block gracias a la hoja de estilo del navegador.

La única razón por la que tenemos esas diferencias entre los distintos tipos de elementos HTML (block vs inline) es porque el navegador carga su propio CSS.

Para tener una idea de como es la hoja de estilo de cada navegador (Chrome, Firefox) en los recursos de este articulo dejare los enlaces para que les des un vistazo.

Sin embargo, NO todas las propiedades tienen valores iniciales definidos explícitamente. Por ejemplo, el valor inicial de la propiedad color es "depende del agente de usuario". Lo que significa es que el valor por defecto del color depende de cosas como la configuración de las preferencias del navegador:

La mayoría de los usuarios no cambia la configuración del color del texto, pero alguien podría establecerlo a un gris o incluso un rojo. Al declarar color: initial; le estás diciendo al navegador que establezca el color del elemento a cualquier color que establezca el usuario.

🌐 Los estilos del navegador

Después de aplicar los estilos iniciales de todas las propiedades CSS, el navegador carga sus estilos. Estos estilos del navegador no tienen nada que ver con los valores iniciales de las propiedades CSS.

Aquí hay un ejemplo de los estilos del agente de usuario aplicados a la etiqueta <h1>. Si inspeccionas el elemento con la DevTools podrás ver lo siguiente:

Fíjate en la propiedad font-weight aplicada al <h1>, ¿te has dado cuenta que su valor es bold? Como te mencione al principio el valor inicial por defecto de la propiedad font-weight es normal, lo que nos quiere decir que los estilos del <h1> son estilos del navegador.

Tienes que recordar y comprender que: ¡Los elementos HTML no tienen valores de estilo iniciales! Los estilos básicos de un elemento HTML, como la etiqueta <h1> por ejemplo, provienen de la hoja de estilos del agente de usuario del navegador, y no del valor inicial de las propiedades de CSS.

Para entender la palabra clave initial, tenemos que recordar un dato importante: Cada propiedad en CSS tiene un valor por defecto, que no tiene nada que ver con el valor por defecto del agente de usuario. Los estilos del agente de usuario son los estilos básicos que el navegador aplica a los elementos HTML en el navegador. Tendemos a pensar que vienen automáticamente con el HTML, pero no es así.

inherit

La palabra clave inherit (heredar) hace que el valor de una propiedad en un elemento sea el mismo que el valor de su elemento padre.

El valor inherit obliga a que la herencia se produzca incluso en situaciones en las que normalmente no funcionaría.

El proceso ocurre de la siguiente manera:

La palabra clave inherit le dice al navegador que busque el valor del elemento padre más cercano y que el elemento actual herede ese valor.
Si el padre más cercano también tiene el valor inherit, el navegador continuará subiendo por el DOM hasta encontrar algún valor.
Si no hay ningún valor, el navegador utilizará su estilo de agente de usuario, y si no hay ningún estilo de agente de usuario, utilizará el estilo base inicial o el valor inicial que ya vimos arriba.

Vamos a ver el siguiente ejemplo:



<nav class="toolbar">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>



.toolbar {
  background-color: blue;
  color: white;
}

El nav tendrá un fondo azul, pero los enlaces tendrán otro estilo acorde con la configuración de preferencias del navegador.

Puede escribir una regla que establezca explícitamente que los enlaces sean de color blancos pero puede hacer que las cosas sean un poco más robustas usando inherit. Sólo tiene que añadir la siguiente regla a la hoja de estilos:



.toolbar {
  background-color: blue;
  color: white;
}
.toolbar a{
  color: inherit;
}

Esto hará que los enlaces utilicen el valor heredado del color en lugar de los estilos por defecto del agente de usuario.

Como dije al principio podemos hacer que la herencia se produzca incluso en situaciones en las que normalmente no funcionaría, por ejemplo la propiedad padding por defecto, no se puede heredar pero podemos hacer que si se herede, seguiremos con el ejemplo anterior:



.toolbar {
  padding: 20px;
}
.toolbar a{
  padding: inherit;
}

En este caso todos los enlaces heredaran el valor de la propiedad padding del elemento padre, a pesar de que dicha propiedad no se herede por defecto.

En muchos casos, no es necesario especificar la herencia, ya que muchas propiedades se heredan de forma natural. Sin embargo, heredar puede ser muy útil.

En cualquier caso, así es como funciona la palabra clave inherit. Usarla para el font-size o el color puede ser en ocasiones una buena idea. En otros contextos - raramente.

Y toma en cuenta la diferencia entre propiedades heredables y no heredables. Será importante más adelante.

unset

La palabra clave unset actúa como un sustituto universal tanto de inherit como de initial.

El valor unset restablecerá automáticamente el valor de una propiedad según el tipo de propiedad.

Recordemos que en CSS, hay dos tipos de propiedades:

Propiedades heredadas: Si la propiedad es heredada, entonces unset tiene el mismo efecto que si se usara inherit.
Propiedades no heredadas: Si la propiedad no se hereda, entonces unset tiene el mismo efecto que si se usara initial.
El valor unset funcionará igual que el valor inicial initial, es decir, aplicará el valor por defecto de CSS.

Por ejemplo, position: unset será igual a position: initial porque es una propiedad no heredada.
Pero cuando usamos el valor unset en la propiedad font-size, por ejemplo, font-size: unset, será igual a font-size: inherit porque font-size es una propiedad heredada.



.element * { 
    /* inherit properties */
    font-size: unset; 
    font-weight: unset;
/* non-inherited properties */
    border-width: unset; 
    background-color: unset;
}

/* work the same way as */

.element * { 
    /* inherit properties */
    font-size: inherit; 
    font-weight: inherit;
/* non-inherited properties */
    border-width: initial; 
    background-color: initial;
}

Veamos otro ejemplo:



.some-class{ 
   color: unset; /* will be equal to 'inherit' value */ 
   display: unset; /* will be equal to 'initial' value*/
}

🤔 ¿Por qué utilizar unset si funciona exactamente igual que Inherit e Initial?

Si unset actúa como initial y inherit, ¿por qué querríamos usar unset?

Si sólo estamos restableciendo una propiedad, entonces unset es innecesario: podemos usar los valores inherit o initial en su lugar.

Pero hoy en día tenemos una nueva propiedad llamada all que trae consigo una nueva capacidad: ¡restablecer todas las propiedades heredadas y las no heredadas a la vez!
De esta nueva manera, no es necesario restablecer las propiedades una por una. Así, aplicando el valor "unset" a la propiedad "all" se restablecerán todas las propiedades heredadas a "inherit" y todas las no heredadas a "initial".

¡Esta es la única razón de la existencia del nuevo valor de la palabra clave unset! De lo contrario, podríamos utilizar los valores inherit e initial en su lugar.

En lugar de restablecer las propiedades una por una, por ejemplo:



/* Bad */
.common-content *{ 
    font-size: inherit; 
    font-weight: inherit;
    border-width: initial; 
    background-color: initial;
}

Podemos utilizar la nueva propiedad all con el valor unset, que afectará a todas las propiedades existentes, por ejemplo:



/* Good */
.common-content *{ 
    all: unset;
}

revert

Pero, ¿Qué pasa si queremos restablecer los estilos de la propiedad a su estilo original del agente de usuario y no al estilo base de la propiedad? Por ejemplo, ¿revertir la propiedad display de un elemento <div> a block (su estilo de agente de usuario) y no inline (su estilo base CSS)?

Para ello, pronto tendremos una nueva palabra clave CSS: revert. La palabra clave revert es muy similar a unset, con la única diferencia de que prefiere los estilos del agente de usuario al estilo básico de la propiedad CSS.

Ya hemos hablado de los estilos base de CSS y de los estilos de agente de usuario del navegador. Los estilos base de CSS son los valores por defecto de las propiedades de CSS. Son los valores naturales por defecto que vienen con las propiedades.
Los estilos del agente de usuario del navegador son los valores establecidos por el navegador. Cuando se carga una página, el navegador tiene sus estilos para algunas propiedades CSS.

Por ejemplo, la propiedad display (que ya te explique anteriormente cuando mencione el valor initial), tiene un valor base CSS, que es inline. Este es su valor natural del motor CSS. Ahora, el navegador cambia el estilo de la propiedad display a block.

El estilo del navegador no es más que añadir sus propios archivos css. La palabra clave revert, invierte los valores por defecto de CSS a los estilos del agente de usuario del navegador.

La palabra clave revert nos permite volver al estilo por defecto del navegador, el "User-Agent-Stylesheet". Por ejemplo:



 div{
    display: revert; /* = block */ 
 }
 h1{ 
    font-weight: revert; /* = bold */ 
    font-size: revert; /* = 2em */
 }

De esta manera, si queremos restablecer todos los estilos de una etiqueta HTML al estilo base del navegador, podemos hacerlo así:



 /* Good */

 .element *{ 
    all: revert;
}

El nuevo reset del futuro

El experto en HTML y CSS Elad Shechter nos comparte en su cuenta de Twitter “The CSS Reset of the Future”. En el cual nos muestra una nueva forma de crear un reset, utilizando la propiedad all y los valores unset y revert.

// Detect dark theme var iframe = document.getElementById('tweet-1413106994454614018-648'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1413106994454614018&theme=dark" }

Quizás estarás pensando que utilizar un reset es una mala practica en estos días y esto sucede porque lo confundes con Normalize y el reset de 2007 de Eric Meyer que se utilizaba años antes. Pero tienes que conocer las diferencias entre un reset CSS y normalize. En los recursos de este post te dejare un articulo de Elad Shechter para que conozcas las diferencias.

🔎Recursos:

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok

La Herencia en CSS

Lupita Code 🌄 — Sat, 24 Jul 2021 00:13:36 +0000

¡Hola gente bonita!👋

Hay una última manera en la que un elemento puede recibir estilos: la herencia. La cascada se confunde frecuentemente con el concepto de herencia. Aunque los dos temas están relacionados, debes entender cada uno por separado. Si quieres conocer sobre la cascada te invito a leer mi articulo de este tema:

La Cascada en CSS: Qué es y cómo funciona

Lupita Code 🌄 ・ Jun 22 '21

#css #html #codenewbie #spanish

👨‍👦 ¿Qué es la herencia?

Vamos a comenzar por una analogía que me gusta usar mucho.

Muchas veces los niños y niñas heredan rasgos de sus padres: el color de los ojos, el color del cabello, la estatura, etc. A veces heredamos rasgos de antepasados más lejanos, como abuelos o bisabuelos. La metáfora de las relaciones familiares también forma parte de la estructura del HTML. Y al igual que las personas, las etiquetas HTML pueden heredar propiedades CSS de sus antepasados.

Los descendientes (piense en hijos y nietos) heredan propiedades de los ancestros (piense en padres y abuelos).

La herencia es el proceso por el cual algunas propiedades CSS aplicadas a una etiqueta se pasan a las etiquetas anidadas, es decir, los elementos HTML heredan los estilos de sus padres o ancestros.

Si un elemento no tiene un valor en cascada para una determinada propiedad, puede heredar uno de un elemento antecesor. Es común aplicar la propiedad font-family al elemento <body>. Todas las etiquetas descendientes de la etiqueta <body>, es decir, las que están dentro de la etiqueta <body> heredarán esta fuente y no es necesario aplicarla explícitamente a cada elemento de la página.

NOTA: Cualquier etiqueta dentro de otra etiqueta es descendiente de esa etiqueta. por ejemplo, una etiqueta <p> dentro de la etiqueta <body> es descendiente de <body>, mientras que la etiqueta <body> es un ancestro de la etiqueta <p>.

La herencia también funciona a través de múltiples generaciones. Si una etiqueta como <em> o <strong> aparece dentro de una etiqueta <p>, entonces las etiquetas <em> y <strong> también
heredan las propiedades de cualquier estilo aplicado a la etiqueta <body>.

La siguiente imagen muestra cómo la herencia fluye hacia abajo en el árbol del DOM. Las propiedades heredadas se transfieren por el árbol DOM desde los nodos padres a sus descendientes.

Como puedes notar en la estructura del árbol cada elemento solo tiene un padre directo.

Propiedades heredadas y propiedades no heredadas

Hay algunas propiedades en CSS que se heredan y otras que no. Esta diferencia crea dos tipos de grupos de propiedades CSS:

Propiedades heredadas (Inherited properties)
Propiedades no heredadas (Non-inherited properties)

Para saber cuales son las propiedades heredadas y no heredadas puede consultar la documentación de la MDN, en cada propiedad se le proporciona una tabla donde se le explica si es heredada o no, por ejemplo:

Propiedades heredadas

Las propiedades heredadas son las que pertenecen principalmente al texto:

color, font, font-family, font-size, font-weight,
font-variant, font-style, line-height,
letter-spacing, text-align, text-indent,
text-transform,white-space, y word-spacing.

También se heredan algunas otras, como las propiedades de la lista:

list-style, list-style-type,
list-style-position, y list-style-image.

Las propiedades del borde de la tabla, border-collapse y border-spacing, también se heredan. Tenga en cuenta que éstas controlan el comportamiento de los bordes de las tablas, NO las propiedades para especificar los bordes de los elementos que no son tablas. No queremos que un <div> pasara su borde a todos los elementos descendientes ¿Verdad?.

Propiedades no heredadas

La herencia no siempre se aplica, y eso NO es necesariamente algo malo. Para algunas propiedades, la herencia tendría un efecto negativo en la apariencia de una página. Los márgenes, el padding y los bordes (entre otras propiedades) no son heredados por las etiquetas y no es deseable que lo hagan. ¿Por que?

Mira el siguiente ejemplo:

 <p> Lorem ipsum <em> dolor </em> sit amet. </p>

p {
 padding-left: 20px;
 border-left: solid red;
}

Observa que la etiqueta <p> tienen un borde a la izquierda. Sin embargo, la etiqueta <em> dentro de <p> no tienen ningún borde adicional. Este comportamiento tiene sentido: se vería raro o extraño si hubiera un borde adicional y 20px de espacio a la izquierda de cada etiqueta <em> dentro de un párrafo. Por este motivo es que la propiedad border no se hereda.

🤔 ¿Por que es importante la herencia?

Aunque esto pueda parecer confuso, la herencia es un gran ahorro de tiempo. Imagina que no se pasan las propiedades CSS a las etiquetas anidadas y que tienes un párrafo <p> que contiene otras etiquetas como una etiqueta <strong>, una etiqueta <em> para enfatizar el texto y una etiqueta <a> para añadir un enlace.

Si creas un estilo que haga que el texto del párrafo sea blanco y de 32px, sería raro y extraño que todo el texto dentro de las etiquetas <em>, <strong> y <a> tuvieran su estilo normal, tal y como se muestra en la siguiente imagen de muestra:

En ese caso, tendrías que crear otro estilo para dar formato a la etiqueta <em>, <strong> y <a> para que coincida con la apariencia de la etiqueta <p>. Qué tedioso. ¡Por eso esta la herencia y por eso es importante!

La palabra clave `inherit`

CSS tiene "Global Keywords" o palabras clave por defecto, pero en este articulo solo hablare de la palabra clave inherit (heredar) porque tiene relación con la herencia.

La palabra clave inherit hace que el valor de una propiedad en un elemento sea el mismo que el valor de su elemento padre. En otras palabras, inherit obliga a que la herencia se produzca incluso en situaciones en las que normalmente no funcionaría.

El proceso ocurre de la siguiente manera:

La palabra clave inherit le dice al navegador que busque el valor del elemento padre más cercano y que el elemento actual herede ese valor.
Si el padre más cercano también tiene el valor inherit, el navegador continuará subiendo por el DOM hasta encontrar algún valor.
Si no hay ningún valor, el navegador utilizará su estilo de agente de usuario, y si no hay ningún estilo de agente de usuario, utilizará el estilo base inicial o el valor inicial.

Vamos a ver el siguiente ejemplo:

<nav class="toolbar">
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

.toolbar {
  background-color: blue;
  color: white;
}

El nav tendrá un fondo azul, pero los enlaces tendrán otro estilo acorde con la configuración de preferencias del navegador.

Puede escribir una regla que establezca explícitamente que los enlaces sean de color blanco pero puede hacer que las cosas sean un poco más robustas usando inherit. Sólo tiene que añadir la siguiente regla a la hoja de estilos:

.toolbar {
  background-color: blue;
  color: white;
}
.toolbar a{
  color: inherit;
}

Esto hará que los enlaces utilicen el valor heredado del color en lugar de los estilos por defecto del agente de usuario.

.toolbar {
  padding: 20px;
}
.toolbar a{
  padding: inherit;
}

En este ejemplo todos los enlaces heredaran el valor de la propiedad padding del elemento padre, a pesar de que dicha propiedad no se herede por defecto.

En muchos casos, no es necesario especificar la herencia, ya que muchas propiedades se heredan de forma natural. Sin embargo, heredar puede ser muy útil.

Heredar las fuentes para los controles de formularios: `font: inherit;`

Es probable que en varios resets de CSS encuentres la siguiente regla de estilo:


/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font: inherit;
}

Por defecto, los botones y los input no heredan los estilos tipográficos de sus padres. En su lugar, tienen sus propios estilos.

Por ejemplo, <textarea> utilizará la fuente monospace predeterminada del sistema. Los input utilizarán la fuente sans serif predeterminada del sistema. Y ambos elegirán un tamaño de fuente muy pequeño (13,333px en Chrome).

Como podrás imaginar, es muy difícil leer un texto de 13px en un dispositivo móvil. Cuando enfoquemos un input con un tamaño de fuente pequeño, el navegador hará zoom automáticamente para que el texto sea más fácil de leer. Por lo que no es una buena experiencia de usuario.

font es un shorthand poco utilizado que engloba varias propiedades relacionadas con la fuente, como font-family, font-size, font-stretch, font-style, font-variant, font-weight y line-height. Al establecer la propiedad font como inherit, ordenamos a estos elementos que coincidan con la tipografía de su entorno.

font: inherit afectará sobre todo a los elementos <textarea>, pero no hay nada malo en aplicarlo también a los otros elementos de formulario porque ahorra algo de CSS más adelante en un proyecto.

📚 Libros de CSS consultados para este tema:

CSS in Depth
CSS The Missing Manual
CSS The Definitive Guide

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔲Codepen
✍️Medium
🎵Tik Tok
🔵Facebook

Especificidad en CSS: Qué es y cómo funciona

Lupita Code 🌄 — Wed, 21 Jul 2021 00:06:37 +0000

¡Hola gente bonita!👋

En este articulo voy a explicar a detalle la especificidad, una parte clave de la cascada. La especificidad es una de las cuatro etapas distintas de la cascada, que se trató en mi articulo anterior.

Para entender por qué tus estilos CSS no se están aplicando a un elemento, primero debes tener una comprensión básica de la Especificidad en CSS.

Es muy fácil poner el valor !important a tus estilos CSS, pero esto hace que tu CSS se descontrole rápidamente.

Entendiendo cómo se aplican los estilos, puedes asegurarte de que los estilos que quieres que se apliquen se muestren.

Es más fácil cambiar rápidamente un estilo cuando se sabe exactamente qué selector da estilo a ese elemento específico. Además, probablemente te encontrarás escribiendo menos código CSS en general, lo que ayudará a su mantenimiento.

¿Qué es la especificidad?

La especificidad en CSS es un grupo de reglas aplicadas a los selectores CSS para determinar qué estilo se aplica a un elemento. Cuanto más específico sea un selector, mayor será su valor en puntos y más probable será que esté presente en el estilo del elemento.

La documentación oficial de la MDN describe la especificidad de la siguiente manera:

La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados

Esto significa que la especificidad de CSS es un conjunto de reglas usadas por los navegadores para determinar cuál de los estilos definidos por el desarrollador se aplicará a un elemento específico. Para que un estilo se aplique a un elemento en particular, el desarrollador tiene que cumplir con las reglas, de modo que el navegador sepa cómo aplicar el estilo.

El navegador evalúa la especificidad en dos partes:

Los estilos aplicados en línea en el HTML (Inline Styles).
Los estilos aplicados mediante un selector (Especificidad del selector).

Jerarquía de la especificidad

Piense en la especificidad como un score/rank que determina qué declaraciones de estilo se aplican finalmente a un elemento.

La especificidad utiliza un sistema de ponderación o puntuación.

Cada tipo de selector recibe puntos que indican su especificidad, y se suman los puntos de todos los selectores que hayas utilizado. para calcular la especificidad total del selector.

Cada selector tiene su lugar en la jerarquía de especificidad. Hay cuatro categorías que definen el nivel de especificidad de un selector.

Puntuación de cada tipo de selector

Antes de comenzar, debes conocer primero cuales son los tipos de selectores en CSS, estos se dividen en varias categorías. Un ejemplo son las pseudoclases que vas a poder encontrar muchas de ellas, sin embargo, te recomiendo que solo aprendas las mas importantes.

// Detect dark theme var iframe = document.getElementById('tweet-1357079798137425920-242'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1357079798137425920&theme=dark" }

La cantidad de especificidad de un selector se mide usando cuatro valores diferentes separados por coma que tienen diferente peso y pueden describirse como millares, centenas, decenas y unidades (cuatro dígitos individuales dispuestos en cuatro columnas):

*Selector Universal

El selector con menor peso ( y menos valor ) es el selector universal, que en CSS se define de la siguiente forma:



* {
  box-sizing: border-box;
}

Este selector comúnmente se utiliza para aplicar la propiedad box-sizing: border-box a todos los elementos. Si quieres saber más sobre esta propiedad, te invito a leer mi articulo completo⤵️

¿Qué es el Box Sizing en CSS? 🤔

Lupita Code 🌄 ・ Apr 19 '21

#css #spanish

Este selector en CSS tiene un valor de 0-0-0-0, eso quiere decir que cualquier otro selector cuyo valor sea 1-0-0-0, 0-1-0-0 o incluso 0-0-0-1 tendrá mayor peso que el y lo reescribirá. Esto lo podemos comprobar con el siguiente ejemplo:



<p>Lupita Code</p>



* {
  font-size: 1rem;
}

p {
font-size: 3rem;
}

¿Qué tamaño de fuente se va aplicar al elemento <p>?

El selector universal * tiene un peso de 0-0-0-0 mientras que el selector con un elemento HTML ( en este caso un <p> ) tiene un peso de 0-0-0-1, al ser un valor mayor que el anterior, su peso es mayor y CSS entiende que su especificidad también es mayor y gana sobre el anterior selector a pesar de estar declarado en primer lugar en la hoja de estilos.

</> Elementos y ::pseudoelementos

Los selectores de tipo o de etiqueta: <p>, <div>,<main> etc.
Tiene un valor de 0-0-0-1



<header>
  <h1><span>Welcome</span> to my youtube channel</h1>
</header>



header h1 span {
    text-transform: lowercase;
}
span {
  text-transform:uppercase;
}

El elemento <span> solamente tiene un peso de 0-0-0-1 pero también tenemos en la primera regla 3 etiquetas HTML que tienen un peso total de 0-0-0-3, ¿Por que 3? 🤔 la respuesta es que el 3 es la cantidad de elementos HTML declarados, por lo que todo el texto estará en minúsculas a pesar de que el <span> tenga mayúscula.

Por lo tanto si agregas 5 Selectores de elementos anidados, el peso será de 0-0-0-5.
Recuerda que mayor peso en la especificidad será el ganador 🏆.

Lo mismo pasa con los pseudo-elementos tienen un valor de 0-0-0-1. Los pseudo-elementos más usados son ::after y ::before.

.clases, atributos[...] y :pseudoclases

El selector de clase tiene mayor peso (o especificidad) que los selectores de tipo o elementos HTML y que el selector universal, seguiremos con el ejemplo anterior pero ahora con una clase llamada title en la etiqueta <span>:



<header>
  <h1><span class="title">Welcome</span> to my youtube channel</h1>
</header>



header h1 span {
    text-transform: lowercase;
}
.title {
  text-transform:uppercase;
}

Ahora el texto del elemento <span> si estará en mayúscula y todo lo demás estará en minúscula, esto sucede porque las clases tienen un peso de 0-0-1-0 mientras que el selector de 3 elementos será de 0-0-0-3.

Existen otros selectores que tienen el mismo peso de 0-0-1-0 que son los selectores de atributo y las pseudo-clases. Existen muchas pseudo-clases un ejemplo son las pseudo-clases child, si no la conoces te comparto un cheatsheet que publique en mi Twitter:

// Detect dark theme var iframe = document.getElementById('tweet-1324147665714774016-952'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1324147665714774016&theme=dark" }

Selector de id

Este es de los selectores más específicos en este caso el ID tendrá un peso de 0-1-0-0.

Esto significa que un selector de ID tiene una mayor especificidad que un selector de clase. De hecho, un único ID tiene una mayor
especificidad que un selector con cualquier número de clases. Del mismo modo, un selector de clases tiene una mayor especificidad
que un selector de etiquetas (también llamado selector de tipos).



<header id="header" class="header"> Lupita Code </header>



#header {
  background-color: rebeccapurple;

.header {
   background-color: khaki;
}

El valor que se va aplicar al elemento <header> es el color rebeccapurple ya que el id tiene un valor de 0-1-0-0, mientras que la clase tiene un valor de 0-0-1-0.

Estilos en línea

Los estilos inline añadidos a un elemento HTML siempre sobrescriben a cualquier estilo escrito en hojas de estilo externas o una etiqueta <style>, por lo que se puede decir que tienen la mayor especificidad. Los estilos en línea no tienen selector porque se aplican directamente al elemento al que se dirigen.



<li>
  <a href="/specials" class="featured" 
style="background-color: orange;"> 
     Specials
 </a>
</li>

Los estilos en línea tienen un valor de 1-0-0-0.

Para anular los estilos inline, tendrás que añadir un !important a la declaración de la hoja de estilos externa. Si los estilos en línea están marcados como !important, entonces nada puede anularlos.

Es preferible que todos tus estilos estén en una hoja de estilos externa. Utilizar !important es solo para casos desesperados y NO se recomienda usarlo ya que si comienzas a agregar !important en varios lugares de tus hojas de estilos te será más complicado debuggear o reescribir algún elemento. Aunque existen ciertos casos especiales en los que si puedes usarlo pero si eres principiante recomiendo NO utilizar !important a menos que sepas lo que estas haciendo.

🙄 ¿Qué tiene que ver !important con la especificidad?

En la tabla anterior que te presente al inicio de este articulo, mencione que !important gana a todos, es decir le gana a la especificidad.

!important anula todos los demás estilos, independientemente de la especificidad del selector. Esta palabra clave para el navegador es de prioridad muy alta. Aunque técnicamente !important no tiene nada que ver con especificidad, interactúa directamente con esta.

Es posible que te encuentres con situaciones al utilizar frameworks CSS, como Bootstrap, en las que no puedes utilizar la especificidad CSS para anular los estilos nativos. En estos casos, el uso de !important no se considera una mala práctica.

Excepciones

El selector universal (*), los combinadores (+, >, ~, etc ) y la pseudo-clase de negación :not() no tienen efecto sobre la especificidad. (Sin embargo, los selectores declarados dentro de :not() si lo tienen). Por ejemplo:



div.outer p {
  color:orange;
}
div:not(.outer) p {
  color: lime;
}



<div class="outer">
  <p>Esto está en el outer div.</p>
  <div class="inner">
    <p>Este texto está en el inner div.</p>
  </div>
</div>

Como puedes observar la pseudo-clase de negación :not() no es considerada una pseudo-clase para el cálculo de la especificidad. Pero los selectores colocados dentro de ella en este ejemplo la clase .outer, si cuentan en la especificidad.

Diferentes tipos de selectores, diferente especificidad

Cuando usamos diferentes tipos de selectores combinados (por ejemplo,body #content .data img:hover{}) el navegador contará el número de ids, pseudo-clases y pseudo-elementos y asignará un valor de especificidad a la regla, para compararla con las demás y decidir cuál usar. Por ejemplo:

VSCODE al rescate

Te preguntaras si tienes que hacer estos cálculos siempre para saber que tan específicos son tus selectores, por fortuna no tienes que hacer estos cálculos manualmente, gracias al editor de código vscode podemos saber la especificidad de los selectores.

Lo único que tienes que hacer es posicionar el cursor sobre tus selectores en la hoja de estilos y vscode automaticamente te da la especificidad:

Metodología BEM (Block Element Modifier)

El CSS puede convertirse rápidamente en algo desordenado cuando no nos detenemos a pensar en una arquitectura para nuestras hojas de estilo, y en su lugar colocamos una gran cantidad de selectores sin pensar en la especificidad.

Una forma de combatir el CSS desordenado, y asegurar que tus reglas de especificidad se aplican como es debido, es adoptar una metodología. BEM es una de las metodologías de CSS más utilizadas. No vamos a profundizar ahora en las metodologías o arquitecturas, pero pueden ayudarte a garantizar que tus estilos no se anulen entre sí.

Hay un montón de arquitecturas y metodologías que ayudan a lidiar con la especificidad para escribir un CSS escalable y mantenible.
Realmente no importa qué arquitectura o metodología elija tu equipo, lo importante es tener una que todos sigan para evitar problemas.

Al aprovechar al máximo la especificidad de CSS, te aseguras de que tu código esté organizado y de que tus selectores no entren en conflicto unos con otros.

Si quieres aprender sobre la metodología BEM en mi cuenta de Twitter compartí un repositorio donde podrás encontrar una colección de recursos sobre esta metodología:

// Detect dark theme var iframe = document.getElementById('tweet-1356061837050130436-609'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1356061837050130436&theme=dark" }

Conclusión

Los navegadores utilizan la especificidad para decidir que reglas CSS aplicar a los elementos.

🔎 Recursos:

📚 Libros de CSS consultados para este tema:

CSS in Depth
CSS The Missing Manual
CSS The Definitive Guide

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok

La Cascada en CSS: Qué es y cómo funciona

Lupita Code 🌄 — Tue, 22 Jun 2021 20:13:42 +0000

¡Hola gente bonita!👋

¿Alguna vez has escrito una propiedad CSS y el valor no parece funcionar? Tal vez tuviste que recurrir al uso de !important para que funcionara. O quizás hayas recurrido a escribir el CSS inline en el elemento del archivo HTML. Por lo general, el problema puede ser que has creado dos reglas que podrían aplicarse al mismo elemento.

El CSS consiste en declarar reglas: Bajo varias condiciones, queremos que ocurran ciertas cosas. Si esta clase se añade a ese elemento, aplique estos estilos. Si el elemento X es hijo del elemento Y, aplica estos estilos. El navegador toma estas reglas, calcula cuáles se aplican y dónde se van aplicar, y las utiliza para representarlas en la página web.

👉 Recuerda que el aspecto final de una página web es el resultado de reglas de estilo diferentes.

Pero, ¿Qué es una regla en la sintaxis de CSS? 🤔 Puede que no estés familiarizado con el vocabulario en CSS, pero como voy a utilizar este término a lo largo del articulo, es mejor tener claro lo que significa:

Una regla también conocida como estilo, es una colección de declaraciones dirigidas a uno o más selectores, una hoja de estilo se compone de múltiples reglas.

Si quieres aprender sobre la terminología en CSS, he publicado un post ilustrativo en mi Instagram:

El primer paso es entender cómo el navegador da importancia a sus reglas. Por ejemplo, puedes encontrarte con que una de tus reglas no hace lo que esperabas porque otra regla entra en conflicto con ella. Predecir cómo se comportan las reglas requiere comprender la cascada.

Cuando dos o más reglas se dirigen al mismo elemento, las reglas pueden proporcionar declaraciones contradictorias. En el siguiente ejemplo se muestra tres conjuntos de reglas, cada uno de los cuales especifica un estilo de fuente diferente para el título de la página. El título NO puede tener tres fuentes diferentes a la vez. Entonces, ¿Cómo sabe CSS que estilo aplicar? 🤔 o ¿Cuál tiene prioridad sobre los demás? Aquí es donde utilizamos la cascada.

<h1 class="title" id="page-title">Lupita Code</h1>

h1 {
    font-family: serif;
}

#page-title {
    font-family: sans-serif;
}

.title {
    font-family: monospace;
}

Los tres conjuntos de reglas intentan establecer una familia de fuentes diferente para este encabezado <h1>. ¿Cuál de ellas ganará? 🤔. Para determinar la respuesta, el navegador (para saber que estilos tiene prioridad sobre los demás) sigue una serie de reglas o pasos (en orden) que son: Origen de la hoja de estilo, especificidad de los selectores y orden en que se declaran los estilos. Estos conceptos lo vamos a explicar más adelante.

En este caso, las reglas dictan que la segunda declaración, que tiene un selector ID gana; el título tendrá una fuente sans-serif.

Cuando se observan ejemplos pequeños, este proceso suele ser sencillo. Pero a medida que tu hoja de estilos crece, o el número de páginas a las que les aplicas aumenta, tu código puede volverse complejo con sorprendente rapidez.

🤔 ¿Qué es la cascada?

La cascada es el algoritmo por el cual el navegador decide qué estilos CSS aplicar a un elemento - a mucha gente le gusta pensar en esto como el estilo que "gana".
Especifica cómo el navegador debe manejar múltiples estilos que se aplican a la misma etiqueta HTML y qué hacer cuando las propiedades CSS entran en conflicto. La cascada es una parte fundamental del funcionamiento del lenguaje.

Los conflictos de estilo se producen en dos casos: por herencia y cuando uno o más estilos se aplican al mismo elemento.

Cabe mencionar que las iniciales de CSS significan Cascading Style Sheets (Hojas de Estilo en Cascada), y es muy importante entender la palabra cascada ya que como podrás darte cuenta forma parte del propio nombre.

En cascada se refiere a la forma en que CSS aplica un estilo encima de otro.
Las hojas de estilo controlan la apariencia de los documentos web.

Podemos decir entonces que la cascada es el algoritmo para resolver conflictos cuando se aplican varias reglas CSS a un elemento HTML. La forma en que se comporta la cascada es la clave para comprender el CSS.

La cascada puede ser una herramienta poderosa, pero su uso incorrecto puede conducir a hojas de estilo frágiles que dan pesadillas a los desarrolladores/as de front-end cada vez que tienen que hacer un cambio. Mientras nos sumergimos en la cascada, veremos algunas formas de evitar que la cascada se nos vaya de las manos.

🔼 Las 4 etapas de la cascada

Entender el algoritmo de cascada ayuda a comprender cómo el navegador resuelve conflictos de estilos.
Cuando las declaraciones entran en conflicto, la cascada considera cuatro cosas para resolver la diferencia:

➊ Posición y orden de aparición: El orden en que aparecen tus reglas CSS en la hoja de estilos.
➋ Especificidad de los selectores: Qué selectores tienen prioridad sobre otros.
➌ Origen de la hoja de estilo: El orden de aparición del CSS y su procedencia, ya sea un estilo del navegador, el CSS de una extensión del navegador o el CSS de tu autoría.
➍ Importancia: Algunas reglas CSS tienen más peso que otras, especialmente con el tipo de regla !important.

Las reglas de la cascada se consideran en este orden. Aunque hay varios autores de diversos libros de CSS que solo consideran tres etapas de manera general:

Origen de la hoja de estilo.
Especificidad de los selectores.
Orden en que se declaran los estilos en la hoja de estilos.

El siguiente diagrama de flujo muestra cómo son aplicadas estas reglas.

Estas reglas permiten que los navegadores se comporten de forma predecible al resolver cualquier ambigüedad en el CSS. Vamos a repasarlas una por una.

🔢 Posición y orden de aparición:

El orden en el que aparecen tus reglas CSS y cómo aparecen es tomado en consideración por la cascada mientras ésta calcula la resolución de conflictos.

Ejemplo 1 - Orden de las reglas

button {
  color: red;
}

button {
  color: blue;
}

En este ejemplo hay dos reglas que tienen selectores de idéntica especificidad, por lo que gana la última en ser declarada, es decir, aquí prevalece siempre la última regla definida, la cuál sobreescribe las propiedades anteriores.

Ahora te propongo un reto, dada las siguientes clases, ¿De qué color serían estos divs?

.red {
color: red;
}

.blue {
color: blue;
}
-------
<div class=”red blue”> Lupita Code </div>
<div class=”blue red”> Lupita Code </div>

Si has contestado "ambos divs tienen color blue", felicidades, es la opción correcta. Pero no te sientas mal si no has acertado...

El verdadero truco de la pregunta es que los navegadores no miran el orden en que se declaran las clases en el HTML, sino en el CSS.

👉 Recuerda que cuando dos selectores tienen la misma especificidad, gana la declaración que aparece en último lugar.

Sin embargo hay algunos casos que no esta muy claro que estilo debería sobreescribir a los anteriores, ahí es cuando aplicamos el concepto de cascada, que es la que se encarga de determinar el que tiene mayor prioridad.

Ejemplo 2 - Orden de las hojas de estilo

Hay cuatro formas de incluir CSS en un documento HTML que van de mayor a menor prioridad:

En línea dentro de la etiqueta HTML usando el atributo style;: El CSS en línea es el que tiene mayor precedencia, por lo que siempre será el que tenga prioridad sobre otras reglas CSS, lo que puede ganarle a este estilo en línea es el !important.
En el <head> a través de la la etiqueta <style>: el CSS incrustado/interno será el siguiente a tener en cuenta en orden de prioridad.
Asociando una hoja de estilo externa a nuestro documento HTML usando la etiqueta <link> añadida en el <head>: CSS externos son la tercera opción de prioridad al momento de tomar en cuenta las reglas CSS.
En el <head> usando @import dentro de la etiqueta <style>, ejemplo: <style> @import url('style.css') </style> (poco usable).

Nota: A pesar de que hay muchas maneras de incluir CSS en nuestro documento HTML, la forma más usada es asociar una hoja de estilo externa.

Como puedes notar los estilos pueden venir de varias partes en una página HTML. Si tienes un <link> que incluye CSS en la parte superior de tu página HTML, y luego otro <link> que incluye CSS en la parte inferior de tu página: el <link> inferior tendrá la mayor especificidad. Lo mismo ocurre con los elementos <style> incrustados. Se vuelven más específicos cuanto más abajo en la página estén.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <button>I am a button</button>
    <style>
      button {
        background: pink;
      }
    </style>
  </body>
</html>

/*styles.css*/

button {
  background: yellow;
}

La etiqueta <style> incrustada está más abajo en la página que la etiqueta <link>, así que aunque la especificidad del botón es la misma, la posición de la regla de estilo la hace ganar. Por lo tanto, El botón tendrá un background de color rosa pink.

Dado que CSS tiene en cuenta el orden de las hojas en la cascada, el orden en el que se cargan las hojas de estilo es realmente importante.

Si tienes dos hojas de estilo enlazadas en el <head> de tu documento HTML, la segunda hoja de estilo anulará las reglas de la primera. Esta es también la razón por la que si estás usando un reset de CSS o un framework, querrás cargarlo antes de tus estilos personalizados.

Ejemplo 3 - La posición de las declaraciones

La posición también se aplica en el orden de su regla CSS. En el siguiente ejemplo, el elemento tendrá un fondo púrpura porque background: purple fue declarado en último lugar. Debido a que el background: green fue declarado antes que el background: purple, ahora es ignorado por el navegador.

.my-element {
  background: green;
  background: purple;
}

Poder especificar dos valores para la misma propiedad puede ser una forma sencilla de crear fallbacks para los navegadores que no soportan un valor concreto.

En el siguiente ejemplo, la propiedad font-size se declara dos veces. Si la función clamp() está soportado en el navegador, entonces la declaración anterior de font-size será descartada. Si clamp() no está soportado por el navegador, la declaración inicial será respetada, y el tamaño de la fuente será 1.5rem.

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, calc(1rem + 3vw), 2rem);
}

📝 NOTA: Este enfoque de declarar la misma propiedad dos veces funciona porque los navegadores ignoran los valores que no entienden. A diferencia de los lenguajes de programación, CSS no lanzará un error o romperá su programa cuando detecte una línea que no puede analizar - el valor que no puede analizar es inválido y por lo tanto es ignorado. El navegador continúa entonces procesando el resto del CSS sin romper lo que ya entiende.

📑 Especificidad de los selectores

El segundo peso en la cascada es la especificidad del selector. En este nivel, el navegador se fija en los selectores utilizados en las reglas CSS.

La especificidad utiliza un sistema de ponderación o puntuación para determinar qué selector es el más específico, es decir, se asigna prioridad a los distintos tipos de selectores CSS. Al evaluar la especificidad, se tiene en cuenta el número de selectores y su prioridad.
Los diferentes tipos de selectores CSS tienen diferente peso. En orden de mayor a menor prioridad:

Inline styles.
ID selectors (#something).
Classes (.something) / pseudo-selectors (:hover).
Type selectors (<h1>) & pseudo-elements (::before).

Los combinadores (+, > y ~), el selector universal (*) y la pseudoclase :not() no tienen ningún efecto sobre la especificidad.

En el siguiente ejemplo, la clase title del elemento <h1> hará que esa regla sea más específica y por lo tanto se considera más importante para ser aplicada. Esto significa que el <h1> tendrá el color red.

<h1 class="title">Heading</h1>

.title {
  color: red;
}

h1 {
  color: blue;
}

A pesar de que el selector <h1> se encuentra más abajo, podrías pensar que va a sobrescribir a los estilos de la clase, pero no es así, ya que la especificidad considera más importante la clase.

Como podrás comprobar en mi siguiente artículo, cada tipo de selector recibe puntos que indican su especificidad, y se suman los puntos de todos los selectores que hayas utilizado. Esto significa que si tienes una lista de selectores como: a.my-class.another-class[href]:hover obtienes algo bastante difícil de sobrescribir con otro CSS.

Por esta razón, y para ayudar a que tu CSS sea más reutilizable, es una buena idea mantener tus selectores tan simples como sea posible.

🔎 Origen de la hoja de estilo

El CSS que escribes no es el único CSS que se aplica a una página web. La cascada tiene en cuenta el origen del CSS, es decir de donde provienen los estilos. Este origen incluye la hoja de estilos interna del navegador, los estilos añadidos por las extensiones del navegador o el sistema operativo, y el CSS de tu autoría (CSS de autor).

Los estilos del agente de usuario (los estilos por defecto del navegador) tienen menor prioridad, por lo que tus estilos los anulan.

El orden de especificidad de estos orígenes, de menos específico a más específico, es el siguiente

1. Estilos base del agente de usuario: Son los estilos que su navegador aplica a los elementos HTML por defecto.

Los estilos del agente de usuario varían ligeramente de un navegador a otro, pero en general hacen las mismas cosas: a los títulos (<h1> a <h6>) y a los párrafos (<p>) se les da un margen superior e inferior, a las listas (<ol> y <ul>) se les da un padding a la izquierda, y se establecen los colores de los enlaces y los tamaños de letra por defecto.

Si has trabajado con CSS durante mucho tiempo, probablemente estés acostumbrado a anular los estilos del agente de usuario. Cuando lo haces, utilizas la parte de origen de la cascada. Tus estilos siempre anularán los estilos del agente de usuario porque los orígenes son diferentes.

Para evitar inconsistencias entre navegadores se suele utilizar algunas hojas de estilo llamadas "reset" una muy popular se llama Normalize aunque también puedes hacer tu propio "reset". Estos estilos establecen una base para las propiedades que se tratan de forma diferente en los distintos navegadores.

2. Estilos propios del usuario: Pueden venir del sistema operativo, como un tamaño de fuente estándar, o una preferencia. También pueden venir de las extensiones del navegador, como una extensión del navegador que permite al usuario escribir su propio CSS personalizado para una página web.

Un ejemplo, es la maravillosa extensión para Chrome llamada VisBug que permite editar visualmente elementos de cualquier página web, como cambiar los colores, el texto etc.

3. CSS de autor: La hoja de estilos creada por el autor de la página, es decir, El CSS que escribe el desarrollador o desarrolladora.

4. CSS de autor con !important: Cualquier !important que el desarrollador añada a sus declaraciones.

5. Estilos propios del usuario con !important: Cualquier !important que venga del sistema operativo, o del CSS de la extensión del navegador.

6. Estilos base del agente de usuario con !important: Cualquier !important que esté definido en el CSS por defecto del navegador.

Nota: En caso de que la misma propiedad del CSS de usuario y la propiedad del CSS de autor tuvieran !important, tendra prioridad la del CSS de usuario sobre la del CSS de autor.

En la siguiente imagen compartida por el sitio Learn CSS se muestran este orden que va de menor a mayor importancia:

Hay otros autores de diversos libros de CSS que solo consideran de manera general tres fuentes responsables de los estilos que ves en una página web y que forman la cascada, las cuales ya vimos anteriormente:

La hoja de estilos creada por el autor de la página.
Los estilos por defecto del propio navegador.
Los estilos especificados por el usuario.

Considere las siguientes reglas de estilo que estan en distintas hojas de estilo:

<h1>Lorem ipsum</h1>

Estilos del navegador:

h1 { margin-block-start: 0.83em; }

Bootstrap:

h1 { margin-block-start: 20px; }

Hoja de estilos del autor:

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {
  h1 { margin-block-start: 1ch; }
}

Estilo personalizado del usuario:

h1 { margin-block-start: 2rem !important; }

El margen final que tendrá el <h1> es de 2rem esto es porque el estilo personalizado del usuario es más especifico ya que contiene la declaración !important y va a anular cualquier otro estilo.

El concepto de origen de estilo entrará en juego cuando lleguemos a las transiciones y a las animaciones porque introducen más orígenes en esta lista.

☝️ Importancia

No todas las reglas CSS se calculan de la misma manera ni se les da la misma especificidad.

El orden de importancia, de menor a mayor, es el siguiente:

Tipo de regla común, que tiene las propiedades font-size, background o color.
La regla que contiene la propiedad animation.
La regla que contiene !important (siguiendo el mismo orden que el origen de la hoja de estilos).
La regla que contiene la propiedad transition.

El tipo de regla que tiene las propiedades de animation y transition tienen mayor importancia que las reglas comunes.

En el caso de las transiciones, la importancia es mayor que la regla que tiene la palabra clave !important. Esto se debe a que cuando una animación o transición se activa, su comportamiento esperado es cambiar el estado visual.

2 Reglas de Oro

Hay dos reglas generales para trabajar con la cascada que pueden ser útiles:

No uses IDs en tu selector. Incluso un ID aumenta mucho la especificidad, esto lo vamos a tratar con más detalle en el siguiente articulo.
Evita el uso de !important. Esto es aún más difícil de anular que un ID. Es útil saber que es lo que hace !important. Sin embargo, te recomiendo que no lo utilices.

En los últimos años han surgido una serie de metodologías de CSS para ayudar a controlar la especificidad del selector, una de las más populares es la metodología BEM.

📋 Conclusión:

☑️ Los navegadores utilizan un algoritmo conocido como Cascada (la C de CSS) para decidir qué reglas se aplican a cada elemento cuando encuentran declaraciones conflictivas (es decir, más de una regla que asigna valores diferentes a la propiedad de un elemento).

☑️ La cascada significa que los estilos que vienen después sobrescriben a los que estaban antes, es común que la especificidad rompa la cascada.

☑️ La cascada puede se usada para resolver conflictos cuando se aplican varios estilos a un elemento. Este es uno de sus principales objetivos, la resolución de conflictos.

☑️ La cascada, la especificidad y la herencia controlan qué estilo CSS se aplica a un elemento.

🔎 Recursos

📚 Libros de CSS consultados para este tema:

CSS in Depth
CSS The Missing Manual
CSS The Definitive Guide

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok

Entendiendo el Colapso de Márgenes (Margin Collapsing) 😓

Lupita Code 🌄 — Tue, 15 Jun 2021 21:51:23 +0000

¡Hola gente bonita!👋

Hay una situación en la que el margen entre un elemento y el de un elemento vecino se fusionarán (o colapsarán) en un espacio unificado. Los márgenes colapsables pueden ser una molestia si no se entiende bien cuándo se producen. El primer paso para tratar con ellos o evitarlos es entender exactamente con qué caso de márgenes colapsables estamos tratando.

Antes de entender como funciona el colapso de márgenes quiero asegurarme de que todos entendemos cual es el margen en nuestro modelo de caja (box-model).

📦 Modelo de caja - Margin

El margen es un espacio vacío que podemos usar para crear espacio entre una caja y otra en nuestro diseño.

Si quieres conocer a detalle sobre el modelo de caja, escribi un articulo completo sobre este tema.

📄 user-agent stylesheet

Los navegadores vienen con una sorprendente cantidad de CSS por defecto, que llamamos user-agent stylesheets (hojas de estilo del agente de usuario). Estos estilos son la razón por la que, sin ningún tipo de CSS por nuestra parte, un <h1> es más grande que un <h2>, y por la que el <body> tiene un margen que muchas veces hay que eliminar.

Estos estilos son importantes, pero también conducen a uno de los mayores problemas que los desarrolladores se encuentra con los márgenes. Los márgenes no son por defecto 0 en todos los elementos HTML, y esto puede causar todo tipo de problemas extraños que exploraremos en breve.

Las listas, los párrafos y los encabezados tienen márgenes (entre otros elementos). Aunque a veces sólo son un pequeño inconveniente, el margen por defecto de los párrafos y los encabezados parece ser el que causa más problemas desde el principio.

Por defecto, los márgenes izquierdo y derecho de un elemento de texto se establecen en 0, pero la mayoria de los elementos vienen con un margen superior (margin-top) y un margen inferior (margin-bottom).

Esto significa que existe un espacio extra entre los elementos de nuestra página aunque no hayamos establecido explícitamente un margen.

↕️ ¿Qué es un margen colapsado?

Ahora bien, cuando dos elementos de bloque HTML tienen márgenes verticales que se tocan entre sí, estos dos márgenes colapsan en uno o se fusionan entre sí, y aquí dominará el más grande.

La documentación de la W3C define el colapso de márgenes de la siguiente manera:

"En CSS, los márgenes adyacentes de dos o más bloques (que podrían o no ser hermanos) pueden combinarse para formar un único margen. Cuando los márgenes se combinan de esta manera decimos que colapsan, y el margen combinado resultante se denomina margen colapsado."

Por lo tanto, los "márgenes adyacentes" son márgenes que están uno al lado del otro, y pueden combinarse para formar un único margen. Pero, ¿esto significa que todos los márgenes adyacentes pueden colapsar? ¡La respuesta es no! sólo es para márgenes verticales (superior e inferior).

El colapso de margen ocurre en cuatro casos básicos:

☝️ Hermanos adyacentes.
✌️ Un contenedor padre y su primer elemento hijo.
👌 Un contenedor padre y su último elemento hijo.
✊ Bloques vacíos.

⊟ Caso 1 (Hermanos adyacentes)

Este ejemplo visual es la mejor manera de entenderlo:

<div class="box-1">Esta caja tiene<span>margin-bottom:40px;</span>
</div>

<div class="box-2">Esta caja tiene <span>margin-top:40px;</span></div>

.box-1 {
    margin-bottom: 40px; ⬅
    padding: 20px;
    border: solid 5px red;
}
.box-2 {
    margin-top: 40px; ⬅
    padding: 20px;
    border: solid 5px blue;
}

span {
    font-weight: bold;
}

Cuando los desarrolladores hace algo así, espera que el margen de la primera caja y la segunda sea de 80px (40px + 40px), pero en realidad es de 40px. Los dos márgenes se tocan entre sí, por lo que se combinan o se colapsan el uno con el otro.

El margen inferior del elemento se colapsa con el margen superior del siguiente elemento.

Ahora para empujar aún más, vamos a dar a nuestra primera caja un margen inferior (margin-bottom) de 100px:

.box-1 {
    margin-bottom: 100px;
}
.box-2 {
    margin-top: 40px;
}

Como podemos observan en la imagen el margen más grande siempre gana, es decir, como la primera caja tiene un margen de 100px y la otra caja 40px el que termina ganando es el que tenga un valor superior, podemos decir que hay 100px de margen entre la primera y la segunda caja.

Recuerda que en estos ejemplos los márgenes no se suman.

El colapso de márgenes solo afecta a los elementos de bloque display: block, no afecta a otros valores de la propiedad display, por ejemplo a display: flex.

➕➖ Colapso de márgenes positivos y negativos

Como se ha descrito, si los dos márgenes adyacentes son positivos, el margen resultante es el mayor de los dos. Por el contrario, si los dos márgenes son negativos, el margen resultante será el margen más pequeño (el más negativo). Si un margen es positivo y el otro es negativo, el margen resultante es la diferencia entre el positivo y el negativo:

Dos márgenes positivos: margen resultante igual al margen mayor. Por ejemplo, si los márgenes son 50px y 25px, el margen resultante será 50px.
Cuando todos los márgenes son negativos, el tamaño del margen colapsado es el negativo más grande de los dos en lugar del que está más cerca de ser positivo. Por ejemplo, si los márgenes son -50px y -25px, el margen resultante será -50px. Esto se aplica tanto a los elementos adyacentes como a los elementos anidados.
Un margen positivo y otro negativo: el margen resultante es la diferencia entre ambos. Por ejemplo, si los márgenes son 50px y -25px, el margen resultante será de 25px (50 – 25). El tamaño del margen colapsado es la suma del margen positivo más grande y el margen negativo más pequeño (el más negativo).

👨‍👦 Caso 2 - Un contenedor padre y su primer elemento.

En elementos anidados dentro de otros, el primer elemento descendiente colapsa su margen superior con el margen superior del elemento padre. Las reglas son las mismas que antes. Por ejemplo, si los dos márgenes superiores son positivos, el margen superior resultante será el de mayor valor.

Ejemplo 1

Estamos colocando nuestro primer elemento <div> dentro de su contenedor padre.

El margen hijo está siendo "absorbido" por el margen padre. Los dos se combinan y están sujetos a las mismas reglas de colapso de márgenes que hemos visto hasta ahora (por ejemplo, el más grande gana).

 <div class="parent">
    <div class="child"></div>
 </div>

body {
    margin: 0;
    font-family: arial;
}

.parent {
    margin-top: 50px;
    height: 250px;
    background: grey;
}

.child {
    margin-top: 40px;
    width: 200px;
    height: 200px;
    background: blue;
}

Como puedes observar en la imagen los márgenes seguirán colapsados
¿Cómo puede ser esto? Pues resulta que muchos de nosotros tenemos una idea equivocada sobre el funcionamiento de los márgenes.

El margen sirve para aumentar la distancia entre hermanos. No está pensado para aumentar la distancia entre un hijo y el cuadro delimitador de su padre; para eso está el padding.

Si añadimos un borde alrededor del elemento padre, los márgenes ya no se colapsan esto sucederia porque el margen del padre ya no estaria en contacto directo con el margen del hijo.

Excepciones: como se mencionó antes, el colapso ocurre cuando los márgenes verticales aparecen contiguos y se «tocan». El colapso entre un contenedor y su primer elemento NO ocurre si hay algo que separe los dos márgenes; por ejemplo, si el elemento contenedor presenta contenido inline antes del primer elemento hijo, por ejemplo algo de texto, un borde o un padding.

Puedes pensar en el padding/border como una especie de muro; si se sitúa entre dos márgenes, éstos no pueden colapsar, porque hay un muro en el camino, incluso 1px de padding interferirá con el colapso de los márgenes.

Ejemplo 2

En este ejemplo vamos a tener un header y dentro de el un encabezado <h1>.

<header class="header">
   <h1 class="title">Lupita code</h1>
</header>

body {
    margin: 0;
    font-family: arial;
    background-color: #ccc;
}

.header {
    height: 50px;
    background-color: steelblue;
}

Como podemos observar en la imagen hay un espacio entre la parte superior del viewport y el header, ese espacio extra no corresponde al body ya que si te fijas en el código CSS, el body tiene un margen con valor de 0. ¿Adivinas de dónde viene?

Ese margen tampoco es del header lo que nos lleva a concluir que ese margen le corresponde al encabezado <h1>, y si revisas la herramienta de desarrollo te puedes dar cuenta que el encabezado ya viene con un margen vertical de la hoja de estilo del navegador.

¿Recuerdas cuando mencioné sobre las hojas de estilo del navegador?

La solución es colocar un margin: 0 al <h1> y así ya no se tiene esa separación. El resultado es el siguiente:

.title {
    margin: 0;
}

Ahora quiero agregar nuevamente un margin-top de 10px al <h1>

.title {
    margin: 0;
    margin-top: 20px;
}

Como puedes observar el header se movió, y se supone que solo le indicamos que se moviera el <h1>. Para que esto no ocurra, tenemos varias soluciones:

Añadir la declaración overflow: hidden al header.
Añadir un padding-top al header.
Añadir un border-top al header.

Si añadimos padding, border o espacio a los elementos de los ejemplos anteriores, no se aplicará el colapso. En otras palabras, una forma de deshacerse del comportamiento del colapso de márgenes consiste en añadir algún tipo de separación (borde, padding o espacio libre) entre los márgenes.

Caso 3 - Un contenedor padre y su último elemento.

De forma análoga a lo que ocurre en el caso anterior con los márgenes superiores, los márgenes inferiores del contenedor y de su último elemento también colapsan en uno solo. Y también como en el caso anterior, el colapso de márgenes no se produce si el borde o el padding del contenedor es mayor a cero.

<div class="parent">
   <div class="child">Here is a paragraph</div>
</div>
<div class="div">Outside the parent</div>

body {
    margin: 0;
    font-family: arial;
}

.parent {
    margin-bottom: 30px;
    background: #49b293;
    height: auto;
}
.child {
    margin-bottom: 50px;
    background: blue;
    height: 100px;
    width: 200px;
}

.div {
    background-color: red;
}

Caso 4 - Bloques vacíos

Los márgenes verticales de un bloque vacío (sin height ni padding ni contenido) también colapsan entre sí. Por ejemplo, si tenemos un bloque vacío con un margen top de 40px y un margen bottom de 20px, el elemento ocupará una zona de 40px de altura al colapsar sus propios márgenes verticales:

<div class="box">Lorem, ipsum.</div>
<div class="empty"></div>
<div class="box">Lorem, ipsum.</div>

body {
    margin: 0;
    font-family: arial;
}

.box {
    margin: 0;
    height: 40px;
    padding: 10px;
    border: 2px solid;
    background: khaki;
}
.empty {
    margin-top: 40px;
    margin-bottom: 20px;
}

Excepciones

Como en todo, hay algunas excepciones a tener en cuenta cuando los márgenes no se colapsan.

Flexbox, Grid y otros elementos que no son de nivel de bloque.

El colapso de márgenes no se aplican a los flex items, grid items, a los elementos de posición absoluta ni a otros elementos que no sean de nivel de bloque.

📋 Conclusión

☑️ Un margen colapsado es lo que ocurre cuando se combinan dos elementos a nivel de bloque con márgenes verticales coincidentes. Cuando esto sucede, el mayor de los dos márgenes se asume como el único margen colapsado.
☑️ No se aplica a márgenes horizontales.
☑️ Sólo ocurre con los elementos a nivel de bloque es decir, display: block - esto no incluye los elementos inline-block.
☑️ Hay 4 casos en los que se genera un colapso de márgenes.
☑️ La especificación CSS es enorme. No intentes saberlo todo. Aprende los conceptos de alto nivel y las reglas comunes, busca cosas cuando las necesites y tómatelo con calma.

🔎Recursos:

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok

¿Que es el Box Model?🤔

Lupita Code 🌄 — Mon, 07 Jun 2021 01:44:40 +0000

¡Hola gente bonita!👋

El nombre 'box-model' (modelo de caja) se llama así porque, en los navegadores, todo se construye a partir de cajas.

Entonces, lo primero que debemos de entender, es que cada elemento que definimos en un documento HTML se mostrará en el navegador como una caja rectangular esta es la forma en que se representan todos los elementos, no existen elementos triangulares, redondos, poligonales etc. Todos los elementos en HTML por defecto son rectangulares ya que internamente el navegador dibuja un rectángulo.

⚠️ Las únicas excepciones son las listas y las tablas, que generan más de una caja, y los elementos con display: none o display: contents, que no crean ninguna caja.

Aunque usted visualice en un sitio web algún elemento diseñado en CSS que utiliza border-radius para parecer un círculo, ese elemento seguirá siendo rectangular:

Esto es porque como he dicho anteriormente, el navegador renderiza cada elemento de la página web como un elemento rectangular y con CSS nosotros definimos las propiedades como el tamaño, el color, los estilos, el margen y mucho más de estos elementos rectangulares.

Esto puedes comprobarlo con ayuda de la propiedad outline, podemos ver todos los elementos de la pagina de inicio de Google de forma rectangular y esto lo puedes hacer con cualquier otra página web.

* {
    outline: 1px solid red;
}

El navegador Microsoft Edge tiene una herramienta llamada 3D view que muestra todas las cajas contenedoras de forma visual en 3D:

Cada elemento HTML en una página web es una caja, pero hay dos tipos básicos de cajas:

Block boxes.
Inline boxes.

Estos dos tipos de cajas, existieron desde el principio de la web:

📦 Cajas de bloque (Block boxes)

Las cajas de bloque, por defecto, ocupan todo el espacio a lo ancho del contenedor.
El elemento HTML común para una caja de bloque es el elemento
<div>.

📦 Cajas en línea (Inline boxes)

Las cajas en línea, por defecto, toman el espacio según el contenido envuelto. El elemento HTML más común para una caja en línea es el elemento <span>.

El comportamiento de todas las cajas proviene de la propiedad display de CSS. Si quieres aprender más acerca de esta propiedad te invito a leer mi articulo.

📦 Las áreas del modelo de caja

Cada elemento HTML es una caja que tiene 4 lados y se compone de cuatro áreas:

Internos:

content
padding
border

Externos

margin

Estas áreas se apilan para formar el modelo de caja o box model.
Cada elemento HTML es una caja que podemos controlar en el espacio exterior con la propiedad margin, después, podemos darle un borde y con la propiedad padding, también podemos proporcionar los espacios interiores entre el contenido y el borde dentro de la caja.

🛠️ Herramienta de Desarrollo (DevTools)

Si vas a inspeccionar cada elemento HTML, En la herramienta de desarrollador de cada navegador hay una pestaña llamada "Estilos" y lo que hace es mostrar el modelo de caja.

ℹ️ Los colores pueden ser distintos dependiendo del navegador.

El content o contenido es representado por el color azul.
El padding es representado por el color verde claro.
El border es representado por un color amarillo.
El margen es representado por un color naranja.

Si te posicionas en cada elemento HTML de la página web y lo seleccionas, estos elementos se pintaran de los colores que he mencionado y esto nos ayuda a detectar cuanto de padding o margin tiene cada elemento.

🎦 Content

El contenido de la caja, donde aparecen texto, imágenes, etc.

El área del content (como su nombre lo dice) contiene el “contenido” central a mostrar, es decir, un texto, una imagen, un video, etc. El contenido siempre es lo que queremos mostrarle al usuario. Esta área en muchas ocasiones tiene un color o imagen de fondo para hacerla más atractiva.

Como podemos observar en la imagen, el contenido es el área central de todo el elemento, de tal forma, que el siguiente elemento que lo rodea es el padding. El tamaño de esta área se puede modificar con las propiedades height , width , max-height , max-width , min-height , min-width.

Cuando se establece una anchura o una altura en un elemento, esto sólo se aplica al área de contenido (content) de la caja, no a la caja completa. El padding y border se añaden a la anchura y la altura para obtener el tamaño total de la caja, si quieres profundizar mas en este tema, te invito a leer mi articulo de Box Sizing:

¿Qué es el Box Sizing en CSS? 🤔

Lupita Code 🌄 ・ Apr 19 '21

#css #spanish

🔲 Padding

Es el área alrededor del contenido. El padding es transparente.

El padding es una separación o espacio interior que existe entre el contenido y el borde de la caja, el cual se utiliza para dar una apariencia estética más atractiva y que el contenido no este pegado al borde.

Cabe mencionar que el padding sigue siendo parte de la caja visible, por lo que, si tenemos una imagen o color de fondo, este se extenderá a través del padding.

Puedes usar el mismo valor en toda la caja usando su shorthand, por ejemplo, padding: 20px o puedes darle padding sólo a un lado de la caja, por ejemplo, padding-right: 10px.

Es importante mencionar que NO se permiten valores negativos.

El shorthand padding permite dar un valor diferente a cada lado, sin necesidad de escribirlos por separado. Por ejemplo:

padding-top:    10px; 
padding-right:  20px; 
padding-bottom: 25px; 
padding-left:   5px;  
/* Los 4 valores son igual a esto: */
padding: 10px 20px 25px 5px;

padding: 10px;           /* Aplica a los cuatro lados */
padding: 10px 20px;      /* vertical | horizontal */
padding: 10px 20px 30px; /* top | horizontal | bottom */

🕒 Un truco para recordar los valores de la propiedad padding (top, right, bottom, left) es pensar en el sentido de las manecillas del reloj, empezando desde las 12hrs:

⬜ Border

El borde es la línea que rodea la caja, es como la frontera que rodea al elemento, esta se utiliza para darle una apariencia estética a la caja, pues nos permite dibujar una línea de algún color, la línea puede tener los siguientes estilos:

Las tres propiedades básicas para crear bordes son:

border-style: sus valores son: [ none | hidden | solid | dotted | dashed | double | groove | ridge | inset | outset ]
border-width: indica al navegador el tamaño del borde, normalmente, se utiliza el valor en píxeles para esta propiedad, por ejemplo, border-width: 5px.
border-color: por defecto, el valor utiliza el currentColor del texto. Sin embargo, preferimos definirlo aunque no sea necesario. Por ejemplo, border-color: red.

La mayoría de los desarrolladores web no utilizan estas tres propiedades por separado. En su lugar, existe el shorthand: border. Con este shorthand podemos escribir sólo border: solid 5px red.

También podemos controlar y dar un estilo diferente a cada parte de los bordes, por ejemplo:

border-width: 5px 10px 15px 20px; 
border-style: solid dashed dotted double; 
border-color: red green blue brown;

🔳 Margin

Es la separación entre una caja y las cajas adyacentes.

El margen es la última área del Box Model y se puede ver como una separación invisible o transparente que ayuda a separar un elemento de otro. Cuando definimos un color o imagen de fondo, este no se propaga a esta sección.

Los márgenes siempre quedan fuera del modelo de caja, por lo que pueden utilizarse para crear espacio entre los elementos.

Recuerda que los valores pueden ser positivos o negativos.

margin-top:    10px; 
margin-right:  20px; 
margin-bottom: 25px; 
margin-left:   5px;  
/* Los 4 valores son igual a esto: */
margin: 10px 20px 25px 5px;

margin: 10px;           /* Aplica a los cuatro lados */
margin: 10px 20px;      /* vertical | horizontal */
margin: 10px 20px 30px; /* top | horizontal | bottom */

Es importante mencionar que varios elementos HTML tiene un margen que son asignados por la hojas de estilo del navegador.

Margin vs Padding

Aunque estas dos propiedades son similares, a veces se utilizan erróneamente de forma intercambiable, aunque son muy diferentes. Entender sus diferencias puede ser beneficioso para los desarrolladores web.

El padding y el margin son dos elementos importantes en el diseño web que añaden espacio extra en diferentes lugares. Pero, ¿Dónde y cuándo se debe utilizar uno en vez del otro?

Para el padding, puedes utilizarlo en las siguientes situaciones:

Cuando no quieras que el contenido toque los bordes del contenedor.
Cuando quiera aumentar el tamaño de un bloque de contenido sin que el propio contenido sea más grande.
Cuando se necesita espacio entre un elemento interior y la caja padre.
Cuando quieras que el background del elemento se muestre en el espacio generado. por ejemplo, si tienes dos divs, quieres que ambos divs (con diferente color de fondo) esten juntos, pero no quieres que sus textos se toquen.
Cuando quieras aumentar el tamaño del elemento. Ejemplo: si quieres aumentar el tamaño de un botón.

Para el margin, puedes utilizarlo en las siguientes situaciones:

Cuando necesite espacio alrededor de los elementos, como separar una imagen y la descripción de la misma.
Utilizarías el margen para establecer la distancia entre elementos cercanos.
Cuando quiera centrar un elemento horizontalmente.
Cuando quieras mover un elemento hacia arriba, hacia abajo o de lado a lado.
Cuando quieras sobreponer elementos.

Nota Adicional: Muchos de nosotros tenemos una idea equivocada sobre el funcionamiento de los márgenes.

Si deseas agregar espacio al exterior de un elemento, usas la propiedad margin. El margen es como agregar un cojín alrededor del elemento.

El margen sirve para aumentar la distancia entre hermanos. No esta pensado para aumentar la distancia entre un elemento hijo y su contenedor padre, para eso esta el padding.

El margen siempre tratara de aumentar la distancia entre hermanos, incluso si eso significa pasar el margen al elemento padre.

Entendiendo el Colapso de Márgenes (Margin Collapsing) 😓

Lupita Code 🌄 ・ Jun 15 '21

#css #spanish #latam

⬜ Outline

La propiedad outline (contorno) es la línea que rodea a la caja entre el border y el margin.

Se utiliza como su nombre lo dice para dibujar un contorno alrededor de un elemento. Un contorno es una línea que se dibuja fuera de los bordes de un elemento, comúnmente se suele confundir la propiedad outline con border, la diferencia entre ambos es que la propiedad outline no afecta a las dimensiones del elemento ya que NO forma parte del modelo de caja.

La propiedad outline NO solo se usa como decoración grafica, su uso principal es por motivos de ACCESIBILIDAD.

La propiedad outline se usa principalmente en elementos interactivos como enlaces, botones e inputs que tengan la pseudoclase :focus. o bien en el elemento <form> que tenga la pseudoclase :focus-within. Aqui una lista mas completa de donde usar outline:

Links
Buttons
Form Fields / Controls (text fields, select boxes, radio buttons, etc.)
Menu items
Things triggered by hover, like tooltips
Widgets, like a calendar picker

La pseudoclase :focus hace que estos elementos se activen cuando el usuario hace click sobre ellos o cuando presiona la tecla "TAB" del teclado y se coloreen con una ligera aura que los rodea. Esto da la posibilidad al usuario de conocer en todo momento el elemento que recibe el foco y de pasar por los diversos elementos sin usar el mouse.

Quizás pensaras que todos usamos el mouse para navegador por los sitios web, pero hay muchos usuarios que usan el teclado como su principal medio de usar la web, por ejemplo: usuarios que usan lectores de pantalla, usuarios con movilidad reducida, usuarios avanzados (desarrollador). Por esta razón no debes eliminar la propiedad outline de la pseudoclase :focus.

outline es una shorthand para las siguientes propiedades:

outline-width acepta los mismos valores que border-width.
outline-style acepta los mismos valores que border-style, excepto hidden.
outline-color acepta todos los colores y las diversas formas de declararlos. También la palabra clave invert.

outline también cuenta con una propiedad asociada llamada outline-offset que es usada para aumentar o disminuir el espacio que hay entre el outline y el border del elemento.

🆕 Update de la propiedad outline

Ahora la propiedad outline se adapta automáticamente al radio del elemento. Anteriormente se dibujaba por defecto un contorno cuadrado. Funciona en las ultimas versiones de los principales navegadores excepto en Safari.

Al principio de este articulo te mostré el siguiente snippet de codigo:

* {
    outline: 1px solid red;
}

Este es un pequeño hack que se usa para debuggear en CSS, no se usa la propiedad border ya que este afectaría a las dimensiones de los elementos.

👫 Aportaciones de la comunidad

Kelly Vaughn publicó en su cuenta de twitter una foto donde explica el modelo de caja de una forma divertida 😂.

// Detect dark theme var iframe = document.getElementById('tweet-1159263383058862081-98'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1159263383058862081&theme=dark" }

Este hermoso demo interactivo para enseñar el modelo de caja en CSS por Caroline Artz es increíble, esta desarrollado en Angular:

Adam Argyle tambien comparte un demo del modelo de caja en 3D:

📋 Conclusión:

☑️ Cada elemento HTML en una pagina web es una caja rectangular.
☑️ El contenido de la caja es donde aparecen texto, imágenes, etc.
☑️ El padding es el área alrededor del contenido.
☑️ El borde es una línea que rodea el padding y el content.
☑️ El margin es la separación entre una caja y las cajas adyacentes.

🔎Recursos:

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok

La propiedad display en CSS

Lupita Code 🌄 — Tue, 01 Jun 2021 00:56:13 +0000

¡Hola gente bonita!👋

En este articulo voy a explicar sobre la propiedad display y los diferentes valores que esta contiene, antes de empezar es necesario comprender algunos conceptos, como el modelo de caja (box-model) o incluso el box-sizing ya que considero que estos temas (tal como en la serie Dark 📺) están conectados 😂. Vamos a empezar a repasar algunas cosas importantes.

Es importante que entiendas que cada elemento HTML en una pagina web es una caja rectangular, esta es la forma en que se representan todos los elementos, no existen elementos triangulares, redondos, poligonales etc. Todos los elementos en HTML por defecto son rectangulares ya que internamente el navegador dibuja un rectángulo.

Aunque usted visualice en un sitio web algún elemento redondo diseñado en CSS, ese elemento seguirá siendo rectangular y esto es porque como he dicho anteriormente cada elemento del diseño web es una caja, el navegador renderiza cada elemento de la página web como un elemento rectangular y con CSS nosotros definimos las propiedades como el tamaño, el color, los estilos, el margen y mucho más de estos elementos rectangulares.

Esto puedes comprobarlo con el siguiente ejemplo, con ayuda de la propiedad outline, podemos ver todos los elementos de la pagina de inicio de Google de forma rectangular y esto lo puedes hacer con cualquier otro sitio web.



* {
    outline: 1px solid red;
}

Entonces cada elemento HTML esta formado por 4 áreas: content, padding, border y margin. Estas áreas se apilan para formar el modelo de caja (box model).

Como ya lo mencionamos anteriormente cada elemento HTML es una caja, pero hay dos tipos básicos de cajas:

Block boxes.
Inline boxes.

Estos dos tipos de cajas, existieron desde el principio de la web:

📦 Cajas de bloque (Block boxes)

Las cajas de bloque, por defecto, ocupan todo el espacio a lo ancho del contenedor.
El elemento HTML común para una caja de bloque es el elemento
<div>.

📦 Cajas en línea (Inline boxes)

Las cajas en línea, por defecto, toman el espacio según el contenido envuelto. El elemento HTML más común para una caja en línea es el elemento <span>.

La propiedad Display

El comportamiento de todas las cajas proviene de la propiedad display de CSS.

La documentación de la MDN define la propiedad display de la siguiente manera:

La propiedad CSS display especifica si un elemento es tratado como block o inline y el diseño usado por sus hijos, como flow layout, grid (Cuadricula) o flex (Flexible).

Los valores básicos de la propiedad display son el valor inline y el valor block.
Entonces el elemento HTML <span>, por defecto, utiliza el valor de inline mientras que el elemento HTML <div>, por defecto, utiliza el valor de block.



div{ 
   display: block; /* browser default styles */
}
span{ 
   display: inline; /* browser default styles */
}

Y ahora, si quieres, puedes cambiar el comportamiento de cada elemento HTML. Por ejemplo, puede convertirlo en un comportamiento opuesto:



div{ 
   display: inline; 
}

span{ 
   display: block; 
}

Entonces podemos decir que de forma natural existen elementos HTML en línea y elementos de bloque, esto es cierto, pero curiosamente todos los elementos HTML utilizan la propiedad display con el valor inline, Te estarás preguntando ¿cómo sé esto? la respuesta es que cada propiedad en CSS tiene sólo un valor por defecto y para la propiedad display, el valor inicial es siempre inline.

¿No me crees? La misma documentación oficial de la MDN lo dice:

Esto quiere decir que muchas etiquetas HTML tienen asignado estilos CSS del navegador aunque no lo hayas especificado, todos los elementos tienen establecido un valor de la propiedad display que puede ser inline o puede ser block gracias a la hoja de estilo del navegador.

Esta tambien es la razón por la que sin ningún tipo de CSS de nuestra parte, el elemento <h1> es mas grande que un <h2> y el <body> tenga un margen que a veces es necesario eliminar.

Es importante recordar que estos estilos no son los estilos por defecto de CSS, si reestablecemos el elemento <div> a su valor inicial pasara a ser inline. ¡Vamos a comprobarlo!



div {
    display: initial; /* es igual a inline */
}

La única razón por la que tenemos esas diferencias entre los distintos tipos de elementos HTML (block vs inline) es porque el navegador carga su propio CSS.

Para tener una idea de como es la hoja de estilo de cada navegador (Chrome, Firefox) en los recursos de este articulo dejare los enlaces para que les des un vistazo.

En el concepto de la propiedad display también nos menciona que esta propiedad establece los tipos de visualización interna y externa de un elemento. La de tipo externa establece la participación de un elemento en el flujo normal; la tipo interna establece el layout (Diseño) de los hijos.

Flujo Normal (normal flow)

El flujo normal en HTML es el orden natural en el que los elementos aparecen en pantalla, es decir, los elementos aparecerán colocados tal como estén ordenados en el código HTML solo si no se aplica ningún CSS que cambie la forma en la que se comportan.

Como ya hemos mencionado anteriormente estos elementos en HTML por defecto son elementos "en línea" o elementos "en bloque".

Conociendo esto, la documentación de la MDN define el flujo normal de la siguiente manera:

El flujo normal, o flow Layout, es la forma en que los elementos de bloque y en línea se muestran en una página antes de que se realicen cambios en su diseño.

¿Cómo se comportan los elementos Block e Inline cuando forman parte del flujo normal?

En el flujo normal, los elementos en línea se muestran en la dirección en línea, es decir, se muestran uno tras otro, comenzando por la izquierda. Los elementos en bloque se muestran uno detrás de otro, es decir, comienzan en la parte superior y se mueven hacia abajo en la página.

📖 Esto lo podemos comprender cuando leemos un libro, siempre vamos a leer de arriba hacia abajo y de izquierda a derecha.

La propiedad display aparte de tener los valores anteriores también tiene un valor llamado: inline-block que junto con los demás nos sirve para definir la colocación de elementos individuales, también tiene otros valores importantes como: none, flex y grid.

🍫 display: inline

Los elementos en línea no admiten dimensiones (width, height) pero si admiten margin, padding y border, solo ocupan lo que tengan en su contenido, es decir, aunque quieras declarar un ancho y alto a un elemento de línea no podrá tener efecto ya que estos elementos no aceptan dimensiones, así también lo explica la documentación de la MDN:

Los elementos en línea tienen su altura y anchura determinados por su contenido.

Si hay varios elementos en línea estarán colocados de izquierda a derecha (uno al lado de otro).

Por ejemplo, el elemento HTML <span> es un elemento de línea por defecto y no importa cuántas etiquetas <span> haya, siempre aparecerán en línea o, en otras palabras, una inmediatamente después de la otra, produciendo una cadena continua de texto.



 <span class="inline">Soy un elemento de linea</span>
 <span class="inline">Soy otro elemento de linea</span>
 <span class="inline">Soy otro elemento más de linea</span>



.inline {
    background-color: khaki;
}

Si quieres cambiar el tamaño, tienes que tener en cuenta que no podrás hacerlo porque recuerda que los elementos de línea no admiten dimensiones, esto lo puedes cambiar por display: block o display: inline-block de esta forma ya podrás cambiar el tamaño de tus elementos.

🤔 ¿Cuáles son los elementos de línea?

La siguiente es una lista de los elementos en línea de HTML, podemos ver algunos de estos elementos en los cuales colocamos contenido en forma de texto:

b, big, i, small, tt,
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, time, var,
a, bdo, br, img, map, object, q, script, span, sub, sup,
button, input, label, select, textarea.

😰 ¿Debo aprender de memoria todos los elementos de línea? La respuesta es que no es necesario, simplemente con la practica lograras identificar que elementos son de línea o de bloque. Recuerda que la practica hace al maestro. 🤓

📄 display: block

Un elemento de bloque es un elemento que ocupa el ancho máximo disponible. Tal y como dice la documentación de la MDN:

De manera predeterminada, el contenido de un elemento de nivel de bloque es el 100% del ancho de su elemento padre y su altura viene determinada por su contenido.

Esto nos quiere decir que los elementos de tipo bloque abarcan el 100% del espacio que tengan disponible, es decir, se estiran por todo el ancho de la página.

Cabe mencionar que estos elementos si admiten dimensiones pero no pueden tener otro elemento a su lado ya que abarcan todo el espacio que tengan disponible por lo tanto estarán colocados de arriba hacia abajo, aunque este comportamiento por defecto puede ser modificado colocando display: inline-block.

Cuando hay varios elementos, estos están separados por sus márgenes, como vemos en la siguiente imagen, esto tiene que ver con un tema fundamental llamado: Colapso de márgenes.



 <p class="block">Soy un elemento de bloque</p>
 <p class="block">Soy otro elemento de bloque</p>
 <p class="block">Soy otro elemento más de bloque</p>



.block {
    background-color: khaki;
}

En general, los elementos en bloque también pueden contener elementos en línea y otros elementos en bloque, así que los elementos en bloque crean estructuras "más grandes" que los elementos en línea.

🤔 ¿Cuáles son los elementos de bloque?

La siguiente es una lista de los elementos en bloque, alguno de ellos los podemos ver como contenedores:

<address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <header>, <hgroup>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>, <h1>...<h6>.

Recuerda que no es necesario que memorices cada uno de estos elementos, ya que con la practica lograras identificarlos fácilmente.

⏸️ display: inline-block

Es una combinación entre los dos tipos de elementos mencionados anteriormente (block e inline), los elementos con el valor inline-block admiten dimensiones pero todavía son elementos de línea, es decir estarán colocados uno al lado de otro.

El elemento `<img>`

Un dato curioso es que el elemento <img> es un elemento inline, esto quiere decir que incluso puedes colocar una imagen en medio de un párrafo.

Sin embargo, una imagen es como cualquier otro elemento de bloque porque puede tener: border, margin, padding y también puedes modificar su altura y anchura.

🤯 Para ser precisos una imagen es en realidad un elemento de línea y de bloque al mismo tiempo, en otras palabras: display: inline-block. ¡Vamos a comprobarlo!



.image {
    width: 300px;
    height: 300px;
    padding: 20px;
    margin: 30px;
    border: 5px solid red;
}

/* HTML */
<img class="image" src="https://picsum.photos/200/200"/>

Como las imágenes son elementos inline, esto produce un espacio debajo debido a su line-height. Si alguna vez has tenido un misterioso espacio de 4px que no era border, margino padding, probablemente era el llamado "“inline magic space”" que los navegadores añaden al line-height.

Se puede solucionar de dos formas:

Añadiendo line-height:0 al contenedor de la imagen.
Asignando display:block a la imagen directamente (img { display: block;}). ✅

Así evitamos toda una serie de problemas.

👻 display: none

Lo que hace el valor none de la propiedad display es que oculta un elemento, por lo que no ocupara ningún espacio. El elemento estará oculto y la pagina será desplegada como si el elemento no estuviera allí.

Este valor se utiliza constantemente cuando en los dispositivos móviles no queremos que haya elementos que tengan que mostrarse al usuario por el espacio que ocupan, pero que en pantallas grandes si tengan que aparecer.

Hay que tener cuidado con este valor, porque sabemos que si oculta el elemento pero se sigue renderizando, por ejemplo, si en una pagina web al body le colocáramos la declaración: display: none no se mostraría nada pero los recursos se seguirían cargando, por lo tanto hay que utilizarlo con cuidado.

↕️↔️ display: flex y display: grid

Los últimos valores mas importantes de la propiedad display es grid y flex. No voy a profundizar en estos temas porque considero que merecen un articulo propio e incluso un tutorial completo, bien explicado y con muchos ejercicios ya que son temas extensos.

De manera general podemos decir que el valor flex se usa para maquetar componentes como por ejemplo, un menú de navegación y grid se usa para maquetar el layout. Se que estoy generalizando y esto, no es 100% así, porque pueden haber componentes complejos en los que es necesario usar grid y algunos layouts son simples y otros no, todo depende de lo que estés diseñando.

De todas maneras comparto una infografía de un gran desarrollador llamado Addy Osmani (Ingeniero en Google Chrome) que se basó en el articulo de Ahmad Shadeed para realizar esta comparación.

// Detect dark theme var iframe = document.getElementById('tweet-1272423597550657537-396'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1272423597550657537&theme=dark" }

No te preocupes, realizare todo un articulo para ver en profundidad flexbox y grid, pero por ahora es necesario que comprendas como funciona la propiedad display.

Antes de correr, aprende a caminar 🚶‍♀️...🏃‍♀️

📋 Conclusión

☑️ Todas las etiquetas HTML tienen configuraciones de estilo CSS por defecto, incluso si ninguna es proporcionada por usted.
☑️ Los elementos en HTML usualmente son elementos "en línea" o elementos "en bloque". Pero este comportamiento por defecto puede ser modificado.
☑️ Los elementos en línea no admiten dimensiones (width, height) aunque si admiten margin, padding y border.

🔎Recursos:

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok

Guía completa y práctica sobre posicionamiento CSS: z-index y stacking context

Lupita Code 🌄 — Wed, 26 May 2021 21:08:08 +0000

¡Hola gente bonita!👋

Este es el ultimo articulo de la guía completa de posicionamiento en CSS, en el cual voy a explicar la propiedad z-index. Esta propiedad nos permite definir la posición en el eje z de los elementos posicionados.

🧐 ¿Cómo funciona z-index?

Cuando los elementos se colocan fuera del flujo normal, pueden superponerse sobre otros elementos. La propiedad z-index especifica el orden de apilamiento (Stacking Context) en el eje z, es decir, cual elemento debe ser colocado enfrente o detrás de otros.

La propiedad z-index acepta un valor numérico que puede ser un número positivo o negativo, no se usa unidades tales como pixeles o porcentajes. Esta propiedad toma un valor numérico entre 0 y ±2147483647 en la mayoría de los navegadores comunes.

El valor por defecto de z-index es auto. El navegador irá ordenando los elementos en el orden que aparezcan en el documento HTML, el primer elemento quedara debajo y los siguientes elementos se irán apilando encima, pero con la propiedad z-index podemos modificar este orden, esto lo puedes comprobar con los siguientes ejemplos:

Ejemplo 1️⃣

En el siguiente ejemplo tenemos 3 cajas que están dentro de un contenedor, no estarán posicionadas y tampoco tendrán un z-index declarado, solo tendrán un margin-top.



<div class="demo">
  <div class="box-1">1</div>
  <div class="box-2">2</div>
  <div class="box-3">3</div>
</div>



.demo {
    width: 300px;
    height: 300px;
    padding: 2rem;
    border: 2px dashed black;
}

[class^="box-"] {
    width: 100px;
    height: 100px;
    padding: 30px 10px;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

.demo > * + * {
    margin-top: -50px; ⬅️
    opacity: 0.8;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 60%);
}

.box-1 {
    background-color: pink;
    border: 2px solid hotpink;
}

.box-2 {
    background-color: tomato;
    border: 2px solid orangered;
}

.box-3 {
    background-color: wheat;
    border: 2px solid gold;
}

Recordemos que a ninguna caja se le ha especificado la propiedad z-index y tampoco están posicionadas, podemos ver en la imagen que las cajas se han apilado, entonces ¿Cómo decide el navegador cual colocar encima del otro? la respuesta es que si no hay un z-index el navegador usa el orden en el que aparecen en el documento HTML. El que aparece después siempre va "encima" de los otros elementos.

Si revisamos el código HTML, primero tenemos la caja con el numero uno por eso esta detrás de la caja dos y al final esta la caja tres por eso esta encima de todas las cajas.

En resumen la caja amarilla se coloco encima de la caja roja, porque dicha caja se coloco después en el documento HTML, aunque la propiedad z-index puede cambiar este orden.

Ejemplo 2️⃣

Antes de explicar como funciona la propiedad z-index, vamos a ver otro ejemplo solo con dos cajas, si a la primera caja la posicionamos con el valor de relative y la movemos con la propiedad top: 50px, esta caja se coloca encima de la caja dos y esto es porque en el documento HTML la caja uno esta primero.



.demo > * + * {
    /* eliminamos el margin-top */
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 60%);
}

.box-1 {
    position: relative; ⬅️
    top: 50px; ⬅️
    background-color: pink;
    border: 2px solid hotpink;
}

.box-2 {
    background-color: tomato;
    border: 2px solid orangered;
}

Como puedes ver la segunda caja no esta posicionada por lo tanto la caja uno se coloca encima. Pero, ¿Qué pasaría si a la caja dos también le agregamos el posicionamiento relative?, vamos a explicarlo con el siguiente ejemplo:



.box-1 {
    position: relative; ⬅️
    top: 50px; ⬅️
    background-color: pink;
    border: 2px solid hotpink;
}

.box-2 {
    position: relative; ⬅️
    background-color: tomato;
    border: 2px solid orangered;
}

A la segunda caja solo se le agregó el valor relative y se coloco encima de la primera caja, ¿Por qué sucede esto? la respuesta es que, si ambos elementos están posicionados sin tener un z-index declarado lo que prevalece es el orden en el que aparecen en el documento HTML.

Aunque no especifiques un z-index los elementos van aparecer según su orden en el flujo normal.

Ejemplo 3️⃣

Vamos a continuar con los ejemplos anteriores ahora vamos a tener tres cajas, que estarán posicionadas, para no estar colocando a cada elemento la propiedad position vamos hacer uso del selector de atributo.

⚠️ Recuerda que si estableces un valor especifico para z-index en un elemento y si no esta funcionando es porque necesitas establecer un tipo de posicionamiento diferente de static. Este es el error mas común donde los desarrolladores luchan con z-index.

🔎 Sin embargo, si estas usando flexbox o grid, si puedes modificar el z-index de los elementos flex o grid sin añadir position: relative.



[class^="box-"] {
    position: relative; ⬅️
}
.box-1 {
    top: 50px;  ⬅️
    left: 50px; ⬅️
    background-color: pink;
    border: 2px solid hotpink;
}

.box-2 {
    top: 10px;   ⬅️
    left: 100px; ⬅️
    background-color: tomato;
    border: 2px solid orangered;
}

.box-3 {
    left: 150px; ⬅️
    top: -50px;  ⬅️
    background-color: wheat;
    border: 2px solid gold;
}

La propiedad z-index puede cambiar este orden, si asignamos solamente a la caja dos un z-index con valor 1 la caja dos se coloca encima de las demás.



.box-2 {
    top: 10px;
    left: 100px;
    z-index: 1; ⬅️
    background-color: tomato;
    border: 2px solid orangered;
}

Pero, ¿Qué pasa si a la caja tres también le coloco un z-index con valor 1? la respuesta es que vamos a volver al mismo estado que teníamos anteriormente:



.box-2 {
    z-index: 1; ⬅️
}

.box-3 {
    z-index: 1; ⬅️
}

Recordemos que la primera caja no tiene declarado un valor para z-index, pero en el siguiente ejemplo a cada una de las cajas le vamos a dar un valor diferente.

Ejemplo 4️⃣

En el siguiente ejemplo las cajas uno y tres estarán encima de la caja numero dos, las tres cajas tienen valores consecutivos en z-index, es decir la primera caja tiene un valor de 3, la segunda caja tiene un valor de 1 y la tercer caja tiene un valor de 2.



.box-1 {
    z-index: 3; ⬅️
}

.box-2 {
    z-index: 1; ⬅️
}

.box-3 {
    z-index: 2; ⬅️
}

🧠 Recuerda que si el elemento tiene un valor mayor en z-index se colocara encima de los otros elementos que tengan un valor menor.

➖ z-index negativo

Para colocar un elemento detrás de otro, tienes que añadir un valor negativo en z-index, aunque hay algunos casos particulares como los que se muestran en los siguientes ejemplos, antes de eso vamos a responder una pregunta interesante.

🤔 ¿Por que no es recomendado usar valores consecutivos en la propiedad z-Index?

Siguiendo con el ejemplo anterior de la imagen, ahora te propongo un reto. ¿Qué pasaría si ahora quiero que la caja dos este encima de la caja tres, pero que este debajo de la caja uno?

Tu solución podría ser colocar un valor superior a la caja dos, lo que implica eliminar el valor anterior que tenias en dicha caja: z-index : 1 y ahora reemplazarlo por un valor mayor, digamos que colocas: z-index: 3 ahora la caja dos se coloca encima de la caja tres y es correcto pero recuerda que también hay que colocar la caja dos debajo de la caja uno, pero ese valor que colocaste en la caja dos ya lo tiene la caja uno, entonces tienes que estar cambiando los valores.
Entonces después de estar comprobando, La posible solución a la que quizás llegaste fue esta:



.box-1 {  
    z-index: 3;
}

.box-2 {   
    z-index: 2;  
}

.box-3 {   
    z-index: 1;
}

Si bien es correcto no es la manera mas optima, y esto sucede porque hemos colocado valores consecutivos: 1,2,3 en las cajas, y al momento de querer cambiar el orden de las cajas vas a tener que cambiar los valores y si quieres agregar una caja extra que también tenga un z-index declarado se puede volver complicado.

Cuando tengas varios elementos la mejor practica es tener un rango numérico amplio, puede ser: 10, 20, 30 para darle espacio a nuevos elementos cuando quieras agregar un z-index a cada uno de ellos.

En este ejemplo agregue un rango de valores a cada una de las cajas, si hay otro elemento extra que quiera incluir, por ejemplo una cuarta caja y si agrego un z-index puedo colocar el valor de 11 ya que ese valor no estará ocupado por ningún otro elemento, así que es una buena practica hacerlo de esta manera.



.box-1 {  
    z-index: 20;
}

.box-2 {   
    z-index: 15;  
}

.box-3 {   
    z-index: 10;
}

El resultado es el siguiente:

👨‍👦 Relación padre-hijo

En el siguiente ejemplo vamos a tener dos elementos, el primero es un elemento contenedor, este va a tener un elemento adentro, es decir, una relación padre-hijo.

Ejemplo 5️⃣



<div class="container">
  <div class="item"></div>
 </div>



.container {
    position: relative;
    width: 200px;
    height: 200px;
    padding: 2rem;
    background-color: lightblue;
}

.item {
    position: relative;
    top: -70px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: tomato;
}

Ahora queremos que el contenedor padre (color lightblue) se coloque encima del contendor hijo (color tomato), parece fácil y quizás tu primera solución seria solo agregar un valor al z-index del contenedor y listo pero no es tan simple como parece ya que esto no funcionara. ¡Pongámoslo a prueba!



.container {
    position: relative;
    z-index: 20;
}
.item {
    position: relative;
}

Como puedes observar no ha pasado nada, el contenedor no se coloco encima del elemento hijo, quizás tu segunda solución sea colocar en el elemento hijo un valor negativo tal vez un -30 y si puede que esto funcione. ¡Pongámoslo a prueba!



.container {
    position: relative;
    z-index: 20;
}
.item {
    position: relative;
    z-index: -30;
}

Como puedes observar tampoco ha funcionado, no se ha comportado de la manera que quieres, ¡incluso si estableces z-index a 999999! o agregas la declaración !important, pero ¿Por que sucede? Esto se debe a que el contenedor padre sigue teniendo un z-index declarado, si no lo tuviera, si funcionaria. Vamos a comprobarlo:



.container {
    /* Eliminamos el z-index */
    position: relative;
}
.item {
    position: relative;
    z-index: -30;
}

Entonces podemos decir que si el elemento padre tiene un z-index declarado, el elemento hijo no se podrá colocar encima de el, a menos que el contenedor padre no tenga la propiedad z-index y el elemento hijo lo tenga con valor negativo

:: Pseudoelementos

En nuestro siguiente ejemplo vamos a utilizar el pseudoelemento ::before. El comportamiento es similar a lo que sucede en el ejemplo anterior, también puedes usar ::after para hacer este ejercicio.



 <div class="box"></div>



.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: tomato;
}

.box::before {
    content: "";
    width: 150px;
    height: 150px;
    position: absolute;
    top: 130px;
    left: 130px;
    background-color: rebeccapurple;
}

Es importante comprender que los pseudoelementos son como hijos del elemento del cual son generados.
Si queremos que el pseudoelemento ::before se coloque detrás de la caja box entonces la única manera es declarar un z-index en el pseudoelemento cuyo valor sea negativo, y que el elemento que los origina no tenga un z-index declarado. Es lo mismo que sucede en el ejemplo anterior cuando la relacion es padre-hijo.

Recuerda que los pseudoelementos ::before y ::after cuando tienen un posicionamiento absoluto, en automatico van aparecer encima del elemento al cual pertenecen o del cual se originan.



.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: tomato;
}

.box::before {
   z-index: -100;
}

📋 Conclusión

☑️ La propiedad z-index permite modificar el orden de las capas.
☑️ Aunque no especifiques un valor en z-index los elementos van aparecer según su orden en el flujo normal.
☑️ Para poder utilizar la propiedad z-index primero debes posicionar los elementos.
☑️ La propiedad z-index admite valores numéricos positivos/negativos en un rango de 0 y ±2147483647.
☑️ Es recomendable no usar valores consecutivos como: 1,2,3,4,5..., se considera un buena practica separar los valores de la propiedad z-index por rangos numéricos amplios.
☑️ En algunos casos puede que no sea necesario el uso de z-index.
☑️ Si hay un elemento padre con un z-index declarado, el elemento hijo no se podrá colocar encima de el, a menos que el contenedor padre no tenga la propiedad z-index y el elemento hijo lo tenga con valor negativo, este problema también sucede con los pseudoelementos.
☑️ Si estas usando flexbox o Grid, si puedes modificar el z-index de los elementos flex o grid sin añadir position: relative.

🔎Recursos:

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok

Guía completa y práctica sobre posicionamiento CSS: position sticky

Lupita Code 🌄 — Mon, 17 May 2021 20:06:38 +0000

¡Hola gente bonita!👋

En el articulo anterior explique el posicionamiento fijo, en esta ocasión voy a explicar el posicionamiento sticky o también llamado (en español) pegajoso.

El posicionamiento sticky es relativamente mas nuevo que los otros tipos de posicionamiento y tal como dice la documentación de la MDN:

El posicionamiento sticky puede considerarse un híbrido de los posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es tratado como un elemento posicionado relativamente hasta que cruza un umbral especificado, en cuyo punto se trata como fijo hasta que alcanza el límite de su padre.

Son muy similares, pero hay algunas diferencias importantes.
Este tipo de posicionamiento se utiliza cuando queremos que un elemento se posicione en un lugar especifico y que cuando lleguemos a ese elemento al hacer scroll, se quede de forma fija.

↕️↔️ top, right, bottom, left

Las coordenadas no se usan para mover el elemento (como en los otros tipos de posicionamiento), si no que se usan para indicar en que punto el elemento tendrá un comportamiento diferente, antes de llegar a ese punto el elemento se va a comportar de manera natural.

Ejemplo 1️⃣

El ejemplo mas común es tener un slider o imagen en la parte superior y un menú de navegación debajo. Cuando hagamos scroll y lleguemos al menú, este se quedara fijo en la pagina.



<div class="slider">SCROLL TO THE BOTTOM</div>
   <nav class="nav">
       <ul>
          <li>Home</li>
          <li>Blog</li>
          <li>Contact</li>
        </ul>
    </nav>
<div class="container">
     <article>
        <h2 class="title">Lorem ipsum dolor sit amet.</h2>
           <p> lorem.. </p>
      </article>
 </div>



.slider {
    height: 300px;
    font-size: 4rem;
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: yellow;
}

.nav {
    position: sticky; ⬅️
    top: 0; ⬅️
    height: 50px;
    padding: 0.5em;
    background-color: #ccc;
}

.nav ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style-type: none;
    display: flex;
    justify-content: space-around;
}
.nav ul li {
    line-height: 2;
}

.container {
    width: 70%;
    max-width: 600px;
    margin: 0 auto;
}

article {
    padding: 2em;
    line-height: 1.6;
}

Como puedes observar, en el código CSS agregué la declaración top: 0 esto significa que cuando el menú de navegación <nav></nav> tenga 0px se mantendrá fijo al límite superior de la ventana del navegador, similar a la posición fixed.

Sin embargo, el elemento es desplazado con relación a su ancestro más cercano o su bloque contenedor. Por ejemplo, si el menú de navegación <nav></nav> se encuentra dentro de un contenedor padre (usaremos de ejemplo la etiqueta <header></header>) no tendrá ningún efecto a menos que se especifique la altura al elemento padre.



   <div class="slider">SCROLL TO THE BOTTOM</div>
        <header class="header">
            <nav class="nav">
                <ul>
                    <li>Home</li>
                    <li>Blog</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>



 .header {
    height: 500px; ⬅️
    background-color: #ccc;
}

.nav {
    position: sticky; ⬅️
    top: 0; ⬅️
    height: 50px;
    padding: 0.5em;
}

Como podemos observar el menu va a estar colocado en la parte superior del viewport mientras hagamos scroll y una vez terminemos de recorrer los 200px de altura del header, el menú de navegación deja de estar fijo. Esta es la diferencia con el posicionamiento fixed. Con posicionamiento sticky lo que esta tomando como referencia es el alto del contenedor padre (header), si no declaramos un alto al header no va a funcionar.

Ejemplo 2️⃣

Otro uso común del posicionamiento sticky es para los encabezados en una lista alfabética. En este ejemplo el encabezado "B" aparecerá justo por debajo de los ítems que comienzan con "A". El encabezado "B" se mantendrá fijado al límite superior del viewport hasta que todos los ítems "B" se hayan desplazado fuera de la pantalla, en cuyo punto será cubierto por el encabezado "C", y así sucesivamente.



<h1 class="title">Lengujes de programación</h1>
        <dl class="list">
            <div class="list-group">
                <dt class="list-header">A</dt>
                <dd>Ada</dd>
                <dd>ActionScript</dd>
                <dd>ALGOL 68</dd>
                <dd>ASP.NET</dd>
                <dd>Assembly language</dd>
            </div>
            <div class="list-group">
                <dt class="list-header">B</dt>
                <dd>Bash</dd>
                <dd>BASIC</dd>
                <dd>Batch (Windows/Dos)</dd>
                <dd>Babbage</dd>
                <dd>BuildProfessional</dd>
            </div>
            <div class="list-group">
                <dt class="list-header">C</dt>
                <dd>C#</dd>
                <dd>Clojure</dd>
            </div>
        </dl>



html {
    height: 300%;
}
.title {
    text-align: center;
}

.list {
    padding: 20px;
}

.list-group {
    padding: 0 20px;
}

.list-header {
    position: sticky; ⬅️
    top: 0; ⬅️
    padding: 10px;
    font-weight: 10px;
    background-color: #333;
    color: #00ff6c;
}

dd {
    font: bold 20px/45px Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0 0 0 12px;
    white-space: nowrap;
}

dd + dd {
    border-top: 1px solid #ccc;
}

El elemento <dt class="list-header"></dt> se va a quedar fijo en la parte superior siempre que el alto de su contenedor <div class="list-group"></div> tenga contenido.

Si quieres ver mas ejemplos, puedes consultar el articulo de CSS-Tricks: Creating sliding effects using sticky positioning.

📋 Conclusión

☑️ Al posicionar el elemento como sticky se habilitan las propiedades top, right, bottom y left, pero no se usan para mover el elemento, si no para indicar en que punto el elemento estara fijo.
☑️ El elemento es posicionado de acuerdo al flujo normal del documento.
☑️ Las dimensiones del elemento se adaptan al contenido, excepto que se haya definido su tamaño con width o height.

🔎Recursos:

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok

Guía completa y práctica sobre posicionamiento CSS: Position fixed

Lupita Code 🌄 — Mon, 17 May 2021 20:06:00 +0000

¡Hola gente bonita!👋

En el articulo anterior explique el posicionamiento absoluto, en esta ocasión voy a explicar el posicionamiento fijo o position: fixed.

Este tipo de posicionamiento es muy usado cuando diseñamos un sidebar, navbar, una ventana de dialogo, un overlay o cuando queremos hacer que un botón este fijo en la pagina web y que cuando el usuario haga click sobre el, lo regrese a la parte superior.

El posicionamiento fixed hace que un elemento se coloque respecto al viewport, Le dices dónde posicionarse al elemento, y se queda ahí mientras el usuario hace scroll. El elemento no conserva su espacio en el flujo, todo el espacio que tuviera reservado ese elemento desaparece.

↕️↔️ top, right, bottom, left

Las coordenadas top, right, bottom y left siempre son relativas a la ventana del navegador.

Al principio, cuando solo añades el valor fixed, el elemento se quedara en la posición inicial, pero cuando le agregas las coordenadas el elemento se coloca respecto a la ventana del navegador.

Como puedes darte cuenta las características mencionadas sobre el posicionamiento fijo son casi las mismas que la del posicionamiento absoluto con la excepción de que con el valor fixed, el elemento se queda en el lugar que le has indicado, esto quiere decir que cuando el usuario hace scroll en el sitio web el elemento se queda fijo o "pegado" de ahí el nombre.

Al posicionamiento fijo no le importa si hay un contenedor cercano que esta posicionado, porque el elemento jamás se colocara respecto a el, sino solo a la ventana del navegador.

Ejemplo 1️⃣

El ejemplo mas común es hacer un menú horizontal fijo.



<header class="header">
    <img class="logo-img" src="https://unsplash.it/40" alt="" />
         <nav class="nav">
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
         </nav>
 </header>




header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 5rem;
    padding: 0 3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);
}

.menu {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    display: flex;
    gap: 2em;
}

El problema es que el elemento pierde su espacio reservado en el flujo y esto hace que el menú se coloque encima de el texto (no lo empuja), esto puede solucionarse agregando al body la propiedad padding-top o bien margin-top o al elemento que contiene el texto la propiedad padding-top o margin-top.

Hay que tener cuidado con el posicionamiento fijo ya que puede cubrir algunos elementos, ocultándolos de la vista. A veces no es un gran problema en el escritorio, pero cuando estas en un dispositivo móvil y el espacio de la pantalla es limitado, esto puede causar problemas.

Aportes de la comunidad

Me ha encantado este CodePen de Steve Gardner donde nos muestra de forma divertida una pagina con un scroll infinito.

📋 Conclusión

☑️ El elemento es posicionado respecto al viewport.
☑️ Al posicionar el elemento como fixed se habilitan las propiedades top, right, bottom, left y z-index.
☑️ La posición fija es muy usada cuando se hacen menús de navegación. Lo usamos cuando un elemento debe estar siempre en el mismo lugar de la página en todo momento. Simplemente no se mueve.
☑️ El elemento no conserva su espacio en el flujo, todo el espacio que se tuviera considerado para ese elemento desaparece.
☑️ Las dimensiones del elemento se adaptan al contenido, excepto que se haya definido su tamaño con width o height.
☑️ Los elementos posicionados de forma fija no pueden moverse de su lugar y se colocan encima de otros elementos.

🔎Recursos:

Gracias por leer🦸🏻‍♀️
Mis redes sociales donde comparto notas de código:

▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok

Forem: Lupita Code 🌄

🌈 La propiedad border-radius para redondear esquinas en elementos CSS

Propiedades individuales de redondeo

Valores

¿Como funciona la propiedad border-radius?

Radios de borde superpuestos

Elliptical Border Radius

Ocho valores separados por una barra

Radios anidados

Generadores

Referencias

Unidades de Medida en CSS: Fundamentos

🔢 Tipos de Datos

📏 Unidades Absolutas

🤔 ¿Dónde puedo usar las unidades absolutas?

📏 Unidades Relativas

Unidades relativas al tamaño de la fuente

EM VS REM: ¿Cuál debería usar? | Medium

Lupita Code 🌄 ・ Sep 30, 2023 ・ lupitacode.Medium

Unidades relativas al viewport

Porcentajes %

Unidades de Medida en CSS: Porcentajes | Lupita Code | Medium

Lupita Code 🌄 ・ Sep 27, 2023 ・ lupitacode.Medium

+50 unidades de longitud...

🔎 Lecturas Recomendadas

Palabras clave en CSS: "initial","inherit","unset" y "revert"🐱‍🏍

initial

🌐 Los estilos del navegador

inherit

unset

🤔 ¿Por qué utilizar unset si funciona exactamente igual que Inherit e Initial?

revert

El nuevo reset del futuro

🔎Recursos:

La Herencia en CSS

La Cascada en CSS: Qué es y cómo funciona

Lupita Code 🌄 ・ Jun 22 '21

👨‍👦 ¿Qué es la herencia?

Propiedades heredadas y propiedades no heredadas

Propiedades heredadas

Propiedades no heredadas

🤔 ¿Por que es importante la herencia?

La palabra clave inherit

Heredar las fuentes para los controles de formularios: font: inherit;

📚 Libros de CSS consultados para este tema:

Especificidad en CSS: Qué es y cómo funciona

¿Qué es la especificidad?

Jerarquía de la especificidad

Puntuación de cada tipo de selector

*Selector Universal

¿Qué es el Box Sizing en CSS? 🤔

Lupita Code 🌄 ・ Apr 19 '21

</> Elementos y ::pseudoelementos

.clases, atributos[...] y :pseudoclases

Selector de id

Estilos en línea

🙄 ¿Qué tiene que ver !important con la especificidad?

Excepciones

Diferentes tipos de selectores, diferente especificidad

VSCODE al rescate

Metodología BEM (Block Element Modifier)

Conclusión

🔎 Recursos:

📚 Libros de CSS consultados para este tema:

La Cascada en CSS: Qué es y cómo funciona

🤔 ¿Qué es la cascada?

🔼 Las 4 etapas de la cascada

🔢 Posición y orden de aparición:

Ejemplo 1 - Orden de las reglas

Ejemplo 2 - Orden de las hojas de estilo

Ejemplo 3 - La posición de las declaraciones

📑 Especificidad de los selectores

🔎 Origen de la hoja de estilo

☝️ Importancia

2 Reglas de Oro

📋 Conclusión:

🔎 Recursos

📚 Libros de CSS consultados para este tema:

Entendiendo el Colapso de Márgenes (Margin Collapsing) 😓

📦 Modelo de caja - Margin

¿Como funciona la propiedad `border-radius`?

Lupita Code 🌄 ・ Sep 30, 2023 ・
lupitacode.Medium

Lupita Code 🌄 ・ Sep 27, 2023 ・
lupitacode.Medium

La palabra clave `inherit`

Heredar las fuentes para los controles de formularios: `font: inherit;`

El elemento `<img>`