How to detect if the OS is in dark mode in browsers?

The new standard is registered on W3C in Media Queries Level 5. NOTE: currently only available in Safari Technology Preview Release 68 In case user preference is light: /* Light mode */ @media (prefers-color-scheme: light) { body { background-color: white; color: black; } } In case user preference is dark: /* Dark mode */ @media … Read more

@Media min-width & max-width

I’ve found the best method is to write your default CSS for the older browsers, as older browsers (including IE 5.5, 6, 7 and 8) can’t read @media. When I use @media, I use it like this: <style type=”text/css”> /* default styles here for older browsers. I tend to go for a 600px – 960px … Read more

Twitter Bootstrap 3: how to use media queries?

Bootstrap 3 Here are the selectors used in BS3, if you want to stay consistent: @media(max-width:767px){} @media(min-width:768px){} @media(min-width:992px){} @media(min-width:1200px){} Note: FYI, this may be useful for debugging: <span class=”visible-xs”>SIZE XS</span> <span class=”visible-sm”>SIZE SM</span> <span class=”visible-md”>SIZE MD</span> <span class=”visible-lg”>SIZE LG</span> Bootstrap 4 Here are the selectors used in BS4. There is no “lowest” setting in BS4 … Read more