No se ustedes, pero yo desde que aprendí notaciones cortas, o shorthands, y eso fue como al segundo día de escribir CSS, en rarísimas ocasiones he usado las notaciones completas para margin o padding. Escribir margin-top: 0; margin-right:0; margin-bottom: 0; margin-left: 0; es mucho más tardado e impráctico que simplemente usar margin: 0;.
Con margin y padding todo bien, pero hay un grupo de propiedades que hasta hace poco no nos salvábamos de escribir una y otra vez: top, right, bottom y left. Sobre al trabajar con un layout que hace uso extensivo del posicionamiento no estático, tenías que escribirlo una y otra vez.
Hasta ahora.
Inset
Inset es el shorthand hasta ahora perdido para las propiedades top, right, bottom y left. Usa la misma sintaxis de margin.
La sintaxis “clásica”
Para posicionar un elemento con en absoluto (bloque fondo salmón) dentro de otro con posición estática (borde coral), tradicionalmente hacemos esto:
<div class="relativo">
<div class="absoluto">Posición Absoluta</div>
</div>
.relativo{
position: relative;
height: 200px;
}
.absoluto{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
La nueva sintaxis con inset
<div class="relativo">
<div class="absoluto">Posición Absoluta</div>
</div>
.relativo{
position: relative;
height: 200px;
}
.absoluto{
position: absolute;
→inset: 0;
}
El cambio no parece mucho, pero sí que es menos engorroso, y sobre todo, mucho más práctico por utilizar una sintaxis que absolutamente todo aquel que haya trabajado con CSS conoce a la perfección.
Recursos:
Axel Valdez
Diseñador y Front-end Developer. Hermosillo, México.
Junio 21, 2022