An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
The Breakpoint CSS-JS "Hack" - do not define breakpoints in JS
This trick is a best practice trick. Knowing that this is a best practice I thought this is a common thing but apparently it is not as widespread as I thought it would be.
So let me share it with you.
Do not redefine your breakpoints in JavaScript/TypeScript
I am assuming you are using either native CSS or SASS for your development so let's use SASS for my code snippets now.
Assume your breakpoints are defined as follows:
mobile => max-width: 599.99pxtablet => min-width: 600px
Now what some people do is redefining those values in JS. But you can simply read the current breakpoint directly from CSS. Also you can pass all breakpoints through CSS as Single Source of Truth for UI
The trick is to use the :before
in combination with content
:
@media screen and (max-width: 599.99px) { body::before { content: "mobile"; }}@media screen and (min-width: 600px) { body::before { content: "tablet"; }}
You can access this in JS via getComputedStyle(document.body, 'before').content
and it would give you e.g. "mobile"
or "tablet"
here. So the only thing left to do is to remove the quotes like so:
const breakpoint = getComputedStyle( document.body, 'before' ) .content .replace(/"/g, '');
Now if you want to have all definitions from CSS you could do something like this:
.media-queries::before { display: none; content: "mobile=(max-width: 599.99px);tablet=(min-width: 600px)";}
Now you can read that content and use actually matchMedia
or whatever you want but the important part is to always have the Design in CSS and not duplicated in JS.
Here is an actual demo you can check out:
https://codesandbox.io/s/reading-media-queries-bps-from-css-06zjh?file=/index.html
Original Link: https://dev.to/activenode/the-breakpoint-css-js-hack-do-not-define-breakpoints-in-js-1c11
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To