Skip to main content

CSS Graduation Practice

Build a CSS Graduation.

––– views

Build a CSS Ruler > MDX Embed > CSS Arrow

I'm currently working on a project, where an editor can easily edit breakpoints, using a group of color-coded, stacked <input type="range">-controls.

With pure DOM coding, native style matching is most appropriate as it can effectively meet Accessibility requirements.

Here are some key points:

  • --graduation-unit represents a unit length and controls the overall scale relation between the measurements and the DOM size
  • --graduation-low-space is a variable that specifies the subdivided space of a unit length
  • The rendering of the text is using counter()
  • The positioning of the text is based on padding-inline-start and ch padding-inline-start and ch units

Demo