Using modern CSS features to get the scrollbar width as a CSS variable

CSSTip serves as a treasure trove of knowledge for frontend developers striving to master the art of Cascading Style Sheets (CSS). Through concise tips, detailed tutorials, and creative demonstrations, readers embark on a journey to harness the full potential of CSS for web design and development. From responsive layouts to  animations, CSSTip empowers developers to create visually stunning and user-friendly web experiences.

CSS Tip

Learn how to determine the width of the scrollbar using modern CSS without JavaScript. This technique uses a CSS property and defines the value at the :root level, but it's currently supported only in Chrome.

Get the width of the scrollbar using only CSS

<p>Cool way to do it with CSS. Definitely going to have to bookmark this for later 👍🏻</p>


<p>This is the first time I’m seeing ‘@property’ syntax. Looked into a bit and it looks useful for animations. Where can I see which browsers support this syntax? I know you said it’s only Chrome for now.</p>
