Skip to main content
CSS Tip

Get the width & height of any element without JavaScript

Use modern CSS features to get the width and height of any element as CSS variables.

@property --_x {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --_y {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --w {
syntax: "<integer>";
inherits: true;
initial-value: 0;
}
@property --h {
syntax: "<integer>";
inherits: true;
initial-value: 0;
}

.size {
overflow: auto;
position: relative;
--w:calc(1/(1 - var(--_x))); /* element width */
--h:calc(1/(1 - var(--_y))); /* element height */
timeline-scope: --cx,--cy;
animation: x linear,y linear;
animation-timeline: --cx,--cy;
animation-range: entry 100% exit 100%;
}
.size:before {
content:"";
position: absolute;
left: 0;
top: 0;
width: 1px;
aspect-ratio: 1;
view-timeline: --cx inline,--cy block;
}
@keyframes x {to{--_x:1}}
@keyframes y {to{--_y:1}}

Resize the below demo to see how the values update in real-time:

See the Pen Get width/height of elements using CSS by Temani Afif (@t_afif) on CodePen.

Here is the particular case of the screen sizes

See the Pen Get screen dimension using only CSS by Temani Afif (@t_afif) on CodePen.

More detail: frontendmasters.com/blog/how-to-get-the-width-height-of-any-element-in-only-css


More CSS Tips