@atlaskit/css-reset
v8.4.4
Published
A base stylesheet for the Atlassian Design System.
Readme
CSS reset
A base stylesheet for ADG.
Installation
yarn add @atlaskit/css-resetUsage
Standalone scrollbar appearance
Products that do not consume the full CSS reset can import only the harmonised scrollbar styles:
import '@atlaskit/css-reset/scrollbars.css';The stylesheet remains inactive until the product adds data-scrollbar-harmonisation to the
document root. Products own feature-gate evaluation and attribute cleanup. To use the transparent
track treatment, add data-scrollbar-harmonisation-transparent to that same root only while the
base treatment is active. Browser and operating system scrollbar width and visibility preferences
remain unchanged.
Avoiding a flash of un-harmonised scrollbars on SSR pages
The attributes above are normally installed on document.documentElement at runtime by
useScrollbarHarmonisation (@atlaskit/app-provider/use-scrollbar-harmonisation). On a
server-rendered page that hook only runs client-side, so scrollbars briefly render un-harmonised
until the effect fires. Products that render <html> from a server-side template can instead call
getScrollbarHarmonisationHtmlAttrs
(@atlaskit/app-provider/get-scrollbar-harmonisation-html-attrs) and spread its result onto the
server-rendered <html> element, so the attributes — and therefore these CSS rules — are present
from the very first paint.