Tag Archives: media queries

Take both Light and Dark Mode screenshots with Puppeteer

dark-mode-screenshot is a Puppeteer script to take screenshots of both the light and dark mode versions of a website. $ npx dark-mode-screenshot –url https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html –output screenshot –fullPage Works in somewhat odd way first requiring the OS to have dark mode enabled (?), and then launch Chromium: Once with prefers-color-scheme disabled (using –disable-blink-features=MediaQueryPrefersColorScheme) Once with Dark […]

CSS Color Scheme Queries (“Dark Mode CSS”)

Next to Safari 12.1 earlier this month, Firefox 67 now also supports “CSS Color Scheme Queries”. The prefers-color-scheme media feature allows sites to adapt their styles to match a user’s preference for dark or light color schemes, a choice that’s begun to appear in operating systems like Windows, macOS and Android. Chrome will support + […]

How to troll frontend web developers

@media only screen and (min-width: 960px) and (max-width: 970px) { body { -webkit-transform : rotate(180deg); -moz-transform : rotate(180deg); -o-transform : rotate(180deg); transform : rotate(180deg); } } That’ll teach them, constantly resizing their browser windows and what not! — Puh! (via)