Read more

How to read the current breakpoint tier(s) in JavaScript

Avatar
Dominik Schöler
January 10, 2023Software engineer at makandra GmbH

To read the current breakpoint tier in JavaScript, employ this CSS:

:root {
  --current-breakpoint-tier: xs;
  
  @media (min-width: $screen-sm-min) {
    --current-breakpoint-tier: sm;
  }
  @media (min-width: $screen-md-min) {
    --current-breakpoint-tier: md;
  }
  @media (min-width: $screen-lg-min) {
    --current-breakpoint-tier: lg;
  }
  @media (min-width: $screen-xl-min) {
    --current-breakpoint-tier: xl;
  }
  @media (min-width: $screen-xxl-min) {
    --current-breakpoint-tier: xxl;
  }
}
Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more

Then use this JavaScript:

// globally
getComputedStyle(document.documentElement).getPropertyValue('--current-breakpoint-tier')

// or locally
getComputedStyle(someElement).getPropertyValue('--current-breakpoint-tier')

If you're using Bootstrap and Sass, you can even do this:

\:root
  @each $name, $min-width in $grid-breakpoints
    @media (min-width: $min-width)
      --current-breakpoint-tier: #{$name}

Hat tip to Arne.

Posted by Dominik Schöler to makandra dev (2023-01-10 16:19)