Polypane Blog

My take on fading content using transparent gradients in CSS

Fri, 19 Jan 2024 00:00:00 GMT

Two days ago Amit Merchant wrote a blog post on a technique to fade text out using an overlaid element based on the design of Trunk.io. He walks through how he came to this solution so go check out the article to see how it's built. Here's the end result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non pharetra lorem, ac feugiat nunc. Maecenas ac aliquet turpis. Pellentesque interdum turpis tortor, ac rhoncus nisi egestas et. Sed in ante diam. Proin ac vehicula velit. Ut fringilla mauris quis lobortis efficitur.

The effect looks great but it has two downsides:

The text behind the gradient is no longer selectable
The effect only works on solid background colors.

Both of these are also present in the Trunk.io design that Amit based this on. The first issue is easy to fix: you add this to your overlaid element:

user-select: none;

That will prevent the overlaid element from capturing mouse events, so you can select words behind the gradient as well.

The second downside requires a different approach if we want the same effect to work with a non-solid background like an image or gradient. To make it work there, we need to actually make the text fade, rather than make it look like it fades.

Modern CSS gives us not one, but two different approaches to achieve this. They have a slightly different result, so we'll go over each one and discuss their differences.

For both approaches, we're going to use the same HTML structure:

<p>
  <span> Lorem ipsum dolor sit amet consectetur [...] </span>
</p>

For this to work, we need an additional wrapper element around the text. In this case we're using a p and span, but if you already have a different container element around your p you could use that instead.

To make the effect easy to see, we'll give our p some default styling and add a gaudy background gradient:

p {
  background: linear-gradient(to right, blue, red);

  max-width:30rem;
  padding: 20px;
  border-radius: 20px;

  font-family: system-ui;
  font-weight: bold;
  color: white;
}

The end result looks like this:

With that as our backdrop, let's look at the two different ways to achieve faded content: background-clip and mask-image.

Technique one: background-clip

The background-clip CSS property lets you define where your background should be restricted to: the entire element (border-box, which is the default), inside the border with padding-box or sit only behind the content with content-box.

But background-clip has a fourth value of text. Setting this will restrict the background to be visible only behind the text.

Just doing that doesn't actually change the way it looks, because the text also has a color that overlays the background. When using background-clip: text you want to combine it with color: transparent.

Lastly to make that text fade, we're going to set the background to a linear gradient that fades from our text color (white) to transparent.

Combined, this is what that looks like:

span {
  display: block;
  background: linear-gradient(to bottom, white, transparent);
  color: transparent;
  background-clip: text;
}

And here is the result:

Notice how the text fades into the background evenly across the gradient, and how each word remains selectable because we're not overlaying anything on top of the text.

Browser support

background-clip: text is supported in all evergreen browsers and has been for quite a while (support in all evergreen browsers since 2016 when it landed in Firefox) so it's save to use.

Until fairly recently, Safari (2020) and Chromium (December 2023) required you to use -webkit-background-clip so for backwards compatibility you will probably also include the prefixed version:

span {
  display: block;
  background: linear-gradient(to bottom, white, transparent);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

Make sure to put the prefixed version before the standard declaration. In CSS the last declaration wins, so the standard will overwrite the prefixed version and be used instead

Downsides

This technique works well, but it has a downside. Because the text is now transparent, it takes on the color of the background. If your content had different colors for elements like links or other elements like emoji, those colors are either replaced or they don't fade:

Emojis: 😬🫣😱🚀✨Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem My hotpink link ipsum dolor sit amet, consectetur

If you want to keep those as well as fade the content out, we need a different technique.

Technique two: mask-image

mask-image lets you use an image (or SVG or gradient) as a mask layer, similar to how that works in graphics editors.

Usually the alpha channel of the mask image is used to determine which parts of your element are visible and which ones aren't, but you can set mask-mode to luminance and use a black-white mask instead. For our purpose though, the alpha channel is fine.

Here's what the CSS looks like for that:

span {
  display: block;
  mask-image: linear-gradient(to bottom, white, transparent);
}

As well as the rendered result:

Like the background-clip technique the words are still individually selectable, and text fades into the background evenly across the gradient. Because this is a mask across your element however, the specific colors of your text are preserved.

Emojis: 😬🫣😱🚀✨Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem My hotpink link ipsum dolor sit amet, consectetur adipiscing elit. Donec non pharetra lorem

Browser support

mask-image has been supported across evergreen browsers since 2017, so a little less than background-clip. The earlier mentioned mask-mode has only been available since December 2023 when support landed in Chromium (both Safari and Firefox had support for it since 2022 and 2017 respectively). Currently for Edge support you still need to include the prefixed -webkit- version:

span {
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, white, transparent);
  mask-image: linear-gradient(to bottom, white, transparent);
}

I'm not sure why Edge specifically has this, as it's running the same version of Chromium as Chrome and Polypane, which don't need it. So that's a little complication you have to be aware of.

Downsides

Other than the relatively recent browser support for the unprefixed version, this technique doesn't have any downsides. It's a little more flexible than background-clip because it doesn't change the color of your text, though that might be a downside if you do want to change the color of your text.

Fading text content

So that's two ways to fade text content. mask-image is a little more flexible, but background-clip is a little more widely supported. Both are great ways to fade text content, and I hope you can use them in your projects!

Polypane 17.1

Thu, 18 Jan 2024 00:00:00 GMT

Polypane 17.1 is primarily a bugfix and security release, but contains a few new features and newly supported browser extensions, as well as an updated Chromium.

What's Polypane? Polypane is the web browser for ambitious web developers. It's a stand-alone browser that shows sites in multiple fully synced panes and helps you make your site more responsive, more accessible and faster.

Twitter/X updated their card design to show the title overlaid on the image and the domain below it, and Mastodon is now more lenient in the OG images it accepts. Both are now supported in Polypane.

New browser extensions

Polypane now supports the Bitwarden password manager and the User Javascript and CSS extension.

We've added support for the chrome.tabs.getSelected API, as well as improved the way window.open works from inside extension popups. This means that more extensions will work in Polypane.

Chromium security fixes

Polypane 17.1 contains fixes for 5 security issues and now runs Chromium 120.0.6099.216. We recommend updating as soon as possible.

Performance improvements

Hover/Blur styles

For pages with lots of JavaScript, sometimes the synced hover style would get "stuck" and not update anymore. We've improved our syncing algorithm so that no longer happens, and this has also improved the performance of the syncing.

Pages with many links or headings

Polypane now uses a different method to parse the accessible name of links and headings on a page, which is two orders of magnitude faster than the previous implementation. This makes the Outline panel faster but should also noticably improve performance.

If you notice any issues with the accessible naming of links or headings in the outline panel, please let us know.

Get Polypane 17.1

Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free. No credit card needed.

Polypane 17.1 Changelog

New

New Twitter/X card design
New Mastodon design
New Support for Bitwarden extension
New Support for User Javascript and CSS extension
New Chromium 120.0.6099.216

Improved

Improved Support for more browser extensions
Improved Performance for pages with many links or headings (Thanks Sascha!)
Improved Faster and more dependable hover and unhover syncing (Thanks Todd!)
Improved Console: Different styling between strings and numbers
Improved Console: Different styling for no return value and empty string
Improved Support for Vite CSS HMR (Thanks Joshua!)
Improved Better logic for determining canonical hostnames

Security

Security Fix for CVE-2023-7024
Security Fix for chromium:1506535
Security Fix for CVE-2024-0518
Security Fix for CVE-2024-0517
Security Fix for chromium:1517354

Fixes

Fix On first launch the detached panel would be empty
Fix Prevent flickering of devtools when moving to different tab on macos
Fix New Tab not working for some users after upgrading to 17.0.0
Fix Applying workspaces from the command bar now works
Fix Opening urls from extension on Linux
Fix Zoom-to-fit of individual panes would not zoom out enough
Fix The shortcut F8 is no longer being overwritten
Fix UI bug for the address bar in full mode on small widths
Fix Links to docs and support from the Help menu

Experimental Chromium Web Platform Features

Tue, 19 Dec 2023 00:00:00 GMT

Polypane ships with the "experimental web platform features" flag enabled. This means you get to use a whole bunch of cool features as they're being experimented with in Chromium.

What's Polypane? Polypane is the web browser for ambitious web developers. It's a stand-alone browser that shows sites in multiple fully synced panes and helps you make your site more responsive, more accessible and faster.

It's the same flag that many blog posts tell you to enable when explaining a new and upcoming feature (which, again, you don't need to set in Polypane). But what exactly do you enable when you set that flag?

Which features are deemed "experimental"?

Well that question is a little hard to answer. There's chromestatus.com but that doesn't make a difference between features behind the experimental flag, and features behind any other flag.

The only place to get a proper overview is in the Chromium source itself in a file called runtime_enabled_features.json5. This lists all the flags along with their status: stable, test or experimental.

Anything that's flagged as experimental falls, you guessed it, under the "experimental web platform features" flag. But you'll have to hunt for them, and because it's a configuration file you get just the name and the status, nothing else.

A better overview

So we built a better overview, getting the experimental features for the last 3 versions as well as 2 upcoming versions of Chromium from that json5 file and then finding the accompanying description on Chromestatus when that's available (which is not always the case).

You can find the page here: experimental chromium web platform features.

In that list, you can for example see that field-sizing is now enabled, which is a new CSS feature that will let textareas and inputs automatically expand to their contents. Previously this required JavaScript or CSS trickery. That's now ready for you to use and play with in Polypane!

Finding features

On the page there's a small set of filters to help you find the feature you're looking for.

You can search the flag names to filter down the list
You can show or hide the two upcoming version of Chromium (by default we start with the current release)
You can switch between showing all the experimental features in each release, or just the features that were newly added in that release.

That makes it easy to find more info on a specific experimental feature, or get a general overview of what's newly experimental in each release.

For example, here's the overview of features that were newly added in the upcoming version 122:

You can see that a lot of the flags have no corresponding description up on chromestatus.com yet. These get added to Chromestatus by Chromium devs so we're a little dependent on them. In the future we might opt to add our own descriptions for these features.

What do you want to see?

This is our first iteration of this page, and we're looking to improve it. One of the things we will start doing is writing short articles about interesting experimental features as they become available, like CSS cross-fade(), and link those from the experimental Chromium web platform features overview.

What would you like to see added? Let us know!

Polypane 17: Meta panel updates, Reference image split slider and Chromium 120

Fri, 15 Dec 2023 00:00:00 GMT

Polypane 17 ships with new features in the meta panel, a new split slider feature in the reference image tool, an updated console.table, native window controls on Windows and it runs on Chromium 120.

What's Polypane? Polypane is the web browser for ambitious web developers. It's a stand-alone browser that shows sites in multiple fully synced panes and helps you make your site more responsive, more accessible and faster.

Meta panel updates

A large part of what makes the meta panel so useful is that it shows you what's missing from your site. This update adds a new overview of missing tags, warnings for viewport and canonical and a bunch of other improvements.

Overview of missing tags

When you open up your OG, Twitter or general meta tags, we now show an overview of the tags missing on your page. Some of these are required to make sure you get the best possible experience on social media, others are optional but recommended, or only applicable in certain situations. We explain what the tags do and if they have specific fallback tags. You can quickly copy them from the meta panel to your code.

When Polypane can, it even adds in the correct value for you. If not it copies along the description so you don't have to switch back and forth between Polypane and your code editor.

Warnings for viewport and canonical

The warnings we show for viewports now come with a copy button to quickly copy the correct viewport values. That warnings showed what you needed to change, but now we just give you the correct values as well.

We also added a warning when the current URL and the canonical URL are different. It's not always an issue and can be intentional, but it's good to know when it happens because you might be accidentally sending Google and other crawlers to the wrong page and wondering why things aren't being picked up correctly.

Other improvements

We also improved the performance of getting data both on the initial load and when re-fetching data later. The maximum suggested length for titles is now 60 characters instead of 70 to be more in line with updated SEO guidelines.

We've also disabled the 𝕏/Twitter preview when your twitter:title attribute is missing, since they will not show a preview if that's missing even if you do have an image and an og:title.

Reference image split slider

The reference image tool now has a split slider that lets you quickly compare your site to the reference image. You can drag the slider to compare the image with your site.

This is in addition to the existing transparency based reference image overlay, and will make it easier to find subtle differences.

Show page title and favicon in history and suggestions

The address bar and navigation buttons (back and forward) will now show the page title and favicon in addition to the URL. When searching for URLs in the address bar, it will now also match your page titles so finding pages is much easier.

In the Polypane address bar you can type multiple words to search for a URL. For example, if you want to go to the Polypane blog, you can type "poly blog" and it will show you Blog | Polypane - https://polypane.app/blog even though the string "poly blog" doesn't appear in either the title or the URL, but each individual word does.

We use this all the time because it's much faster to find specific pages in your history without typing everything out, but it also helps you find pages where you don't quite remember the full URL or title.

We've increased the number of options available when you right-click on images anywhere in Polypane. While previously we let you copy the image location, or save the image, we've now expanded that a lot:

Copy image copies the image itself to your clipboard
Copy alt text copies the alt text to your clipboard (We only show this if there is an alt text)
Copy as IMG tag copies the image as an IMG tag (wih alt text) to your clipboard
Copy as background-image copies the image as a CSS background-image to your clipboard
Copy as Markdown copies the image as a Markdown image (with alt text) to your clipboard

Wherever you want to use an image, Polypane can easily create the code for you. If there's a specific format you'd like to see added, let us know!

Accessible role and name in Track Focus Debug tool

A recurring question we get is for Polypane to include a screen reader emulator. We've always been hesitant to do this because while we can emulate a screen reader, they usually are very customized to the needs of that particular user in terms of what they announce and how verbose they are about it.

The risk is that people tweak their site to optimize for our "screen reader", potentially making it worse for actual screen readers. Instead, Polypane shows the accessible name and role in many different places, as that's the information that gets sent to screen readers. If you get those right, then a screen reader will use that to announce them at the users preferred verbosity.

So while it's not a screen reader emulator, we now show the accessible name and role in our Track Focus Debug tool. This way you can see the info a screen reader uses while you tab through your page.

We think this is the right compromise between the wish for a screen reader emulator and not doing unintentional harm, and want to thank René for the suggestion!

Elements panel updates

We updated the elements panel with a bunch of new features and improvements.

Scoping root and limit badges

We extended our support for @scope by now showing badges for both the scoping root (the starting element) and the scoping limit (the ending element) in the tree.

Updated class editor

The Elements panel now remembers whether you prefer the input or the list editor for classes (which lets you toggle individual classes). We also added an input to add classes to the list editor so you don't have to switch back.

Like the regular freeform input, the input in the class list editor also suggest matching classes from your HTML and CSS as you type.

New icon for forced element states

To bring Polypane more in line we switched out the "state" icon (a rhombus) for the ":hov" icon. This is what Chrome and Firefox also use, so it's more consistent across browsers.

Bug fixes

We fixed a couple of bugs in the elements panel. When copying nested CSS, the copied CSS had an incorrect nesting order.

We also fixed an issue where the specificity for nested elements without a nesting selector (the &) was incorrect.

Lastly, the container query tooltips (on the badge and on the @container rule) showed the incorrect values for the cqi and cqb.

Narrow minimum width

As the number of features grew in Polypane, so did we have to update the minimum width of the main window to make sure everything still fit. That's not a very responsive thing to do, and Charlie rightfully complained as the browser no longer fit comfortably on a laptop screen alongside a code editor.

We've now added a new minimum width design that lets you toggle between the navigation and the feature buttons, meaning the browser can now be as narrow as 500px.

Console.table

The console.table implementation in Polypane has now been expanded to support more complex objects and arrays, and you can now sort the table by clicking on the column headers.

Native window controls on Windows

The minimize, maximize and close buttons are no longer rendered by Polypane, but use native window controls instead. The native window controls in Windows 11 also have a bunch of cool placement features, and you can now use them in Polypane.

Updated Pixel device presets

We removed the Pixel 2 and Pixel 3 device presets and replaced them with the recently released Pixel 7.

Chromium 120

Polypane now runs on Chromium 120.0.6099.56, bringing relative color syntax, horizontal rules inside select, :user-valid and :user-invalid pseudo selectors, the :dir() pseudo-class selector and a bunch more.

Polypane ships with some experimental features turned on. We mention the highlights in our docs here: Experimental Chromium features

Experimental Web Platform features

Polypane has the experimental web platform features flag turned on. This enables a bunch of cool features that are still in development but ready for experimentation by web devs.

Unfortunately there is no public place where you can find a full list of all the features that fall under "experimental web platform features".

So we built one!

Check out Experimental Chromium Web Platform features for a full list of features split out by Chromium version. There you can find the feature name and summary, as well as a link to the Chrome Status page where you can find more details.

Not all experimental features are documented, we hope that will improve in the future now that we've made it more visible.

Get Polypane 17

Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free. No credit card needed.

Polypane 17 Changelog

New

New Meta panel: New overview of missing tags
New Reference image split slider
New Show page title and favicon in history and suggestions
New Accessible role and name in Track Focus Debug tool (Thanks René!)
New Elements panel: show a badge for scoping roots and limits
New Context menu options on images
New Pixel 7 device
New Chromium 120

Improved

Improved Meta panel: Viewport warnings now suggest the correct viewport values
Improved Meta panel: Show a warning when the current URL and the canonical URL are different (Thanks Wes!)
Improved Meta panel: better initial loading of data
Improved Meta panel: Update suggested max length of title from 70 to 60 characters
Improved Meta panel: Hide X card when twitter:title is missing (Thanks Pankaj!)
Improved Meta panel: improve performance of getting data
Improved Meta panel/Outline panel: Spin reload button to indicate activity (Thanks Jimmy!)
Improved Console panel: Console.table can now be sorted
Improved Console pane: Set the default levels for new tabs
Improved Elements panel: List of classes now also has an input to add classes
Improved Elements panel: preference for class list editor or input editor is now remembered
Improved Elements panel: Icon for forced states is now ":hov" for cross-browser consistency
Improved Main window can now get much smaller (Thanks Charlie!)
Improved Form Autofill: when there is a given-name autocomplete hint, use username (Thanks Eric!)
Improved Color Picker: updated design and cursors
Improved Color Picker: better clamping of RGB colors
Improved Fix missing top left icon on Windows
Improved Use native window controls on Windows
Improved Better resize performance for pane size and element attribute inputs
Improved Pressing Escape on pane size and scale resets the value
Improved Performance: better performance when scrolling in multiple panes
Improved Browse panel: Set the right context menu items depending on the URL
Improved Source panel: improve performance of getting data
Improved Outline panel: improve performance of getting data
Improved Better handling of NuxtLinks multiple navigation events (Thanks Flemming!)
Improved Ignore cert errors from the main window/support chat (Thanks Bram!)
Improved Update Inter to 4.0
Improved Accessibility Panel: updated rulesets
Improved Updated Google Fonts

Removals

Removed Pixel 2 and 3 devices
Removed Toybox Systems integration

Fixes

Fix Hide initial display of pane buttons on loading focus mode
Fix Prevent flash of incorrect font on load
Fix Searching for multiple words works again
Fix Console panel: Support for console.table for nested arrays and objects
Fix Zoom out focus mode pane on launch when needed
Fix Elements panel: Incorrect value for cqi and cqb in container badge tooltips
Fix Elements panel: correctly calculate specificity for nested elements without nesting selector
Fix Elements panel: Copying nested CSS had the parent nesting in the incorrect order
Fix JSON viewer being prevented by Chromium
Fix Meta panel: prevent resetting dark/light preference on navigation
Fix Browse panel: right-clicking tab no longer activates it
Fix Issue where the internal size of a pane wasn't updated as a result of the side panel toggling.
Fix Issue where full and focus layout would incorrectly show prefers-reduced-transparency as active
Fix Tooltips for navigation buttons no longer sits behind traffic lights on mac (Thanks Sascha!)
Fix Update color scheme for pages with color-scheme meta after changing app color scheme.

Using Selectlist in React

Wed, 15 Nov 2023 00:00:00 GMT

Selectlist is an upcoming element that replaces the native select element with a fully stylable and customizable one, while still keeping all the native interactions and accessibility features. It's a sorely needed improvement and will let you do away with all your custom select implementations.

Selectlist is an experimental feature. It's still being worked on and you can't use it in browsers yet, unless you use Polypane (...or a Chromium based browser where you have experimental features turned on.)

This isn't a full exploration of what selectlist is and can do, but a quick explainer of how to get selectlist to play nicely with React. We ran into issues while replacing some of the select elements in the Polypane UI, which is built with React, and we hope this prevents you from running into the same issues. For a nice introduction, check out Hidde's article Two levels of customising <selectlist> and for a full explainer, head over to OpenUI which is where the element is being developed.

Select in React

When you want to do something when the value in your regular select changes in th regular React way, you use the onChange prop:

<select onChange={(e) => doSomething(e)}>
  <option value="hex">Hex</option>
  <option value="rgb">Rgb</option>
  <option value="hsl">HSL</option>
</select>

And every time a user picks a new option, the onChange is fired and you can handle whatever you need to do with the event.

Selectlist in React

To "migrate" from select to selectlist, you'd expect to be able to just swap them out:

<selectlist onChange={(e) => doSomething(e)}>
  <option value="hex">Hex</option>
  <option value="rgb">Rgb</option>
  <option value="hsl">HSL</option>
</selectlist>

Unfortunately, that's not the case. When you do that you'll notice that while the selectlist value updates, onChange doesn't fire. That's because the onChange prop is a React concept, not a different notation for the DOM native change event.

React has specific code that calls the onChange function whenever the change event fires on select elements, but it doesn't know about selectlist yet so the onChange on selectlist doesn't get called.

To make it work, we need to add the listeners ourselves using useEffect and useRef:

import { useEffect, useRef } from 'react';

const OurComponent = () => {
  const selectlist = useRef();

  useEffect(() => {
    const currentSelectlist = selectlist.current;
    currentSelectlist.addEventListener('change', doSomething);

    return () => {
      currentSelectlist.removeEventListener('change', doSomething);
    };
  }, []);

  function doSomething(e) {
    // do something with the event
  }

  return (
    <selectlist ref={selectlist}>
      <option value="hex">Hex</option>
      <option value="rgb">Rgb</option>
      <option value="hsl">HSL</option>
    </selectlist>
  );
};

We use a ref to get the actual DOM element of the selectlist, and then use useEffect to add (and remove) event listeners to it manually. The listener doesn't need to change when we update the element, so we add an empty array as the dependency array of the useEffect.

To prevent event listeners from hanging around and taking up memory after we've removed the element from the DOM, we also add a return function to the useEffect to remove the event listener when the component unmounts.

Selectlist as a separate React component

You probably don't want to add that useEffect to each component you use a Selectlist in, so instead you can extract it into its own component:

const Selectlist = ({ onChange, children, value }) => {
  const ref = useRef();

  useEffect(() => {
    const selectlist = ref.current;
    selectlist.addEventListener('change', onChange);
    return () => selectlist.removeEventListener('change', onChange);
  }, [onChange]);

  return (
    <selectlist ref={ref} value={value}>
      {children}
    </selectlist>
  );
};

// and then use it like this:
const OurComponent = () => {
  // do your domain specific stuff

  return (
    <div>
      {/* your other component parts */}
      <Selectlist onChange={doSomething} value={value}>
        <option value="hex">Hex</option>
        <option value="rgb">Rgb</option>
        <option value="hsl">HSL</option>
      </Selectlist>
    </div>
  );
};

And that's how you can use selectlist in React.

Keep in mind that selectlist isn't something you can use in the wild and have work for your visitors, and that it's still in development so things might change.

We have the luxury of determining our own browser support and we're happily using it inside Polypane to improve how our Selects work without sacrificing on accessibility or existing user expectations. If you want to play around with selectlist too, try Polypane for free.

Polypane 16: workflow improvements, scoped styles and Chromium 118

Mon, 30 Oct 2023 00:00:00 GMT

Polypane 16 ships a ton of improvements to common workflows, updates to the meta panel social media previews, support for @scope in the elements panel, an update to Chromium 118 and more.

What's Polypane? Polypane is the web browser for ambitious web developers. It's a stand-alone browser that shows sites in multiple fully synced panes and helps you make your site more responsive, more accessible and faster.

@scope support in the elements panel

With Chromium 118 bringing support for scoped styles, the Elements panel now also shows them.

When there's scoped styles, Polypane shows the scoping root and end (if available), and like our container query support you can hover over the scoping root to see the element highlighted and click to inspect the element.

Scoped styles can define an end but that end doesn't actually have to be in the DOM. When that's the case, the selector is struck through in the elements panel.

Prefers-reduced-transparency emulation

You can now emulate prefers-reduced-transparency in Polypane, along with the pre-existing 7 other media features.

Prefers-reduced-transparency exists for people that have a hard time reading text on patterned background, and most operating systems have a "reduce transparency" accessibility option that this media query will match against.

Learn more about it in our complete guide to CSS Media Queries.

Meta panel improvements

The big update here is the new X (formerly Twitter) style.

New X style

X/Twitter removed almost everything in their preview apart from the twitter:image and the domain. That domain can overlap any text in the image, so make sure you put text where it doesn't get overlapped.

Domain overwriting

Our friend Charlie asked us if we could overwrite the domain in the social media previews. While you develop the domain is most likely going to be localhost, but what you actually want to see is what it will look like on your production domain.

So now you can overwrite the domain in the meta panel and have all social media previews update to that domain.

Updated Mastodon style

In Polypane 15 we mostly focused on the large image display (since that's usually what you're aiming for!) but we noticed that our small image display had some issues when there was no OG:image. Polypane 16 remedies that so even if you don't have a large image for your social media previews, everything should look as expected on Mastodon now.

Right-clicking a password field now shows a "Reveal password" option that changes the input to a regular text input, letting you see the password. Pretty handy when you need to know the password for whatever reason, and much faster than editing the attribute in the elements panel.

When clicked, "reveal password" has a checkmark, click it again to revert the input back to a password field.

Measure text now counts sentences and supports more languages.

Thanks to the INTL segmenter API, the measure text feature that counts characters and words when you right-click a selection now also supports sentences is many different languages, and does a better job of determining what is a word and what isn't.

Accessibility workflow improvements

A big focus in Polypane is always to make it easier to find and fix accessibility issues. In this release we've made a few improvements to the accessibility workflow.

Copyable content

All content in the A11y tab in the elements panel is now copyable. You could get to all that information through other means, but now you can just copy it and paste it wherever you need it. Thanks to Eric for requesting this.

Quickly zoom in to 200% and 400%

Websites being able to zoom into 200% and 400% without breaking is required for WCAG criteria 1.4.4 Resize text and 1.4.10 Reflow, respectively. So zooming to those specific values is something many accessibility testers do a lot.

To help with this, we've now added added them as option to the command bar, along with the pre-existing page zoom options. Thanks Ian for asking for this feature.

While we would love to support zooming in at different levels at different panes so you could check these zoom levels side-by-side in one go, unfortunately Chromium's page zoom works on an origin level. This means any open page on the same domain is updated when the zoom percentage changes.

Highlighted aria-hidden

The aria-hidden attribute removes an element from the accessibility tree, but it's easy to miss that attribute being there (or higher up the DOM tree) and wasting time trying to find why the element doesn't have the accessible name you think it should have.

To prevent you from wasting time there, we now highlight aria-hidden in the tree view in the elements panel. Thanks Scott for helping us come up with this!

Should we highlight more attributes? Let us know!

Export Cookies for Polypane Cloud

The storage panel now has an export button for the cookies, that copies them to the clipboard in a format supported by Polypane Cloud, Playwright and Puppeteer.

If you need to test a website with, for example, a logged in state, or with cookies accepted, then you can configure that in Polypane, then export the cookies and use them in Polypane Cloud so it has the right levels of access.

Updated React DevTools

Due to Electron not supporting some of the newer Chrome Extension APIs, we had to run an older version of the React DevTools. In The most recent Electron versions those newer APIs have become available, so we can now run the latest and greatest again.

Notable Fixes

We always ship with a bunch of fixes, these are some of the more notable ones.

Browse panel reloads

When the fragment identifier changed (the part after a # in a URL), the browse panel incorrectly reloaded the entire page. In the case of 1Password and Figma that unfortunately led to issues with getting logged out, or continuously reloading the page. This is now fixed. A bunch of you reported this, thanks for that!

Service workers

The work we did to support Cloudflare's Captcha in Polypane 15 unwittingly broke service workers for some websites. We had to revise the way we deal with Cloudflare's Captcha's (and luckily they also improved the support for Polypane on their side in the mean time!) to make sure that service workers still work. Thanks Sander for reporting this!

Chromium 118

Polypane now runs on Chromium 118.0.5993.89. This means we now ship support for scoped styles, prefers-reduced-transparency and the <search> element.

We've also enables new flags so you can try out upcoming features like the scripting media query and the relative color syntax. View the full list here: Experimental Chromium features.

Get Polypane 16

Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free. No credit card needed.

Polypane 16 Changelog

New

New Elements panel: Scoped Styles support
New Toggle Password field context menu option
New Meta panel: X social media preview
New Meta panel: Overwrite domain in social media previews (Thanks Charlie!)
New Prefers-reduced-transparency emulation
New Command bar options to zoom to 200% and 400% (Thanks Ian!)
New Storage panel: Export cookies for Polypane Cloud, Playwright and Puppeteer
New Chromium 118

Improved

Improved Measure text now also counts sentences, better language support
Improved Elements panel: a11y tab content is now copyable (Thanks Eric!)
Improved Elements panel: aria-hidden is now highlighted in the tree view (Thanks Scott!)
Improved Elements panel: Support for new CSS properties like overlay and transition-behavior
Improved Meta panel: Improved Mastodon previews without og image.
Improved Tooltips: More resilient tooltip styling for sites using popovers
Improved Browse panel: Also support installing extensions from new Chrome Web Store
Improved Browse panel: now uses local version of favicons
Improved Browse panel: added Phind search engine
Improved Debug tools: Contrast checker performance
Improved Quicker resizing of full layout web page when resizing the browser
Improved Updated screenshot tool
Improved Support the latest react devtools
Improved Better color-scheme: dark support
Improved Performance improvements across the app
Improves Storage panel: improve the UI of the buttons

Fixes

Fix Lorem Ipsum browser extension installation failing
Fix Debug tools: Aria overlay not removing on removal
Fix Debug tools: Fix Dyslexia simulator
Fix Browse panel address bar menus overlapped icons by 1px
Fix Browse panel no longer reloads when the fragment identifier changes
Fix Browse panel now follows color-scheme of page
Fix Browse panel resetting search engines now works properly
Fix Elements panel: arrow number changing in attributes
Fix Elements panel: height of tree view was not correctly remembered
Fix Tooltip: Missing text for accessible names was cut off
Fix Tightened our Sentry configuration to send less data (Thanks Chris!)
Fix Fix issues with service workers (Thanks Sander!)
Fix Don't scroll to last pane on a hard reload (Thanks Peter!)
Fix Main menu now also closes when clicking into a pane (Windows only)
Fix Share popup could fall behind browse and devtools panels
Fix Storage panel scrolled too far

Where to put text so it doesn't overlap in the new X (Twitter) preview (2023)

Mon, 09 Oct 2023 00:00:00 GMT

X (Twitter) recently updated their link previews to hide both the title and description, and overlaying the domain on top of the image.

While this isn't great when it comes to accessibility, discoverability and the dissemination of fake news, as many have pointed out, it also means that text in your share image can be obscured.

For example, here's what the BBC's sharing images currently look like:

In their case, they've been putting their logo in the bottom left of the image, which is right where Twitter is now overlaying the domain. To prevent that from happening, we need to find the safe zone for text.

The new URL overlay

X's new URL overlay is positioned in the bottom left of the image, 12px from either side and is itself 20px high. The width is dependent on the length of the URL, but with a font-size of 13 pixels it's never going to be extremely wide. For example, the BBC URL in the image above is 64px wide.

Unfortunately, that overlay is shown at the same size on top of differently sized images, so just looking at the default width and height of the image served by X (680px by 383px) and keeping the bottom 32px free isn't going to cut it. For example while this image looks fine in the Twitter web ui:

The text is overlapped by the URL when the post is shown in Tweetdeck even though the overlay is slightly less high at a total of 27px because of less spacing and a smaller font-size:

Tweetdeck seems to be the worst case, so we can use the dimension there to calculate the safe zone.

The safe zone

To find the safe zone we need to know the percentage that the url overlay takes up of the height of the image in Tweetdeck, and then extrapolate that to the full size of an image.

In Tweetdeck the image is 147px high and the URL overlay takes up 27px of that, which is 18.36% of the height. That's the height without any sort of space above the url overlay, so if you want to be safe you can increase that percentage a little to 20%, which is 29 pixels on Tweetdeck and ends up being 77px on the full size image, assuming you use 680x383px images.

If you use a different size, for example 1280px by 720px which we use on our site, or 1360px wide and 766px height which is exactly @2x you can calculate the safe zone by multiplying the height of the image by 0.2:

dimensions	height	safe zone
680x383px	383px	77px
1280x720px	720px	144px
1360x766px	766px	153px

Template overlays

If you want to update your own social media images you can use the template overlays below to find the safe space for your images.

The overlays are transparent pngs with a 20% red fill, so you can put them on top of your images in your image editor of choice and then move your text around until it's not overlapped by the red.

680x383px

Template for 680 by 383px images:

1280x720px

Template for 1280 by 720px images:

1366x766px

template for 1366 by 766px images:

Pixel perfect preview

If you want to see exactly how your social previews will look with the new design, keep an eye out for the next release of Polypane. Polypane has pixel-perfect previews for nine different social media platforms, X included.

We immediately went to work to implement the new design as soon as X made the change:

The upcoming version of Polypane includes a pixel perfect preview of the new X cards, so you can see not just how much space you should keep free vertically, but also see exactly how much space your URL will take up horizontally.

Sign up for the newsletter to be notified when the next version is released, or head over to our page on social media previews to learn more about our pixel perfect social media previews.

Using the Intl segmenter API

Tue, 03 Oct 2023 00:00:00 GMT

The Intl API in browsers has a ton of functionality around editing and formatting of text and numbers. While filling in the State of HTML survey I came across one feature I hadn't seen before: the segmenter API. Upon looking into it I found out that it allows you to break up text into segments based on the language of the text.

This caught my attention because I recently implemented a text measurement feature and I was very annoyed that I managed to only support western languages using latin characters and spaces to separate words.

I spent a lot of time with npm packages, regexes and a lot of trial and error to try and support other languages but didn't end up with a solution for them.

Enter the segmenter API.

How we use the segmenter API in Polypane

/Whenever you select text in Polypane and right-click to open the context menu, we'll show you the characters, words and emoji in the text selection.

Use this to quickly check if you've written the right number of characters for a tweet, or if you've written the right number of words for a blog post.

Setting up the segmenter API

First the bad news. The segmenter API is available in Safari from v14.1 and Chromium from v87, but it's not in Firefox yet. There is a polyfill but it seems pretty heavy.

To use it, first you create a new segmenter. That takes two arguments, a language and a set of options.

const segmenter = new Intl.Segmenter('en', { granularity: 'word' });

The options object has two properties, both of which can be omitted:

localeMatcher has a value of 'lookup' or 'best fit' (default) with 'lookup' using a specific matching algorithm (BCP 47) and 'best fit' using a looser algorithm that tries to match the language as closely as possible from what's available from the browser or OS.
granularity has a value of 'grapheme' (default), 'word' or 'sentence'. This determines what types of segments are returned. Grapheme is the default and are the characters as you see them.

Then, you call segmenter.segment with the text you want to segment. This returns an iterator, which you can convert to an array using Array.from:

const segments = segmenter.segment('This has four words!');
Array.from(segments).map((segment) => segment.segment);
// ['This', ' ', 'has', ' ', 'four', ' ', 'words', '!']

Each item in the iterator is an object, and it has different values depending on the granularity but at least:

segment is the actual text of the segment.
index is the index of the segment in the original text, e.g. where it starts.
input is the original text.

For the word granularity, it also has:

isWordLike is a boolean that is true if the segment is a word or word-like.

Sp you might have looked at the array and said "well those white spaces aren't words, are they?". And you'd be right. To get the words, we need to filter the array:

const segments = segmenter.segment('This has four words!');
Array.from(segments)
  .filter((segment) => segment.isWordLike)
  .map((segment) => segment.segment);
// ['This', 'has', 'four', 'words']

And now we know how many actual words that sentence has.

Instead of words like the example above, you can also ask it to segment sentences, and it knows which periods end sentences and which are used for e.g. thousand separators in numbers:

const segmenter = new Intl.Segmenter('en', { granularity: 'sentence' });
const segments = segmenter.segment('This is a sentence with the value 100.000 in it. This is another sentence.');

Array.from(segments).map((segment) => segment.segment);
// [
//    'This is a sentence with the value 100.000 in it.',
//    'This is another sentence.'
// ]

There are no isSentenceLike and isGraphemeLike properties, instead you can count the number of items directly.

Support for other languages

The real power is that the API doesn't just split strings on spaces or periods, but uses specific algorithms for each language. That means the API can also segment words in languages that do not have spaces, like Japanese:

const segmenter = new Intl.Segmenter('ja', { granularity: 'word' });
const segments = segmenter.segment('これは日本語のテキストです');

Array.from(segments).map((segment) => segment.segment);
// ['これ', 'は', '日本語', 'の', 'テキスト', 'です']

Now to be fair, I can not read Japanese so I have no idea if this segmentation is correct, but it sure looks convincing.

Compared to string splitting or regexes, this is a lot more accurate and handles non-latin characters and punctuation correctly, needs less code and doesn't need additional checks and tests. Browsers ship with understanding of a large number of languages, so you don't have to worry about that either.

Dig into the Intl API

The Intl API has an incredible number of useful tools for creating natural language constructs like lists, dates, money, numbers and more. By and large it's easy to work with, but it uses a lot of very precise terminology that you might not be familiar with (for example, "grapheme" instead of "character", because the latter is too ambiguous), so it can be a bit daunting to get started with. If you've never used it check out the MDN page on Intl.

As for Polypane, you can bet the next version will have text measurement option that works across languages and also tells you the number of sentences in any text you've selected.

Announcing Polypane Cloud: Accessibility testing for entire sites

Thu, 28 Sep 2023 00:00:00 GMT

Today we're announcing Polypane Cloud. A new product that allows you to test the accessibility of an entire site in one go, based on all the tests and checks we've developed for Polypane in the last couple of years.

It has two parts:

The cloud environment, where you can test your site and get an overview of the pages and issues found.
An open source generator that creates a HTML or PDF report that can be expanded with manual testing results.

The two parts are glued together by our EARL export. Together these make an end-to-end solution that helps accessibility auditors be much more effective.

Unburdening accessibility auditors

An auditor shouldn't have to waste time hunting for and listing all the color contrast violations on a site. With Polypane Cloud, we give accessibility auditors time back to focus on the parts where they can make the most impact.

By automating the parts that can be automated, we can make sure that the time of an auditor is spent on the complex situations and provide guidance to their clients.

We're in the process of onboarding testers in our closed beta. If you're interested in helping out and getting early access (and don't mind sharp edges), sign up here.

We're specifically looking for accessibility auditors at the moment.

By us, and our friends

Polypane cloud is a collaboration between Polypane and various accessibility experts, to make sure that what we're creating is directly usable and unburdening. It's supported by SIDN Fonds without which we couldn't have built it. We're very grateful for their support.

It's been a long time in the making, and we have a lot of plans for the future, but we're excited to finally be able to share it with you.

A preview of Polypane Cloud

When you sign up for Polypane Cloud, we create a team for you where you can invite your team members and add sites to test. You can add as many sites to a team as you want, and you can test them as long as you have credits (We'll have a generous free plan available for anyone looking to get started).

When you add a site, we'll crawl it and find all the pages on it. We'll then test each page for accessibility issues and show you the results. Currently, you'll find our Heading, Landmark, Meta and Accessibility reports in the overview, with more to come. You can then click through to each page to see the issues on that page.

We know many auditors have their own way of working and ways of explaining different issues and how to fix them, so in Polypane Cloud all the issues can be customised as well as translated.

These customisations are automatically shared between your team, so you can work together and have a cohesive set of explainer texts for your reports. Each team can have multiple sets and copying values from different sets is easy as well.

This means you can provide reports in different languages, different levels of complexity or whatever else you need.

The open source reporting tool

For each test Polypane Cloud also generates an EARL file. This is an open JSON format specifically for encoding accessibility results, so perfect for what we need.

With the exported EARL file you can create ready-to-go reports using our open source eleventy-wcag-earl-reporter, which is based on eleventy-wcag-reporter by Hidde de Vries.

This tool can read in the EARL file created by Polypane Cloud and create an HTML report that can also be saved as a PDF. The format is open source and both an example EARL export and the schema are available in the repository for others to work with.

We're hoping that the EARL file will also find a home in other accessibility testing and auditing tools, so it can be exported by and imported into the tools you use to build your reports.

We're already in touch with a few of them, and if you're building such a tool, please get in touch! We're excited to make this work for everyone.

Why we created Polypane Cloud

Many people love the accessibility features in Polypane because they go a level deeper than what you usually find. While Polypane points out what's wrong, it also explains why it's wrong and how to fix it in the context of what they're working on. This way, accessibility becomes a part of your workflow, rather than something you have to do separately.

However, because Polypane is a browser, and browsers display pages and not websites, these checks have only been available to check on a per-page basis. Since we've launched accessibility features in Polypane people have been asking us for a way to test entire websites.

During this time we've also been talking with a lot of accessibility auditors and discussing how they work. We realised that there is a need for a tool that takes what we do in Polypane and runs it across entire websites. We've been working on Polypane Cloud for the last year and a half (!) and can't wait to share it with you.

Join the mailing list here to be kept up to date with what's happening with Polypane Cloud, and a massive thanks for the folks who have been helping us get to here.

Polypane 15: Fully featured browser in the browse panel, performance improvements, Chromium 116 and more

Mon, 11 Sep 2023 00:00:00 GMT

In Polypane 15 we rebuilt the browse panel so that it's now a fully featured browser with tabs, pinned tabs, search and autocomplete.

We also improved performance throughout the app, added new features to the elements panel, added support for remote debugging and we're now also running on Chromium 116.

What's Polypane? Polypane is the web browser for ambitious web developers. It's a stand-alone browser that shows sites in multiple fully synced panes and helps you make your site more responsive, more accessible and faster.

New Browse panel

Since the inception of the browse panel we've been planning to add tabs and search to it. A major concern was to make sure that the browse panel wasn't taking resources from the panes and that it wouldn't slow down the app. We found a nice way to do it!

That's right, we built a browser into our browser.

With the browse panel now having tabs (which live alongside your project/main tab) and pinned tabs (which are available in all projects/tabs), you can have all the external resources you need right inside Polypane, doing away with a major source of context switching.

Search support

People have been asking us for search support for a long time too, and that just didn't make sense for the main UI in Polypane. But it does for the browse panel! The address bar in the browse panel works like an omnibox, so if you fill in something that's not a URL, we'll search for it in your default search engine.

That default search engine is configurable, and we ship with a whole bunch of them to make it easy to pick and switch, as well as an editor that lets you add your own (or update the existing ones).

Quick search

You probably don't always want to search in your default search engine, sometimes you want to look up something in a specific one, like MDN. You can do that by prefixing your search with the first few letters of a search engine name, like m query for MDN or ec query for Ecosia.

There's a bunch more features, like installing Browser extensions and setting a homepage and more. You can read all about it in the browse documentation.

Let us know what to do about shortcuts

The one thing still missing is browse-panel specific keyboard shortcuts. We'd like your input!.

Should we use the same shortcuts as the main UI (like ⌘ T ) but look at whether the browse panel is focused, or should we use different shortcuts (like ⌘ ⌥ T )? Let us know!

Search from the regular address bar!

Most people's muscle memory is likely to still use the main address bar so when you fill in a search query there, we forward it to the browse panel. And here too you can search with the first few letters of a specific search engine to pick that one.

Performance improvements

In this release we profiled many different parts of the app and made a lot of improvements to make Polypane faster and more responsive.

We had a pretty big performance issue where many network requests (like those done by Next, Gatsby etc) inside the panes would really slow down the UI. A lot of the feedback about performance that we've been getting since the past release was related to this, and I'm happy to say that we've resolved this problem!

We also improved the responsiveness of a number of debug tools and common actions by decoupling their UI responsiveness from the rest of the application. The result is that Polypane is now much more responsive and snappy.

If performance was an issue for you in the past, give Polypane 15 a try!

Remote Debugging support

Many IDEs have a setting where they can open a browser and connect to it for debugging. This is called remote debugging and it's a great way to have your site visible in your browser, but get all the debugging info in your IDE alongside your code.

Turns out, we already had basic support for it! We only needed to do a little bit of work to bring it up to proper support. Use the CLI command to open Polypane with remote debugging enabled or configure your IDE to open Polypane with remote debugging enabled.

$ polypane --remote-debugging-port=4321

Thanks for Benjamin to get the ball rolling on this, and thanks to the WebStorm team to helping me figure out how they call the browser so we can correctly react to it. You can find the instructions for WebStorm here: Configuring WebStorm to work with Polypane and we'll be adding more IDEs soon.

Elements panel improvements

The elements panel is one of the places where we spent time improving performance, as well as making a bunch of smaller tweaks:

Layout debugging for subtree of selected element

You can now turn on layout debugging for just the selected element and its children. Super useful if you want to focus in on the structure of one particular part of the page without having to turn on layout debugging for the entire page. Thanks Rik for suggesting this one!

Support for complex @layer nesting

We now resolve a whole bunch of advanced and complex nested @layer rules, none of which you should use but that we support anyway. So if you write stuff like this:

@layer components, components.alert;

@layer {
  @layer ihaveaname { ... }
}

@layer components {
  @layer table {
    @layer thead { ... }
    @layer tbody { ... }
  }
  @layer table.tfoot { ... }
}

It'll be correctly resolved to this:

In the screenshot you can see some of the layers are more prominent. We dim all the layers that do not apply to the currently selected element, so you can quickly see which layers are relevant for the element you're currently inspecting.

Thanks to Project Wallace for getting us to improve our existing implementation. While Polypane uses the page's CSSOM to get the styles, Project Wallace inspects your CSS sources and gives you all sorts of insights. They have a cool @layer visualizer you should check out.

Nesting indicator lines in the tree view

Your code editor (probably) draws lines to show you the nesting of your code and that's really helpful. So we now do the same in the tree view in the elements panel.

It's a small thing but it makes it much easier to see the structure of your page.

Debug tab improvements

The debug tab in the elements panel is all about showing element properties that often cause issues in a clear overview. We added a couple more:

The rendered font. This is also visible in the navigator and on inspecting elements, but it's nice to see here alongside other items.
The currently used source for videos (we already showed this for images) so you know which of your source files is being used.
The container type when an element is a container, so you know container queries use its size.
The natural size of an image, so you can see if it's being resized.

Container query unit previews

Along with the actual size of a container, which we show when you hover over the container badge, we now also show you how much 1cqw and 1cqh for this container is in pixels, so you don't have to do that math yourself.

Mastodon preview

We're continuing to add more social media previews to Polypane. This time we added Mastodon, the open source social network, bringing the total up to nine, which we think is the most extensive preview collection of any tool.

Mastodon is interesting because while their code is open source (which makes it much easier to see how they build their preview!) they actually use json-ld as their primary source of data, and that's a fair bit more complicated than just getting some meta tags.

On the plus side, they get to display much richer previews, including the author, date and publisher, all of which we accurately reproduce in Polypane.

Other changes

Smaller but still useful new features that are worth mentioning:

Platform emulation

Alongside a user agent, your browser also communicates the platform it's running on, and this doesn't automatically change when you change your user agent. Some sites use this to serve different content to different platforms, so we now support changing the platform in the emulation settings.

All existing devices have been updated to correctly emulate their platform.

Cloudflare captcha

Cloudflare is a popular CDN and security service that many sites use. They have a captcha that they show when they detect suspicious traffic, and previous versions of Polypane failed that captcha for a number of different reasons.

We worked with the Cloudflare team to prevent this from happening and while they couldn't tell us anything about their algorithm, we're happy to say that Polypane no longer triggers the captcha.

Thank you Andrew for putting this on our radar and the Cloudflare team for helping us out!

Debug tools improvements

The macular degeneration debug tool is now interactive, like the glaucoma and tunnel vision ones. All interactive debug tools, like the target size debug tools, have been made more performant by decoupling their update speed from the rest of the page.

New installer image on macOS

We hadn't updated the macOS installer background since launching Polypane and it started to show, so we updated it to a more modern look.

Chromium 116

Polypane now runs on Chromium 116.0.5845.141, which means we have support for animating display, CSS Motion path and from Chromium 115: display with two values.

We've also enables new flags so you can try out upcoming features like accentcolor, anchor positioning, @scope and exponential functions in CSS. View the full list here: Experimental Chromium features.

Get Polypane 15

Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free. No credit card needed.

Polypane 15.0.1 Changelog

This version bumps the Chromium version to fix CVE-2023-5217.

Polypane 15 Changelog

New

New Full-featured side browser
New Support for search in address bar
New Support for remote debugging
New Debug tools: Interactive macular degeneration (Thanks Severin!)
New Mastodon preview
New Support Cloudflare Captcha (Thanks Andrew!)
New Platform emulations
New Chromium 116

Improved

Improved Console panel: no longer scrolls to bottom when new messages arrive
Improved Outline panel: Focus order also shows warning for going straight up
Improved You can now hover and scroll over zoom slider to zoom in/out
Improved Container query info tooltips show the size of 1 cqw/cqh
Improved 'Getting started' is now called 'Quick start'
Improved Console panel: now also shows the request headers (Thanks Jay!)
Improved User agent overwrites are now consistent for all subresources
Improved Better support for Wayland
Improved Full page screenshots now support more website configurations (Thanks Killian!)
Improved Focus layout header works the same as the full layout
Improved Updated workspace presets
Improved New installer image on mac
Improved Devtools: Open urls in Browse panel
Improved Elements Panel: Layout debugging for subtree of selected element (Thanks Rik!)
Improved Elements Panel: Support for complex @layer nesting
Improved Elements Panel: Improved inheritable properties list
Improved Elements Panel: draw nesting indicator lines in tree view
Improved Elements Panel: improve hidden element styling in tree view (Thanks Ahmad!)
Improved Elements Panel: New features in the debug tab
Improved Elements Panel: improved performance of computed tab
Improved Web vitals: Prevent duplicate requests for CrUX data
Improved Performance: more responsive interactive debug tools
Improved Performance: No longer slows down the UI on network events
Improved Overal UI performance and responsiveness
Improved Remove full browser layout as option during onboarding
Improved .deb installations of Polypane can now also be auto-updated
Improved Experimental chromium flags added
Improved Updated google fonts

Fixes

Fix Outline panel: non-http links no longer show a spinner after checking.
Fix Incorrect position of status bar in full layout with address bar hidden
Fix Reference image didn't work on Windows (Thanks Jessica!)
Fix Dismissing the Quick Start didn't hide it on page load (Thanks Maria!)
Fix Page down in horizontal mode sometimes scrolled vertically
Fix Restart issue on Mac (Thanks Charlie!)
Fix Elements panel: hidden elements could show incorrect box model info
Fix Element Panel: Computed tab can now edit elements again
Fix Meta panel: The Facebook preview had a scrollable description

Polypane 14.1: Container query support, forced element state and contrast lines in color pickers

Wed, 12 Jul 2023 00:00:00 GMT

Container queries in the Polypane Elements panel, color pickers now show contrast lines, the ability to force pseudo states like hover or focus on elements, a new Cascade layer tree overview, new devices and better handling of forms and URLs across panes.

What's Polypane? Polypane is the web browser for ambitious web developers. It's a stand-alone browser that shows sites in multiple fully synced panes and helps you make your site more responsive, more accessible and faster.

We also fixed the stupid bug that prevented you from scrolling in panes sometimes. Sorry about that one!

Container queries in the Elements panel

For the container query support in the Elements panel we took a step back to figure out what the questions are that you want answered when dealing with container queries, and designed UI to deal with those.

In the tree view you can see at a glance which element are containers through the "container" badge. Hovering the badge will show you the container query's name, type and size, so you don't need to click and inspect to get a general idea of the container (is it only inline-size or not, what are the relevant dimensions?) Clicking the badge highlights it in pages just like the flex and grid layout overlays.

Then in the style overview, container queries are annotated with the container properties and a link to the containing element. Hover over them to quickly see the same name, type and size information as in the tree view. This helps a lot when you use container query units, as well as figuring out which container you're dealing with.

You can click the containing element to inspect and edit it so you don't have to hunt across the tree view for it. This is especially useful with nested container queries.

Implementing container queries in the elements panel was a huge undertaking. There are no client-side APIs to know whether a container query applies or not so we had to write our own parser for container queries. The result though is that support for container queries is now deeply integrated into the elements panel.

Other Elements panel improvements

Along with container query support, we've made a few other improvements to the elements panel.

Set the element state

You can now set the state of an element in the elements panel. This allows you to force pseudo states like :hover or :focus on elements, or to force the :active state of a button. This way you can see how your site behaves in different states without having to interact with it, and you can debug styling issues with pseudo states.

Elements with a forced pseudo state get a badge in the treeview so you can see at a glance which elements have a forced state.

Cascade layer overview

Last year in Polypane 8 we added support for the new @layer CSS rule. We've now updated our support for Cascade layers with a new CSS layers overview.

The overview shows all your layers in a nested overview so you can quickly see the structure of your layers. In addition, layers that are not applicable to the current element are greyed out, so you can see at a glance which layers are relevant for the styling of the currently selected element.

Send an element's text and background colors to the color picker

Click on the contrast ratio rating in the Element Navigator or A11y tab will send the text and background colors to the color picker. There you can adjust the colors and see the contrast ratio update in real time, or create a swatch screenshot to share with your team.

Showing the resolved CSS selector

The resolved selector is the CSS Selector that your browser uses to match elements, and it's not always the selector you write.

With CSS Nesting, the actual selector that the browser uses to match elements is resolved from the nesting where each & gets replaced with the parent selector wrapped in :is().

When hovering the specificity score, we now show the resolved selector. You can still click the specificity to open the CSS specificity calculator.

Contrast lines in all color pickers

Color pickers across the app are now aware of the background color and contrast ratio and they will show lines for AA, AAA and APCA contrast ratios.

The three lines correspond to 3:1, 4.5:1 and 7:1 for WCAG, and Lc 45, Lc 60 and Lc 75 for APCA.

In the elements panel, the color picker will automatically detect what type of contrast it needs (small text needs 4.5:1, while large text or border colors need 3:1) and in the color picker UI you can choose what contrast ratio you want to meet.

The line that is highlighted is the one you should meet, so it becomes very easy to find a better contrasting color.

Though currently exclusive to Polypane, the contrast lines will find their way to colorcontrast.app in the future.

New hover sync engine

We've completely rewritten the sync engine for hovers and it's now much more robust. Hover styling is now also applied to child nodes and pseudo elements, and we no longer show stale hover styles after editing them. The new sync engine is also faster which should result in more responsive panes.

Distance between guides

By default, guides show the distance to the edges of the pane, but you can check 'Show distance between guides' to show the distance between all shown guides.

This is useful when you want to check the distance between two elements, or when you want to check the dimensions of a group of elements.

Notable bug fixes and core improvements

You can find all changes below in the changelog but we wanted to call out a few:

Scrolls not being captured by panes

Many of you noticed this unfortunately, but when your mouse entered the pane from a certain angle, scroll events weren't properly sent into the pane but instead to the workspace.

This was due to some work we did to make pane resizing more efficient in 14.0. It's now fixed and scroll events are properly sent to the pane.

Better handling of forms and URLs across panes

We've made two improvements to the way URLs and forms are handled in a multi-pane setup.

When submitting a form, Polypane will only submit it in a single pane to avoid sending the same form submission multiple times. We've increased the number of situations where we can correctly detect and prevent a form submission.

For URLs, we no longer normalize the search params of URLs when syncing them across panes. This helps in situations where the order of search params is assumed by the JS on the page, or when there is a specific encoding used in the search params (as our implementation also normalized the encoding).

The result is that when dealing with forms or URLs with search params, you should encounter less issues when syncing across panes.

Meta panel improvements

The meta panel now warns you when the urls to your og images are incorrect, and we've updated the previews for Twitter, LinkedIn and Google. In addition, we've also improved the handling of robots.txt and humans.txt files so you'll see requests for those those even less when running a dev server.

What can we do for you?

As you've seen in the changelogs for this release and the past few releases, many features have come from Polypane's users. We love getting feedback and one of the best things about having devs as users is that they are very good at feature requests.

So consider this an open invitation: What is missing from Polypane? What's the one thing we should do that makes Polypane amazing for you? What nit would you just love we fix? Let us know! 🙏

Get Polypane 14.1

Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free. No credit card needed.

Polypane 14.1 Changelog

New

New Color pickers now show contrast lines
New Hover sync engine that supports child and pseudo element syncing
New Elements panel: Set the element state
New Elements panel: Support for container queries
New Elements panel: Show container badges in tree view
New Elements panel: Cascade layer tree overview
New Show distance between guides
New New Samsung Galaxy s22 devices

Improved

Improved Meta panel: Request robots.txt, humans.txt etc less often
Improved Meta Panel: updated Twitter, LinkedIn and Google previews
Improved Meta Panel: extra warnings for incorrectly linked og images
Improved Elements panel: Clicking contrast info opens the color picker with the colors selected (Thanks Eric!)
Improved Elements panel: Show the real size, type, name and size query of container elements
Improved Elements panel: The resolved selector is shown as tooltip when hovering the specificity (Thanks Bart!)
Improved Clicking the session in the address bar opens the session manager
Improved Add a warning for the next dev server with App directory
Improved URL handling of urls with search params (Thanks Ferry)
Improved Duplicate tab context menu now allows for picking a new layout (Thanks Dash!)
Improved Prevent additional form submissions in panes for <input type=submit> (Thanks Alessandro!)
Improved Better visual design for the session indicator of tabs
Improved Better permission prompt for access to clipboard write access
Improved Improved scrolling in pane options
Improved More known CSS properties
Improved Updated accessibility ruleset
Improved Updated Google Fonts list
Improved Updated Chromium to 114.0.5735.134

Fixes

Fix issue with scrolls not being captured by panes (Thanks Adam and many others!)
Fix Screenshots setting to directly save to disk/copy to clipboard work again (Thanks Adrian!)
Fix Correct URL for geolocation API info in permission prompt (Thanks Neal!)
Fix Browser-sync button opens correct page (Thanks James!)
Fix Hide devtools when extension manager or session manager is open
Fix Panel UI is now clickable on macOS with the header hidden (Thanks Trond!)
Fix Chrome devtools bounds were off by 1px
Fix Storing workspaces on first launch failed (Thanks Ilker)
Fix Elements panel: workaround for issue where CSSOM returns faulty info for background-clip property
Fix Elements panel: Box model overview said NaN instead of 'auto'
Fix Elements panel: contrast score in dark mode had incorrect background

Offset parent and stacking context: positioning elements in all three dimensions

Thu, 06 Jul 2023 00:00:00 GMT

They are fundamental CSS concepts you use every single day whether you know it or not: the offset parent and stacking context. In this article we'll explore how you can use them to position elements in all three dimensions, and how to debug them.

Prefer video?

Kevin Powell and I recorded a video on the offset parent and stacking context as well so if you prefer video, you can find all the info here:

Offset parent

When you position your element with absolute positioning along the X and Y axis, what is it positioned relative to? The answer is the offset parent. Whenever you position an element with top, right, bottom and left, the browser looks at this 'offset parent' to determine where to place the element.

The offset parent of an element is the nearest ancestor with a position other than static, or the body if none of the ancestor have positioning. This means that if you position an element with position: absolute and top: 0, it will be positioned at the top of the offset parent. So when you're laying out a page, knowing the offset parent of an element is crucial to understanding where it will be positioned.

Something that could trip you up here is that we're talking about placing an element relative to another element, but using position: absolute to do so. When an element has an absolute position, it get's taken out of the document flow (it no longer pushed other elements down) but it's placement is still relative to the offset parent.

An example

Let's look at an example. Here we have the HTML and CSS for a block quote and we want to put a quote mark behind it for styling.

As you can see, the quote is in the top left of the page instead of the top left of the block quote, and that's because the blockquote itself doesn't have an offset. That means the offset parent of the quote mark is the body.

<div class="parent">
  <blockquote>
    <span>&ldquo;</span>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
    tenetur molestias consequatur, quidem nam ipsum minima aliquid
    recusandae delectus enim.
  </blockquote>
</div>

blockquote { /*position: relative;*/ }

blockquote span {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10em;
  font-family: serif;
  font-weight: bold;
  line-height:0.5;
  color: palegreen;
}

Offset parent: <body>

Click the button above to set position: relative on the <blockquote> (or edit the CSS directly!) Now without changing the styling of the span with the quote mark, it moved from the top left of the page to the top left of the blockquote. and that's because we made the blockquote an offset parent.

How to find the offset parent

For a given element, how do you find the offset parent? You could open the element inspector and go through all ancestors to see which one has a position other than static set, but browsers also have a built-in way to find the offset parent: the offsetParent property on the element in JavaScript. This property returns the offset parent of an element, or null if there is none.

const offsetParent = element.offsetParent;

But selecting an element, switching over to the console tab and typing that in each time is also a bit cumbersome.

There's a much easier way to find the offset parent: the 'debug' tab in the Polypane Elements panel. This tab shows you the offset parent of the currently selected element, you can hover it to highlight it in the page and by clicking it the elements panel immediately jumps to it so you can edit it, in sync across all the panes in your tab.

Now that you know about the offset parent and how to quickly find it, debugging positioning issues becomes a lot easier as you'll always know what an element is positioned relative to. But there's more to positioning than just the offset parent. Let's look at the other dimension: the z-axis.

Stacking context

Where offset parents tell you how an element is positioned in the x and y direction, the stacking context tells you how it gets positioned in the third dimension: how close it is towards the front of the screen.

You'll have encountered stacking context before when you used z-index to position elements on top of each other and two elements not responding to z-index the way you think they should. That's because they were in different stacking contexts: regardless of how high or low your z-index is, it's only relative to other elements in the same stacking context.

What is a stacking context?

When you create a new stacking context, all the elements inside that stacking context will be positioned on the z-axis relative to each other, initially in source order (they have an implied value of 0, or auto). This is helpful because it means that you can position elements on top of each other without having to worry about other elements on the page, and lets you "group" elements together. The element that you create the stacking context on is called the stacking context parent.

In other words, stacking only happens within the context. There's no way to break out of it. In fact, you could look at z-indexes the same as CSS specificity: No matter how high your z-index is, any stacking context with a higher z-index will always be on top of the stacking context with a lower z-index and all elements inside it.

Suppose you have this DOM tree:

Stacking context 1: z-index: 1
- Element 1: z-index: 10
Stacking context 2: z-index: 2
- Element 2: z-index: 5

Then despite Element 1 having a higher z-index than Element 2, it's still below it, because the z-indexes behave like specificity. The 'real' z-index of Element 1 is (1,10) while that of Element 2 is (2,5). Because the z-index of stacking context 2 is higher, it and Element 2 are still on top.

Creating a stacking context

Unlike offset parents, the default context is not the body, but the html element. Also unlike offset parents, which only get set with a position other than static, there are many different properties that can each create a new stacking context:

position of fixed or sticky
z-index other than auto (with a position other than static or when in a flex or grid layout)
opacity less than 1
mix-blend-mode other than normal
filter, backdrop-filter, transform, perspective, clip-path, mask, mask-image or mask-box-image other than none
isolation set to isolate
container-type set to size or inline-size (so any container element)
will-change property set to mix-blend-mode, filter, transform, perspective, clip-path, mask, mask-image or mask-box-image
contain set to layout, paint, strict or content

That's quite a list! But it's not as bad as it looks. Most of these properties are not used very often, and the ones that are used often are position, z-index and opacity. So if you're having trouble with z-index not working, check if the elements are in the same stacking context.

If you want to be more explicit in creating a stacking context, isolation: isolate is the most explicit one. It also isolates other things, like mix-blend-mode, which means it doesn't interact with elements outside of the stacking context, but that's not likely a change that will affect your design.

An example

Lets look at an example. We're building on the previous example. If you look at the previous example you can see that the quote sits on top of the text, obscuring it.

We want to move it behind the blockquote and we can do this by setting a negative z-index on the blockquote (step 1). When we do that however, we can see that it disappears, because it's now behind the div.parent element as well.

The stacking context of the blockquote is the html element, so a negative z-index will place it at the beginning of that stacking context, which is behind the div.parent element.

<div class="parent">
  <blockquote>
    <span>&ldquo;</span>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
    tenetur molestias consequatur, quidem nam ipsum minima aliquid
    recusandae delectus enim.
  </blockquote>
</div>

blockquote span {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 10em;
  font-family: serif;
  font-weight: bold;
  line-height:0.5;
  color: palegreen;
}

Step 1: Step 2:

Stacking Context: <html>

To keep the quote behind the text but in front of the background, we can add isolation: isolate to .parent (step 2).

This will make .parent a new stacking context, so z-index: -1 will only place the quote behind all elements within that stacking context or in our case, only behind the text.

How to find the stacking context parent

Unfortunately, there is no element.stackingContextParent property in JavaScript, so you can't find the stacking context parent with JavaScript as easily as you can find the offset parent. You'll have to check parent elements for each of the properties listed above to see if an element is in a specific stacking context.

Instead of that, the 'debug' tab in the Polypane Elements panel shows you two bits of information:

If the current element creates a new stacking context
What stacking context the current element is in

Like the offset parent you can hover the stacking context parent to highlight it in the page and by clicking it the elements panel immediately jumps to it so you can edit it, in sync across all the panes in your tab.

Conclusion

Offset parents and stacking context are two important concepts in CSS positioning. They can be a bit confusing at first, but once you understand them they can help you debug positioning issues (in all three dimensions much faster. The Elements panel in Polypane makes it easy to find them both so you can immediately inspect and fix the issues as you work.

Polypane 14

Wed, 07 Jun 2023 00:00:00 GMT

Polypane 14 is here! In this release we added support for testing with multiple sessions, a new Elements Debug panel to quickly help you debug issues, an updated UI, new screenshot options, performance and UI improvements across the app and now running on Chromium 114.

What's Polypane? Polypane is the web browser for ambitious web developers. It's a stand-alone browser that shows sites in multiple fully synced panes and helps you make your site more responsive, more accessible and faster.

Session management

When building interactive web apps you have to create both logged out and logged in experiences, and sometimes you'll even have to build and test with different types of user. Instead of logging in and out while working, you can now run multiple sessions of your site in Polypane, so you can show a logged in and logged out version of your site at the same time, or show pages for many different types of users.

You can quickly change the session for all panes in a tab so you can test responsive designs for different types of users, or change the session for a specific pane inside your tab to test with different users side by side.

The new "user" icon in the address bar lets you created and manage sessions. When you have selected a session for your tab you can see the session name in the address bar, and the tab will have a blue bar at the top to indicate it using a non-default session.

When a single pane has a session it shows a "user" icon next to the pane title. To set the session for a single pane, use the "session" tab in the media and emulation settings, which now have a new custom icon.

Panes automatically inherit the session from the tab, but you can override this by setting a session for a pane. By clicking "inherit from tab" again this will be reverted to the tab session.

Polypane automatically syncs input between panes which won't always work when you have multiple users (They won't have the same options available) so to make custom sessions easier to work with, you can now quickly disable all syncing by right-clicking the sync button in the header. Along with turning off the navigation sync this provides a rich environment for testing across different pages and with multiple users.

Inspecting Storage

With different sessions, each session has its own cookies, localstorage and sessionstorage. The Storage panel now lets you pick a session so you an inspect and edit it separately from the default session.

UI Refresh

For this release we took a good look at the UI. While not a redesign (you won't have to re-learn where everything is), we've made a lot of small changes to make the UI more consistent, more responsive and easier to use.

In terms of design, we've increased the font weight of all fonts so they have more contrast and are easier to read. The tab bar and address bar have been changed to floating tabs with increased contrast, and the icons in the address bar and above the panes have been increased in size and have improved contrast. We've also improved the UI consistency across the app.

Horizontal scrolling

A big feature of Polypane has always been the default horizontally scrolling layout. While there are many different ways to scroll this view (shift + scroll, space + drag, pageup/pagedown, dragging the scrollbar), knowing how to scroll horizontally isn't as widely known as we'd like.

Starting in Polypane 14, scrolling your mousewheel in the horizontal layout will now automatically scroll it horizontally. We hope this makes it easier for people not used to regular horizontal scrolling.

Performance

While rewriting the UI we've also made a lot of performance improvements. The UI now responds faster to clicks and drags, and the UI is more responsive when you have a lot of panes open.

Resizing panes and the side panel are both more fluid, as is creating new panes and new tabs. We've also improved the baseline CPU usage of the app, preventing code from continuously running when it's not needed. The result should be a more fluid experience.

Elements Debug Panel

The Elements panel lets you inspect and edit elements across all panes at once. It's a great way to quickly change styling and debug issues across them. To make this even easier, we've added a new debug tab, alongside the existing style, computed styles, attribute and accessibility tabs.

The Debug panel has a convenient overview of specific CSS properties and element properties that often cause issues, so that you don't have to hunt through the style or computed tab to find, for example, if your element has a position.

The Debug panel also shows if the element creates a new stacking context and what the offset parent (from which your element will be offset when using top/left/bottom/right) and the stacking context parent (from which your element will be offset when using z-index) are.

This panel will quickly help you debug issues with your layout and positioning, like "Why is this element not where I expect it to be", "Why isn't this element Sticking?" and "Why is this element behind this other element?". We hope you like it!

Bulk screenshot options

Instead of creating a single image with an overview of all panes, we now also support bulk screenshot options when you right-click the screenshot button in the address bar. You can choose to take screenshots of all viewports, or of all full pages. Screenshots will be stored in the folder you select. This is a great way to quickly create screenshots of all your panes.

Media query ranges and breakpoint edges

The range syntax for media queries has been supported in Firefox for a long time, but it only recently came to Chromium and Safari. We've now added support for it in our breakpoint detection as well, so when you use the new range media queries we can automatically create panes for them.

Along with this we've created a new option that we call "Breakpoint Edges". It creates additional panes that are just outside your specified breakpoints so you can check that things don't break there. For example, if you have a min-width of 768px, It'll also create a pane at 767px wide. Thanks Eric for suggesting this excellent idea!

Show Response of Fetch/XHR requests in the console

In Polypane 13.1 we added Fetch and XHR requests to the console so you can see what requests are made by your site and what headers get sent back. In Polypane 14 we've added the response of those requests to the console as well, if they're JSON or short text. This way you can see what the response was without having to log it out yourself every time.

Bluesky is a new social network that uses an open protocol for it's messages. It's still in development and invite-only, but we've created a social media preview so you can check how your links look when shared on Bluesky.

If you have a Bluesky account, give us a follow: Polypane on Bluesky.

CMV Retinitis simulator

CMV Retinitis is a condition that causes specks in your vision and is caused by the cytomegalovirus in immunocompromised people. While you're not expected to change anything to your site as a result of testing with this simulator, simulations like these help create empathy and understanding for all the different people using your site.

Text styling in Screenshot editor

You can now use bold, italic and underlined text styling in the screenshot editor.

Allow CORS option

Along with the ability to disable web security and disable content-security-policy headers you can now also quickly allow CORS from the Edit menu.

Disabling CORS is useful when you need to work with APIs that don't have CORS enabled, or don't have the right settings to allow you to use it on localhost. This option allows you to use those APIs without disabling all web security, so it's a safer option. Thanks Ben for requesting this!

Outline panel updates

The outline panel has received a few updates:

Warn for long headings

When your heading elements now have an excessive amount of text in them, the outline panel will warn you about it. People with assistive technologies use the heading structure to quickly go through your page, so if your headings are too long, it takes a long time to listen to them and it will be hard for them to navigate your page.

We warn you about headings that are longer than 170 characters.

Scroll delay on hover

In the outline panel (and other panels like the accessibility panel) you can hover over elements to highlight them. In previous versions of Polypane, this would instantly scroll the panes to the element you hovered over even if you just moved your mouse across them. The outline panel now waits for a bit before scrolling, so you can move your mouse across the panes without them jumping around while still responding quickly enough when you hover with intent.

Highlight broken links in overlay

When you activate the link overlay, broken URLs are now highlighted in the page as well. Perfect if you want to make a quick screenshot to share to visually show which links are broken.

Chromium 114

We're now running on Chromium 114, which brings a lot of new features and improvements like CSS Nesting, the Popover API, the linear easing function, new color functions, text-wrap: balance and more, which are all available in Polypane.

Other updates

Some smaller updates worth mentioning:

Robots.txt and friends are now only requested when the meta panel is open

The Meta panel gives you insight into the meta tags on your page, such as the title, description, open graph tags and more. It also shows you the robots.txt, webfinger and other files that are requested by the browser.

These requests are now only made when the meta panel is open, to prevent requests from clogging up your devserver logs.

Browsersync handling

Previous versions of Polypane disabled scroll syncing when detecting Browsersync. Polypane 14 also disables click and input syncing when those are active in Browsersync's ghostMode settings. You can now keep using Browsersync without additional configuration needed.

Polypane and Browsersync both sync certain events, such as scroll and click events. Polypane's syncing is more performant so events synced by Polypane are overwritten or doubled a few ms later by Browsersync, which causes all sorts of issues around performance and event ghosting. We advice everyone to switch over to Polypane.

When right-clicking a tab you can now close all other tabs or close all tabs to the left or right of the current tab but selecting the "close multiple tabs" option in the context menu.

Work around registry limitations on corporate Windows environments

To generate a unique but anonymous device ID, on Windows Polypane reads some information from the registry. Unfortunately in some corporate environments, editing the registry is disabled and unfortunately, merely accessing the registry also counts as editing and is also disabled. This means that Polypane would not start in these environments. We've now updated the method we use to access the registry to prevent this issue.

New devtools extensions: Clockwork and Gimli Tailwind

We added built-in support for two new devtools extensions: Clockwork are devtools for Laravel and Gimli Tailwind are devtools for Tailwind CSS.

Keep in mind our support for regular extension is still in beta, so if you run into any issues, please let us know!

Deprecations

As announced in 13.1, we've removed Tota11y from our debug tools. It's a great tool, but it hasn't been maintained for quite a while and its functionality can be found in other tools, such as the outline panel and the other Debug tools, which have a much more thorough and up-to-date set of tests.

What can we do for you?

So consider this an open invitation: What is missing from Polypane? What's the one thing we should do that makes Polypane amazing for you? What nit would you just love we fix? Let us know! 🙏

Get Polypane 14

Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free. No credit card needed.

Polypane 14.0.1 Changelog

Fixes

Fix Detached panel rendering as blank window

Polypane 14 Changelog

New

New Custom Sessions
New Elements Debug panel
New UI refresh
New Bulk screenshot options
New Support for media query ranges
New Breakpoint Edges support (Thanks Eric!)
New Show Response of Fetch/XHR requests in the console
New Bluesky social media preview
New CMV Retinitis simulator
New Chromium 114
New Text styling in Screenshot editor
New Allow CORS option (Thanks Ben!)
New Close all other tabs context menu options
New New devtools extensions: Clockwork and Gimli tailwind

Improvements

Improved Scrolling in horizontal mode now scrolls horizontally by default
Improved Esc on console panel blurs input
Improved Browser-sync detection now disables all active sync options
Improved Outline panel: Warn for long headings
Improved Outline panel: Moving mouse over elements no longer instantly scrolls the panes
Improved Outline panel: No longer give an error for aside elements in main elements (Thanks Eric!)
Improved Outline panel: Overlay highlights broken links
Improved Horizontal overflow detection for mobile rendering now more accurate
Improved Meta panel: Only request robots.txt, webfinger etc when the meta panel is open to prevent 404s
Improved Meta Panel: Google preview is moved up
Improved Pane resizing has better performance
Improved Elements panel: Now supports color and trig CSS functions and new CSS properties
Improved Elements panel: Tree view scrolls selected element into view
Improved Elements that are focusable without an accessible name get a warning across the app
Improved Debug tools: Target size 24x24 is now a circle (per latest WCAG updates)
Improved Debug tools: more life-like macular degeneration simulator
Improved Layouts, screenshots and command bar are now part of the getting started tutorial
Improved Performance across the app
Improved Global zoom now works more predictably across layouts
Improved Loading state for pages now resolves better for SPAs (Thanks Joseph!)
Improved Context menu for workspace now has more options
Improved Better URL handling to prevent full mode from going back in history (Thanks Eric!)
Improved Creating full screenshots is now faster
Improved Console panel: better object styling
Improved Console panel: now only combines messages between user inputs
Improved Reload button is no longer wobbly
Improved Hard reload now also flushes internal chromium session cache
Improved Panes refresh their instance when web security settings change (Thanks Ben!)
Improved Better trial end message in app
Improved Support Google accounts logins on sites (Thanks Pascal!)
Improved Accessibility panel: Now shows a "best practise" label for items that aren't WCAG issues
Improved Accessibility panel: updated ruleset
Improved Option to turn off overlay scrollbars (Thanks Nic!)
Improved 'Close all panes' is now renamed to 'remove all panes'
Improved 'Disable all' option for synced interactions
Improved Tabs now fall back to a default favicon
Improved Updated Google Fonts list

Deprecations

Deprecated Tota11y debug tool is now removed

Fixes

Fix Activating tap target from meta panel works again
Fix Pane zoom allowed negative values
Fix Set correct background for forced colors in dark mode when page doesn't provide its own background
Fix Clicking active inspect button disables it again (Thanks Galen!)
Fix Outline panel: No longer shows non-landmarks in overlay when show issues is off
Fix Outline panel: Switching to links overview now always triggers a test of all URLs
Fix Prevent permission request popup from forwarding to empty URL
Fix Clicking links in getting started in Full mode was broken (Thanks Gabriel!)
Fix Reference image options toggled images on other pane (Thanks Alex!)
Fix Reference image: Support images with # in their file name
Fix Elements panel: ::before/::after on html element are now supported
Fix Elements panel: Prevent spellchecking in Elements panel data tab
Fix Issue with the app not launching on windows for active tabs with HTTP Basic Auth (Thanks Meikel!)
Fix Issue with stored basic auth credentials not being used on launch (Thanks Sandro!)
Fix Console now can consolidate HTML elements across panes again
Fix Prevent getting started page from showing console errors
Fix Correctly rewrite font URLs in more cases (Thanks Jackson!)
Fix Prevent error for documents with empty body elements
Fix Crash when accessing registry on Windows is disabled (Thanks Mandip!)
Fix Opening undocked devtools
Fix Correctly update devtools location when moving sidebar
Fix Issue with Polypane Peek not showing for specific elements
Fix Live reload no longer ignores "templates" folders (Thanks Tom!)
Fix Incorrect label for forward button (Thanks Steph!)

ColorContrast.App: a new place for our color contrast checker

Thu, 13 Apr 2023 00:00:00 GMT

We first released our color contrast checker three years ago. At the time it was one of the first ones that gave suggestions, based on the needs I had while working on an open-source corona tracking app.

Later on the contrast checker was updated with support for the new EyeDropper API so you could pick colors from anywhere on your screen as well as the ability to set your preferred format between hex, rgb, hsl and hwb.

We've been adding a bunch more, read on below!

A new home: ColorContrast.App

And now it's time for our color contrast checker to get a new home at ColorContrast.App! It'll still be available here on the site as well, but the short, memorable domain should make it easier to find and share.

Dark mode

While moving the contrast checker to a new domain, we also took the opportunity to add a dark mode. The site will by default use whatever your system default is (and change along with it) unless you explicitly set it to light or dark mode, then it'll stay that way.

APCA

Recently, we added support for APCA in Polypane 13.1 and based on that we've also added support for it in our online color contrast checker. While APCA is not a standard yet, it's a more reasonable way to calculate contrast (though it is also stricter compared to WCAG 2) so it's good to contrast and compare.

While WCAG 2 has a well known set of limits for contrast, APCA's limits are more fine-grained and are more context and font-dependent. In order to make the resulting values more easily digestible, we're grading contrasts on three levels:

45: For large (36px or more) or bold (24px or more) or non-text elements.
60: For medium-size (24px or more) or bold (16px) text.
75: For normal body text.

These roughly correspond to the middle of APCA's current "Bronze" level scoring and we've been in contact with Myndex to validate this approach.

We're keen to hear your thoughts on these rating levels, so let us know if they work for you (or why not). For a more fine-grained set of scores there is always the official APCA Contrast calculator.

Color Blindness Simulators

If you've used Polypane you know it ships with over 20 different simulators. In ColorContrast.App you can now switch between the four most popular ones and get a live preview of what the colors (can) look like for someone with that specific color blindness.

You can now pick from the following simulators and get an instant preview of your selected colors:

Protanopia: Red-blindness
Deuteranopia: Green-blindness
Tritanopia: Blue-blindness
Achromatopsia: Total color blindness

Please keep in mind that you should not change colors based on what you see with these simulators on. Both the WCAG and APCA ratings already take visual impairments into account, so use the rating to determine if a set of colors has enough contrast.

Suggestion previews

Lastly, when you now hover over any of the suggested colors, the examples now update to show you what the text or background would look like with that color:

Get it

Use the new contrast checker at

ColorContrast.App

Polypane on PodRocket

Wed, 05 Apr 2023 00:00:00 GMT

On April 5th Kilian was a guest on the PodRocket podcast. Together with Paul Mikulskis we chatted about Polypane, developer experience, and more!

Listen to it here

Thanks PodRocket for having me on!

Polypane 13.1

Mon, 27 Mar 2023 00:00:00 GMT

Polypane 13.1 is here! In this release we retooled our build system from webpack to Vite, which has improved the startup time and UI performance of Polypane by about 20%. 13.1 also adds network requests to the Console Panel, flex and grid overlays to the Elements Panel, APCA support to the color picker and unique URLs per tab to the Browse Panel.

What's Polypane? Polypane is the web browser for ambitious web developers. It's a stand-alone browser that shows sites in multiple fully synced panes and helps you make your site more responsive, more accessible and faster.

Elements panel updates

We've made a bunch of updates to the Elements panel, along with a few bug fixes and newly added property suggestions.

Flex and Grid overlays

While previous versions of Polypane showed badges for elements with a grid or flex layout, they weren't interactive. Now if you click a badge we'll draw a grid of flex overlay in all panes, so you get a quick overview of how the layout for that element is constructed.

The overlays update as you make changes across panes and you can add as many overlays as you need.

Copy CSS Selector or XPath to clipboard

From the navigator you can now copy the CSS selector or XPath for an element to the clipboard. This is useful for debugging and for using in tools like Cypress, Puppeteer or Playwright.

Show color picker for named colors

Polypane already showed a color picker for properties that took colors (like background-color) but now we also show one when Polypane detects that the value is a named color (like "red", "deeppink" or "olivegreen") regardless of the property. That means if you now use the "background" shorthand with just a color it gets a color picker too.

Support for CSS nesting without nesting rule ("&")

In Polypane 13 we introduced support for CSS nesting in the elements panel, but because of the Chromium version we were running, we couldn't yet display the styling for nested CSS that didn't use the "&" selector.

In Polypane 13.1 that's now possible and all nesting along with nesting at-rules is shown with the selector in the elements panel.

Non-inherited CSS properties are shown dimmed

The elements panel also shows CSS for parent elements that contain inherited styles. We've updated the display of these so that only the inherited styles (like color) are highlighted, while the styles that don't inherit (like padding) are dimmed slightly.

Network requests in the console panel

Polypane has a unified elements panel and console panel that lets you inspect and edit across all panes at the same time, but for network data you still had to use the Network panel in the Chromium devtools.

That panel has a wealth of information and options that aren't easily replicated. As a first step to a unified overview of your network Polypane can now show you the Fetch and Xhr requests that happen in your pages in the Console panel. Turn the "network" option in the console panel level settings on to see them.

The console will then show fetch/XHR requests as they come in, with inspectable return headers, and will automatically merge identical requests across panes making it easy to see what data is the same and what is different per pane.

Better level filters

To support this feature we also made the levels multiselectable, so you can now choose if you want to see errors, warnings, info, navigation, network and debug events separately. In addition, these filters will also affect which console notifications are shown under each pane. That overview will now also show counters for debug and network console messages when you have those turned on.

APCA support in the color picker

Along with testing against WCAG2 AA and AAA, you can now get the APCA score of colors in the color picker. APCA is a more advanced contrast formula that explicitly takes into account the way colors work on self-illuminating displays (so, uh, screens).

Unlike WCAG2, scoring is a little more complex. With APCA you get a score between -108 and +106, where negative scores are for light text on a dark background and positive numbers are for dark text on a light background. The higher the number in an absolute sense, the better the contrast.

APCA gives a minimum contrast ratio to hit and an advised contrast ratio which is 15 points higher. In the color picker, a minimum contrast ratio will give you one check mark, while hitting the advises contrast will give you two check marks. And just like with WCAG2, a cross means the contrast is too low.

The APCA algorithm doesn't yet have its own suggested color functionality, though that is coming and we're planning on helping them out with that as we've done with various other parts in the past year.

A note on APCA usage
While exciting (in that it feels both more accurate and more reasonable, even though it's actually stricter than the WCAG formula) it's worth noting that APCA is not part of any official standard. It's set to become part of WCAG3, but that itself is many years away from being ready.
We're excited for APCA, and part of the reason we implemented it ahead of it becoming a standard is that real-world usage and testing is vital for it to prove itself. If you want to build accessible websites however, WCAG2 is still the formula you should test with.

Meta panel updates

In the meta panel we've updated our Slack preview (small change to the way dates are displayed) and Google SERP preview. Google SERPS now show a favicon as well as a site title, that they get from any structured data on the page that describes the WebSite. (but of course, Google being Google means they'll also replace it with something else if they deem that better)

Google SERP pages now also often show an image alongside a search result and although we've implemented that design wise, it's not currently visible because there is no clarity yet on how they decide which image to show (or when to show one to begin with). Expect that in a future update.

Improved data loading

Previous versions of Polypane loaded any manifest or oEmbed files directly from the page's javascript context. In 13.1 we're loading them from a background process so they don't show up in the network panel anymore.

Other updates

Some smaller updates worth mentioning:

Browse panel with unique URLs per tab

When we introduced the browse panel, Polypane didn't have tabs yet, and so the URL shown in the browse panel was the same regardless of what tab you had open.

We've now updated the Browse panel so it shows a unique URL for each tab. Thanks Verdi for the suggestion!

Later this year we're going to expand the Browse panel with tabs.

In addition, we've removed Avocode since it was shut down recently, and replace it with Ceros Inspect.

When you right-click the reload button in the toolbar, you'll now see a new option to clear cookies and reload the page. Use it to quickly reset any state stored in cookies, such as login status or cookie acceptance.

You can still find the previously available options to reload just the CSS, force a hard reload and quick access to the live reload options.

When you right-click on text you've selected, Polypane now shows the number of characters and number of words in your selection in the context menu. This is useful to quickly count the words or character, but also to select a single line and check if the line length is between 45 and 70 characters, which is ideal for paragraphs. Thanks Ryan for suggesting this feature! Ryan also recently wrote about how he built his new site with Polypane.

Screenshot annotations now have fixed sizes

In previous versions of Polypane the size of annotations (text, arrows etc) was dependent on the size of the image. For screenshots that doesn't quite work, so we've switched those out for absolute sizes. This was the size is always consistent. During the process of this we found a tiny issue in Pintura, which powers our screenshot editor and Rik, the creator, fixed that within a day. Thanks Rik!

Upgrading to Vite

If you don't care about how Polypane's built you can skip this section.

Though a 20% startup time improvement and about the same for general UI responsiveness is nothing to sneeze at, it wasn't the main reason we switched.

Polypane has been in development since 2015 and our existing build configuration has evolved from webpack 2 all the way through to 5. Unfortunately with each upgrade the dev build took longer to the point where it was taking 2 minutes before I could start working after running yarn dev. Using Vite it takes less than 20 seconds.

I've tried migrating to Vite twice before, with both Vite 2 and 3, and while I liked the way everything was set up, both times I ran into issues with the way Vite handled things that made the process too brittle for my liking.

This time round, I had the help of 草鞋没号 who maintains electron-vite. I couldn't have done it without their help.

For those interested, we use both vite-electron-plugin and vite-plugin-electron, the former for our main process and the latter for our preload scripts. For the UI we use a plain @vitejs/plugin-react. (should we switch to @vitejs/plugin-react-swc? Let me know!)

The switch to Vite also gives us a strong foundation for improvements to performance and UI responsiveness in the future, as well as making it much easier to adopt various ESM based packages. Other than better performance though, you shouldn't notice any difference. If you do, Let me know!

Deprecations

In this release we are deprecating the Tota11y debug tool. It's a great tool, but it hasn't been maintained for quite a while and its functionality can be found in other tools, such as the outline panel and the other Debug tools, which have a much more thorough and up to date set of tests. Tota11y will be removed in Polypane 14.

What can we do for you?

So consider this an open invitation: What is missing from Polypane? What's the one thing we should do that makes Polypane amazing for you? What nit would you just love we fix? Let us know! 🙏

Get Polypane 13.1

Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free. No credit card needed.

Polypane 13.1.2 Changelog

This is a bugfix release.

Improvements

Improved Outline panel: non-landmarks are now hidden when "show warnings" is turned off
Improved Command palette can now be opened from View menu
Improved Live reload: "temp" and "tmp" folders are now ignored by default
Improved More precise reload button rotation
Improved Remove close button from screenshot notification (Thanks Zach!)

Fixes

Fix Prevent console from showing a failed sourcemap download warning
Fix Live CSS: suggestions in dark mode now use the right theme (Thanks Giovanni!)
Fix Screenshot file format selection is now correctly shown (Thanks Jay!)
Fix Browse panel: Figma now correctly loads again (Thanks Efekahya!)
Fix Panel: Switching from devtools to other panels sometimes kept devtools visible

Polypane 13.1.1 Changelog

This is a bugfix release.

New Features

New Support for Mate translate extension
New Support for Snapfont extension
New Updated Chromium to 110.0.5481.208

Improvements

Improved Zoom option in View menu are now clearer
Improved Clicking inside panes now closes any open color picker
Improved Console messages now show faster
Improved Removed extensions now have their address bar icon cleaned up immediately

Fixes

Fix disabling multiple css styles reset Elements panel (Thanks Saif!)
Fix Console popups show up again (Thanks Jay!)
Fix issue with Typekit stylesheets (Thanks Seth!)
Fix issue with late-loading styles not being parsed
Fix Prevent potential crash with console logging deeply nested objects (Thanks Dan!)

Polypane 13.1 Changelog

New Features

New Network requests in the Console panel
New Browse panel now has a unique URL per tab (Thanks Verdi!)
New Flex and Grid overlays from the Elements Panel
New APCA support in the color picker
New Clear cookies and reload option in the reload menu
New Measure selected text character and word lengths in context menu (Thanks Ryan!)
New Updated Chromium to 110.0.5481.179

Improvements

Improved Startup time and UI performance improvements
Improved Meta panel: Google SERP design
Improved Meta panel: Slack card preview design
Improved Meta panel: Webmanifest and oEmbed are fetched out of process
Improved Elements panel: Copy CSS Selector or XPath to clipboard
Improved Elements panel: Show color picker for named colors
Improved Elements panel: Support for CSS nesting without nesting rule ("&")
Improved Elements panel: Non-inherited CSS properties are shown dimmed
Improved Elements panel: Updated known CSS properties
Improved Cache handling is now more strict
Improved Removed whitespace around logo in Share QR code
Improved JSON viewer performance
Improved Rulers: default alignment for rows is now top
Improved Full mode now also shows a visual warning for disabled JS, CSS and Content Chaos
Improved Screenshot editor: Font sizes and line widths now use absolute values
Improved Only show one 'large CSS' warning per URL per session (Thanks Andrew!)
Improved Console panel: shortcut to clear the console (Thanks Austin!)
Improved Console panel: New way to filter different types of console messages
Improved Pane Console indicator: Add a network and debug type, filter types by console panel
Improved Added support for new Google Variable Fonts

Deprecations

Deprecated The Tota11y debug tool will be removed in 14.0

Fixes

Fix Use correct theme background color during loading
Fix offscreen webviews no longer being captured correctly for overview screenshots (Thanks Nicolaus!)
Fix Issue where finding a previous search term would lock up the browser
Fix Prevent panel from getting larger than the window (Thanks Kenneth!)
Fix Scroll sync not working when scrollingElement can't scroll (Thanks Giovanni!)
Fix Elements panel no longer scrolls the tree to the closing tag
Fix Browse panel: Replace Avocode with Ceros Inspect
Fix Clearly disable Extensions button on Getting Started page
Fix issue where the element tooltip could show NaN for the contrast ratio

Using Polypane to check a website with James Q Quick

Fri, 17 Feb 2023 00:00:00 GMT

Together with James Q Quick Kilian showcased how Polypane can be used to find issues and suggest improvements on a live website.

During the livestream Kilian and James went through his new portfolio site and checked what parts Polypane flagged for improvement, and discussed how those improvements could be made.

It was great to deep dive into a real website and show how Polypane can be used to improve it. There are a ton of different aspects that make a great website great, and James was already doing a lot of things right. But there were also some things that could be improved, and It was a lot of fun to show how Polypane was able to help with that.

The livestream was a really insightful way of learning how to use Polypane, and we hope to do more of these in the future. If you'd like to see us do more livestreams, please let us know!

Building a lightbox with the Dialog element

Wed, 08 Feb 2023 00:00:00 GMT

The dialog element lets you overlay content on top of your site in something called the "top layer", which is a special layer that sits above all other content. This way you never have to worry about your dialog being covered by other elements on the page due to z-index issues. While, like the name suggests, it's mostly used for dialogs, it can be used for any kind of overlay content, including lightboxes.

Recently we've been helping out with the DevtoolsTips website, adding Polypane tips and going through the list of issues to add and improve some of the features.

While the site has a ton of screenshots, they were shown relatively small and inline. Adding a lightbox so people could see the large image was on the list of improvements, so I decided to give it a go.

The requirements

All the devtools tips are written in markdown files, and images are linked with the default markdown syntax: ![alt text](image url). We wanted to keep it that way, so we could easily add new tips and images without having to worry about the markup or train people to use an alternative syntax.

That meant we had to either transform the markdown to add the dialog element during the build process, or add the dialog element in the browser. Since we needed JS to open the dialog anyway, I decided to go with adding the dialog element in the browser.

After discussing with Patrick, I figured we could use the dialog element to build a lightbox instead of including a big javascript lightbox script. The result is a lightweight function that's a little over 40 lines long that uses the platform as much as possible.

Demo

See it in action here: "Simulate multiple devices that are kept in sync" on DevtoolsTips or check out the video below:

The code

We created a javascript function that adds a dialog for all the content image elements on the page and wraps them in a button that opens the dialog. Here's the entire code, styling excluded:

// The function
function createDialogs(selector) {
  if (!selector) {
    return console.error('Missing selector argument');
  }

  const buttonTemplate = document.createElement('button');
  buttonTemplate.classList.add('lightbox-button');
  buttonTemplate.setAttribute('aria-haspopup', 'dialog');

  const dialogTemplate = document.createElement('dialog');
  dialogTemplate.classList.add('lightbox');
  dialogTemplate.innerHTML = `
    <form method="dialog">
      <button type="submit">
      <span aria-hidden>×</span>
      <span class="sr-only">Close dialog</span>
      </button>
      <span aria-hidden></span>
    </form>
  `;

  function createDialog(img) {
    const button = buttonTemplate.cloneNode();
    const dialog = dialogTemplate.cloneNode(true);
    const form = dialog.querySelector('form');
    const span = dialog.querySelector('form > span');

    span.before(img.cloneNode());
    span.textContent = img.getAttribute('alt');
    img.before(button);
    button.append(img);
    button.after(dialog);

    button.addEventListener('click', () => {
      dialog.style.setProperty('width', img.naturalWidth + 'px');
      dialog.showModal();
    });

    dialog.addEventListener('click', (event) => event.target === dialog && dialog.close());
  }

  [...document.querySelectorAll(selector)].forEach(createDialog);
}

// calling the function with a specific CSS selector
createDialogs('.tip-content img');

Line by line

Lets go through it line by line and see what's going on:

function createDialogs(selector) {
  if (!selector) {
    return console.error("Missing selector argument");
  }

The function takes a CSS selector as an argument. If no selector is passed, it logs an error and returns.

After this, we create two templates to re-use for each image: one for the button we wrap an image in, and one for the dialog element itself.

const buttonTemplate = document.createElement('button');
buttonTemplate.classList.add('lightbox-button');
buttonTemplate.setAttribute('aria-haspopup', 'dialog');

We create a button template that we'll use to create the button for each image. We add a class to it for styling, and set the aria-haspopup attribute to dialog so screen readers know that the button opens a dialog.

const dialogTemplate = document.createElement('dialog');
dialogTemplate.classList.add('lightbox');
dialogTemplate.innerHTML = `
    <form method="dialog">
      <button type="submit">
        <span aria-hidden>×</span>
        <span class="sr-only">Close dialog</span>
      </button>
      <span aria-hidden></span>
    </form>
  `;

Next is the dialog template. We give it a class, again for styling, and add the markup for the dialog. There are a few things worth calling out here.

First, the entire contents of the dialog is wrapped in a form with the method "dialog". This is a new type of form method specifically for dialogs. What it lets you do is use the native form handling to close the dialog when the form is submitted, which is what the button with type "submit" does. You can also use multiple buttons with different values to build a dialog with multiple choices, but we don't need that here.

Second, the close button contains two spans: one that has a "×" character and is hidden from screen readers, and one that says "Close dialog" and is hidden from sighted users. This way we can show a close icon for sighted users without having screenreaders read "times" out loud.

We also pre-add a span with aria-hidden to the dialog. This is where we'll add the image description later.

Next up is the function that creates the elements for us. We begin by creating duplicates of the templates we created earlier:

  function createDialog(img) {
    const button = buttonTemplate.cloneNode();
    const dialog = dialogTemplate.cloneNode(true);

For the dialog we pass "true" to the cloneNode method, which tells it to clone the entire contents of the template, not just the element itself. If you don't, all you get is an empty dialog element.

Next we create variables for the form and span elements so we can easily access them later.

const form = dialog.querySelector('form');
const span = dialog.querySelector('form > span');

Because we want to show the same image as already on the page (only larger) we clone the image and add it before the span. Next, we set the span's text content to the image's alt text.

span.before(img.cloneNode());
span.textContent = img.getAttribute('alt');

A warning about re-using the alt description: My friend Ben Myers warns about showing the alt text as a description, because it can encourage content editors to add non-alt content in there like a caption or image credits. These don't belong in an alt text, which is meant to describe the image for non-sighted users.

In our case, the alt texts were well written, and there is good content moderation in place, so we decided to go with it. Remember that this span has an aria-hidden attribute. We add this because the alt text is already set for the image itself, and having it read out twice for screen reader users would be annoying.

Next we add the button and dialog to the page:

img.before(button);
button.append(img);
button.after(dialog);

This code looks a little weird, but here's what happens:

We add the button to the DOM before the image.
We add the image to the button. Because the image is already in the DOM, it's moved into the button. Now the image is wrapped in the button.
With the button in the DOM, we can add the dialog element after it.

We now have the DOM in place and we can hook up our events:

button.addEventListener('click', () => {
  dialog.style.setProperty('width', img.naturalWidth + 'px');
  dialog.showModal();
});

We begin with an event listener on the button that opens the dialog as a modal when clicked (You can also show a dialog in-page by using dialog.show() instead of dialog.showModal(), but that's not very lightbox-y).

In it we also set the dialog's width to the image's natural width, so that the dialog and the alt text are as wide as the image itself. We don't have to worry about naturalWidth not being available here because the image is already loaded by the time we click on it.

If we don't do this, the dialog would be as wide as the text which, if it goes across multiple lines, is usually much wider than the image. This way, the text is always as wide as the image and the dialog looks much nicer. Let me know if there is a CSS-only way to do this, I'd love to know.

Finally, we add an event listener to the dialog that closes it when the user clicks outside of it.

dialog.addEventListener(
  "click",
  event => event.target === dialog && dialog.close()
);

What happens here is that when the user clicks on the dialog we check if the target of the event is the dialog itself. If it is, we close the dialog. Because the entire contents of the dialog is wrapped in a form, the only time the target matches the dialog element is when we click on the :backdrop of the dialog, and so this way we've implemented a "click outside" feature.

That's the end of the createDialog function, and we call that for every matching image found on the page, by casting the NodeList returned by querySelectorAll to an array and calling forEach on it:

[...document.querySelectorAll(selector)].forEach(createDialog);

Styling

So far, the above doesn't include any styling. You can see the styling in the demo above, but there is a specific bit of functionality that lightboxes have and that is that they prevent the lightbox from becoming wider or taller than the viewport.

While most lightboxes will scale down the image in both dimensions, we only shrink the image horizontally. Most screenshots on the site are from desktop versions of browsers and they're usually in landscape. If the image overflows vertically, we want the image to scroll instead so that people can see all the detail. For this we don't need any additional javascript, we can use modern CSS to fix this for us.

Firstly, we set a maximum width and maximum height to the dialog itself:

.lightbox {
  max-width: calc(100vw - 1rem);
  max-height: calc(100vw - 1rem);
}

We could also use the newer vi for inline (width) and vb for block (height) units, but in this case it won't make much of a difference, since we're using it to size the image in relation to the viewport.

Then, we set a grid layout on the form inside the lightbox.

.lightbox form {
  display: grid;
  grid-template-rows: 0 1fr min-content;
}

We have three rows:

A 0px high row to place the close button in, so that it can overlap the image in the top right corner.
A 1fr row for the image, that will take up all the space that is left.
A min-content row for the alt description, that will be as high as the text content needs it to be.

The button (in the first row) and the text description (in the last row) are both set to position: sticky. The button is set to be stuck at top:0, while the image is set to be stuck at bottom:0. This way, the button will always be in the top right corner, and the text description will always be at the bottom of the dialog.

The image lastly sits in a row in the middle that's 1fr, meaning the row will size to the available space (which is all of it apart from the text content at the bottom) or the height of the image. When that 1fr is shorter than the image, it automatically becomes a scroll area and you can scroll to see all of the image.

Preventing scroll on the page

Even though the dialog overlays the entire page, behind it the page still remains scrollable. This can be potentially confusing because you can see the scrollbar move, but the dialog doesn't move. This isn't a huge problem, so we can use progressive enhancement to fix it.

When the dialog is open we want to prevent scrolling, which we can do with overflow:clip on the :root element, and we can use the :has() selector to only apply it when the dialog is open.

:root:has(.lightbox[open]) {
  overflow: clip;
}

If you're unfamiliar with overflow: clip you can learn more about it here: Do you know about overflow: clip?.

Animation

The last thing we want to do is add a little animation to the dialog. We want it to fade in so the user has a better idea of what's happening, but when it closes we want to close it without animation, so visitors don't have to wait before interacting with the rest of the page.

Because the dialog is hidden, we can not use transitions and instead we have to use an animation when it becomes visible. To do this, we can hook into the dialog's open property, which is automatically added and removed by the browser when the dialog is shown and hidden.

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] {
    animation: show 0.25s ease-in-out normal;
  }

  @keyframes show {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

We wrap the entire block in a media query that checks if the user is fine with motion. If they don't mind motion, we add the animation.

Future improvements

There are two improvements we can make to this script:

Instead of a global function, it would be neater to wrap this functionality up in a web component.
Instead of the simple fade, we could use the upcoming View Transition API to zoom in the image when it's clicked.

Work for the View Transitions API is underway in this issue, and I welcome anyone that wants to to refactor the function above into a web component.

Polypane 13: CSS Nesting, extension support in beta, search by selector and Chromium 110

Wed, 01 Feb 2023 00:00:00 GMT

Polypane 13 is here! We're launching beta support for regular browser extensions, have a new way to search for elements and have added support for CSS Nesting in the elements inspector. Polypane 13 also runs on Chromium 110, and has UI improvements across the board.

What's Polypane? Polypane is the web browser for ambitious web developers. It's a stand-alone browser that shows sites in multiple fully synced panes and helps you make your site more responsive, more accessible and faster.

Support for Browser extensions (Beta)

Polypane now supports regular Chrome extensions, such as 1Password, Grammarly, MetaMask, VisBug and more. You can install them much in the same way as our previous support for devtools extensions.

After installing an extension it becomes available in our new Extension list in the address bar, which you can keep open or collapse:

Since extensions can only act on a single pane at once, We've added a new indicator to the left of a pane title to tell you which pane is currently the one that extensions use. Clicking into any pane will focus it automatically, so whatever pane you interact with becomes the active one, including the websites shown in the browse panel.

This feature is in Beta

Because Electron doesn't have full support for the Chrome extensions api and only implements a subset of the APIs there are some limitations:

Polypane only supports manifest v2 extensions. We'll hopefully be adding v3 support in the future, but it's dependent on patches landing for Electron.
It doesn't support synced storage, this will fail silently.
Extensions using the webRequest api will not be able to find any external resources.

Please let us know which extensions you wanna use in Polypane and if they work or not so we can build up a larger set of supported extensions and learn which APIs we could help implement in Electron to support even more extensions.

To start with we have quite a list that we definitely support: 1Password, Grammarly, VisBug, MetaMask, Simple Translate, Lorem Ipsum generator, LastPass, Linuix, WAVE and a few more.

learn more in the docs

Elements panel: CSS Nesting and toggling classes

CSS Nesting support

We are really excited for native CSS Nesting support, for which support has been turned on in Polypane 13. This is native CSS that works in Polypane:

div {
  display: block;

  & a {
    text-decoration: underline;

    &:hover,
    &:focus {
      color: deepink;
    }
  }
}

We're using CSS nesting through postcss-preset-env for this site and it's going to be amazing when we no longer have to transpile that.

In terms of browser support, Safari's technology preview already supports it, and it's set for release in Chromium 112. It's not clear when it will land in Firefox, but support is being worked on. Chromium 110, which Polypane 13 uses, only supports the strict syntax, so be sure to always include an & in your nesting.

To help you use CSS nesting we also implemented CSS Nesting support into our elements panel and, like @layer in Polypane 8, we're again one of the first browsers to land proper support in their devtools.

Toggling Classes

While our class editor already made working with classes really easy by automatically suggesting classnames from your HTML and CSS as you typed, we've now also made it easier to turn specific classes off without having to edit text with the new Class toggle list.

Switch to it and from it by clicking the list icon, then use the checkboxes to toggle specific classes to quickly see their effect. If you want to add or edit a class, just switch back to the editor and make your changes.

We now have tooltip support for elements in the top layer, such as dialog elements. In previous versions of Polypane these elements were inspectable and editable from the Elements panel but because they were in the top layer, our tooltip rendered behind them. The new tooltip now always shows on top of all elements.

Search by selector

Since Polypane 9 you could search for text in all panes, and now you can also search by selector in all of them. Open the search UI with the new ⇧ ⌘ f shortcut to search by selector directly, or use the command bar.

Then fill in any CSS selector and all matching elements will be highlighted. Use the arrow keys to cycle through them.

We also automatically calculate the specificity for the CSS selector and display that. Click that to open the selector in our CSS specificity calculator to get a visual explanation of the specificity.

Layout alignments

Both the horizontal and vertical layout now let you pick the alignment: whether panes start left, center or right aligned. The existing behavior stays the same: the horizontal layout always scroll horizontally and the vertical layout always scrolls vertically.

Content Chaos debug tool

The content chaos debug tool lets you test how resilient your CSS is to having much more or much less content. While previously the debug tool would randomly choose between less and more content, it now provides three options: less, both and more. Both is the same as the old behavior, while less always shows less content (useful for testing languages with fewer characters per word, like Chinese) while more always increases the content in each text node (useful for testing languages that are on average longer, like german). With more control you can now more effectively test your pages.

Meta panel: new resources

After adding security.txt and humans.txt we took a look to find out what else was there and we've now added support for WebFinger and Ads.txt.

WebFinger

The WebFinger protocol is a way to give more information about the people or entities related to a webpage or web site. It's a JSON file that, for a personal site, could contain links to for example social media accounts to prove those accounts are really you.

Polypane's implemention sends along the current page as resource. You can find out more over at webfinger.net.

Ads.txt

Ads.txt ("Authorized Digital Sellers", but the acronym itself also works) is a format created to help advertisers figure out where they can book advertisements for the website. Find out more at iab tech labs.

Split up resource hints

We've split out resource hints (preload, preconnect, dns-preconnect and prefetch) from the list of link tags so you can more clearly see the difference between them.

Disabling web security

We got a lot of requests for this and while turning web security off is very much a "you better know what you're doing!" type of option, we also realise that many front-end developers do not have a choice due to the inflexibility of external parties and resources.

Turning web security off is now easy to do from the Edit menu. We urge everyone to look for better solutions, like using proxies or staging servers, but the feature is there for when there is no other choice.

Custom headers now apply to all requests

In previous versions of Polypane custom headers only applied to the requested HTML page. Now the custom headers are also sent along with any resource requested from the page, such as CSS, JS etc.

If you manage access to resources based on custom headers, you can now use Polypane for your development!

Web Vitals INP Attribution

Along with CLS and LCP, you can now toggle attribution for the INP web vital and see which event on which element affected your ICP score.

Thanks to a thorough review by David we've now improved the usage of Polypane with a screen reader. We fixed missing labels and also more strictly manage which parts of the UI are read out.

We would like to thanks David very, very much for his time and expertise. If there is anything we can do to improve your experience using Polypane, please let us know.

Outline panel

The link checker now batch-sends results so you can see results come in much faster. This also fixes a bug where sometimes the result wouldn't be sent back to the UI. Additionally, 500 errors accidentally weren't shown in the error style but in the warning style, so were easy to overlook. They're now more noticable.

In Polypane 12 we introduced non-landmarks into the landmark outline with explanations of why they're not landmarks. We now show these non-landmarks in the overlay as well.

Chromium 110

We now run on Chromium 110.0.5481.100 which supports :initial-letter and from 109 the lh length unit and the hypenate-limit-chars property.

We've also enabled the flag that lets you use the new view timeline api, CSS Nesting, Style queries, CSS Color level 4 syntax, Trigonometric functions in CSS and nth-child complex selectors. Enjoy!

What can we do for you?

As you've seen in the changelogs for these past few releases, many features have come from Polypane's users. We love getting feedback and one of the best things about developers as your users is that they are really good at feature requests.

So consider this an open invitation: What is missing from Polypane? What's the one thing we should do that makes Polypane amazing for you? What nit would you just love we fix? Let us know! 🙏

Get Polypane 13

Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free.

Polypane 13.0.3 Changelog

Bugfix release for 13, solves issues with overview screenshots.

New Update to Chromium 110.0.5481.100
Fix overview screenshots work again

Polypane 13.0.2 Changelog

Bugfix release for 13, solves issues with input event syncing, window popups and non-clickable notifications.

New Update to Chromium 110.0.5481.77
Improved Copy selected text is visible before extensions in context menu.
Improved Faster element screenshots
Improved Updated screenshot editor
Fix Form input events not syncing
Fix Remove double Content Chaos test button
Fix Turn support for popups on again (Thanks Dev!)
Fix Prevent playing GIFs in social media previews
Fix Bug where notifications weren't clickable on mac
Fix Bug where tab bar was vertically scrollable on windows (Thanks Jon!)

Polypane 13.0.1 Changelog

Bugfix release for 13, solves issues with the panel, extensions and login flow on mac.

New Add Dashlane password manager to known extensions
New Add CSS Shapes Editor to known extensions
Fix Downgrade 1Password for support
Fix Detached Panel being blank
Fix Activation flow on mac sometimes not accepting mouse events

Polypane 13 Changelog

New Features

New Support for chrome extensions (BETA)
New CSS Nesting support
New Search in panes by Element Selector (Thanks Valter!)
New Element inspector: toggle classes support
New Allow aligning the horizontal and vertical layouts (Thanks Charles!)
New WebFinger support in Meta panel
New Ads.txt support in Meta panel
New Option to disable web security
New Chromium 110

Improvements

Improved Node tooltips now supports elements in the top layer
Improved Outline panel: Broken link checker now returns results much faster
Improved Debug tools: "More" and "Less" options for the Content Chaos Debug Tool
Improved Custom headers are now applied to all requests from a pane
Improved Elements panel: Inspecting a new element scrolls style list back up
Improved Elements panel: New CSS values, properties and units autosuggestions.
Improved Elements panel: Support for :host, :host() and :host-context() specificity calculations. (Thanks Bramus! Paul, your new homework!)
Improved Workspaces: The overwrite button is moved away from the title (Thanks Mathias!)
Improved Outline: non-landmarks are now also highlighted in the landmark overlay
Improved Meta panel: Fallback location for security.txt is also checked
Improved Meta panel: Preloads are split into a separate resource hints list
Improved View page source is now available in context menu (Thanks Evan!)
Improved Better support for Wayland (Thanks Bea!)
Improved Getting Started tutorial now has a progress bar
Improved New Chromium flags: CSS Nesting, CSS Colors level 4, View timeline, Color contrast, Style Queries, Trigonometric Functions, Nth-child complex selectors
Improved Screen reader compatibility (Thanks David!)
Improved Web Vitals: INP attribution
Improved All color contrast checkers in Polypane now use the same normative calculation
Improved Resize performance
Improved New icon for integrations
Improved logic for which elements iOS-emulated devices consider focusable
Improved updated list of supported google fonts
Improved updated list of rules in accessibility panel

Fixes

Fix Element panel: bug where some elements couldn't be inspected
Fix Element panel: bug where not all classes where shown as suggestions
Fix Element panel: Color swatch overlapped copy styles button in computed styles panel (Thanks Felipe!)
Fix Workspaces refactoring to prevent saving issues (Thanks Vivian, John and Felipe!)
Fix Outline pane: Server errors weren't appropriately highlighted in link list
Fix Breakpoints list no longer falls behind chromium devtools
Fix New window handlers correclty opens things in new tabs or side browser again
Fix Remove obsolete workaround for twitter.com headers
Fix Corner radius setting in screenshot editor was broken (Thanks Bryan!)
Fix Align tooltip of navigational buttons to the bottom to prevent overlapping with macos window controls (Thanks Felipe!)
Fix Detached Panel: OS-specific monospace font wasn't correctly set (Thanks Vasiliy)
Fix New User Agent to support logging in with Google services
Fix Disable navigation sync is no longer visible for the full layout

Polypane on Syntax.fm

Wed, 04 Jan 2023 00:00:00 GMT

On December the 30th Kilian was a guest on the Syntax.fm Supper Club to talk about Polypane. Wes, Scott and Kilian spoke about Kilians background, how he came up with Polypane, how it's built and how different features in the app work.

To read the show notes, go to Supper Club × Polypane with Kilian Valkhof!

Thanks Wes and Scott for having me on!

Polypane 12: introducing the Command bar

Mon, 12 Dec 2022 00:00:00 GMT

Polypane 12 introduces our new command bar, that you can use to control any part of the app without leaving your keyboard. We also improved the reference image, color picker and screenshot features, added new accessibility checks and implemented support for proxies. Polypane 12 runs on the latest Chromium, version 108.

What's Polypane? Polypane is the web browser for ambitious web developers. It's a stand-alone browser that shows sites in multiple fully synced panes and helps you make your site more responsive, more accessible and faster.

Command bar

We've wanted to add a command bar for ages, so we're extremely happy to finally have one. It's built on cmdk where we've added our own improvements and contributed them back.

Whether it's adding panes, opening new URLs, navigating to specific panels or even quickly copying lorem ipsum, a UUID or your own IP address, or, uhm, shoot confetti.

There is a ton of stuff to explore in the new Command bar. Open it by pressing ⌘ k. Let us know what you think, and what more you want the command bar to do!

Reference image

For the reference image we added a quick way to toggle the image on and off without needing to change its opacity, and a new overlay mode that doesn't invert colors.

We now have two overlay modes: difference and invert. Difference blends the image and website together and shows the difference. Everything that's the same is black, everything that's not is highlighted.

Invert turns the image into a negative. When overlaying it on the website, everything that's the same cancels out to grey, and the differences are shown such that the website retains its original colors, and the image is inverted.

The benefit of the invert mode is that the website colors are the same, so you can see which part of the difference is coming from the website, and which one is coming from the overlaid image. Thanks Quang and Vladimir for suggesting this feature!

Screenshots

You can now set a delay before taking a screenshot, and add white-space around the image while editing so you have more space for annotations.

Delays

Before making a screenshot you can set a delay of 5 or 10 seconds. This lets you get the page in order by hovering, inspecting or clicking before the screenshot is actually taken.

During the delay a countdown timer is shown:

We like to use this to make screenshots of our node tooltips: set a delay, press ⌥ to inspect and all its info shows up right in the screenshot ready to be shared. Of course, it's useful for any hover-related or timing dependent UI!

White space

We now support adding additional space around your image by zooming out in the crop feature of our screenshot editor.

This lets you add a border around your image where you can put annotations before saving and sending it to your colleagues or customers!

Proxy support

If you require a proxy to access pages and you can't set that at an operating system level, Polypane now supports configuring a proxy with all the options that Electron proxies have.

Easily get links to fragment identifiers

When right-clicking any element that has an id attribute, you can now copy the link to their fragment identifiers. Like copying regular links, you can copy the URL, or copy it as markdown. The markdown link will use the text inside the element as the name:

[Easily get links to fragment identifiers](https://polypane.app/blog/polypane-12-the-one-with-the-command-bar/#easily-get-links-to-fragment-identifiers)

We found ourselves often wanting to link quickly to different sections of our docs and with this it's just a right-click and we're good to go.

Meta panel

Along with updates to the Slack and Discord previews made for Polypane 12, we now show the security.txt file when available.

Security.txt is a new standard, like robots.txt and humans.txt (which we also show) that lists information to allow security researchers to easily report security vulnerabilities. You can learn more about it at securitytxt.org

Thanks Paul for suggesting this feature!

Outline panel

We've added new functionality to the various lists in the outline panel, the biggest update being the Landmarks panel.

Landmarks

Some elements are landmarks when they're used at the top level, like header, but not when they're used in other landmarks. Likewise, a section can be a landmark but not if it doesn't have a label. Hidden elements are also taken out of the landmarks list.

Up until Polypane 11, those not-landmark elements were simply not displayed in the landmark list. With Polypane 12, we're now showing those elements and explain why they're not landmarks. This helps you debug situations where you expect something to be in the landmarks structure but it isn't.

If you want to learn more about how these landmark rules work exactly, check out landmarks and where to put them, which Kilian recently wrote for the HTMHell advent calendar.

Images

The src is a required attribute, so if an image element doesn't have one, it doesn't display an image right? Turns out we made the wrong assumption here, since if it does have an srcset for example, browsers will still find a way to show an image on screen. Browsers are such forgiving beasts.

So the Polypane outline panel now also happily displays these, albeit with a warning about that missing src attribute, since it's still required. Thanks Eric for helping us find this issue!

Focus order

We improved the focus order in two ways: we now more accurately list all focusable elements, including links in summary elements (which themselves are focusable too) as well as iframes. This will make the list more accurate.

Secondly, we improved our algoritm to determine if elements had a logical focus order. Previously, it compared the center of two elements, but we now use the top left corner instead. The result is that Polypane is better at assessing what a "logical" focus order is.

Links

For links, we now show the hreflang attribute value when available.

Color picker

The color picker will now switch to a set of icons when you're testing for non-text contrast.

You can now switch between AA and AAA levels to determine if something has enough contrast or not. This paves the way for APCA to be included in the future.

Lastly, when exporting a color swatch screenshot, we now include the suggestion in the file name as well.

Lang emulation

The Emulations popup in Polypane already let you quickly change the direction of the page with the dir attribute, and you can now also quickly change the lang of a page from the same UI.

This is different from the browser locale that you can also set in the same popover. That's used to send along with the request headers and tells your JavaScript which languages the browser understands, while the lang attribute determines what language the page is written in. You can also find the page language in the meta panel under "language". Thanks to Daniel for suggesting this feature.

Click outside support

Polypane can now also sync "click outside" style interactions, where clicking outside an popup dismisses it. Because this click doesn't happen on an interactive element previous versions didn't sync it.

On Windows, the menu is integrated in the header and on macOS the menu sits at the top of the screen. On linux however, a native menu is rendered wherever the OS determines it should be.

If that happens to be at the top of the app (as opposed to in a global menu, which I recommend to everyone) that doesn't look great. So if you're on Linux you can now show and hide the menu with ⌥ m. Thanks Philipp for requesting this feature!

Chromium 108

We now run on Chromium 108.0.5359.62 which supports new viewport size units (more on that in a future post). We've also enabled the flag that lets you use the new lh (for line-height) unit and Polypane can now animate grid-template.

Get Polypane 12

Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free.

Polypane 12.0.1 Changelog

Bugfix to solve an issue with the Next.js devserver not loading a site properly.

Improvements

Improved Add support for the ::slotted() CSS selector

Fixes

Fix Issue that prevented Next.js dev server from loading
Fix Prevent removal of trailing slashes on URLs

Polypane 12 Changelog

New features

New Command bar
New Inverted reference images (Thanks Quang and Vladimir!)
New Delayed screenshots (Thanks Andrew!)
New Emulate page language (Thanks Daniel!)
New Proxy support (Thanks Brad!)
New Security.txt support (Thanks Paul!)
New Right-click elements with an ID to copy url to document fragment
New Allow hiding the main menu on Linux (Thanks Philipp!)
New Ultrawide device preset
New Chromium 108.0.5359.62

Improvements

Improved Updated list of supported Google Fonts
Improved Outline panel: Landmarks now show elements taken out of the landmark tree
Improved Outline panel: show warning for images without src attribute (Thanks Eric!)
Improved Outline panel: Links show the hreflang value if available
Improved Outline panel Focus order: Offsets now test from the top left of element instead of center
Improved Outline panel Focus order: Links inside summary elements and iframes are now correctly detected if focusable
Improved Meta Panel: Improved Slack and Discord previews
Improved Screenshots: Now support adding white space around screenshots (Thanks Julian!)
Improved Pressing ? now opens shortcut overview
Improved Support for click-outside-to-close interactions
Improved Wording in License flow (Thanks Jim!)
Improved QR Code: Show IP or full URL to copy
Improved Newly added panes using cmd n now get added to the end
Improved Color picker: When testing non-text contrast, the preview now shows icons
Improved Color picker: Suggested color is added to file name suggestion
Improved Color picker: You can switch between AA and AAA Levels
Improved Custom Headers UI more clearly shows applied headers
Improved Devtools extensions: Support CSS Feature Toggles extension

Fixes

Fix Prevent ellipsis from being shown in the wrong instances in Twitter preview (Thanks Charlie!)
Fix Overflow issue for long classnames in node tooltip
Fix Alignment issue in collapsed pane headers
Fix Support for click-outside-to-close interactions
Fix Load new Google Variable Fonts correctly
Fix Active dot for emulation in Full mode moved during deactivation
Fix Empty workspace message animates out smoothly again
Fix Issue with synced focus after re-opened main window on macOS
Fix Navigating the live/auto reload options could clear out settings (Thanks Carlos!)
Fix Inconsistent indentation in debug tools (Thanks Vladimir!)
Fix Different text size wasn't applied in detached panel (Thanks Mac!)

Polypane 11: JSON viewer, new accessibility tools, Chromium 106, iPhone 14 devices and screenshot updates

Tue, 04 Oct 2022 00:00:00 GMT

Polypane 11 now renders JSON files in a completely new viewer, adds a ton of new accessibility testing features and improves upon existing ones, updates the rendering engine to Chromium 106, includes new iPhone 14 devices and has new screenshotting features.

We've also made improvements to the Element, Live CSS and Meta panels as well as added more into to the node tooltips.

JSON Viewer

Polypane now included a JSON viewer that lets you visualize your JSON, inspect and filter it. There are two modes: you can show the JSON as it's sent from the server (optionally pretty-printing it), or show it in an interactive tree view.

In the tree view you can quickly collapse, expand and filter your JSON object. Each property has an icon matching the type of the value, like text, number or URL. Where possible, values are richly displayed: URLs get a favicon and are clickable, datetimes get a pretty printed preview etc.

In the treeview you can expand and collapse individual objects and arrays, but you can also expand and collapse all properties or pick which properties you want to expand in one go. This really helps when you're dealing with large JSON files and want to hide a lot of info you don't currently need.

The JSON viewer is automatically launched whenever you open a JSON file, locally or from a server, in both the panes and in the Browse panel. We have a lot of plans on where to take the JSON viewer next and look forward to your feedback.

Accessibility features

This release we've been working with a lot of you (❤️ thank you!) to figure out where the gaps in Polypane's tooling are when it comes to assessing accessibility issues effectively.

With the new and improved tooling, we hope we closed the gap letting you use Polypane end-to-end when auditing websites for accessibility issues. If you're missing functionality, let us know!

New visualization debug tools

One of the first things that came up discussing with the team at ElevenWays was tooling to quickly show all the roles and ARIA attributes on a page. With the new 'Show Roles' and 'Show ARIA attribute' debug tools you can now not only get an overview with a single click, you can also easily export screenshots to use in auditing reports or issue tickets.

Show Roles debug tool

The Show Roles debug tool highlights all elements that have a role attribute and lists both the role and the element name. This helps you verify that the role is applicable and valid for a given element.

Show ARIA attributes debug tool

The show ARIA attributes debug tool on the other hand lists all ARIA attributes and values that are applied to a given element. Test if ARIA attribute usage makes sense and if the right combinations are used.

Updated achromatopsia simulator and new Photophobia simulator

Recently, Nate Baldwin release the amazing Color & Contrast. It's an amazing online resource with everything there is to know about, well, color and contrast. Included are lots of visualizations and examples, including for achromatopsia (full color blindness). We highly recommend you check it out.

Comparing Nate's visualization to the one available in Polypane, we realized that ours was simulating cerebral achromatopsia. So we set out to create a more true-to-experience visualization for achromatopsia itself:

In the process, we renamed our existing visualization to indicate it's simulating cerebral achromatopsia. We also added a new Photophobia simulation:

With these updates, we hope to create a more true-to-life experience, though it's worth noting that no two people experience anything we simulate the same way. The simulators are indicative and you should use them for broad-strokes analysis, not for specific styling tweaks.

Focused element in focus order outline

The Track Focus debug tool can be used to highlight the element that is currently focused in a pane, but if you don't want to turn that debug tool on, we now also highlight the focused elements in the focus order outline panel and in the focus order overlay provided by it. Thanks Eric for requesting this feature!

Target size debug tool WCAG 2.2 support

This request by Ronny was made all the way back in June but it took me a while to get around to it. One of the new success criteria in WCAG 2.2 is a specification for minimum sizing for clickable elements ("targets").

Polypane already included a "Target size" debug tool that tested using 48 by 48 pixels, following Google's 'mobile friendly' algorithm. Now you can choose whether to use the WCAG 2.2 version (24px), Apple HIG (44px) or Google's Mobile Friendly heuristic (48px with some allowed overlap). Thanks Ronny!

Contrast Checker debug tool

We improved a bunch of stuff to the Contrast Checker debug tool. This started after we noticed there sometimes was a 0.01 difference in the calculated contrast ratio that our debug tool and our new color picker gave us.

Getting it 0.01 more correct

After investigation, it turned out that in some situations we were incorrectly handling opacity on elements. We updated the algorithm we used to calculate accurate color contrast, and now there is no longer a difference between picking colors on screen and having Polypane generate them from your CSS, even in complex situations with many layers of transparency.

Choosing between AA and AAA

You can now choose if you want to test against AA or AAA color contrast, bringing it in line with our online color contrast tester.

Click to apply

When Polypane finds contrast issues, we automatically calculate the closest color that does have enough contrast with the background. In previous releases, you could hover the suggestion to preview it and click the color to copy it to your clipboard.

In Polypane 11, clicking now copies and applies the suggestion, making it easy for you to head over to the elements inspector and tweaking the color to your liking.

Detect small text debug tool

Like the Contrast Checker tool, the Detect small text debug tool now applies the suggested font size with the click of a button, letting you see the effect of a font change instantly.

Color picker updates

We added three new features to our color picker:

Test non-text contrast

Alongside Small text and Large text, you can now also check against the WCAG guideline for non-text contrast (3:1). Thanks Eric for requesting it!

Visible suggested color

Instead of only showing the overlaid square, the color suggestion is now also shown as text below the contrast ratio. Click it to quickly copy the suggestion to your clipboard.

Export swatches

Click the new screenshot button in the color picker to export a swatch image:

We hope this will make it easier to communicate color changes across your team or in your audits. Additionally, the file name contains a textual description of the image that you can use as alt text when distributing the image. This was another great request by Eric.

Screenshot updates

The screenshotting functionality has received a number of quality-of-life improvements.

Dimensions are back in the overview screenshot

When creating the new fast overview screenshot we left out the pane dimensions, showing just the title for each pane. We've re-activated them:

Path tool

The screenshot editor (powered by Pintura) has been updated to the latest version and now includes a new "path" tool that you can use to draw polygons on top of your image.

Set preferred action for screenshots

Instead of always opening the screenshot editor, you can now select what you want to do when creating a screenshot: open the editor, save it directly to disk, or copy it to clipboard.

Depending on what you make screenshots for this really speeds up your workflow. Find the option in the settings menu.

New UI for selecting Element screenshots.

When selecting elements on a page for the Element Screenshot (or Live CSS panel) we now dim the rest of the page, rather than draw a blue line around an element. This makes it easier to see which element you're selecting.

Elements inspector

We're continuing to refine the Elements inspector, which lets you inspect and edit elements in all panes at the same time. This time, we've updated the box model visuals, made it easier to get element information and fixed some annoying bugs.

Updated box model

This came about when Stephan asked if the box model visualization in browsers could be more useful and show more information about the display of the element. That's exactly the type of stuff we want to do with Polypane, so we quickly came up with a way to show the border-radius and if an element had a box shadow inside the box model:

Each border with a radius has a thickened line, and if all border radii are the same their value is shown in the top right, otherwise each border radius is shown in the corner. Lastly, if an element has an explicit overflow, like auto or scroll, that's shown in the bottom right:

All three of these additions help you get a better idea of what the element looks like. Thanks Stephan! And if you have ideas on how to make the box model visualization more useful, let us now!

Click to copy font info and dimensions

To quickly copy the font declaration and the dimensions of an element you can now click their display in the element panel:

New color contrast indicator

The color contrast indicator in the elements panel now matches the one used elsewhere, using the "AA" and "AAA" markers instead of checkmarks. You can hover the marker to get the specific ratio and a preview of the colors:

Noteworthy bugfixes

Polypane 11 also includes some noteworthy fixes to the way style editing works. We no longer show suggestions as soon as you focus an element, but only after you begin typing or press the arrow keys. This also fixed another issue, which is that sometimes you had to tab twice to go to the next item when adding a style rule. You could also get into a situation where a disabled and subsequently deleted style would still be listed. Those are now correctly removed.

We've also fixed a bug related to how we parse CSS selectors that use :is() and friends containing other pseudo-classes like :hover.

Though the elements panel and Polypane worked without a problem, it did cause a console message. If you used something like Redbox or Next.js, they throw a big red error box on top of your site for any console error (even those that don't come from your app). That will no longer happen!

Meta panel

As always, there are subtle (and less subtle) new changes to the way various social media render their social media previews that we've updated, and we added proper GIF handling.

Support for GIFs

When implementing "sniper links", the reference article we consulted had a GIF as OG image. After testing we noticed that some social media allowed the animated GIF while others used the first frame of the GIF and disabled the animation. Polypane now accurately shows the way social media previews deal with GIFs.

Updated Slack, Twitter and Telegram previews

The Slack preview has updated designs for the large and small image variants, Telegram has a new maximum width, and Twitter changed how they deal with information-poor pages that we now follow.

For Slack Polypane now automatically hides the image when it's larger than 2 megabytes, the default value in Slack:

UI Updates

We've made improvements to the UI in various places across the application:

New iPhone 14 devices

Polypane 11 includes the new iPhone 14 device sizes in our devices list. The difference between the regular and pro versions are a little weird this time around, which we've written about here: Thanks iPhone 14, designing for device sizes is dead.

If an element uses a flex or grid layout that's now shown with a small icon in the element tooltip. Additionally, the contrast indicator has a preview just like the Elements panel.

For images, the element tooltip now also shows the current src so you can quickly see which of your responsive variants is loaded.

Sniper links

When you request a new licence key from inside the app we now detect if you use one of the popular email providers (like Gmail, Outlook etc) and provide direct links to your inbox, sometimes even filtering your inbox to emails coming from just us (using query parameters). This means you no longer have to manually go to your inbox and search it for emails coming from Polypane.

This technique is called "Sniper links" and it really speeds up both the email verification step when you sign up, and the licence request step during the app activation.

Debug tools split into categories

While the list of simulators was already split up into different categories, the list of debug tools was just one long list and as we reached 20+ debug tools it started to become a little hard to find things. So the debug tools are now also split into four categories:

Layout
Accessibility
Content
Disable features

By splitting it up into categories it should be easier to find a specific debug tool, and hopefully also helps you understand what each one does.

For an overview of what all debug tools do, head over to our docs on debug tools.

Depending on if you have set the Polypane devtools or the Chromium devtools as the default, the first "Inspect element" item in the context menu will now use your preferred devtools.

So whenever you right-click to inspect an element, the first item in the context menu is the one you'll want to use.

Picking a starting layout

When activating a new copy of Polypane, rather than letting you choose between three responsive panes, or five mobile panes, the last step in the activation flow now lets you choose between two starter layouts: the responsive design (horizontal) layout and a more traditional browser layout (with the full layout and sidebar open):

Starting with three panes can be a lot when you just get started with Polypane, so we wanted to make it easy for people to get started with all the tooling that Polypane provides, even if they don't need multiple viewports just yet.

Updated Chromium to 106

Chromium has been updated to 106.0.5249.61, and ships with a number of experimental features turned on by default, like support for the page transition API and jpegXL.

Head over to our docs on Experimental Chromium Features for a full overview of the available APIs. If you'd like to see one activated, Let us know.

Get Polypane 11

Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free.

Polypane 11 Changelog

New Features

New JSON viewer
New iPhone 14 devices
New Save color swatch as image (Thanks Eric!)
New Duplicate tab feature
New Photophobia simulator
New Role visualization debug tool
New Aria visualization debug tool (Thanks ElevenWays!)
New Copy link, copy link as markdown and open in browse panel support for tabs
New Copy link as markdown context option for all links
New Chromium 106.0.5249.61
New Sniper links and layout picker in app setup

Improvements

Improved Achromatopsia simulator is now more true to life
Improved Debug tools are now split into categories
Improved Target size debug tool now supports wcag2.2, Apple HIG and Android guidelines (Thanks Ronny!)
Improved Target size debug tool no longer checks inline links per specification
Improved Text size debug tool: Clicking a suggestion applies it
Improved Color Contrast debug tool: now supports AAA checking
Improved Color contrast debug tool: improved logic for solid text in elements with transparency
Improved Color contrast debug tool: clicking a suggestion applies it
Improved Outline panel: focus outline highlights the currently focused element
Improved Outline panel: images now also show input[type=image]
Improved Outline panel: focus order overlay has updated colors
Improved Outline panel: image overview warns for alt text of 200+ characters
Improved Outline panel: image overview warns for alt text containing emojis
Improved Live CSS and source panels now use platform specific monospace font (Thanks Ivan!)
Improved Live CSS Panel now has better indenting and formatting support
Improved Live CSS Panel font size now follows the rest of the UI
Improved Node tooltips now show icon for flex and grid boxes.
Improved Node tooltips now show current src
Improved Elements panel: a11y tab shows auto-suggestions for role attribute
Improved Elements panel: clicking font or dimensions now copies them to clipboard
Improved Elements panel: supports nested pseudo-classes like :is(:hover)
Improved Elements panel: box model now shows border radius, box shadow and overflow indicators (Thanks Stephan!)
Improved Elements panel: tree-view has a max-width and height to prevent it from pushing away the rest
Improved Elements panel: color contrast now shows a preview and "AA" or "AAA" instead of check marks
Improved Meta panel: Proper handling of GIFs for all social media previews
Improved Meta panel: Slack card now supports unexpanded images, and updated image views
Improved Meta panel: Telegram card preview
Improved Meta panel: Twitter card preview
Improved Enable experimental JPEGXL support
Improved Updated Google Fonts database
Improved Trial period now has a visible button in the header to go back to tutorial
Improved New handling of past due and paused subscriptions
Improved Add spacing between pane header icons
Improved Updated screenshot editor
Improved Option to set default action for screenshots
Improved Overview screenshot now shows dimensions above each pane again
Improved New design for element screenshot and live CSS element selection
Improved Improve logic for disabling cache and cache clearing to be more effective regardless of server settings
Improved When right-clicking input fields on mac, a context-menu option for the emoji picker is visible
Improved Context menu "inspect element" defaults to the currently selected one being the first
Improved Less calls to CrUX data when not available
Improved Color picker now lets you check against non-text contrast (Thanks Eric!)
Improved New shortcut to open and focus console: cmd/ctrl shift j
Improved Shortcut to open settings (Thanks Roel!)
Improved Emulation: There is a new "auto" option for color scheme emulation that follows the app settings

Fixes

Fix Random resize all panes functionality works again
Fix Elements panel: Prevent showing suggestions before typing or using the arrow keys
Fix Elements panel: sometimes you needed to press tab twice in the style editor
Fix Elements panel: emptying a text node in the navigator prevented it from being updated again
Fix Elements panel: Disabled and removed CSS styles were still visible in the elements panel
Fix Elements panel: commas in pseudo-selectors no longer cause newlines in selector
Fix Prevent reading out node env on load
Fix Choice of device or viewport sizing wasn't preserved on device change
Fix Overview screenshots heights now better fit the visible panes
Fix Make screenshot button in full mode no longer falls behind devtools
Fix 0.01 difference between color contrast debug tool and color picker
Fix Issue where node tooltip rendering wasn't properly applied
Fix Alignment of add icon in cookie overview
Fix Outline panel: issue where link list would be empty
Fix Issue where Polypane's scripts would interfere with core-js on a website (Thanks Oleg!)
Fix Prevent errors when calculating the specificity for nested compound CSS selectors
Fix Last open tab should not have a visible close button
Fix Improve loading of .prettierrc.js variant
Fix Issue where context menu on tabs on Windows weren't handled correctly (Thanks Reinhard!)
Fix Panes no longer shrunk to fit (Thanks Andrew!)
Fix Tooltips in detached panel not rendering correctly
Fix Meta panel: Incorrect missing favicon message if a site has just a favicon.ico
Fix Incorrect synced hover states for Tailwind CSS in dark mode (Thanks Austin!)
Fix Node tooltip not being visible for some sticky elements

Thanks iPhone 14, designing for device sizes is dead

Thu, 15 Sep 2022 00:00:00 GMT

Back when the mobile web just got started, mobile design was simple (...it wasn't, but bear with me). Your site had to fit 320px wide and it would work for "Mobile". 320px is the width of the original iPhone and Android phones dutifully followed. Unfortunately that didn't take long, and mobile phones have been growing larger and larger ever since.

Especially in the Android ecosystem the variety of screen sizes exploded, rapidly growing to 360, 393 and 412px wide. On the iOS size the expansion was much more gradual. First to 375px, then 390px and 414px for the "large" phones. Apple kept this for a while: small phones were 375px (pre-notch) or 390px wide (Pro or otherwise), and the large phones were 414px (pre-notch) or 428px wide.

With Apple's dominance, especially with people designing and building websites, it meant we could hold the fiction that there were two widths for designing for devices, and that was manageable. It doesn't matter that this wasn't true (hello, Android), but it's true enough that people could get away with believing it.

But the iPhone 14 changed that.

iPhone 14 comes in two flavors: Normal and "Pro". The Pro changed the device from using a notch to something Apple calls the "dynamic island". It looks really cool, but that's not what this article is about.

Rendering courtesy of Davo Galavotti

While the normal iPhone 14s have the same dimensions as the 12 and 13 (390px wide for normal size, 428px for Plus) it's the Pro's that throw a wrench in our fiction of clearly different widths.

	iPhone 12/13	…Pro	iPhone 14	…Pro
'Normal'	390px	390px	390px	393px
Plus/Max	n/a	428px	428px	430px

There's a 3px width difference for the iPhone 14 and Pro, and a 2px width difference for the iPhone 14 Plus and Pro Max. That's a tiny difference, but it breaks the nice fiction that developers have been telling themselves regarding mobile devices:

If the site fits on 390px and 428px, you'll be fine. In fact, you can optimize precisely for these widths.

If it fits precisely on your iPhone Pro Max, it can now easily no longer fit on someone's iPhone Plus. You have to test both. And when a new device has another tiny change, you can add that one yet again.

Testing on specific device widths is an evolutionary dead end

If you optimize for a device today, it's going to break in a year. Your design has to be fluid and flexible to make it look good regardless of a device's width. Today, in a year, in a decade.

Of course I'm not the first to argue against optimizing for devices (this isn't even the first time I'm doing so) and recently Andy Bell has done so far more eloquently over at buildexcellentwebsit.es and in his talk Be the browser’s mentor, not its micromanager.

But it's hard to change. Designers design at 390px wide, device emulators have fixed widths and at the end of the day, time pressure maybe means that's all we use. And the site ends up being broken at random sizes, extra work needs to be done after a project is delivered and no one has a good time.

So what now?

Let go of the idea that you're designing a site to fit devices. You're designing a site to fit its content.

When you design for the content, it's always going to fill the dimensions. This means you have to let go of fixed sizes and allow more flexibility in your design, but it will be more resilient and serve you for longer. None of this is new information, but it bears repeating.

Some general tips:

Don't use fixed widths.
Design with real content.
Leave some space around elements.
Switch to different layouts not as soon as possible but keep things flexible: keep a simpler layout for slightly longer.
Let the content dictate where to add spacing.
Base your layouts on flex and grid to make them less brittle.
Decide in the browser: design the last 10% in code, not in a design tool.

In short: stick to the responsive design ground rules.

It also means you shouldn't test just on whatever the current device sizes are in your responsive design mode, device emulators or browser. Whatever tool you use, make sure you can resize your emulated device easily to test what happens to slightly larger, or smaller, screen sizes. If the tool can't do that, maybe pick another one.

How we approach it

While Polypane has plenty of device presets, they're just a small part of how we show your site. We can also show sizes based on your breakpoints, the css framework you use or the most used viewports worldwide.

Each pane that shows your site is completely freeform. Really: quickly checking a slightly smaller or larger pane is as easy as grabbing an edge and resizing.

That flexibility is much more powerful thank you might think. It makes testing a wider range of sizes essentially free. Removing that barrier makes finding out if your site has issues happen much faster. You have to experience it for yourself though.

Next time you work on a site…

Rather than picking your favorite bunch of devices, add a couple of new panes in Polypane, resize them to roughly "Mobile", roughly "Tablet" and roughly "Desktop" and we promise what comes out will be more resilient for much longer.

Designing to device widths is dead, thanks iPhone 14!

Thanks again to Davo Galavotti for rendering the iPhones image.

How Blhack doubled their development speed with Polypane

Tue, 06 Sep 2022 00:00:00 GMT

We are Blhack, an Italian software house. We develop tailor-made solutions for our customers' needs. Our technology stack is based on Ruby on Rails and React. We are also very active in the e-commerce ecosystem with our Shopify offer, ranging from custom Themes to Apps.

Blhack’s Challenges

Nowadays the expectations for the UI of a website or application are very high. To provide high quality products you always need to check that the interface is consistent at every device size. In addition, making sure that everything is accessible is an important but time consuming process.

Before Polypane we were developing one device resolution at a time, making sure to remember checking different device sizes after each new feature we implemented. Because of this manual re-checking, sometimes UI problems ended up in production before we could catch and fix them.

How Polypane helped

Alongside Polypane we tested a number of different products with more or less the same features. Out of all the available options we found Polypane to be the best one. It is competitively priced, has a very stable desktop application and is constantly updated with new features.

By using Polypane our development time is now 50% faster.

However, the real improvement comes from no longer missing UI problems and having to go back to fix them. We pride ourselves on always respecting deadlines, but when a UI problem was discovered we needed to stop what we were doing and rush to fix it, before being able to go back to the project we were working on.

ROI and future plans

Now with Polypane we are able to give our customers better UIs, thoroughly tested on every device and better delivery time, no more headaches on the small details. We can now deliver twice the websites we were doing before!

We are focusing a lot on custom development in Ruby on Rails by also creating Apps for the Shopify ecosystem. We want to be the one stop shop for our customers needs and provide our customers with all the knowledge and resources they need for their business.

Learn more about Blhack on their website Blhack.it and their custom Shopify template made with Polypane.

How using Polypane for Nureply helped Onur learn to love the web

Wed, 31 Aug 2022 00:00:00 GMT

Nureply is a cold emailing tool created by Onur Geneş that helps you to write automated emails with personalization and send those emails to the people you want to reach out to. When you add your lead’s website or LinkedIn profile URL, you will get a hyper personalized icebreaker, specifically created for them. You can also upload a CSV file with info about your leads to make it really personal. Nureply helps you send personal emails at scale.

Onur is the solo founder of Nureply, doing everything from development to design to marketing. He is currently focusing on helping marketers, small businesses and SaaS founders to sell more through email. Onur knows the struggle, as you can read in why he created Nureply, and wants to help other founders/owners to get more revenue. Below, he talks about his challenges setting up Nureply and how Polypane helped him.

Nureply Challenges

As a mobile developer for more than 10 years, I switched to web development to create Nureply. I had enough experience with back-end development, but not so much with front-end. Initially, using Tailwind CSS helped me take care of the front-end and solve the issues I encountered.

At least, that’s what I thought.

Unfortunately I discovered many inconsistencies checking the mobile version of the site. Even though over 75% of the visitors visit the site on desktop, that’s still one in four people that check the website from their mobile phone while on the go, and they weren’t getting a good experience. Worse, by depending on a framework to handle the mobile experience for me, I wasn’t sure how to approach improving the experience.

How Polypane helped

I was looking for tools to see different screens at once and came across Polypane. By using the built-in Tailwind CSS screen sizes I could quickly understand why things looked the way they do. Polypane helped me fix the issues and fully utilize Tailwind.

I use a lot of different Polypane features on a daily basis like checking console errors, better dark and light mode support, meta tags and how they look on different platforms. Still as a newcomer to web development it’s going to take me some time to learn all it has to offer. It excites me to know that whatever I need in the future, Polypane probably has a feature ready for me.

ROI and future plans

As a result of using Polypane my development time reduced by about 30 percent when it comes to implementing the responsiveness of the website.

It helped me to design better experiences at different screen sizes, but it also helped me take better care of the SEO and meta data of the site, like putting my keywords into the title and description. It took me 2+ hours to check every change but now I don’t even have to leave Polypane and it takes less than 2 minutes!

Because of this great workflow improvement I started to love web development. When I started my development career I hated every second of working on the web but now, it is actually easy and enjoyable!

If you want to improve the way you sell your product, or want to get better clients for your agency, e-mail is the most predictable, measurable and scaleable solution. With Nureply you can automate the process without sending low quality bulk spam (which we hate!) and if you do it right the results will amaze you: our latest campaign had a 78% open rate and 3% reply rate with just the first email!

Nureply automates this process and the only thing left to you is checking your emails (which you already do everyday!) while Nureply takes care of the rest.

Learn more about Nureply on Nureply.com where you can also try it out, and you can find Onur on Twitter as @onurgenes.

How Matchless Web halved their mobile optimization time

Thu, 25 Aug 2022 00:00:00 GMT

Matchless Web Studio is a one-man web agency based in Clinton, Mississippi USA. The aforementioned one man in charge is me (Jon Phillips), all-time employee of the month for 8 years and counting. My introduction to the world of web development began while I was in college studying Exercise Physiology.

While in grad school, I decided to start a fitness and health blog to promote my personal training and nutrition coaching services in hopes of attracting local clients I could work with to help me pay bills. Rather than build my blog on my own, I hired a friend to build a blog for me.

Long story short, I got a great website out of that deal. But when I was ready to add new features and functionality to the site, I couldn’t afford to pay my developer to do that work. And I certainly couldn’t figure out Concrete 5 on my own. Believe me, I tried.

So I took it upon myself to learn how to build a website from the ground up. I settled on WordPress as my CMS of choice as it seemed to be a pretty popular platform with plenty of free resources available online. YouTube University and a lot of Googling helped get me off the ground with learning WordPress. I quickly realized my newfound skills would be valuable to anyone who needed a website and, like “old me”, would be willing to pay someone to handle it for them.

In 2020, my interests in WordPress page speed and performance lead me to create my first digital product - a course on WordPress Site Speed Optimization. Nowadays, I focus on building websites optimized for performance. And I teach others how to make their WordPress websites fast.

Challenges

When it comes to making websites mobile-friendly, that’s a task I’ve historically found to be daunting. When you’re editing within WordPress, you don’t exactly get a sense of how a page might look when viewed on specific devices. Yes, most builders provide default breakpoints for desktop, tablet, and mobile, but I’d be lying if I said those breakpoints are sufficient to optimize a site for mobile.

Prior to discovering Polypane, I wasted an innumerable number of hours trying to optimize layouts for mobile. I’m glad I can’t remember the exact number, because I’d be embarrassed to know at this point.

I knew there had to be a better way of optimizing for multiple device sizes at once, but I didn’t know of a tool that would allow me to preview my sites across multiple devices without whatever app I was using becoming painfully slow and/or having a UI that wasn’t wasn’t pleasant to use.

Truth be told, I don’t recall the names of the websites or apps I attempted to use before discovering Polypane. I just know I tried several tools and wasn’t thrilled with anything I came across. They were clunky and introduced friction into my workflow instead of taking it away. I’m a sucker for a great UI. And I found that in Polypane. The interface feels the way I need a tool like this to feel, strange as that may sound.

How Polypane helped

Polypane has sped up my workflow by a margin of 3-4 hours for every website project I’ve worked on since I’ve been using it. That’s 3-4 fewers hours spent troubleshooting CSS at different breakpoints and editing media queries.

I still don’t love optimizing websites for mobile. But it’s not a task I dread like I once did. Now that I breeze through my mobile optimizations with Polypane to preview my sites, every one of my projects have been more profitable than before.

I watched several demos on Youtube of Kilian walking users through how to use Polypane on their own site(s). My initial attraction to Polypane was the time savings I knew it would deliver on all my website builds. But by watching the demos and ultimately taking Polypane for a free trial, I learned just how much Polypane could do beyond just helping me troubleshoot CSS.

Once I realized just how much value was packed into this tool, it was a no-brainer to purchase. I’m still learning tons about website accessibility, and there’s no other tool I’ve found that can highlight room for improvement in the area of accessibility like Polypane.

ROI and future plans

As mentioned earlier, Polypane has sped up my workflow by a margin of 3-4 hours for every website project I’ve worked on since I’ve been using it. My time required to make mobile optimizations has easily been cut in half! Polypane has been proven to be a true time saver in my daily work life.

At the time I purchased Polypane, I wasn’t aware of the Core Web Vitals integration. Maybe it wasn’t present at the time I purchased it, but I wouldn’t put it past myself to have overlooked it. I had no idea I could get Core Web Vitals at any breakpoint I wanted!

As I was pleased to discover, Core Web Vitals can be displayed for any panes you have open in Polypane. It’s an excellent way to get an idea of how a page of a website is performing in terms of Web Vitals across multiple device sizes all at once. You can’t even get that with Google’s own tests like Lighthouse and Page Speed Insights!

This present surprise makes it possible to test Core Web Vitals in a lab environment across more device sizes than Google’s native tools allow. It’s a game changer for anyone interested in optimizing websites for performance.

I’m faster when optimizing my sites for mobile across a variety of popular device viewports. And can readily identify Core Web Vital culprits when it’s time to debug a site prior to launch. In short, Polypane helps me get high performing websites built and launched faster. And that means more projects can come into my pipeline than ever before because I’ve freed up the bandwidth to take on more work when I want it.

Today, my work revolves around WordPress performance and page speed optimizations. If you’re tired of refreshing your website hoping for improved Page Speed Insights scores to no avail, we should connect. I’m available for hire if you want someone (who isn’t you) to handle all your WordPress performance needs.

Anyone interested in making their WordPress site(s) faster should check out my FREE WordPress Site Speed mini-course here. There’s a paid course for those that want to take their website’s performance to the next level. And if you have questions about site speed optimization, join my free Circle community where the topics of conversation are always centered around WordPress speed and performance.

Premium community members get additional access to me every month including live Zoom office hours where we talk shop and sometimes tackle community member’s performance issues for everyone’s benefit. Connect with like minded WordPress speed junkies and hone your site speed skills over at HolyGrailWP.com.

How Short Hills Design saves over $700 per year thanks to Polypane

Thu, 18 Aug 2022 00:00:00 GMT

Short Hills design is a closely-knit team of six located in the USA, UK, Canada and Finland that helps healthcare and other professional small business service providers get 10-20 new patients/clients per month without spending a fortune on paid advertising.

Short Hills design has been in business since 2008, and we are proud to have clients across the United States and Canada. We build conversion-oriented, SEO-optimized WordPress websites, and offer a la carte marketing services including Local SEO, traditional SEO, and performance-based PPC management.

As we build and maintain a large number of WordPress websites, we naturally needed a way to be able to check to make sure that our sites look great at all responsive breakpoints. It’s an especially important need for our non-page builder sites such as our Genesis sites and our sites based on our custom, codex-based baseline theme.

Challenges

In the past we used products such as Browserstack where we could fire up an emulator to see our sites in real-time. This approach proved to be very costly and time consuming.

We then shifted to responsive screenshot software which was faster in picking up responsive issues, but was insufficient especially with JavaScript heavy sites with delayed loading. Thus, we needed some type of hybrid between a live device and a responsive screenshot generator.

How Polypane helped

After looking for online services to solve the problem, we discovered that there were apps we could use and test our sites directly from our desktops and began to explore that approach.

We tested a few alternatives and ultimately decided to go with Polypane. The deciding factor was the interface – it wasn’t cluttered and we could use the built-in device panels to quickly test our sites. We have two licenses and will likely need more in the future as we grow.

Workflow example

We put out a blog post about our Google Analytics migration services when I realized that the page was fully justified on mobile. So I ran a check to see if it was just one breakpoint – or all of them:

Seeing that it was all of them, I was able to quickly patch the CSS of the .single class in order to fix the problem.

So within a few minutes, I was already confident that the temporary fix worked and that our post would display properly. I could then take a breath and without frantically rushing, carefully dig deeper to figure out why the page was rendering incorrectly in the first place, and to add a definitive fix.

ROI and future plans

Conservatively, we save approximately 2-4 testing hours per build by being able to perform responsive testing directly on the desktop. Considering that our average development phase of a website build takes us around 28 hours, saving 2-4 hours is a 7-14% reduction in build time.

It’s made our workflow more efficient by saving us time with responsive testing. Polypane is also fantastic for when we have to make updates on older sites (non-page builders) since responsive testing on these types of sites often requires multiple iterations of HTML and CSS. It’s 1000x easier to hit ⌘ r than it is to run a new set of screenshots or fire up an emulator every time we need to check a tweak.

We were initially looking to have a more efficient way to perform responsive testing so I figured that Polypane would save us time, but I didn’t anticipate that it would save money as well.

At $108 per license per year, the cost is well worth it for the functionality we need. And while not every responsive testing suite runs as a desktop application in a dedicated browser like Polypane does, the product we had used previously would have cost us a little over $900 per year for the same two licenses. Thus our switch to Polypane saves us $700 per year. The fact that Polypane saves us money in software costs and in development costs (increasing net profit) is a welcome bonus.

Short Hills Design is a closely-knit team of six located in the USA, UK, Canada and Finland that helps healthcare clients and professional service companies get more new patients/clients online in an efficient, affordable, and stress-free manner. Our clients see us as their trusted advisors, and in turn we encourage our clients to take the reins on their own websites, and bring us in to help as much as they’d like, or as little as they like.

You can find us at shorthillsdesign.com and on Twitter at @shorthillsd. Be sure to check out our growing ShortHillsDesign YouTube channel where we release videos to help our clients make informed marketing decisions, and share tips for other agencies who can hopefully benefit from our experience.

Polypane 10: detachable panel, navigation sync, element screenshots and more

Fri, 05 Aug 2022 00:00:00 GMT

Polypane 10 brings a number of often requested workflow features to Polypane: a detachable panel, the ability to turn off navigation sync for panes and element screenshots. It also updates Polypane to Chromium 104, adds more features in the screenshot editor and has more accurate color blindness simulators.

Detachable panel

By far the most requested workflow improvement in Polypane was to be able to show the panel in its own window. It took nearly 50 hours to get it done but it's here!

This is ideal in a multi monitor setup or with a wide screen, where you can have the panel on a different window without it obscuring the panes in Polypane. Its position and size are of course remembered, and everything else works as you expect it to work. I hope you like it!

Another often requested feature was to have the ability to turn off the navigation sync between panes. With this feature you can have your live site and your in-development site shown side-by-side, making it easy to compare the two.

You can turn navigation sync off per pane in the emulation settings, after which the pane title changes into a mini-address bar. A broken link icon tells you that navigation sync is off for that pane.

What's neat about this feature is that all other things can still be synced, so you can have two separate domains, but clicking links will still let you end up on the right page. Or you can turn off click syncing and compare two pages on the same site.

But there's way more that this enables. You could have a pane with your design system open and since all the inspection tools still work in unsynced panes you could quickly get values from your design system, and apply them to your website. And I'm sure there's more use-cases to come up with (let me know what you end up using this for!)

All other Polypane features still work!

You can inspect an element using Polypane peek and if both pages share the same element (like a header), Polypane will still show the tooltip in both panes. The Elements panel will automatically switch between the two pages depending on where you inspect an element and the Polypane console will collect console messages from both panes (and let you execute console commands in both!)

This will dramatically speed up any work you need to do across pages or domains.

Duplicate panes

A somewhat related feature that has been on our backlog for years is the ability to duplicate a pane. Each pane now has a + button that creates a duplicate of that pane with all the same settings.

Configure a pane the way you like it, then duplicate it and show a different site in it to compare. Thanks Sam for first requesting this!

Screenshot updates

We've made various improvements to the screenshots workflow: you can now make screenshots of individual elements, we have new annotation and saving features and we fixed an issue with overview screenshots when you have more than 14 separate panes.

Single element screenshots

Instead of creating a viewport or full page screenshot, you can now also select "Element". Once selected you can hover over the pane to select which element to screenshot. Ideal for screenshotting smaller UI elements for your swipe file or to share in issue tickets.

If clicking an element in the pane is difficult, you can also select the element in the elements panel and click the screenshot button there. I was planning on adding this feature eventually (it's been on the backlog since 2019), but Eric successfully nerd sniped me into thinking about it for a day or two, after which I implemented it in a single morning.

Emoji and redlines in screenshot editor

The screenshot editor now has two additional options: There's a full emoji picker to let you pick from all emojis in the 13.1 unicode set, and a way to draw redlines on top of the image.

The emoji picker shows all the emojis in their categories and also lets you search through them.

Whenever you select an emoji it will be added to the quick-select list so you always have the most used emoji available.

"Measure" lets you quickly annotate sizes in screenshot with "redlines". The length of a line is automatically shown on top of it and by holding shift it snaps horizontally, vertically or diagonally. This way annotating the size of elements becomes a snap!

Save as PNG, JPEG or PDF

Screenshots were always saved as lossless PNGs. Now you can choose to save the images as JPEG or PDF as well. Pick the format that works best for your situation right in the app instead of having to convert them in a third party tool.

Meta panel updates

Even though social media sites never really advertise it, they frequently tweak the design of their previews. Sometimes more overtly (adding or removing icons) and sometimes more subtly (slightly different shades of grey) so we always have something to update with each release and this release is no different. We've also added support for showing the content of the humans.txt file if it exists.

This time round we've updated the Twitter summary social media cards, the Telegram web preview and the Discord previews. All of them had subtle updates to the design, and Telegram and Discord also updated which meta data they give preference to. Polypane's now fully up-to-date with all three of them again! Thanks Charlie and Hiro for letting me know about these updates.

Humans.txt

While robots.txt is the file where you set information for crawlers, Humans.txt is the file where you add information for, you guessed it, humans. It's a pretty loose spec but the idea is to give an overview of the people behind a website as well as allowing some information on the site itself. It's fun to read through when a site has it, so that's why Polypane now shows it in the overview.

While implementing this I spotted that none other than Polypane user Rowdy contributed the Dutch translation for the Humans.txt website. How cool is that!

Elements panel updates

We've added some new features to the elements panel, as well as improved the CSS fetching and parsing we do under the hood to make sure we capture all the CSS styles applied to an element.

Highlight all matching elements

Each CSS selector in the Style tab now has a [+] icon you can click to highlight all the elements that match the selector across all panes, so you can quickly see what editing those styles will affect.

Element Screenshot button

The screenshot button in the element info will let you screenshot that element right from the element panel, without first having to select it in a pane.

Ideal if you just made some changes to the styling or content of an element and then want to share the updated design.

Better access to CSS files

We've also improved the way we access CSS files so even the CSS in files with prohibitive access headers can properly be shown in the elements panel. The result is that for more sites we can show all the CSS that's being applied to an element. You shouldn't really expect to notice anything about this for 95%+ of the websites.

New color blindness simulators

We now use more modern and accurate models for our Protanopia, Deuteranopia and Tritanopia color blindness simulators, based on recent scientific research. These will give a more truthful visualization of how people with these types of color blindness experience your pages.

Other updates

There is a whole slew of other updates and bug fixes as well so be sure to scroll through the changelog to see if anything catches your eye, but here are a few I wanted to highlight.

Custom headers UI

The UI to add custom headers is now a little bit smarter. Instead of a freeform text field you can now add headers one by one (like our storage panel, which we also gave a small UI update) and we will auto-suggest known headers as you fill them in.

Custom formatting with Prettier

Polypane formats CSS and HTML in multiple places like the Live CSS panel, the Source Panel and when copying CSS snippets from the Elements Panel. For this we use our own formatting rules and that's great most of the time, but very annoying when you use different formatting rules and need to reformat everything copied into your project.

So we now support setting custom Prettier settings so you can make Polypane format code the same as your project, making copying code seamless. This was an excellent user request by Mathieu, thanks!

Automatically filtered out of Simple Analytics stats

If you use Simple Analytics for your visitor stats, any visit with Polypane is now automatically filtered out of the results without you having to do anything. This means you no longer have to conditionally load your Simple Analytics script to prevent the many page loads in Polypane from ending up in your stats.

Together with the folks at Simple Analytics we came up with a nice solution that doesn't require users of either Simple Analytics or Polypane to do anything. Thanks to Adriaan from Simple Analytics for making this happen, and thanks to Mike for first asking the both of us if we could implement something like it.

Updated Chromium

Chromium has been updated to 104.0.5112.81, and ships with a number of experimental features turned on by default, like support for the page transition API, container queries, CSS Scopes and :has().

Head over to our docs on Experimental Chromium Features for a full overview of the available APIs. If you'd like to see one activated, Let us know.

Get Polypane 10

Polypane is available for Windows, Mac and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free.

Removal notice

Polypane 10 removes the HTML5 Document Outline in the Outline panel. It was never properly implemented anywhere, but recently has also been removed from the official specification. since you should not use it to base decisions on, we decided to remove it from Polypane.

Polypane 10.0.1 Changelog

Fix issue causing custom panes to continuously reload

Polypane 10 Changelog

New Features

New Panel can now be detached from main window
New Ability to turn off navigation sync
New Element screenshots (Thanks Eric!)
New Emoji picker in Screenshot Editor
New Redlines in Screenshot Editor
New Screenshots editor: Save as PNG, JPG or PDF
New Duplicate pane option (Thanks Sam!)
New Humans.txt is now shown in Meta panel
New Custom Prettier settings support for Live CSS, Source and Elements panel (Thanks Mathieu!)
New UI and auto-suggestions for custom headers
New Elements panel: Highlight all matching elements feature

Improvements

Improved More accurate color blindness simulators
Improved Dark mode: Improve contrast of text
Improved Global zoom: Auto-select the entire number when clicking (Thanks Bryce!)
Improved Outline panel: take presentational headers into account when testing for issues
Improved Outline panel: overlays now show tags above element
Improved Storage panel: updated design with better alignments
Improved Storage panel: input fields now work the same as elsewhere in the app
Improved Elements panel: Automatically scroll value suggestions into view (Thanks Ferry!)
Improved Elements panel: Add icon for box model button
Improved Elements panel: Better access to CSS files with access control headers
Improved Inspect element shortcut now picks Elements Panel or Chromium devtools depending on settings
Improved Meta panel: Update Telegram Web preview (Thanks Hiro!)
Improved Meta panel: update Hover style of Twitter summary cards
Improved Meta Panel: Improved Discord previews (Thanks Charlie!)
Improved Chromium: Add support for CSS Scopes
Improved Add more space around navigation buttons (Thanks Jay!)
Improved Add more space around pane management icons
Improved Favicons are now extracted from the current panes rather than extracted from a background fetched page
Improved Red borders around panes for disabled CSS and Chaos test debug tools and offline panes
Improved Device list now scrolls items into view when using the arrow keys
Improved New Pixel 5 device preset
Improved New panes always use the current color-scheme
Improved Use correct background color in screenshots for pages that have no specified background color
Improved Active navigation is cancelled before starting a new navigation
Improved Updated Accessibility rules
Improved Updated Google fonts

Removals

Removed HTML5 Document Outline removed from Outline panel

Fixes

Fix Prevent console error for sites collecting sourcemaps (Thanks Mitchell!)
Fix Prevent vertical scrolling with height: auto panes and global zoom in horizontal layout
Fix window.__polypane issue with height: auto panes
Fix overview screenshots with 14+ panes never resolving
Fix Color picker for left-aligned panel is now visible
Fix Elements panel: remove unneeded vertical height in a11y tab
Fix Elements panel: Add style now automatically grows to fit content
Fix Outline panel: show warning for top level URLs missing aria-current
Fix Console panel: %c messages were showing the styling as well
Fix Console panel: various display issues
Fix Devtools extension dropdown rendering issue
Fix Color picker for rulers now repositions when needed
Fix Vue-cli HTML5 navigation sync works again (Thanks Tim and Josee!)
Fix Device list arrow keys didn't select last device when pressing up
Fix Inline stylesheet option always inlined stylesheets even when off
Fix Noto Sans JP font causing performance issues (Thanks Hiro!)
Fix Row overlay always used the default color

Polypane 9.1: Form autofilling, fast overview screenshot and outline panel overlays

Tue, 21 Jun 2022 00:00:00 GMT

Polypane 9.1 comes with new features to quickly test forms, a much faster and robust overview screenshot feature, support for the INP web vital and a new way to show the heading and landmark structure inside the panes. We've also added new functionality to the screenshot editor, made it easier to customize your default tab settings and many other features. Read on for the full details.

Autofill forms and custom debug value testing

When testing forms, the last thing you want to do is manually fill in all the values (even if they get synced across all panes). That's why we added two new features to Polypane to help you quickly test an entire form, and to test with specific values for debugging, data handling and error messages.

The "Autofill Form" option appears whenever you right-click inside a form. With it, Polypane automatically fills in reasonable data for all the elements based on autofill attributes, input types, element names and placeholders.

And when you have form syncing turned on, that will be correctly synced across all panes as well. In addition to "Autofill Form" you can also quickly clear any form by selecting the "Clear Form" option.

But there's more to just filling an entire form. You also want to test various different types of values, like ñôń-ßþáñðá®ð characters, buggy values and potential exploits. That's what the new "Custom Value" option lets you do. It also gives you quick access to valid (test) credit card data, lorem ipsum and other handy snippets.

Right-click any form element and select values from a large list of categories to fill into the form. You can use this to test error handling, find security issues and verify data-integrity.

Though we have an extensive list of categories of custom values, do let us know if you're missing something! We're happy to add them.

Screenshot updates

We are thrilled with the response we've gotten to your new screenshot workflow in Polypane 9 and we've been improving and expanding on that foundation in this release.

Fast overview screenshot

Like our regular screenshots, the overview screenshot also happened in a background process. This was the cause of many small bugs related to page loads, rendering bugs and overall just meant it took quite a long time to create a screenshot.

We now use the same method we use for pane screenshots to create the new overview screenshot, making it faster than ever and making it easy for you to annotate or redact the overview screenshot.

Add numbers feature

We've added a new button to the stickers option in the screenshot editor that will let you add different numbers to the screenshot quickly. This is useful to explain ordering issues, or to refer to when adding the screenshot to a ticket or e-mail. Thanks to Eric for requesting this feature!

Outline panel overlays

The overviews in the outline panel are great when building or testing a website because they quickly show if your site structure makes sense, but if you're auditing a page often you'll want to visualize issues more easily.

That's why we now support overlays not just for the focus order, but also for all the other overviews. You can now turn on the overlay, create a full page screenshot and add it to your reports for a quick visual overview of the structure and any issues that Polypane found:

The new overlays are available for:

Headings
Landmarks
Links
Images
Focus order (was already available)

They will show the warnings already displayed in the outline panel right on the page so all the same information can be communicated outside of Polypane. Perfect for when you want to quickly see in-context whether an alt-text makes sense for an image, if a heading level matches its visual prominence and more.

Interaction to Next Paint (INP) Web vital

The new "Interaction to Next Paint" web vital is similar to "First Input Delay", except it continuously monitors your web page for how responsive it is to user input. The web vitals tooltip monitors this new value (it can change as you use the page) and also shows you how well the page scores globally using CrUX data.

New Tab customization

Polypane has had a few tricks that let you customize the new tab behavior, like remembering the last-chosen layout, or letting you set any tab as the default template for new tabs. We're adding two new features that should make it a little easier to keep your favorite configurations around.

Workspace as new tab

Each workspace can now be set as the default set of panes for the new tab. So if the default three panes don't fit your needs you can pick from any of the default or your custom workspaces and set those as default panes. To set a workspace as the default tabs for a new pane, press the "home" icon on its card:

Duplicate tab

You can now right-click any tab and select "duplicate tab" (along with "close" and "new") to make a copy of the current tab and focus it. This will copy over all the settings like panes, debug tools, layout and panel settings.

Full layout updates

In previous versions of Polypane the pane options for the full layout were available by clicking a kebab menu in the header. In Polypane 9.1 they are now part of the header itself.

This means that things like emulation and debug tools are much easier to get to for full mode, but also that we've now enabled the reference image and rulers for the Full layout as well.

Outline panel

Beyond the new overlay features powered by the Outline panel, we've also improved various parts of the panel itself.

Show differences between accessible name and text content

Previously, Polypane showed the accessible name or if that wasn't available, the text content of any element. Now we default to the accessible name but we will also show the text content of an element when it's different.

We show that in two ways: either it's just the casing that's different (for example because CSS is used to change the casing) or the entire content is different.

This is great for making sure that the accessible name and (visible) text content haven't diverged, and that differences are intentional.

Scroll-to-element in each pane

In previous versions of Polypane, hovering over an element in the Outline panel scrolled the first pane to that element, and all the other panes scrolled the same percentage. The element doesn't have to be at the same position on each pane though so this didn't do a great job of showing where the element was.

In Polypane 9.1, we now scroll each pane individually so that the highlighted element is visible in each pane. Scroll syncing is automatically picked up again at the next scroll.

Improved display of presentational headings

For sites with a large set of presentational headings we showed them at their specified heading level but this wasn't correct, and led to some strange hierarchies. Instead, we now show presentational headings as if they are one level lower and show them diminished compared to other headings to indicate they're not part of the heading structure.

Elements panel

We're always working on the Elements panel and incorporating the feedback we get from users into it. This time round, we made quite a significant change to the design and fixed some of the bugs that snuck in in Electron 9.

Updated design

While I personally really liked the grey background, the devtools of all other browsers use a white background for the tree view and styling overview. To make it easier for people to switch over to Polypane, we're now also using that color scheme. We might offer the grey as a configuration option in the future, depending on the feedback we get. So let us know if you like this change!

In addition to the new background, whenever you hover over an opening or closing tag in the tree view, we highlight the corresponding tag so you can quickly see which closing tag belongs to which opening tag even for deep nestings.

Elements panel bug fixes

In the previous release we broke the display of both @font-face and @keyframe declarations. Those are now visible again, and we've also updated the display of them so they're clearly separate from the 'normal' CSS styles.

Meta panel

The meta panel got two smaller updates:

Updated Twitter card design

Twitter subtly updated their card design, so we also subtly updated the card design to keep everything pixel-perfect.

Highlight duplicates in robots.txt

If you have duplicates in your robots.txt we now highlight that. They don't do much harm, but you can delete one anyway:

Smaller updates

Here are a bunch of other noteworthy updates.

HWB support in color pickers

With support for HWB landing in Chromium and other browsers, the Polypane color picker now supports the notation as well.

Icons in the panel

All the tabs in the panel now have an associated icon. This'll make it easier for people to quickly find the right tab and makes it easier to tell them apart too:

Auto-growing inputs in Storage panel

The elements and console panels both already had auto-growing inputs, but now the storage panel will also increase the height of inputs if the content takes multiple lines. This will make it easier to edit e.g. json in localStorage.

Layout debugging shows `::before` and `::after` elements

Layout debugging draws a line around each element, but until now it didn't outline pseudo elements. In Polypane 9 pseudo-elements are now outlined with dotted lines.

You can turn layout debugging on by pressing cmd/ctrl + d or by activating the "layout debugging" debug tool.

Improved pinch-to-zoom on macOS

Pinch to zoom on macOS for the horizontal and vertical layout no longer zooms in and out with a fixed cadence, but follows your pinch gesture instead so it becomes much easier to zoom to your preferred size with a quick pinch.

Updated Chromium

Chromium has been updated to 102.0.5005.63, and ships with a number of experimental features turned on by default, like support for the page transition api, container queries and :has(). Head over to our docs on Experimental Chromium Features for a full overview of the available APIs. If you'd like to see one activated, Let us know.

In this release we turned on support for the Page Transition API

Get Polypane 9.1

Polypane is available for Windows, Mac (universal dmg for both Intel and M1) and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free.

Removal notice

Polypane 9.1 removes pane filters. They were rarely used and a source of confusion for users. The alternative is using different workspaces and switching between them.

Polypane 9.1 Changelog

New Features

New Autofill form feature
New Fast overview screenshot
New Outline panel overlays for headings, landmarks, images and links
New Debugging suggestions for form fields
New Add number plugin for screenshot editor (Thanks Eric!)
New INP webvital support
New Set workspace as panes for new tab
New Duplicate tab feature

Improvements

Improved Full layout now shows pane options inside the address bar
Improved Support for rulers in Full layout
Improved Elements panel highlights matching closing and opening tag on hover
Improved Elements panel now has a white bg for CSS
Improved Support for the page transition API
Improved Outline Panel: Show differences between accessible name and element content
Improved Outline Panel: Presentational headings now differ in style
Improved Outline Panel: Complex headings structures are now shown more logically
Improved Outline panel: scroll to element now happens individually in each pane
Improved Meta Panel: Updated layout for Twitter previews
Improved Meta panel: robots.txt overview now warns for duplicate entries
Improved Storage panel uses auto-growing text areas
Improved Layout debugging now shows before and after elements with dashed outline
Improved Performance gauge icon is now shown in red
Improved Reload button now supports Stop action
Improved All panels now have an associated icon
Improved Color pickers: HWB support
Improved Color selection: use the same format as the color picker
Improved Tabs without close button no longer preserve space for it
Improved Support zooming the text in the panel to 200% (Thanks Martin!)
Improved Pinch-to-zoom on mac now follows pinch speed
Improved Support page zoom in full height screenshots
Improved Console: better support for nested objects
Improved Updated accessibility ruleset
Improved New Google fonts

Removals

Removed Pane filtering has been removed.

Fixes

Fix Elements panel: shows @font-face correctly again
Fix Elements panel: Prevent closing tags from being shown for collapsed elements in tree view
Fix Elements panel keyframe overview didn't show custom properties
Fix License requesting flow now uses correct background color in dark mode
Fix Contrast checker now excludes injected elements
Fix 'Paste and go' is now available when copying links intp the address bar again
Fix Meta panel: prevent double encoding of URL params (Thanks Nicolas!)
Fix Meta panel didn't display data if the page had zero interactive elements. (Thanks Sampic!)
Fix Alt+left/right shortcuts for history navigation
Fix Reference image alignment issue for clipped panes (Thanks Dan!)
Fix Scroll sync didn't work after closing and reopening the main window on Mac
Fix Reopening Polypane window on Mac after registering app no longer show 'license expired' message
Fix Issue with sites shipping babel-polyfill
Fix Clicking color contrast suggestions didn't copy the color
Fix issue with syncing keydown and keyup events (Thanks Mitchell!)

:where() :is() :has()? New CSS selectors that make your life easier

Mon, 16 May 2022 00:00:00 GMT

When people talk about CSS complexity, a major contributor to that is CSS specificity, or writing effective CSS selectors. The more you add to a CSS selector, the more precise it is, but also, the more specific it is, so the harder it will be to overwrite styles if you need to at a later point.

This double edged sword is what makes writing good CSS selectors so hard: you need to be specific, but not too specific. It's why there are many strategies for writing good CSS selectors or avoiding the issue altogether, from OOCSS to BEM to Atomic CSS.

This article is adapted from a talk Kilian gave at Web Directions Hover 2022. You can contact us if you're interested in Kilian presenting this at your conference, meetup or organisation.

CSS is quickly evolving at the language and syntax level. Container queries and cascade layers for example will each have their impact on the selectors you will write in CSS. Cascade layers are widely available, and you can test with Container queries right in Polypane.

In this article though, we're not going to focus on the syntax, but we're going to focus in on some new features that are available for the CSS selectors: the :is(), :where() and :has() pseudo-classes. Yes, I flipped them in the article title because they sound more fun that way.

A bit of history

Before there was the :is() pseudo-class, there was the :matches() pseudo-class. And before that there where the *-any pseudo-classes: :-moz-any() and :-webkit-any().

You might be surprised to learn that the *-any pseudo-class has been around since 2010. It was introduced in Firefox 4 as :-moz-any(), outside of any specification, and actually worked pretty much the same as the :is() class works now.

Support in other browsers landed first as :-webkit-any(), and later it got added to the specification as :matches(), which also had support in various browsers.

This :matches() pseudo-class came with a limitation though, like the :not() selector, it only supported "simple selectors".

What are simple selectors?

Simple selectors are selectors that only contain a single element or element property, like a class, attribute, id or pseudo-class. As soon as you add a combinator, like a space or ~ or +, or a pseudo-element (like ::first-letter or ::after), you add a relation to another element and it becomes a complex selector.

The definition of "simple selector" changed between CSS2 and CSS3: in CSS3 there is now a difference between a "simple selector", which is one thing (one class, one element, etc) and a compound selector, which is any selector that does not have a combinator.

That means that this CSS Selector is "simple" (though compound) :

p.hover#22[chat~=active]:focus

and this one is "complex":

div p

This obviously put a limit on how useful both the :matches() and :not() selectors were, so luckily both of those got updated in later specifications and they now also support complex selectors, meaning we can use them to select elements based on their relations.

And that's not the only thing the :not() selector contributed to this history. The CSS Working group renamed :matches() to :is() because, for one, it was shorter to type, but it also provided a good pairing with :not().

Is, and is not.

Checking for support for `:is()`

That brings us to the now, 2022. The :is() pseudo-class is supported in all evergreen browsers, with support only missing in IE11 and Opera mini.

If you want to test for support you can use the @supports rule with the selector() function, which has been supported for slightly longer than :is() itself and works for all three pseudo-classes we're discussing in this article:

@supports selector(:is(*)) {
  /* your CSS */
}

The `:is()` pseudo-class

To target multiple paths in CSS, you can add a comma between multiple selectors. Each selector will then be used to select elements.

nav > ul a:hover,
footer > ol a:hover,
aside > p a:hover {
  color: purple;
  text-decoration: underline wavy deeppink;
}

This is useful but for closely related selectors it usually leads to duplication. specifically, the a:hover part is the same in each of the selectors.

This is annoying since if that ever changes, you have to fix that in three places at the same time, but there is something trickier going on with multiple selectors as well: if one of them is invalid, the entire block of CSS is discarded.

Now you might think that it'd be pretty hard to write a selector that's invalid. Maybe one that never applies, like :not(*), but an actual invalid one?

Well, consider new CSS pseudo-states that are only supported in some browsers, like :fullscreen (Safari only supports :-webkit-full-screen):

:fullscreen,
:-webkit-full-screen {
  background: red;
}

To style a fullscreen element in Chrome and Firefox you need :fullscreen, but in Safari you need :-webkit-full-screen. If you put those together then Firefox will see the :-webkit-full-screen selector, deem it invalid and discard the entire thing, and likewise Safari will see :fullscreen and discard it as well.

To style this in both browsers in a way that doesn't break, you would have to create two separate rule sets and duplicate the styling in both blocks. More duplication!

:fullscreen {
  background: red;
}

:-webkit-full-screen {
  background: red;
}

That means selector lists have two problems:

Duplication in the selectors you write, making updating them frustrating.
If one of the selectors is invalid, everything is ignored.

Enter `:is()`

Solving both these issues with a single two-letter pseudo-class.

Firstly, the duplication, instead of creating a separate selector for each variant here, We can rewrite it to create mini selectors with the :is() pseudo-class, and then we only have to write the rest of the selector once:

:is(nav > ul, footer > ol, aside > p) a:hover {
  color: purple;
  text-decoration: underline wavy deeppink;
}

Do you see how we essentially create a smaller list of selectors inside the :is()? By inlining the parts of the selectors that are different, we can make the entire selector much smaller and more readable.

And the :is() pseudo-class solves the second issue by creating a new type of list of selectors: the <forgiving-selector-list>. This will parse each selector individually and discard the ones it doesn't understand.

This means we can wrap our slider track pseudo classes in an :is() and browsers will just pick the ones they understand and ignore the rest:

:is(:fullscreen, :-webkit-full-screen) {
  ...
}

That's great! The :is() selector saves us typing the same thing in multiple selectors, and also makes our CSS more resilient by introducing a forgiving selector list.

Filtering elements by their parents

A cool feature I learned from Stephanie Eckles in her Modern CSS Toolkit presentation (you can find the tips mentioned there on SmolCSS too). Because the :is() pseudo-class can take complex selectors, you can also add a list of ancestors and then select your element with a *. That means these two selectors target the same element:

a:is(nav *) {
  ...
}
nav a {
  ...
}

This works because the browser will look for all elements that match both a and that match nav *. The end result being that you're actually selecting nav a, the a element matching both a and *.

Nesting pseudo-classes

Another consequence of complex selectors being supported, is that you can nest pseudo classes:

:is(div:not(.demo) nav) {
  ...
}

What this selector selects is:

All nav elements,
That are in a div,
But only if that div does not have a class of "demo".

About `:not()`...

:not() will break if it contains invalid selectors because the specification states it should use a "regular" selector list, not a "forgiving" selector list like :is().

The workaround for that is to nest an :is() selector in your :not() selector, though it would be better if the specification got updated so that the not selector also uses a forgiving selector list.

/* breaks */
not(:fullscreen, :-webkit-full-screen) {
  ...
}

/* works */
not(:is(:fullscreen, :-webkit-full-screen)) {
  ...
}

Things to look out for with `:is()`

The :is() pseudo-class itself also comes with a few gotchas:

No support for pseudo-elements

You can not select pseudo-elements like ::before and ::after, since they aren't elements present in the DOM and so can't "match".

/* won't work */
a:is(::before, ::after) {
  ...
}

/* You have to write */
a::before,
a::after {
  ...
}

Spaces are significant

The space is part of the selector, so you have to keep that in mind.

h1:is(:hover, :focus) {
  ...
}
/* h1:hover, h1:focus { ... } */

h1 :is(:hover, :focus) {
  ...
}
/* h1 *:hover, h1 *:focus { ... } */

In the above example, the top line h1:is(:hover, :focus) will evaluate to the hover and focus applying to the h1 but adding a space between the h1 and the is selector evaluates to the hover and focus applying to any descendant. The universal selector (*) is added implicitly.

Specificity

Everybody's favorite CSS topic, and :is() does something interesting with it.

Specificity in selectors is expressed as three numbers: the first is for IDs, the second for classes and pseudo-classes and the third for elements and pseudo-elements. Any number will prevail over the ones after it, so you can have a hundred classes and still a single ID would win in terms of specificity.

#id = (1,0,0)
.class = (0,1,0)
div = (0,0,1)

If you want to explore this for yourself, We made an online specificity calculator that visually explains which parts your selector is built up from and explains the scoring.

To determine the specificity of an :is() selector, browsers don't just take the default value of a pseudo-class (0,1,0), but they take the value of the most specific selector in the is pseudo-class. This means you can easily blow out your specificity without paying attention to it.

/* regular pseudo-class */
:first-child {
} /* (0,1,0) */

/* :is pseudo-class */
:is(h1, ul.nav, #message) {
} /* (1,0,0) */

The specificity of that second example ends up being (1,0,0) because of that one ID selector, even if that selector doesnt actually match any element in your DOM.

The most specific selector determines the specificity.

What if there's no way around using a high-specificity selector? That brings us to the next pseudo class on our list.

The `:where()` pseudo-class

:where() was introduced a little later but is now as well supported as the is() selector: all evergreen browsers, but no support in IE11 or Opera mini.

It was created to solve this issue of specificity. It works exactly the same as the :is() pseudo class with one key difference: its specificity will always resolve to (0,0,0), regardless of the selectors inside it.

:where(div) /* (0,0,0) */
:where(.class) /* (0,0,0) */
:where(#id) /* (0,0,0) */

This can help you escape out of issues where your only recourse would've been an even more specific selector or adding an !important to a CSS rule.

While useful for specificity issues, there is another area where I think the :where() pseudo class will hopefully make a big impact: in CSS libraries and resets.

A simpler alternative for cascade layers

With the :where() pseudo class, libraries can ship their styling with zero specificity. You get all the benefits of a library without having to deal with specificity to overwrite its styling. Open Props is a CSS Library that already applies this pattern.

While cascade layers may be getting more attention lately as a potential solution for the same problem of specificity and CSS frameworks, I think the effectiveness of :where() should not be underestimated. `:where() can be applied at a selector level, and doesn't require you to change and keep in mind your entire CSS architecture in the way cascade layers do.

So that's :is() and :where(). These two pseudo classes help us cut down on selector duplication, are forgiving when it comes to invalid selectors, something that can be particularly helpful in cross-browser support and in the case of :where(), help us manage the specificity of a selector.

Both :is() and :where() are supported in all evergreen browsers and have been for quite a few versions, so they are safe to use if you no longer have to support Internet Explorer, which I hope you don't.

That brings us to the last pseudo-class of this article. It's the newest and most unsupported one, but it's one that developers have been asking for since, well, since forever:

The `:has()` pseudo-class: the parent selector.

Let me explain "parent selector" a little bit. With CSS selectors you already style elements by their parents, but what people mean when they say a parent selector is that they want to style an element based on what other elements are inside of it. For example, they want to say something like this:

  /* ↓ Select this */
this(div) img
        /* ↑ not this */

to specify they want to select divs, but only if they contain images.

While there have been many proposals over the years, this was long thought impossible or too performance-intensive to implement because of the way CSS selectors are parsed: they start at the end.

                /* Starts here ↓ */
   header h1#sitetitle > .logo a { }
/* ↑ Not here  */

They are parsed this way because browsers start with the element and try and find all the CSS that applies to it.

It's faster to invalidate rules that don't apply to a given element when you start at the end of a selector, because you don't have to loop over all potential descendants only to find out that the element at the end doesn't match.

By starting at the end, you can begin by discarding all elements that are not a elements (in this case). That lowers the total number of elements you will need to consider. From there, you can walk up the tree one ancestor at a time to discard any further non-matching elements.

While some veterans might now have flashbacks to old arguments about performance, jQuery plugins and the like, it's 2022 and the :has() pseudo-class lets us select elements depending on their descendants, natively in the browser, without any noticeable performance implications.

So first the bad news:

Browser support

The :has() selector is available in Safari, in Polypane and in other Chromium browsers. It's available behind a feature flag in Firefox.

When I said that there are no performance implications, what I meant was that there were no performance implications in Webkit and Blink. Each rendering engine has different optimizations, so the implementation in Firefox's gecko engine might end up having other performance characteristics.

Of course, that won't stop us from exploring its many possibilities, because like Bramus said, the CSS Has pseudo class is way more than a parent selector. In the specification it's referred to as the relational pseudo class, and we'll see why in a bit.

The syntax

First though, the syntax. To get back to the example I just gave, of selecting all divs that contain an image, here's what that looks like with :has(). We select all the divs, but add a conditional that they need to have images inside them.

/* ↓ Select this */
   div: has(img);
         /* ↑ not this */

Like :is() and :where(), you can also use complex selectors. Like divs that have images as siblings.

div:has(~ img) {
  ...
}

or multiple selectors, like divs that have images, videos or svgs as descendants.

div:has(img, video, svg) {
  ...
}

Also like :is() and :where() the selector list is forgiving. So div:has(img, video, svg:undefined), with a ":undefined" pseudo that doesn't exist, will still select all divs that have images or video elements in them.

As of late 2022, :has() no longer has a forgiving selector list, due to that breaking jQuery. If you need a forgiving selector list, then you can nest :is() or :where() inside it: div:has(:is(img, video, svg:undefined)).

Specificity

The specificity of a :has pseudo class is determined in the same way as for the :is() and :not() pseudo-classes: the most specific element determines the specificity of the entire pseudo-class.

div: has(img, .logo, #brand); /* (1,0,0) */

Using `:has()` as part of a selector

By using :has() in different parts of your selector you can not just select elements based on their descendants, but also select elements based on their sibling or even cousin elements.

Or in other words, we can select elements based on their relation to a different part of the DOM: the relational pseudo class.

For example, lets say you have a card element and you want to style the h3 differently if the card image is present:

<div class="card">
  <div class="imagecontainer">
    <img src="" alt="" />
  </div>
  <div class="textcontainer">
    <h3>Title</h3>
    <p>...</p>
  </div>
</div>

We can do that by making :has() part of the selector that targets that h3. To target the h3 we'd normally write .card h3. Next, we add a conditional :has() to the card:

.card:has(.imagecontainer img) h3 {
  ...
}

This selector matches:

All h3 elements,
That are in elements with the class card,
But only if that card element also has:
1. An image
2. In an element with the class imagecontainer.

We can also invert that: style the h3 differently if there is no image present, by nesting a `:not() pseudo-class.

.card:has(:not(.imagecontainer img)) h3 {
  ...;
}

This gives you a lot more styling options for situations where you would've previously added something like class="has_image" to your card.

Re-implementing `:focus-within`

You can also use :has() to implement :focus-within, which lets you target element if any of their descendants have focus. Both of these act the same:

form:focus-within {
  ...
}

form:has(*:focus) {
  ...
}

Though with :has() we can go one step further, like only styling the form if it's a specific element that has focus. This is not possible with focus-within:

form:has(input[type='radio']:focus) {
  ...
}

Showing an "other" input field without JS

It works for other pseudos as well, like :checked. With this we can implement an "other" input field that appears when a specific option is checked without writing a single line of JS:

form:has(input.my-checkbox:checker) input.my-textfield {
  display: block;
}

Styling forms if they have errors

You can also pull up things like the :valid, :invalid and :user-invalid pseudo-classes to style a form differently:

form:has(input:user-invalid) {
  border: 3px dashed red;
}

Or even to show a list of invalid or missing form fields at the top or bottom of the form:

form:has(.name:user-invalid) li.name-warning {
  display: block;
}

There are many more examples you can think of, but I hope this has given you a good idea of the potential the :has() pseudo-class brings.

The future for CSS selectors

I very much look forward to all the clever things people will come up with using :is(), :where() and :has(), and don't think the examples above even scratches the surface.

Especially :has() is going to have a very large impage on the CSS selectors you will be writing in the coming years.

If you want to play around with the :has() selector ahead of general availability, you can start a free Polypane trial which has it enabled by default.

Polypane 9: Screenshot editor, structured data support and new debug tools

Wed, 11 May 2022 00:00:00 GMT

Polypane 9 ships with a completely new way of making and editing screenshots, support for different types of structured data in the Meta panel, new debug tools and many improvements to the outline and elements panel as well as performance improvements, and it now runs on Chromium 102.

New Screenshot feature

The Pane screenshots feature has been completely rewritten to solve two of our most requested improvements:

Faster screenshots,
Including edits made to the page, the focus order overlay and debug tool info in the screenshots.

By screenshotting the actual panes instead of using a background renderer, we now do both! This means you can quickly make a screenshot showing for example the elements with contrast issues to send that along to your team or add to a ticket.

Editing screenshots

When you have made a screenshot, often you'll want to quickly edit it. Like redacting sensitive info, adding a rectangle around the area of interest or drawing a few arrows and add some text to explain the issue. Or maybe you want to clip the image to the area you care about.

All of that is now possible in the new amazing screenshot editor powered by Pintura!

This video hasn't been sped up. It's really that fast!

When you're done with the image, you can save the image to disk (in the last used folder, or in a folder of your choice) or copy to clipboard. Once you've saved the image, click the notification and the folder where you saved the image is opened.

This really, really speeds up creating and sharing screenshots (copy to clipboard, paste them in Slack, done) and we can't wait to see what it'll do for your productivity.

Element panel updates

This release we worked on the tree view, making it more interactive and displaying more info in it. The panel now also has autosuggestions for all CSS properties and HTML and ARIA attributes with live preview across all panes.

Tree view updates

When you inspect elements on the page, the treeview now highlights the element so you can see where in the DOM you are.

Hidden elements are now slightly dimmed to differentiate them, and hovering over them no longer shows a tooltip in the panes.

And when elements have a flex or grid layout, that is displayed as a badge so you can quickly see what element is responsible for the layout:

Autosuggestions with live previews

Polypane now also shows autosuggestions for CSS values and HTML and ARIA attributes. When navigating through these in the autosuggestion dropdown they get automatically applied so you can quickly preview them:

This live preview also works for HTML and ARIA attributes so you can quickly see what effect those have as well.

We spent quite a lot of time making sure we have the most complete list of CSS values, HTML and ARIA attributes, even for new and vendor-specific properties. Polypane will suggest more valid values than other browsers.

Structured data in Meta panel

The Meta panel now shows any structured available on the page: JSON-LD, Microdata and RDF. The data is sorted by type and richly displayed where possible, meaning we automatically detect links, images and arrays and display them accordingly. When an image fails to load a warning is shown, so you can see at a glance if there's any issues you need to remedy.

Structured data is important for anyone doing SEO to make sure all the pages are assigned the right entity (so search engines know e.g. which products a page is selling, or the specific metadata for inclusion in the news tabs). With the new structured data overview, you can quickly see anything you might have overlooked.

Mobile friendly tester

Also new in the Meta panel is a new "Mobile friendly" check:

This check follows the guidelines provided by Google and Bing in determining if a page is mobile friendly:

Has a viewport meta tag.
Has width=device-width in the meta tag.
At least 60% of the text on the page is larger than 12px.
There are no overlapping tap targets within an area of 48 by 48 pixels.

These checks are done on-the-fly as the meta data is gathered and will result in either a checkmark, or a list of issues to fix:

Issues show a button that turns on the appropriate debug tool to detect elements with small text (which was already available in Polypane) or with too small tap targets. This way finding the elements you need to fix takes just a single click.

Find small tap targets with Target Size debug tool

In earlier versions of Polypane the Target Size debug tool changed your cursor into a 48 by 48 square so you could manually check distances around links.

In Polypane 9 this debug tool has been expanded with a tool that analyses all interactive elements on your page to make sure there's at least an area of 48 by 48 pixels around each element. We use the same logic as Google Lighthouse to calculate this.

Elements that are too small and too close together now get a red semitransparent border around them indicating the needed space, and to fix the issue you need to make sure the red borders of two elements no longer overlap.

Track focus debug tool

With the Track Focus debug tool turned on, you get a visual highlight of the current focused element that follows the focus as you tab from element to element.

The focus order overlay shows you this information as well, but because the Track focus debug tool is dynamic it's better in handling things like focus traps and interactive pages.

You can combine it with the focus sync option (right click the sync button in the address bar to activate that) like in the video below to check focus across multiple screen sizes in one go.

In-page zoom and search

With the removal of the Legacy mode we we able to add two "regular" browser features that a lot of users have asked for: page zoom and in-page search.

In-page zoom

Page zooming is an important part of Accessibility audits, for various WCAG success criteria your page needs to be able to zoom to 200% or to 400% and now that's possible in Polypane with ctrl/cmd alt +/-, or with the "Zoom web pages" option in the View menu.

After zooming a page a magnifier with either a plus or minus will be visible in the address bar, and clicking that opens a UI that lets you zoom in, out or reset back to 100% again. Due to the way Chromium internals work that doesn't work per pane, but per origin, so zooming in happens in all panes and is remembered for each origin.

In-page search

With ctrl/cmd f you can now search in all panes. All occurences of your search term are highlighted in yellow with the current matched search term in orange. You can also see where on the page matches are found in the scrollbar.

You can navigate through the search terms with the arrow buttons and toggle case sensitivity. Finally pressing esc clears the UI and search.

Outline panel updates

We have a few updates in the outline panel to provide more information and useful warnings. And when you hover over an element in the panel, we now smoothly scroll to the element in each pane.

Links overview

In the links overview, we now highlight the current page (and suggest adding aria-current when missing) and give warnings for placeholder values like "http://" or "mailto://" so you don't forget to fill them.

Images overview

The image overview now warns you about broken images, supports the fetchpriority attribute and will highlight when an image is inside a link, because that will influence what the alt text should say.

Focus order overview

The focus order overview now shows the name of inputs and textareas instead of the content (which is usually empty). This will help you more quickly find the elements.

Performance improvements

We refactored a large part of the Elements panel logic to deal with websites that use a lot of CSS Custom Properties, essentially removing the performance overhead we had for Custom Properties. The result is that Polypane will feel as fast on modern sites with lots of CSS Custom properties as it does on simple pages.

Smaller updates

For all the changes there is the changelog, but there's a few small updates we wanted to highlight:

`color-scheme` support

The color-scheme meta attribute and CSS property can tell your browser if your site supports dark mode, light mode or both. When set your browser will automatically switch from the regular dark-on-light to a light-on-dark theme depending on if you tell it you only support dark mode, or if you support both and the prefers-color-scheme: dark media query matches. It does this without you writing a single line of CSS, which is pretty cool!

If you want to learn more about the color-scheme feature you can check out Kevin Powell's video on color-scheme.

Twitter media preview

Apart from small and large image summaries, Twitter has a third preview that you don't see that often: the media preview. It has a small preview image with a play button that expands into a media player. Polypane now supports that card type.

Hide "Add pane" button

In Polypane 8.1 we introduced the "Add pane" button to help people getting started with Polypane figure out how to add panes more quickly. If you don't need the button, you can now hide it in the global options menu in the top right of Polypane.

Double click zoom percentage to fit

When you double click the zoom percentage in the header, it will reset either to 100%, or zoom out to fit all your panes. This brings feature parity with the pane zoom UI, which lets you do the same.

More warnings for intrusive pane settings

In Polypane 8.1 with the introduction of the disable JS debug tool we introduced a new UI that highlighted the disabled JS clearly.

We frequently get support questions that turn out to be caused by a few other debug tools, so we now use the same UI for the following conditions:

Disable CSS debug tool
Content Chaos debug tool
Throttled network emulation

With the new UI it's immediatelly clear that there's something to keep in mind while interacting with a pane.

Notable fixes

This version of Polypane has plenty of fixes, but we wanted to highlight two:

Figma state resetting

The Figma preset in the Browse panel reset to the figma homepage every time you switched from the browse panel to another panel and back. We now preserve whatever Figma file you have open.

Polypane Peek improvements

We fixed a few instances where inspecting elements stopped working or where the inspection tooltip had styling bleed through from the main page.

Inspecting elements now also completely prevents any clicks from propagating to the underlying element, so accidental clicks are prevented even for elements with javascript handlers.

Updated Chromium

Chromium has been updated to 102.0.5005.40, and ships with a number of experimental features turned on by default, like support for container queries and :has(). Head over to our docs on Experimental Chromium Features for a full overview of the available APIs. If you'd like to see one activated, Let us know.

Get Polypane 9

Polypane is available for Windows, Mac (universal dmg for both Intel and M1) and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free.

Deprecation notice

Polypane 9 removed legacy mode.

Polypane 9 Changelog

New Features

New Screenshot editor.
New Fast viewport and full page screenshots.
New Debug tools and focus order overlay support in screenshots.
New Structured data visualisation in Meta panel.
New Mobile Friendly tester.
New Track Focus debug tool.
New Find small tap targets with Target Size debug tool.
New Page zoom support.
New Search in page support.
New Ability to hide "Add Pane" button.
New Chromium 102.
New Support for color-scheme: dark (Thanks Kevin!).
New Twitter Media preview.

Improvements

Improved Double click global zoom percentage to zoom to 100% or zoom to fit.
Improved Hide open devtools whenever a popover or the address bar is active.
Improved Shortcut overview uses new Shortcut display badges.
Improved All address bar tooltips now show Shortcut badges (Thanks Florent!).
Improved Workspaces show shortcut badges in tooltips.
Improved Meta panel: Suggest initial-scale=1 when its missing.
Improved Debug tool: Disable CSS and content chaos debug tools now shows warning in pane title.
Improved Debug tool: readability uses an improved calculation.
Improved Throttled network now shows warning in pane title.
Improved Performance: Sites with many CSS Custom Properties now respond much faster.
Improved Performance: chromium devtools are no longer automatically launched for single panes.
Improved Performance: New tab rendering logic.
Improved Network throttling is now a toggle button.
Improved Outline panel: warning for incomplete links like "http://" or "mailto:".
Improved Outline panel: warning for broken images.
Improved Outline panel: highlight current page in links overview, and suggest aria-current when missing.
Improved Outline panel: Show fetchpriority attribute.
Improved Outline panel: Focus order overview now shows the name of inputs and textareas.
Improved Outline panel: Focus order overview truncates long content.
Improved Outline panel: Headings and Links "hidden" badge now use the same color.
Improved Outline panel: Display when an image is inside a link.
Improved Outline panel: Scroll smoothly to highlighted element.
Improved Default Mobile and Tablet tabs now use mobile rendering by default.
Improved Polypane Peek now shows the type for input and button.
Improved Polypane Peek, elements panel, outline panel: hide the element dimension ratio when it's 1:1.
Improved Elements panel: Inspected element is now highlighted in treeview.
Improved Elements panel: Focusing a css value suggestion live previews it.
Improved Elements panel: Autosuggestions for CSS values, HTML attributes and aria attributes.
Improved Elements panel: Grey out hidden elements in the tree view.
Improved Elements panel: Improve design of CSS sections.
Improved Elements panel: Hidden elements no longer show Peek tooltip when highlighted in tree view.
Improved Elements panel: Show flex and grid badges in tree view.
Improved Elements panel: Click event is now fully prevented after inspecting elements.
Improved Emulation: Color gamut now has an "off" value.
Improved Emulation: show a title for each emulation option.
Improved Updated design for context menus.
Improved Polypane is now included in the WebBrowser category on Linux.
Improved Support for the base element in link and image resolution.
Improved Updated Google Fonts.

Fixes

Fix Browse panel: no longer resets URL on tab switch for Figma (Thanks Kevin!).
Fix Polypane Peek is now more resilient to website styling.
Fix Debug Tool active dot was not fully visible.
Fix Active dot for forced colors was not showing.
Fix Polypane no longer tries to get CrUX data for local pages.
Fix Elements panel: Text color was cut off in elements panel for elements with many classes.
Fix Elements panel: now shows CSS styles from inside media queries inside stylesheets linked with @import.
Fix Elements panel: prevent NaN when updating units without numbers.
Fix Elements panel: a:link and a:any-link CSS selectors are shown in the elements panel again.
Fix Elements panel: Inspecting Flickity carousels prevented selection.
Fix Elements Panel: computed styles no longer show a disable style checkbox.
Fix issue where context menu "add pane" item didn't create a new pane.
Fix Creating an overview screenshot no longer triggers "current version is up to date" message in certain situations (Thanks Justin!).
Fix On Mac, sometimes inspecting twice in a row prevented the node highlight from showing (Thanks Justin!).
Fix In-app chat position with bottom-aligned panel was in the wrong place.
Fix Prevent spacebar-dragging from getting stuck after switching away and back to Polypane.
Fix Custom headers not always applying.
Fix Meta panel: Facebook preview no longer overflows when there is no facebook data.
Fix Toggle scroll shortcut was broken.
Fix Issue where Chromium devtools settings would not persist.
Fix Icon alignment in debug tools list.

Forced colors explained: A practical guide

Tue, 19 Apr 2022 00:00:00 GMT

Forced colors is a CSS media query that when active radically changes the way your site looks, without any of your input. In this article we'll explore where it comes from, how it changes your site and how you can adapt to it.

Making sure your site works well with Forced colors is not a lot of work and you can get very far with a little bit of effort and have a massive impact on the people using Forced colors. Read on to learn more!

This article is adapted from a talk Kilian gave at Web Directions AAA 2021. You can contact us if you're interested in Kilian presenting this at your conference, meetup or organisation.

Where does forced color mode come from?

Forced colors started in Windows 7, with support in Internet Explorer 10, as "High contrast mode" available from the system settings. With High contrast mode users can pick from one of 4 high contrast themes or choose their own theme. And when they do, their entire OS is rendered in that theme.

The feature is available in all current versions of Windows, though in Windows 11 it's been renamed to just Contrast Themes. It's also available in Ubuntu.

Here's an important bit of information though: High contrast mode is not about high contrast.

Well it kind of is, but it also isn't. Let me explain.

What High contrast mode does is severely limit the palette of available colors, and lets users pick which colors those are, for the things that make up a UI:

Text
Background
Links
Buttons

For those types of UI, users will usually pick highly contrasting colors. But they don't have to. They can also choose to avoid specific colors, create a sepia theme or specifically configure the theme to avoid contrast.

The main feature is that it limits and controls the range of colors, making it easier for users to emphasize content and UI in a way that works for them.

In other words, they force colors. In the rest of this article I will try to be intentional with when I use Forced color mode and when I use High contrast mode, but in most situations you can use them interchangeably.

Who uses this feature?

High contrast mode is useful for many different people, but includes people with low vision, color blindness, people prone to migraines or light sensitivity and people prone to overstimulation.

But also people who know of the feature and use it to keep their screen readable in bright sunlight, or dim their entire UI in dark environments. High contrast mode is one of the only features that will force all colors to change, and guarantees that across the operating system UI and browser (compared to say, prefers-dark-mode, which only works for sites that have it implemented).

In terms of numbers, Microsoft states that 4% of Windows users use High Contrast mode. In the WebAIM low vision survey, 50% of low vision users indicate they used the mode but of course, that is likely a very self-selecting group of savvy users.

You can still assume that one in twenty five of your visitors will have it enabled.

How do you turn on High contrast mode?

When you open the system settings on Windows 10 there is an option called "Ease of access" where you can find various accessibility options.

To the left you see a couple of different categories: Vision, Hearing and Interaction. Under Vision is where you can find high contrast.

If you use Windows and haven't looked around here yet, go and see all the other neat features that are available. I for example have set a different zoom level here to keep things readable on my relatively small screen.

Here you can toggle it on and off, and then choose the theme you want.

There is also a shortcut to toggle it on and off: left alt + left shift + print screen. This will use your last selected theme.

There's four themes available:

High Contrast #1
High Contrast #2
High Contrast Black
High Contrast White

The first three are all light-on-dark themes and mostly differ in their accenting color. Green for #1, Blue for #2 and teal for "black". High contrast white is the only dark-on-light theme.

All of those are pretty high contrast, why did I mention that it wasn't really about contrast earlier?

That's because from here you can also configure your own color theme by clicking on each of the color swatches. Choose colors for text, links, buttons and background and when you apply you get to save it as your own theme.

Notice by the way that it also shows the currently selected colors name, I thought that was neat. Interestingly, there's no way to edit a previously created theme, export it or import it. That seems like an oversight.

So that's how to turn it on and how to configure it, but what about testing with it when you don't want to turn it on for yourself, or when you don't have a windows device? Well, you have a few different options:

If you have a Windows device, you can turn it on directly.
This gives you the real deal, but has the downside of your entire OS getting forced colors, including your devtools. If you don't already have a windows device, consider getting a very cheap one (I have a Surface Go) since that will also help you test on windows in general, and on a slower machine specifically.
You can run a Windows VM and activate it in there.
Same upsides and downsides as a real device, but in a VM everything is going to be slower.
You can test it in Assistiv labs.
This runs a cloud-based VM, so again same upsides and downsides.
You can emulate it in Polypane.
This is emulated inside a pane, so it's fast and only the pane has forced colors, but it only supports a single dark and light forced color mode, so you can't experiment with how different custom themes look. Usually checking the dark and light modes are enough to suss out any issues.

In terms of browser support, Edge, Firefox, Chrome and Chromium derivatives all support the forced-colors media query for Windows high contrast mode. So they will display your site in the forced colors your visitor set. IE and Old Edge support Windows high contrast mode but they use an outdated, non-standard syntax that we won't be looking at in this article.

Now we know what high contrast mode is, how to activate it and what browser support it. But how does it work?

How does Forced color mode work?

When Forced-colors is active in a browser, anything that lets you specify a color, but also things that contain colors like shadows, get reset. Background images are preserved, except on links and form elements, buttons excluded. The following styles will get reverted to their initial value and overwritten with user theme colors.

color
background-color
border-color
outline-color
fill
stroke
text-decoration-color
text-emphasis-color
column-rule-color
scrollbar-color
-webkit-tap-highlight-color
box-shadow
text-shadow
background-image

Text that's on top of images get a solid background color, called a "backplate", to force the correct contrast. Forced colors keeps your inline images and SVG icons intact, including their colors.

So Forced colors takes your site, maintains the layout and typography but completely rewrites your colors. For a quick idea, here's a comparison with an existing website. Notice how backgrounds and colors have changed or disappeared, but images still look the same.

Similar browser features

There's two browser features that can do similar things.

First is Reader mode. Reader mode will extract and reformat the content of a page in a user-chosen theme, and discard all the layout of a page. Forced colors maintains the layout while changing just the colors.

The other feature is the prefers-contrast media query. This is an upcoming media query that has support in Safari and Chromium. Prefers-contrast is a way for users to ask for more or less contrast, for example with macOS's "increase contrast" accessibility option.

While this works nicely on macOS, on Windows forced-colors and prefers-contrast are always active at the same time, and there isn't a way to turn off forced-colors without turning off prefers-contrast as well. This means that prefers-contrast on itself is not very useful on Windows.

How to know when your site is being rendered in Forced colors mode and what should you do with it?

Firstly, the media query forced-colors will be active when it's on and none when it's off.

Additionally, browsers will look at the background color of the high contrast theme to determine if this is a dark mode or light mode theme, and use that to set prefers-color-scheme to dark or light.

@media (forced-colors: active) {
  /* forced colors are active */
}

@media (forced-colors: active) and (prefers-color-scheme: dark) {
  /* High Contrast #1, #2 or Black is active (or custom theme) */
}

@media (forced-colors: active) and (prefers-color-scheme: light) {
  /* High Contrast White is active (or custom theme) */
}

Test your site

To test your site in Polypane, open up the pane emulation settings and toggle the "Forced-contrast" toggle and optionally the "prefers-color-scheme" toggle.

With forced color mode turned on we can test our site! There are small differences in how Firefox, Chrome and Edge deal with forced color mode, particularly around images, but they shouldn't affect the testing and styling you do.

The changes we're going to make are not about making your site look "good" again, they are to respect the visitors wishes and nudge your site closer to those. We're going for clarity and readability.

Replacing backgrounds with borders

Without your colors and backgrounds things might look a little empty. Forced colors resets your background colors, and resets all background colors to the same color. That means areas that were differentiated by different background colors will now all look the same, and that can hinder understanding.

What we're going to do is add either borders or outlines to elements that need it. Whether you want to use a border or outline is more or less up to you, depending on what you can do with your layout (borders influence your layout while outlines don't). Keep in mind you will want to use the outline for focus styling as well though.

We can use the platform to keep things simple and add border:1px solid or outline: 1px solid leaving out the color. The browser will match the text color for us.

Adding these borders will also reduce the visual complexity of your page by adding clear delineations, like I have done here for buttons and the header.

Find missing content

Next, scan your page for missing content, in particular SVG icons, as they are left alone by forced colors and you need to help the browser along and give them the right color. How do you do that if you don't know what colors a user has picked? A long time ago CSS2 came with something called "system colors", that let you use the exciting array of grays that Operating systems came in in 1998.

However, browsers have not supported those for a long time. It turns out that when you give web developers the exact styling used to create the OS style, they abuse that to show fake popups and get users to do things they shouldn't do. So they don't work anymore.

Luckily, CSS4 comes with an updated set of System colors, specifically designed to work with forced colors. These also work without forced colors but with forced colors active, they will map perfectly to the theme chosen by your visitor.

CanvasText: Regular text color
Canvas: Background color
LinkText: Link color
ButtonText: Button text color
ButtonFace: Button background color
HighlightText: Selected text color
Highlight: Selected text background color

When you're updating SVGs, check where you use them (in text, in links or in buttons) and pick the one that matches your SVG's use case.

You can probably fix a lot of these with some generic CSS already, though check whether your SVGs are styled with fill or stroke before making your CSS too generic.

@media (forced-colors: active) {
  svg {
    stroke: CanvasText !important;
  }

  a svg {
    stroke: LinkText !important;
  }

  button svg {
    stroke: ButtonText !important;
  }
}

Here we give all regular SVGs the text color, all linked SVGs the link color and all SVGs in buttons the button color.

Alternatively you can use currentColor for the SVGs to automatically follow the color of the element they're in. This will make them follow the forced color theme of your user as well. In Chromium versions between 89 and 102 there was an error where this didn't happen, but that has been resolved.

Of course, make sure you check if this fixes all your inline SVGs and if you need to tweak some of them individually.

Check the colors

When you replace all the colors on your page, you also lose the meaning of anything that's only conveyed through color. Using only color to convey meaning is a WCAG violation so you shouldn't do that anyway... but it's still something you have to check.

Are there any elements that only use color to convey meaning? Those need to be updated. Common ones are showing a red or green border on form fields. Make sure to add a shape like a checkmark or better, clear error or success text. This also makes your site better for the 95% of people not using forced colors, so everyone wins.

Text in images

Another one I have to mention is, check if your page does not have any text in images. They won't be converted to the users theme. The solution is straightforward: Don't have text in images.

Semi-transparent images

That's not the only type of images you have to check though. You might also be using semi-transparant PNGs or external SVGs that you expect to be shown on a certain color background. For these, consider adding a dark and light mode alternative to the image and swapping between them depending on what prefers-color-scheme matches.

For SVGs that you use in image elements, you can also add an inline <style> element with CSS for forced-colors in the SVG itself, and the browser will pick that up. Pretty neat!

Focus styles

Lastly, it's time to tab through the page and make sure that focus is still clearly indicated. If you have disabled the outline in favor of your own nicer looking focus styles, for example with box shadow to get those nice rounded corners: remember that focus mode removes all box shadows.

A good way to deal with this is to replace your outline: none with outline-color: transparent. Without forced colors, the outline will still not be visible but with forced colors, that outline color will be overwritten with the current text color, making it nicely visible again without needing any special adaption or re-styling for forced color mode.

/* don't: */
element:focus {
  outline:none;
  box-shadow: 0 0 0 2px orangered;
}

/* do: */
element:focus {
  outline-color: transparent;
  box-shadow: 0 0 0 2px orangered;
}

In summary

So to summarize, when adapting to Forced colors you want to make sure you:

Replace areas delineated by backgrounds with borders or outlines.
Make sure all your icons are visible and follow the users theme.
Take care that there is no meaning conveyed by color alone, as that color will be gone in forced color mode.
Replace or provide alternatives for images that don't work well, such as ones with text or ones with transparency.
Make sure a focus indicator is still visible for all focusable elements.

Disabling forced color mode

But ...what if you need to disable forced colors? There are situations where the colors you picked are absolutely important, such as when showing a color selector in a webshop. Used sparingly on specific elements, and definitely not on specific sections or entire pages, you can add this CSS property.

.my-specific-element {
  forced-color-adjust: none;
}

With that you can turn off forced colors for that element and it's children. There are a few legitimate places where this makes sense but please make sure to use it sparingly and to respect your visitors wishes as much as possible.

In closing

And with that, we've explained Forced colors. We now know what forced colors are, how to configure them, why they're used, which browsers support them, how to test them, how to make sure our sites look good in them and lastly, how to disable them only when that's absolutely needed.

If you want to read more, in particular on the differences with Internet Explorer then these four links should give you plenty information:

If you want to learn about more CSS media queries, check out our complete guide to CSS Media Queries and get a Polypane trial to quickly start testing your sites in Forced Color mode.

Create a Polypane account with GitHub

Wed, 06 Apr 2022 00:00:00 GMT

Today we launch the option to start a Polypane trial with GitHub Auth. When you register for a Polypane trial click the "Register with GitHub" button to authenticate with Github instead of creating a username and password.

This way we'll prefill your info from GitHub and you can get started with Polypane right away in a more streamlined fashion.

Signing up with a username and password is still available as well.

Existing accounts

If you have an existing account and want to sign in with GitHub instead, click the "Sign in with GitHub" button on the Sign in page.

If your email accounts match we automatically detect that and you're given the option to authenticate with your password. Once that's done your GitHub login is now linked to your account and you can use GitHub to log in seamlessly.

One thing that we personally always forget is which service we used for which services.

To save you the trouble from having to remember, once you've logged in with either username and password or GitHub we'll show your preferred method up top:

So that's our new GitHub Auth, helping you cut down on separate accounts by offloading the authentication to a service you probably already use. Let us know what you think over on Twitter!

Always open localhost in your development browser

Tue, 22 Mar 2022 00:00:00 GMT

Many development servers will automatically open their URL when you launch them, and without configuration that happens in your default browser. If you use a separate development browser, like Polypane, that can be annoying because you'll then have to re-open them in your development browser. While you can configure each of your projects to use a browser other than your default browser, you'll have to configure that for every project you work on.

What if instead you could always open localhost in your development browser while opening all other URLs in your regular browser?

Here are some tools for macOS, Windows and Linux that let you do just that!

macOS

On Mac you can use Choosy or Velja if you prefer a GUI, or Finicky if you prefer creating your own config file:

Finicky

Finicky uses a .finicky.js file in your home directory that lets you configure precisely which URLs should open in which browsers. Follow the installation instructions for Finicky, then add the following handler to your .finicky.js file to open all localhost URLs in Polypane.

module.exports = {
  defaultBrowser: 'Google Chrome', // Or "Safari", "Firefox" etc.
  handlers: [
    {
      match: /^https?:\/\/localhost.*$/,
      browser: 'Polypane',
    },
  ],
};

Installation and configuration

To use Finicky, download it or install it using Homebrew: brew install --cask finicky. Then create a .finicky.js file in your home directory using the above and start Finicky, allowing it to be set as the default browser.

Finicky can do other things as well, like rewriting your URLs. Check out the full Finicky documentation for all the available options.

Choosy

If you prefer having a GUI to configure your rules then check out Choosy! This application can either prompt you when you open a new URL, or you can configure rules to open specific URLs in specific browsers, and comes with a UI to configure different rules.

Installation and configuration

You can download Choosy from the website, choosyosx.com and try it for free for 44 days, after which you can buy a license for $10.

To set a rule to always open localhost in Polypane, go to the Rules tab and add a new rule:

Give the rule a name like "localhost" and select the "matches this regular expression" option after "website". Add /^https?:\/\/localhost.*$/ as the value. Then select "Always use this browser..." below "When this rule applies, Choosy should..." and click the "Change" button and select Polypane.

Now your localhost URLs will open in Polypane.

Velja

Another GUI option is Velja. It's a very new app but it has a number of interesting features: You can configure a number of different apps, like Figma, Zoom and Notion to automatically open their own links in the app instead of in the browser, and you can let it automatically clean tracking parameters when copying links.

Installation and configuration

You can download Velja for free from the app store. It's a sandboxed app, so when you first launch it it will walk you through everything it needs access to, and asks to be set as the default browser.

To set a rule to always open localhost in Polypane, go to the Rules tab in the preferences and add a new rule:

Give the rule a name like "localhost". If you want you can leave sample URL empty, or add your default localhost URL. Keep "detect via" set to Domain, and for "Match" select Polypane.

Now your localhost URLs will open in Polypane.

Browserosaurus

An honorable mention here is Browserosaurus. This is an open source application developed by Will Stone that will prompt you whenever you try to open a URL.

Though it doesn't have any rules to automatically send URLs to specific browsers, you can add a shortcut to your development browser (Like "P" for Polypane) and press that when the prompt is shown to open links in Polypane.

Installation

You can install Browserosaurus by downloading the right version from their Github releases page (x64 for Intel, arm64 for M1) or install it using Homebrew: brew install --cask browserosaurus.

Windows

On Windows you can use Account surfer if you prefer a GUI or BrowserSelector if you prefer a configuration file.

BrowserSelector

BrowserSelector uses a BrowserSelector.ini file saved next to the BrowserSelector.exe file. Follow the installation instructions for BrowserSelector, then add the following to your BrowserSelector.ini file to open all localhost URLs in Polypane.

[browsers]
polypane = C:\Program Files\Polypane\Polypane.exe

[URLs]
localhost = polypane
/localhost\:*/ = polypane

Installation and configuration

First, download the latest release from GitHub. Extract BrowserSelector.exe and BrowserSelector.ini in a folder you can easily get to with the terminal. Then open BrowserSelector.init using Notepad and add in the Polypane lines in the code box above under [browsers] and [URLs]. Save and close the file.

Next, open your terminal, go to the folder you extracted BrowserSelector in and execute the command .\BrowserSelector.exe --register. This will prompt an admin check asking you if you want BrowserSelector to make changes to your installation. Allow this, then go to your Default apps settings and select "DanTup.BrowserSelector" as your default application.

That's it, now all localhost URLs are opened in Polypane.

Account Surfer

Account Surfer is a GUI application that lets you choose which browser and browser profile to use when you click on any link and optionally lets you remember that choice for future use.

Installation

You can get Account Surfer on the Windows store for $6.99. When you first launch the app it asks you to set it as the default browsers, which you can do by clicking through to the settings, scrolling down to the "Web Browser" setting and choosing Account surfer when prompted.

After you have set Account Surfer as the default browser you'll see the overview of browsers:

Click through to settings. There you will find the header "Saved domains" with a list of browsers below it. Click the "+ domain" button under "Polypane".

Add the localhost domain to Polypane and press "Save" to have Account Surfer always open Localhost URLs in Polypane.

Account Surfer does not support regular expressions yet, so if your dev server uses a specific port, like 8000, make sure to add that localhost:8000 to the domain.

Linux

Bowser

On Linux there is Bowser, which is available as a stand-alone application or a Gnome extension. Follow the instructions on the link to set up the Gnome extension, which adds a little icon in he Gnome bar where you can set up your preferred browser:

Installation

If you don't use Gnome, then the stand-alone application works for you. First check out the repository:

git clone https://github.com/blipk/Bowser.git

If you don't have python3 and python3-tk, make sure to install them first: sudo apt install python3 python3-tk or sudo yum install python3 python3-tkinter depending on your version of Linux.

In the Bowser folder, run the bowser.py file:

python bowser.py

If python 3 is not your default python, you need to switch out python for python3, as well as in the first line of bowser.py.

This will install and setup Bowser for you as well as set it as the default browser. Once installed the configuration window will appear:

Here, click the "new rule" button, and in the popup you see fill in localhost and press OK:

Then select the new "localhost" rule and at the bottom of the configuration window click on your default browser (Firefox in my case) and select Polypane in the dropdown.

Lastly, if you don't want Bowser to show a popup for every new link, uncheck "Create rules for new links" under the "Settings" menu. Once done, you can close the configuration window and everything is set up! If you want to change or update your configuration, run python bowser.py again.

Roll your own

If you're feeling adventurous, This superuser answer explains how you can setup an xdg-open script: redirect certain URLs to specific web browsers in Linux.

It depends on a few different settings like which grep and *-open (like gvfs-open, kde-open etc) you have, so you'll have to see what works for your setup.

Alternative: our browser extensions

If you don't want to run a separate tool as your browser, an alternative for Polypane is to run our browser extensions.

These add a Polypane button to your browser chrome that you can click to open the current page in Polypane, so when localhost does get opened in your default browser, a single click sends them straight to Polypane.

Polypane has browser extensions for Chrome, Firefox, Edge, Opera, Brave, Vivaldi and Safari, all available on our download page.

Know other ways?

If you know other applications, please let us know and we'll update the article!

Developing for color blindness with Polypane

Mon, 14 Mar 2022 00:00:00 GMT

While you might know about color blindness, it can be difficult to imagine being color blind. In fact, many people think it means you can't see any color at all, which is not true. Full color blindness, or "Achromatopsia", only occurs in 0.00003% of males worldwide so it's exceedingly rare. Much more common is the inability to see, or tell the difference, between some colors.

What is color blindness?

Color blindness is the name for a group of different eye conditions that affect how a person perceives colors. Due to genetics, it is significantly more prevalent in men compared to women. Around 1 in every 12 men and only 1 in every 200 women have some form of color blindness, so it's probably more common than you'd have guessed!

These different eye conditions can be divided into three categories.

Red-green color blindness (Deuteranopia and Protanopia)
Blue-yellow color blindness (Tritanopia)
Full color blindness (Achromatopsia)

Of those three, Red-green color blindness is by far the most common: roughly half of the men with color blindness have some form of deuteranopia, followed by one in fifty having protanopia. From there on the percentages quickly grow smaller: tritanopia and achromatopsia are both very rare at less than one in a hundred thousand or less.

But knowing that doesn't help understanding people's experience. That's where Polypane's simulators come in.

Color blindness simulators in Polypane

Polypane's simulators quickly let you see your site with eight common types of color blindness. For each eye deficiency we provide two simulators: one for the "full" deficiency, and one for a mild version of it.

Color blindness is a spectrum and can range from barely noticable to severe, so any simulator you use makes a choice where on that spectrum it sits. When a deficiency is less severe, the name ends in "-omaly" (like in "anomaly"). The name for the severe deficiency ends in "op(s)ia". Keep that in mind as we go through the various simulators:

Red-green color blindness

Deuteranomaly
Deuteranopia
Protanomaly
Protanopia

Blue-yellow color blindness

Tritanomaly
Tritanopia

Full color blindness

Achromatomaly
Achromatopsia
Cerebral achromatopsia

The eye has three types of cones that can percieve color, and they roughly translate to red, green and blue. When one or more of those types of conest don't work well, it causes a specific type of color blindness.

Deuteranopia and protanopia are both grouped under red-green color blindness because both make it difficult to tell the difference between red and green. For deuteranopia, this means people lack the ability to see green properly, and for protanopia the ability to see red is diminished. This causes those colors to look similar.

Tritanopia describes people who have difficulty seeing blue, which they confuse with green and difficulty seeing yellow, which becomes like violet for them.

For people with achromatopsia, none of their cones work properly. That leaves the rods in their retina, which are used to distinguish between dark and light. These rods are more sensitive to light than the cones so that's why with normal vision it's possible for you to see in the dark, but also why you don't see color in the dark.

Real achromatopsia is very rare, and also causes blurred vision. Cerebral achromatopsia happens when users can no longer see color specifically due to damage to the brain, such as from a stroke, and is also very rare.

Turning on Color Blindness simulators in Polypane

Now lets see how you can simulate color blindness in Polypane. Turning on a simulator is straightforward and only takes three clicks. Each pane in Polypane has a Debug tools icon above it, and you can click it to open the list of available debug tools:

In it, switch to the "simulators" tab and click the simulator you want to turn on:

When you've turned it on, the debug tool icon has a small dot.

To see which debug tool is active you can hover the icon to show the active debug tool in the tooltip, or click it to see it in the overview.

Polypane has much more debug tools! Check them all out in our debug tool documentation

Designing and developing for color blindness

With a color blindness simulator active, you'll want to check if any of the colors you use no longer communicate well. In particular red and green, which are often used to signify something going wrong or well respectively.

When you find an issue, try to communicate the same information without color, like in text or with an icon. Make sure that you're not communicating info with color alone. By offering multiple indicators your designs become easier to understand for all your users.

Testing for other visual deficiencies and environmental circumstances

Color blindness is not the only visual deficiency Polypane can emulate. There are a number of other visual impairments as well as environmental circumstances that we can emulate. With these, you can test your site for things like glaucoma, tunnel vision, bright sunlight or even emulate how someone with dyslexia could experience your website.

Testing for this broad range of experiences is important. Not because each of them will give you a concrete issue to fix, but because all of them help you empathise with people's experience. This will help you make better design and development decisions in your project.

Polypane 8.1: Resizable element tree, disable JS feature, new debug tools and more

Tue, 08 Mar 2022 00:00:00 GMT

Polypane 8.1 comes with two often requested features: The tree view in the elements panel is now resizable so you can adapt it to your preferences, and there is a new Disable JS debug tool that disables JavaScript in a pane.

We also made a bunch of improvements to the Meta and outline panels, added a dimmed screen simulator, made design updates throughout the app and fixed a number of performance issues.

Resizable tree view

You can now resize the tree view in the elements panel, allowing you to show either more of the tree or more of the style or attribute tabs.

The Polypane elements panel shown in multiple configurations (right, bottom and left-aligned) while the size of the tree view (vertically or horizontally) is being changed.

We got requests for this ever since we launched the elements panel, so we're thrilled to finally have it in. Expect this to show up in other places in the future as well, like the meta and source panels.

Disable JS

Another feature many people have asked us for is a way to disable JS. Previously our answer was to use the Chromium devtools for this, but Polypane 8.1 introduces a new Disable JS debug tool so you can turn JavaScript off right from the Polypane interface.

(Don't worry, Polypane's docs work without JavaScript, just not in our dev server!)

Different from other debug tools, Disable JS draws a red border around the pane, and shows a warning icon. Disabling JS also disables various Polypane features in that specific tab, so the warning is there as a reminder.

Dimmed screen simulator

We also added a new simulator, for dimmed screens. This will emulate a desktop screen at 40% brightness, or a mobile phone with the brightness turned all the way down:

Meta panel updates

Each release, we make sure that our social media previews still reflect the latest updates, and look for ways we can improve them even further. This takes a lot of work, but the end result is that Polypane has the most accurate and up to date previews.

No other tool, not even the official testers, come close to the accuracy in Polypane, both in terms of pixel precision as well as character precision.

In this release, we updated the Google SERP preview, which recently added a new "kebab" menu to each item:

As you can see, we can even render previews for localhost!

Slack previews also show the file size of the images it shows. Previously Polypane just showed "000 kB" for these, but we now show the accurate file size, just like Slack itself!

Lastly, we recently noticed an update to the "empty state" design of Facebook link previews, so that's also been updated.

We also fixed two issues for the meta panel: when a site had a list of favicons and all of them returned a 404 code, this would slow down Polypane as it tried to find a favicon to display. Additionally, we now handle image URLS with query parameters better in the Twitter, Facebook and Slack previews.

Outline panel updates

We continue to improve the Outline panel and make it more useful for devs building sites and accessibility auditors checking sites.

For the Links, external URLs now get an icon so they're quicker to spot. When a link has a title attribute we'll display that in the overview, and also give a warning if the text in the title is the same as the link text itself, since this is an accessibility issue.

For all lists we now more consistently show the text even when the element is hidden, and show a "hidden" badge whenever that's the case. In future releases we'll improve on this even further, providing warnings when the accessible text and visible text does not match.

Design updates

This release implemented a bunch of subtle updates to the design of the app, to help users get around easier and to make common actions more efficient.

An explicit 'add pane' button

While there are half a dozen ways to add panes in Polypane, like double-clicking, ctrl + n or the File menu, we didn't have an explicit UI element you could click to add a pane, leading to some users not figuring out how to add one. To help users in this area, we now show an explicit "add" button at the end of your your panes:

We feel this strikes a good balance between being clear and not being too much in-your-face, and we'd love to hear your responses.

Debug tool buttons switched

The Redo and clear buttons for debug tools have now been switched around, with redo being the left button and clear being the right button. Clearing a debug tool is the more often used button, so that's now brought closer to the debug tools menu button.

This makes the most frequently used option the easiest to reach, though we apologize for any muscle memory you have to retrain now.

Updated shortcut badges

Shortcuts in menu items are now shown as badges instead of underlined text. They're now rendered in a larger font-size and the lack of underline also improves their readability.

On Mac they use the icons for Cmd, Option and Shift (⌘, ⌥ and ⇧ respectively) to bring them in line with the native menu shortcuts.

In previous releases the Polypane Peek tooltip shows the alt attribute when inspecting an image. We've expanded that to showing the href value when inspecting links, and the action value when inspecting forms.

Other changes

We've tweaked the navigator area of the elements panel, so that the font information now also has an appropriate icon, and the spacing around all elements has been refined to make it clearer which elements below together.

We've also gone through all the resize cursors used in the app to make them both internally consistent and consistent with the operating system. It's a small thing, but details matter.

Motion Sensor request clarification

We got a bunch of different questions about why some sites, like fedex.com, ask for "sensor" access in Polypane but not in Chrome. That's because Chrome allows the use of motion sensors and accelerometers by default. This has caused various scripts, like those by Akamai, to use it as a fingerprinting vector.

In Polypane, where you work to improve your own sites, we felt it more important to be explicit about these requests so don't allow them by default and you have to explicitly allow it for each origin.

We've updated the message to explain what "sensors" means, and also that Chrome allows these by default. You can permanently allow any permission request to silently allow it during subsequent sessions.

Console.image support

The Polypane console now supports console.image. This isn't an official browser feature, but rather a clever hack to show images in browser consoles using a JS library, so it's a little bit of a "fun" function.

console.image by @defaced

Noteworthy fixes

The Fullscreen feature on Mac now works again, after we accidentally disabled it in 8.0. We also missed a change with regards to the drag API, causing HTML files that were dragged into Polypane not to load anymore. This is now reinstated. Drag an HTML file onto the workspace to open it in the current tab, or drag it onto the tab bar to open it in a new tab.

We also resolved a number of performance issues where specific sites didn't work well with the assumptions Polypane made about their structure. If you encounter a site that's much slower than other pages (such as this one) when opened in Polypane, please let us know so we can fix the issue and make Polypane better for everyone!

Updated Chromium, new experimental API

Chromium has been updated to 98.0.4758.102 and the custom highlights API is now available in Polypane. Head over to our docs on Experimental Chromium Features for a full overview of the available APIs. If you'd like to see one activated, Let us know.

Get Polypane 8.1

Polypane is available for Windows, Mac (universal dmg for Intel and M1) and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free.

Deprecation notice

In Polypane 7 we deprecated legacy mode. This feature is on track to be removed in Polypane 9.

Polypane 8.1.0 Changelog

New Features

New Disable JS debug tool
New Dimmed screen debug tool
New Elements panel tree view is now resizable
New Workspace now has visible "add pane" button
New Support for console.image
New Support for custom highlight api

Improvements

Improved Shortcut displayed on Mac now use icons
Improved Shortcut are shown as more readable badges
Improved Debug Tool reload and clear buttons are now switched to common action needs less mouse movement
Improved Meta Panel: Updated Google SERP Preview
Improved Meta Panel: Slack preview now shows correct file size
Improved Meta Panel: Sites with broken metadata no longer slow down Polypane
Improved Meta Panel: Facebook preview empty state is now more accurate
Improved Outline: External links now have icons
Improved Outline: Show hidden elements and hidden text more consistently
Improved Outline: Links show title attribute and give warning when it duplicates the content (Thanks Jules!)
Improved Outline: Image path resolving is now faster
Improved Polypane Peek tooltip now shows href for links and action for forms.
Improved Resize cursors are now consistent across the app
Improved Elements Panel design updates
Improved Motion sensor request now shows additional explanation
Improved Update Chromium
Improved update accessibility ruleset
Improved updated google fonts

Fixes

Fix Fullscreen shortcut on Mac works again
Fix Performance issue with Japanese Noto font (Thanks Hiro!)
Fix Dragging HTML files into Polypane works again
Fix Hide warning for missing H1 when "show issues" is off
Fix Color gamut button alignment
Fix Web Vitals FCP score now taken into account for global score
Fix issue where color contrast debug tool did not detect large text correctly
Fix Meta Panel: Issue with Slack, Twitter and Facebook previews missing image for some sites (Thanks Roel!)
Fix Elements Panel: issue with animation names that contain dashes.
Fix Resizing panes with left sidebar open led to incorrect width
Fix Broken images in Meta panel led to load loops
Fix Panel resizer sometimes overlapped menus
Fix Incorrect font used for code styles

How we made the State of CSS more responsive and accessible

Wed, 16 Feb 2022 00:00:00 GMT

Each year, the state of CSS takes a global survey of the CSS landscape. Its results are highly regarded and influence browsers, toolmakers and web developers around the world. So I (Kilian) was super honored when I was asked to help out with making the survey results more responsive and accessible. I also ended up writing this years conclusion.

To be clear: the survey results website was already well coded. The site was built in a responsive way and had accessibility testing done but there was still opportunity to optimize many parts of the survey.

I started out doing a quick 5 minute scan to see the issues that came up. While I focused primarily on things that could be improved on smaller screen sizes, but Polypane also found accessibility-related improvements that could be made. I noted down a variety of issues, from truncated text to missing landmark elements and from spacing issues to color contrast issues.

Here's a roundup of the things I found, and how I fixed them.

Forward/previous buttons had text-overflow issues

At the bottom of each page were navigational buttons that let users go to the previous and next pages. On mobile the contents of these buttons were truncated, so part of the text was no longer readable.

This happened because on mobile a grid layout was used with each button taking up 1fr. Because the grid dictated the available space, the text inside the buttons was truncated.

By changing the container from a grid layout to a flex layout which allowed wrapping (with flex-wrap: wrap), the buttons would align vertically on mobile layouts making them wide enough for text not to get truncated. With the flex layout, I could also make sure the buttons grew to full width on mobile, but keep their intrinsic width at desktop sizes.

Giving charts more space

The charts are the main show of the State of CSS results so I wanted to make sure they had as much space as possible, while also making the most of the available space. At the start, a chart always has a right-aligned set of icons called the "side area". The header too could have a set of tabs that'd be right-aligned next to the header, making the charts feel cramped on smaller mobile phones:

To clear the space for both on mobile, I made two changes:

The tabs in the header would be shown below it, giving the header the full width of the screen.
The side area would be shown above the chart, giving more horizontal space to the chart.

This gave both the charts and header some well-needed horizontal space:

The main and side areas were split using a CSS grid with named areas, but for mobile I switched this out for a columnar flex layout. This made it easier to position the buttons with a few lines of CSS. I could've also still used a CSS grid with updated named areas, but it would've required more CSS to specify.

While the side area in the new location looked fine on Polypane, due to the CSS property appearance: button on each button in the side area, Mobile Safari rendered extra padding around each of the buttons. This was not visible in the old layout, and not visible in Polypane either.

I'm mentioning this explicitly: while using Polypane means you no longer have to test all the layouts on all the browsers, each rendering engine is different and you should still test each one for issues.

Updating each chart

After maximizing the space available to each chart, I set out to make sure each chart made the most of the available space. The charting library used by the State of CSS is called Nivo and it's really good. Each chart type comes in two variants: a fixed width size and a responsive size that adapts to the available space.

For the mobile layouts, it doesn't always make sense to show the responsive chart variants: some charts simply have more data than would fit the available screen space. In those cases, charts were given an explicit scroll area. Several charts already used this, so I went over each chart to determine how best to make use of the available space:

Make it scrollable or keep it fitted to the available space
Minimize spacing around parts of the charts to make the most of the space.
Minimizing space around the charts, so visitors had to scroll less.

This is most noticeable in the ranking chart. Initially this always took up the same amount of space between each column. By updating the available space for charts, Nivo automatically minimized the space between columns while the desktop size made use of the space, allowing visitors to follow the changing in rankings easier.

Some other changes to the charts I made were:

Cutting the amount of spacing below each chart in half on mobile.
Making charts scroll horizontally when the screen width was too narrow.
Prevent tooltips from being clipped by charts on mobile.

Document structure

Polypane's outline panel gives you an overview of headings, landmarks, links and images in one go, helping you spot errors and areas of improvement. By browsing the pages with the panel open I quickly found some improvements:

Add landmarks

Landmarks are elements like header, nav and footer that tell people using assistive technologies what part of the page they're currently at. Not all pages need them, but most do. Because of this, Polypane doesn't show an error when they're missing, but it will show warnings.

Missing Header and Footer

Header and Footer semantics added

For the State of CSS website, there were definitely areas of the site that acted as a header and footer, so I updated those areas to use the right semantics.

Duplicate titles

Polypane also found some instances of duplicate titles. These can be hard to spot, since the duplication usually happens at different parts of the page and you don't see them side-by-side. While a sighted user can usually distinguish between these as they probably look different and they're on different parts of the page, someone using assistive technologies might have a harder time determining from the title which part of the page they're on. When you can, you want to avoid duplicate titles.

It turns out the recommended resources block duplicated the header above and below a separator. This is most likely a copy-paste bug, but Polypane quickly flagged this as an issue and I could delete one of the headings:

More duplicate titles

But I also noticed a lot of repeated headings on the features pages. All the labels for the stacked horizontal barcharts were marked up as h4 elements.

While I felt that an h4 was the wrong element, I didn't immediately know what the right element would be. So I asked the help of fellow front-enders in the HTML channel in the Fronteers Slack group.

After a short discussion most people thought a <dl> element was most appropriate, though <table> semantics were also suggested. Between those I opted for <dl>, since it covered the right semantics and was easier to implement.

This cleaned up the outline a lot, making it easier to navigate from chart to chart using assistive technologies while still using the right semantics to make sure that each bar chart had a proper label attached to it.

Color contrast changes

The State of CSS has a dark mode style, fitting the developer-focused nature of the website. Unfortunately the existing link colors ( #ed2e84 and #1734bf), while bright and punchy, did not have enough contrast with the background.

While Polypane automatically suggested colors ( #f2498e and #7c83dc ) that would've worked well, we ended up referencing the new logo for this year (designed by Christopher Kirk-Nielsen) and using a pink from it: #ef4e88.

In Closing

I made more changes, like set the minimum font size to 12px, added a theme color (the Meta panel helpfully pointed this out) and updated spacing in many different places to make the mobile display more cohesive (like on the awards page). If you want to go through the changes I made, have a look at the List of PRs I opened.

It's always exciting to work in a new (for you) codebase, and I definitely needed time to get my bearings. Sacha was very patient with me and helped me find my way around the codebase. Even though our workdays could not have been further apart, me living in The Netherlands and Sacha in Japan, we managed a good cadence and could sync up before my workday started and after his workday properly ended.

The State of CSS (and State of JS) surveys are some of the largest surveys of developers out there, and their results really have a material impact on browsers, tool developers and the wider industry. If you're not participating in them yet, keep an eye out for them and be sure to have your voice heard.

To stay up to date with them, you can sign up to be reminded for the next edition below the conclusion.

Polypane is now part of the GitHub Education Intro to Web Dev pack

Mon, 07 Feb 2022 00:00:00 GMT

We are proud to announce that Polypane is now part of GitHub Education Intro to Web Dev.

The response to Polypane being part of the Github Student Developer Pack has been phenomenal. Seeing Polypane be used across the world by students to develop their project is nothing short of amazing.

We are really thrilled to team up with GitHub to make Polypane accessible to even more students just starting out on their journey to become web developers and designers and we think Polypane will be a great help as they learn to make websites and web applications that work everywhere and for everyone.

The Intro To Web Dev

Everything you need to build your next website. Learn how to design and build your own website as you learn the basics of web development. The Intro to Web Dev Experience gives students the tools to start you on a path, no matter how much experience or technical knowledge you currently have.

Polypane

Our mission at Polypane is to improve the workflow of designers and developers. We do that by offering a world-class development browser that includes the tools you need to develop, debug and test websites and web apps. Polypane nudges you in the right direction and makes things that are difficult to find out normally easily discoverable with a single click. Questions like 'does my site work on all mobile devices?' 'Are all my meta tags correct?' 'Is my design actually accessible?' are easily answered with Polypane.

More information about the GitHub Education Intro To Web Dev Experience: GitHub Education Intro to Web Dev.

Polypane 8: better Elements Inspector, new syncing features, Chromium 98 and more

Tue, 01 Feb 2022 00:00:00 GMT

Polypane 8 comes with a better Elements inspector, big performance improvements, Chromium 98 and many other new and improved features, like forced colors emulation, focus state sync, ARM support, UI improvement, a new debug tool and all-in-all netting a changelog of over 100 items. Lets get into it.

Better Element inspector

The Polypane element inspector inspects elements across panes and lets you edit the same element in all panes at the same time, a unique and powerful feature built from scratch for Polypane.

This round, we focused on some of the most requested features, making the design easier to understand for people coming from other browsers and greatly improved the performance of the inspector as well.

60% faster element inspection

We rewrote core parts of our element inspection logic, making selecting elements and changing styles over 60% faster compared to Polypane 7. This is a pretty major difference and it feels great. Especially considering we now surface more information than we ever did, more on that below.

Updated design

To accommodate the new features and address some the issues people had with our Elements Panel we tweaked and improved the design. There are no major changes, but a lot of little tweaks to make it feel more familiar while also making room for new features. Have a look at the old and new design side by side:

Element inspector in Polypane 7

Element inspector in Polypane 8

The Tree view is now styled similarly to the Chromium elements panel: collapsed elements are shown with ... instead of as opening tags and short content is shown inside the element. We hope this makes it easier for people to switch to the Polypane Element inspector.

For the navigator area, we tightened up the alignment and placement of icons, ids and classes, and we now collapse the box model by default so more space is visible for the Style tab. The button to toggle the box model now has text to make that clearer.

The biggest changes happened in the Style tab. We switched to a monospace font which allows us to show more code in the same area while bumping up the contrast of different components without making it feel too busy. A sharp eye will notice some new checkboxes as well…

Toggling individual styles on and off

Those checkboxes are for the most requested feature for the Elements inspector: the ability to toggle individual styles on and off. It was a huge undertaking, but it's here!

Toggling a style is quick and gives you feedback across all your panes. Styles that are toggled off are shown with a line-through so you can at a glance see which styles are enabled and disabled.

Cascade layer support

The Element inspector now has full support for displaying Cascade layers. They are set to ship as stable in the next release of Chromium while in Polypane you can use them already.

Instead of having just one way to overwrite the specificity, with !important, cascade layers lets you define separate layers for different parts of your CSS.

Each new layer overwrites the old one, making it easy to work with third party CSS and saving you from having to add more complex selectors just to be more specific. For an introduction to Cascade Layers, read the Cascade Layers article by Stephanie Eckles.

Work to support cascade layers is underway in all major browsers but it hasn't shipped yet (except in Safari's technology preview), meaning that Polypane is the first Chromium-based browser with devtools support for Cascade layers, and the second browser to ship it. How cool is that?

Container Query and Supports query support

Like Cascade layers, container queries are an upcoming technology that Polypane has enabled. While the elements panel already showed @media queries, we updated our logic to show all at-rules, adding @supports and @container to the list, as well as the @layer mentioned above.

If there are nested at-rules the Elements inspector shows all of them so you can always see why something is applied.

Shift to inspect `pointer-events:none`

A useful feature in Chromium devtools is you can press shift to inspect elements that have pointer-events:none applied to them. Now that feature is also available for the Polypane inspection tools, either from the inspect button or after pressing alt/option to use Polypane Peek.

Other Element Inspector improvements

We made more changes to the Element Inspector:

Double click any attribute in the tree view to copy its value.
Click any id or class in the Navigator to copy its value, formatted for CSS.
The color picker of a CSS value with a custom property now updates the custom property instead of the CSS value.
We rewrote the autosuggest UI for CSS and HTML properties so you can find matches faster.
Polypane Peek can now also be used with the Chromium devtools by selecting those in the address bar.

There's also a few bug fixes, you can find those in the full changelog.

Elements Inspector documentation

Performance improvements

With this release we set out to improve performance across the application. We wrote about the 60% performance improvement in the elements panel above, but we also made improvements to other parts of the app.

50% reduction in load time
By improving the order of things we do during launch we managed to improve startup time by 50%, and completely did away with the "loading Polypane" screen.

Faster refresh rate for scroll syncing
The scroll sync logic has now been updated to no longer need CSS updates on scroll, making it much smoother.

Website bottlenecks guards
While Polypane previously showed a warning for sites that had more than 10K CSS selectors, we now disable various features at 15K selectors. Polypane disables hover syncing, breakpoint detection and overflow detection to keep the rest of the UI performant. In future releases we might disable more features.

Preventing data-related performance issues
We also fixed several bottlenecks in the Polypane UI and parsing logic: The address bar could get slow because your history had too many matches, so we now limit the number of matches we show.

If a chat widget on a site changed the page title every second (purely hypothetical of course, you would never do that!) that would slow down Polypane a lot because we re-parsed the page whenever the page title changed for legacy reasons. Page title changes also reset any active page navigation. We now no longer use page title change as an indication for navigation or need to re-parse the page.

Faster Polypane Peek tooltip
Our tooltip was already fast but when improving our style inspection we found a potential slowdown for the tooltip, so we added that in. Enjoy the 4ms speedup!

Updated Sync options

You can now turn off individual syncing options, we stopped syncing form submissions and we can also sync Focus events.

Individual sync options
Right-click the sync button in the address bar to toggle individual syncing options. You can for example choose to sync hovering but not keypresses.

Focus sync
Normally, focus is only ever in a single place across your entire operating system. With Focus sync, each pane can retain their own focus, synced between panes.

Doing keyboard testing and seeing how Focus moves across the page on multiple panes is an extremely useful for those of you doing accessibility testing.

Focus sync is off by default. Turn it on by right-clicking the sync button in the address bar.

Preventing multiple form submissions
One thing that tripped people up is that forms would be submitted multiple times (once in every pane), which could trigger server issues. While not unsurprising (if you do the same action in multiple panes, you ...do the same action) it's most often not desirable.

Polypane 8 no longer syncs form submissions across panes. Note that you will need to use proper form semantics for Polypane to detect that a click or keypress triggers a submit action.

Synced interactions documentation

Forced colors emulation

Polypane can now emulate forced colors:

This is great because it means that to work on your Forced Colors design you:

No longer need a windows device.
No longer need to switch your entire device into forced colors mode.
You can quickly refer back to the regular design side-by-side for pointers.

By switching the prefers-color-scheme from light to dark, the forced colors design will be updated as well.

Emulation documentation

Console updates

Along with updating the Elements panel we also did another round of improvements for the Console: fixing various bugs, improving rendering performance and adding some new features

New console functions
The Polypane console has added support the following console functions:

assert
time
timeLog
timeEnd
count
countReset

It already supported log, warn, error, debug, info, dir and table. All console functions are now also available without typing console. in front of them.

Navigation events
The console now shows navigation events like reloads and new pages so you know which console messages belong to which page.

New JSON renderer
We switched out our JSON/Object renderer for one that more closely resembles the JSON rendering of the Chromium devtools.

Logging in Polypane 7

Logging in Polypane 8

Console documentation

Updated Rules and Guides

Our rulers and guides feature also got another round of improvements:

Alignment to site

Previously the ruler features were fixed to the viewport, so if you scrolled the page they would not scroll along. In Polypane 8 they do, so the rulers, guides, rows and grid now scroll along with the page.

Setting a custom color

You can now change the color of the overlays to contrast with your site (or fit your mood):

Dot grid option

Instead of grid lines you can now also set the grid to be shown as dots:

Right-aligned guides

You can now add guides that are right-aligned by specifying them with a negative value. They will stay attached to the right side even when you resize the page.

Rulers, Grid and Guides documentation

Panel can now be left aligned

Speaking of alignment, you can now left-align the panel. Right-click the alignment button in the panel to set it to either right, bottom or left alignment:

Panel documentation

New Color Contrast debug tool logic

Measuring text contrast is complex and is influenced by a lot of different factors. Previously, we calculated the text and background colors of an element, taking opacity and all relevant parent background colors into account. This works well, but it's missing some factors.

In Polypane 8, we now improved the handling of opacity set on parent elements and added support for filter: opacity(), text-shadow and text-stroke, all of which combined provide a more realistic calculation of contrast.

Color Contrast Checker documentation

The contrast checker in Polypane uses the WCAG2 algorithm. If you've heard about APCA recently as the new improved algorithm, it's important to keep in mind that, while very cool, it's not yet an official standard so can not be used to check compliance. Kilian wrote the article WCAG2 is what we have that explains why. In a future update of Polypane we will provide APCA and WCAG2 contrast logic side by side.

Meta Panel updates

The meta panel now highlights the parts of your title or description that run over the recommended length.

In the past few months both Slack and Discord updated their rich previews (very subtly), so we've updated our previews to match their new designs.

Meta panel documentation

New Debug tool: Hide Cursor

No image for this one, but it's handy nonetheless. The Hide Cursor debug tool hides your mouse cursor. This way you can do a keyboard test and not be tempted to cheat.

CSP header warning

When a site sets content-security-policy (CSP) headers it disables part of the functionality Polypane offers. While we had an option to disable CSP headers for a few versions now, Polypane now detects when CSP headers block functionality and shows a warning and option to turn them off.

Chromium 98

Polypane now runs on Chromium 98. We always try to keep up with the latest version of Chromium to make sure you get to use the latest rendering engine, the latest security improvements and the latest new features.

Notable new experimental features are the selectmenu element and the ::spelling-error and ::grammar-error pseudo classes.

Overview of experimental Chromium features

ARM support

We've had an M1 version for Mac for quite a long time and now we also have ARM versions for Windows and Linux. So if you run on those architectures you can now use a more performant version of Polypane.

Windows now has a universal installer just like Mac, and for Linux you need to choose the appropriate architecture (The download page will automatically detect this for you).

If you want to get the ARM version now make sure to download the new version from the site, as Polypane will update to the same architecture it installed with.

Other improvements and bugfixes

As usual this release got a little out of hand, here are some other notable improvements and bugfixes that dont deserve their own heading but are still noteworthy. You can find the entire list in the changelog.

We aligned with Chrome on the behavior when double clicking the tab bar. Instead of opening a new tab, the app now (un)maximizes.
The scroll position in default mode is now preserved on reload again, so live reloading works much nicer. This worked in previous versions, but we broke it. It's fixed now!
All areas are now named sections so you can use assistive technologies to navigate across the app easier.
Live reload can now set a delay in decimal seconds. The newest generation of build tools is significantly faster, often only needing milliseconds to compile so waiting even a full second is way too long.

Get Polypane 8

Polypane is available for Windows, Mac (universal dmg for Intel and M1) and Linux (.deb or AppImage) in both 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free.

Deprecation notice

In Polypane 7 we deprecated legacy mode. This feature is on track to be removed in Polypane 9.

Polypane 8.0.0 Changelog

New features

New Element inspector: Toggle individual styles off and on
New Element inspector: Cascade layer support in Element Inspector
New Element inspector: Container Query and Supports query support
New Emulation: Added Forced Color emulation
New Sync Options: Focus sync
New Sync options: Turn specific sync options on and off
New Chromium 98
New ARM support for Windows and Linux
New Experimental features: selectmenu, spelling and grammar pseudos
New Detect and warn about CSP issues on a site
New Shift to inspect elements with pointer-events: none
New Debug tool added: Hide cursor
New Rulers and Guides updates
New Panel can now be left-aligned

Improvements

Improved Performance: 50% improvement in app load time
Improved Performance: faster syncing of scroll position
Improved Performance: At 15K rules of CSS Polypane disables hover sync, breakpoint detection and overflow detection features
Improved Performance: Page title change no longer cause Panels to update
Improved Performance: Improve performance of suggestions in Address bar
Improved Page reloads preserve scroll position (Thanks many people!)
Improved UI: Double-clicking tab bar now maximizes app instead of opening a new tab
Improved UI: Address bar now works better when opening new tab
Improved UI: New design for URL hover indicator
Improved UI: Warning shown when first using tabs explaining how they work
Improved UI: Panel border lights up to indicate it's draggable
Improved UI: Focus border in Dark mode now less pronounced
Improved UI: Esc in address bar now reverts URL
Improved UI: All parts of the Polypane UI now are named sections for improved navigation with assistive technologies
Improved UI: Reference image UI now visually consistent with other parts of UI
Improved Sync Scroll: Better handling of pages with smooth scrolling enabled (Thanks Stratos!)
Improved Sync: Form submissions are prevented from being synced across panes
Improved Color contrast: now takes parent opacity and filter opacity into account
Improved Color contrast: now takes text shadows into account
Improved Color contrast: now takes text outlines into account
Improved Live Reload: You can now set the delay in decimal seconds
Improved Color chooser: Tints and shades now have consistent alpha value
Improved Color chooser: Click preview to copy color
Improved Color picker: Show icons for copy actions
Improved Elements Inspector: 60% performance improvement when selecting new element
Improved Elements Inspector: Update Style editing UI
Improved Elements Inspector: Improve performance of getting list of classes
Improved Elements Inspector: Refreshes info on page reload
Improved Elements Inspector: Collapse box model by default, add text to toggle
Improved Elements Inspector: Active element in tree view now scrolls into view
Improved Elements Inspector: Click to copy Classes and ID in navigator (Thanks Roni!)
Improved Elements Inspector tree navigator is now styled like chromium
Improved Elements Inspector tree navigator double click attribute value to copy
Improved Elements Inspector now sorts CSS Rules by CSS4 compatible specificity calculation
Improved Elements Inspector the color picker of a css value with a custom property now updates the custom property
Improved Elements Inspector: new autosuggest UI for css and HTML properties
Improved Meta Panel: Highlight part of title and page description that are too long
Improved Meta Panel: Update Slack preview to new design
Improved Meta Panel: Update Discord preview to new design
Improved Meta Panel: Detect more variations of charset declaration
Improved Share: QR code no longer moves Live CSS badge out of the way
Improved Devtools panel now includes a reload button
Improved Devtools: Add XState devtools
Improved Devtools: F12 now both opens and closes the devtools
Improved Debug tools: Small text tool no longer shows warning for elements with font-size of zero
Improved Rulers: now scroll along with website
Improved Rulers: Ability to set colors
Improved Rulers: Dot grid option
Improved Rulers: Allow guides to be set from the right
Improved Outline panel: Displayed image src is limited to 5 lines of visible text
Improved Outline panel: Warn for more nondescriptive text in link and image overviews
Improved Outline panel: Prevent getting outline on each URL change
Improved Console: JSON display is now more aligned with Chromium devtools
Improved Console: Support the time, time, timeLog, timeEnd, count, countReset and assert console methods
Improved Console: show navigation events
Improved Console: console functions can now be used without console. in front of them
Improved Peek: faster rendering of inspection tooltip
Improved Peek: option to use chromium devtools instead
Improved Workspace pane: now shows icons for each default workspace
Improved New "Reset app to defaults" option in main menu
Improved Shortcut panel on Mac now uses ⌘ and ⌥ icons
Improved Web Vitals popup now shows status icons in the overview
Improved Web Vitals popup now shows scoring for FCP
Improved Updated list of Google fonts

Fixes

Fix Prevent crash caused by parsing a non-plain text robots.txt (Thanks Roni!)
Fix Clicking relative links in outline panel now loads correct URL
Fix issue with Polypane Peek not being available on load
Fix Alignment in Attribute and Data labels in elements panel
Fix Prevent style editing sometimes changing wrong CSS rule
Fix Text overflow in Web Vitals tooltip with zoomed text
Fix Bug where Color chooser would be positioned incorrectly
Fix Syncing of -webkit hover styles
Fix Title change no longer blocks page navigation
Fix Incorrect permission message for geolocation (Thanks Zjelko!)
Fix Console: Prevent issue where messages added in rapid succession weren't all being added
Fix Peek: issue when inspect tooltip would not be shown
Fix Live CSS: No longer indents randomly
Fix Meta panel: No longer use "favicon missing" as alt for favicons
Fix Reference image being out of sync with website
Fix Consistent capitalization of menu shortcuts on Windows
Fix Overview screenshot sometimes having stale data
Fix Element Inspector: Support editing and adding Keyframe styling
Fix Element Inspector: consistent specificity display
Fix Element Inspector: Arrow keys changed em to rem
Fix Element Inspector: Formatting of Copied Keyframe CSS rules
Fix Element Inspector: Pseudoclass styling being set incorrectly
Fix Element Inspector: font-face editing in Legacy mode
Fix Adjusted text size did not apply on launch
Fix Configurators and info panels overlapped address bar suggestions
Fix Error message when syncing events on deleted elements
Fix Error message when getting hover status
Fix Live Reload: injection in legacy mode causing reloads
Fix Browse panel didn't open URL on app launch with tool selected (Thanks Michael!)
Fix Live Reload: Better support for strings in the ignorepatterns.txt file (Thanks Nick!)

The breakpoints we tested in 2021 & 2022, and the ones to test in 2023

Wed, 19 Jan 2022 00:00:00 GMT

Which screen sizes to design, build and test on is a perennial topic in web development. While well-built responsive websites will work at any size, during development it's easier to use a small number of sizes to check with (even in Polypane!)

But what sizes to use? There's a number of different approaches we'll go over in this article, all updated to be relevant in 2022 and 2023.

Base it off device groups: mobile, tablet, laptop and desktop.
Use the breakpoints from popular CSS frameworks.
Using the dimensions your visitors use.
Using the most used breakpoints of 2021 and 2022.

Based on device sizes

There's mobile phones, tablets, laptops and desktops, so if you use size for each of that category, you cover them:

Device sizes Open in Polypane

Mobile375px
Tablet768px
Laptop1280px
Desktop1920px

This gives a good overview, but you run the risk of missing the in-between sizes, smaller than 375px and between 900 and 1000px wide.

Both of those are often forgotten, but still see quite a bit of real-life usage. The first one in older mobile phones, and the second one on tablets, laptops and desktops in unmaximized browser windows.

Based on popular CSS frameworks

We've written about the breakpoints that popular CSS frameworks use before. These are excellent when you're also using the rest of the framework, or as a starting-off point. For example, here's the breakpoints in Tailwind CSS 3.0:

Breakpoints from Tailwind CSS Open in Polypane

sm640px
md768px
lg1024px
xl1280px
2xl1536px

This gives a nice spread, though with a relatively high starting point you run the risk of having to do extra work after implementing the design to make sure everything fit on mobile devices.

Based on your visitor data

If you use Google Analytics, your visitors browser dimensions are stored as well. This means you can retrieve them from the Google Analytics dashboard and use those to test on. If you want an overview of them, generate your own browser size wall.

For example, here's the 5 most used dimension on this site:

Viewports from Polypane.app visitors Open in Polypane

4.55%1900px
2.13%1900px
2.02%1520px
1.99%1350px
1.95%1350px

While you can use the above it's important to realize that our audience probably isn't your audience. Polypane is a tool for web developers, so the vast majority of our visitors are viewing our site on a desktop device, and fairly large ones at that.

Notice too that none of the most popular sizes here map to the traditional device widths mentioned above. Every audience is different, and it's best to cater to yours.

Create a Polypane workspace based on Google Analytics

You can also use our GA workspace creator to automate the process, select how many panes you want and how to sort them, and then opening them in Polypane with a single click.

The breakpoints we tested in 2021 and 2022

That leaves us with the last method: using the breakpoints that have been used the most in the past years. For that we can use two sources: the Web Almanac and Polypane.

From the Web Almanac

Each year, the Web Almanac analyses over 8 million websites (8.2 in 2021, 8.3 in 2022) old and new, to make an overview of the most used web features, including breakpoints. That also includes all the sites in the web almanacs testing data that existed (well) before this year.

It has a chapter on CSS that includes a list of common breakpoints. It's worth reading the analysis: they make a split between min-width and max-width media queries because you can see a clear difference in sizes used (min-width is more often used for 767px while max-width for 768px, for example). We're splitting those out in the overview below as well, as they give a nice contrast.

Min-widths for 2021 and 2022

Most used min-width breakpoints from the Web Almanac 2021 Open in Polypane

57%768px
44%1200px
40%992px
31%600px
25%782px
24%480px
16%1024px
9%767px
8%800px
3%991px

Most used min-width breakpoints from the Web Almanac 2022 Open in Polypane

57%768px
42%1200px
39%992px
32%600px
25%782px
23%480px
17%1024px
8%767px
7%800px
3%991px

Between the two years the order of these stayed the same (remember, most of those 8 million websites were created before 2021). There are some percentage point changes her and there but nothing worth calling out.

Max-widths for 2021 and 2022

Most used max-width breakpoints from the Web Almanac 2021 Open in Polypane

52%767px
38%600px
38%768px
36%480px
30%991px
27%1024px
26%800px
18%1200px
13%992px
10%782px

Most used max-width breakpoints from the Web Almanac 2022 Open in Polypane

51%767px
39%600px
38%768px
35%480px
29%991px
26%1024px
25%800px
19%1200px
13%992px
12%782px

Likewise for the max-widths there was no change in the order of these and there were slight changes in the percentages.

Comparing min and max widths

When it comes to the difference between min-width and max-width though, apart from the 1px differences here and there, an interesting difference appears: the spread for min-width is much wider. For min-width, the top 10 goes from 57% usage to 3%, while max-width starts lower, at 52%, and ends higher, at 10%.

Min-widths means you're adding styling as you get wider, while max-widths usually disable styling as they get smaller. Because of this, you frequently need less min-widths, and your styling works for a longer time before you need a new breakpoint.

In addition, when using min-widths you are more likely adding breakpoints based on the content. With each website's content breaking in different places, that means that the number of different breakpoints will be higher.

The most-used breakpoints in Polypane in 2021 and 2022

We can also look at the most used pane sizes in Polypane in 2021 and 2022. The sizes that real developers have used the most in the past year to develop websites with.

This gives the most accurate look at what sizes modern sites are optimized for. Here is the top 10 for 2021:

Most used breakpoints in Polypane in 2021 Open in Polypane

5.48%320px
4.49%1280px
3.41%768px
2.41%1920px
2.19%500px
1.89%568px
1.86%800px
1.81%375px
1.69%1024px
1.25%1440px

If we look at these sizes we see a nice spread between device sizes, breakpoints from CSS Frameworks and the many presets that Polypane ships with.

And here is the top 10 for 2022:

Most used breakpoints in Polypane in 2022 Open in Polypane

0.7%320px
0.63%1280px
0.53%768px
0.39%1920px
0.35%500px
0.3%375px
0.27%1440px
0.24%568px
0.23%800px
0.23%1024px

These percentages are very different from 2021. That's because as Polypane has grown over the years, so has the diversity of breakpoints people use to test.

We love this because it means people are increasingly letting go of designing for devices in favor of picking breakpoints that work for their content.

The breakpoints to develop on in 2023

As you can see from the relatively low percentages, there are thousands of other sizes being used in Polypane. There is no single right set of dimensions.

So the best answer? Pick a set you like and adapt it. Any of the ones on this page are a good choice.

If you notice you often make errors at a size you're not currently developing for, make sure to add it. And if you find yourself fixing the same issue at multiple sizes, maybe you can hide one of them during development.

Regardless of which default sizes you choose to develop on, it's best to see all of them in one overview. That's what Polypane lets you do. All the other parts of your browser are synced as well: your interactions happen in all panes, our elements panel lets you edit and inspect elements in all panes at the same time, and our console intelligently combines messages from each pane.

Polypane has a free trial available, click the link below to sign up!

Improving your CLS and LCP Core Web Vitals

Wed, 24 Nov 2021 00:00:00 GMT

Web Vitals are a set of measurements that gauge the user experience of your website. If you score poorly on them, your site is not as nice to use as a site with good Core Web Vitals. Google also uses them to determine the SEO score of a page. So improving them is important for any website.

What are the Core Web Vitals?

While there are seven different Web Vitals, the Core Web Vitals are the three that have the largest impact:

CLS: Cumulative Layout Shift

This measures how much your layout changes as the page loads, or as a user interacts with your page. Things like images loading and pushing content down, or web fonts loading and causing your type to change will change the layout of your page which can be frustrating to your visitors.

You want your CLS to be below 0.1 to get a "Good" score.

FID: First Input Delay

This measures how soon your page is interactive by checking how fast your site responds to the first interaction a user has with your page. While your page is loading it's too busy to process the event and only processes that after the loading is done.

You want your FID to be below 100ms to get a "Good" score.

LCP: Largest Contentful Paint

This measures how long it takes your page to load visually. The Largest Contentful Paint is measured in the time it takes for the last largest visual element to load. This doesn't have to be the visually largest element visible, or even the largest image. It can also be a block of text with a web font.

You want your LCP to be below 2.5 seconds to get a "Good" score.

Out of these three, CLS and LCP are influenced mostly by your page styling (and the way that is loaded) while FID essentially measures how much JS you execute on load.

The other Web Vitals are FCP (First Contentful Paint), TTFB (Time To First Byte), TBT (Total Blocking Time) and TTI (Time To Interactive). This list will probably be expanded with Web Vitals that measure animation performance and overall responsiveness.

Monitoring your core web vitals

To improve something you first need to measure it. Polypane continuously monitors the web vitals in each pane, but to not clutter the interface your score is hidden until you decide to show it.

Click the settings icon in the top right of Polypane and then toggle "Web Vitals status" to turn web vitals on.

With web vitals turned on each pane gets a new label that shows either a ●, ■ or ▲ for a "good", "needs improvement" or "poor" score respectively. If you score "needs improvement" or "poor" on any of the web vitals, the label also shows the Web Vitals that score "poor" or "needs improvement".

To get more detailed information you can hover over the label and a popup opens with a full overview of your Web Vitals. Along with the Core Web Vitals, Polypane also shows you the First Contentful Paint score and Time To First Byte.

This gives you a more detailed overview of your web vitals score. For any public page you'll notice a bunch of bars here along with the score you get for each web vital.

Those bars show you the average scoring for your page, from the CrUX Field Data that Google collects for all sites. Field Data tells you the average loading experience in the real world. The larger the green part of the bars for CLS and LCP are, the more people your page loads fast for. The CrUX Field Data is measured separately for mobile and desktop, and Polypane will automatically switch between those depending on the size of your pane.

Why CrUX data is useful

Web Vitals are non-deterministic so it's important to look at the averages. Your Web Vitals score will be different on each device, but also different each time your reload your page. Sometimes the network might be a little bit slower, or your CPU might be doing something difficult right as your page is also being parsed, resulting in a worse Web Vitals score.

By showing the averages you can quickly check if your experience compares to the majority of people loading your page, and if the majority of your visitors have a good experience.

Improving CLS and LCP

Polypane offers visualizations for both the CLS and LCP so you can figure out exactly which elements contribute to a score and improve them one by one. For example on this page the LCP is the image at the top of the page and it has a score of 1.9s, which is "good".

When a visualization is available there will be an Eye icon visible in the popup next to the Web Vital. Click it to toggle the visualization.

Cumulative Layout Shift

The Cumulative Layout Shift visualization will show you how all the elements that contribute to the layout shift behaved from their initial point of rendering (semitransparent red rectangle with a dashed red border) to their ending position (transparent rectangle with a solid red border).

Visualization of the Cumulative Layout Shift on the Polypane getting started page.

The bigger the change between the first and second rectangle, the higher your CLS score. For each of these types of elements you can improve your score by doing the following:

Images (and video) could be loaded in too late, in which case you want to add the loading="eager" and importance="high" attributes to tell the browser to start loading these early.

Images can also be missing an aspect ratio or width and height attributes. When you add these the browser can already calculate the space an image will take before the image has loaded, so that wont cause a layout shift.

Also make sure that any hero images you have are preloaded at the top of the page using <link rel="preload" href="your-file.jpg" />.
Text elements that result in a layout shift are usually caused by your webfont taking too long to load and the elements to first be rendered in the fallback font, then rendered again in the webfont. If your webfont is not important, switch your @font-face declaration from display: swap; to display: optional;. This will give your web font a very small window to load (fast enough to not trigger a layout shift) or the browser will keep the fallback font and won't update to the new font.

You should also make sure to preload your font-files by adding them as preload links in the header. This will tell your browsers that you're going to use this font, and the browser will download it in advance.

There are also techniques to configure your fallback font using CSS Font Descriptors to make sure that there is no change in the layout when swapping the fonts. Making sure that works well with fallback fonts on all operating systems is impossible though, so we wont recommend it.
Elements loaded in through JS are more difficult. When you can, make sure to reserve the space your content will take up (even if it's an estimate) to minimize the layout changing.

Keep in mind that multiple reloads of your page might show you different cumulative layout shift scores, and that different screen sizes will get different elements contributing to the CLS. So make sure to check multiple reloads and multiple screen sizes. In Polypane, you can do that both at the same time by using multiple panes.

Even if you have a very low CLS the visualization can still show elements causing a CLS. You dont have to improve these, but because the shifts might be small they could be easy to fix.

Largest Contentful Paint

The LCP visualization will highlight the element that causes the LCP. If your LCP is low or in the green then this is just for your information, there is nothing to do or to improve. But if your LCP is too high, in the orange or in the red, there's things you can do to improve.

In general, make sure that your site loads as fast as possible. For this you can also use the Time To First Byte measurement in the Web Vitals tooltip, which tells you how long it takes for the first bytes to load after you requested the page. In essence, how long it take your server to respond. If this takes very long it means your server is taking a long time to generate the page.

There's many ways to make your server faster but that's a little out-of-scope for this article. Still, that will have the biggest effect on your LCP.

It's not just how fast your server responds with the HTML, but also all the other resources that need to get downloaded. For a good LCP you need to make sure that the CSS, webfonts and images that are required for your page load are downloaded as fast as possible.

To do this you can make the same improvements as for CLS: Add a loading="eager" and importance="high" to your LCP image and make sure to preload that image in your <head> using <link rel="preload" href="your-file.jpg" />. You should also do this when your LCP element has a large background image.

If your LCP is a text block with a web font, make sure to preload that webfont as well: <link rel="preload" href="your-font.woff2" />.

And if the load of your page depends on third party code, like Google Analytics, you can preconnect and dns-prefetch the domains they're on to get a faster response:

<link rel="preconnect" href="https://googleanalytics.com/" />
<link rel="dns-prefetch" href="https://googleanalytics.com/" />

This way your browser already knows you're going to connect to these domains and it can do the DNS lookup and connection before the request.

Just knowing your Core Web Vitals score doesn't help you figure out what parts of your page to improve, but with the visualizations in Polypane the elements you should focus on become instantly clear. Check out your Core Web Vitals by starting a free Polypane trial.

The EyeDropper API: Pick colors from anywhere on your screen

Thu, 11 Nov 2021 00:00:00 GMT

With the new EyeDropper API in Chromium, websites can let visitors pick colors from anywhere on their screen, adding another feature to the web that used to require hacky solutions and is now just a few lines of code. The API is clean and modern and easy to use. In this article we'll discuss how to set it up, handle edge cases and additional features we hope will land in future updates.

We've been following the EyeDropper API since it was first proposed and have been experimenting with it as different parts became available as well as providing input while the feature was being developed. In Polypane 7 we started using it extensively for the new color picker and new palettes.

Try it out

Try the color picker API below (Chromium 95 or Polypane 7 and up).

The EyeDropper API is not supported. Please use Polypane or another Chromium-based browser.

How to use the EyeDropper API

The API adds a new global, EyeDropper (or window.EyeDropper) that you can use to set up a new eyedropper object:

const eyeDropper = new EyeDropper();

This eyeDropper object has one function, eyeDropper.open(). This starts the color picker and changes the users cursor into a color picker, complete with magnified area and a highlighted pixel. This function returns a promise, so you can use it either with await or as a promise.

One gotcha is that it only works when called from a user-initiated event. This is part of the security model, to prevent websites from potentially scraping pixels without the user knowing.

Detecting support for the EyeDropper API

Because the API is only available in Chromium you will need to check for support before using it. The most straightforward way to do that is to only offer your color picking UI when window.EyeDropper is not undefined:

if (window.EyeDropper) {
  // Okay to use EyeDropper
} else {
  // Hide the UI
}

`await` based version

// won't work
const result = await eyeDropper.open();

// works
document.queryselector('.colorbutton')
  .addEventListener('click', async () => {
    const result = await eyeDropper.open();
  });

The eyeDropper.open() call will resolve in two situations:

The user clicks anywhere on the screen.
The user pressed the Esc key.

In the last situation the eyeDropper will throw an exception, but in the first situation you will get a ColorSelectionResult object, which has an sRGBHex property containing the picked color in hexadecimal format. In your code you can check if result.sRGBHex is defined and then do with it what you want.

document.queryselector('.colorbutton')
  .addEventListener('click', async () => {
    const result = await eyeDropper.open();

    if (result.sRGBHex) {
      console.log(result.sRGBHex);
    }
  });

You don't have to handle the exception but if you wanted to provide the user feedback that they cancelled the eyedropper, you need to add a try .. catch to the code:

document.queryselector('.colorbutton')
  .addEventListener('click', async () => {
    try {
      const result = await eyeDropper.open();

      if (result.sRGBHex) {
        console.log(result.sRGBHex);
      }
    } catch (e) {
      console.log(e);
      // "DOMException: The user canceled the selection."
    }
  });

Promise based version

You don't have to use the await version. eyeDropper.open() returns a promise, so adding a .then() and .catch() also works:

document.queryselector('.colorbutton')
  .addEventListener('click', () => {
    eyeDropper
      .open()
      .then((result) => {
        console.log(result.sRGBHex);
      })
      .catch((e) => {
        console.log(e);
        // "DOMException: The user canceled the selection."
      });
  });

Things to keep in mind when using the EyeDropper API

There are two gotchas with the API, at least as it's currently implemented in Chromium that we've found that you should be aware of.

Color picking does not use the live screen

At least in the current implementation, the color picker get the pixels as shown on the screen when you call .open(). This means that if you're playing video the color picker will show the pixels of the frame that was visible then, not the live video.

This is dependent on the implementation and we hope a future update of Chromium will allow for live data.

Color picking only works as the result of a user action

As mentioned earlier you need a user initiated event to open the eye dropper. This is to prevent sites from opening the eyedropper UI to start scraping your screen right on load. Instead the user needs to perform an action for the API to work, like a click or keypress.

Features we want to see added

The EyeDropper API is still very young and minimal. During our implementation we encountered a number of features that we would like to see added to the API in future updates.

Live preview of the hovered color

A major component of many eye droppers, like those in design tools, is that they also show a preview swatch of the hovered color. You can use this to compare it to another swatch or quickly check a HEX code. The current API does not offer this over security concerns. We have filed an issue against the EyeDropper API on GitHub for this: #6 Live feedback is needed.

A more extensive color model

Currently, all colors are returned in the sRGB color model. This means the API won't accurately return colors outside the sRGB spectrum, for example those on Apple's P3 screens. How to deal with this is an open issue. Work is also happening on a new Color API for the web. The EyeDropper API could use this Color API when it lands in future versions of browsers.

A more natural way to select multiple colors

Because of the current security model, each time a user picks a color they need to re-initiate a user action which can be tedious. For example if you want to create a palette of colors in one go, you want to start picking colors, click on all the colors you want to add and then close out of the eye dropper. We similarly filed an issue for this on Github: #9 Do we expect multiselect to work? and this feature is currently being considered.

For this it would be nice if we could designate a part of the page (like a button) as an area where the EyeDropper doesn't work, that instead functions as a "done" button. This way users can select multiple colors and then click that button when they're done.

Other browsers

For now, the API is only available in Chromium based browsers from version 95 on and there has not been a signal from Safari and Firefox yet. If you want those browsers to support the EyeDropper API as well, add your support to the open issues: Issue #1728527 for Firefox and Issue #229755 for Safari.

The EyeDropper API is a nice addition to the browser that we hope to see land in more browsers. We make good use of it in Polypane and would like to see it be developed further.

Polypane 7

Mon, 08 Nov 2021 00:00:00 GMT

Polypane 7 adds a new color picker tool, support for pseudo-elements and pseudo-classes in the Elements panel, new Web Vitals data and visualisations, an integration with Marker.io, new simulators, an update to Chromium 96 and much more.

What's Polypane? Polypane is a web browser for developers, designers and anyone that works on web projects. It shows sites in multiple fully synced panes and has tons of features that help with responsive design, accessibility and overall site quality.

New color picker 🎯

A proper, screen-wide color picker has been on our wishlist since 2016 and thanks to new APIs in Chromium we've finally been able to include it.

You can pick a color from anywhere on your screen by clicking the color picker icon in the address bar, or by pressing shift + alt + p.

After you've selected a color, we copy it to the clipboard and the picked colors overview opens (you can also open it by right-clicking the icon) This is an overview of previously selected colors and accessibility info of your last two selected colors.

Checking text contrast is as easy as first selecting the background color and then the text color. We show these two colors in big swatches that you can also click to copy the color.

Polypane shows color contrast info below it, and suggests an improved color when needed. We do the same for the 9 previously selected colors, and you can swap out any of those colors for the foreground or background colors so quickly compare the contrast ratio of any color pair.

For a full overview check the color picker docs.

Elements panel updates 🔍

The Elements panel is now more compact, so there is more place for the tabs that let you edit the styles, attributes etc.

The content editor now sizes to fit the text in it and has a button that lets you quickly copy the text to make it easier to get that data back into your CMS or HTML after you're done editing it.

Pseudo-elements and pseudo-classes

The biggest change is that the Polypane elements panel now supports pseudo-elements like ::before, and pseudo-classes like :hover with full editing capability.

This took a lot of work to get right, but having it makes it much easier to edit more complex layouts.

They are collapsed by default so they don't get in the way of editing the element itself, but toggle them open and you can edit the pseudo-elements and classes across all your panels.

The style panel will also show associated @font-face and @keyframe styles that you can edit too. Find them at the bottom of the style panel.

New Color chooser 🎨

With the release of our new color picker we decided to also revise the color picker in the Elements panel and give it a much needed upgrade.

The new color chooser is more performant, lets you pick colors from anywhere on the screen, makes it easier to switch between notations, shows tints and shades for your selected color so you can easily go darker or lighter, and also has handy access to the last picked colors from the color picker.

And it also comes in dark mode.

Web Vitals Field data and Visualizations 💓

The Web Vitals overlay now shows CrUX Field data when available, so you can compare your experience to real world usage and also see how well your pages do overall.

The overlay switches between the mobile CrUX data and desktop CrUX data depending on the size of a pane, matching the way CrUX field data make the distinction. This way you always compare to the right data.

Knowing how well your pages do in the wild and how your current experience compares to them is useful, but one thing we always try to do with Polypane is help with the next step: if you have a bad score, how do you fix it?

The new visualizations for the Cumulative Layout Shift and highlight of the Largest Contentful Paint element can be turned on from the Web Vitals tooltip and instantly tell you which elements you should improve.

Visualisation of the Cumulative Layout Shift on the Polypane getting started page.

Marker.io integration 🧩

We're pretty excited to now have integrated support for Marker.io! We worked together with the Marker.io team to make this a first-class integration.

With Marker.io you can screenshot and annotate parts of the page and send them to whatever project management you use, like Jira or Asana, to Slack or you can even have it emailed to you.

Marker.io is extremely helpful for anyone doing testing and QA, and we've had many requests for this integration specifically so we're very excited about it. Learn more over on the Marker.io integration page. The integrations we offer in Polypane are growing with every release, so we've made a dedicated integrations page where you can find an overview.

Discount for Marker.io

The folks at Marker.io have been kind enough to offer a 10% discount to Polypane users! Find your discount code by on the new deals page in the dashboard!

Horizontal overflow detection 🖱️

Polypane has had tools to help with horizontal overflow, but one thing that was missing was pro-active notification of overflow issues. In Polypane 7 we've added just that. When Polypane detects horizontal overflow issues in a pane it will show a new icon below it:

When you click on the icon layout debugging for that pane turns on, so you can quickly find the overflow-causing elements highlighted in red.

Not only that, it will also detect when you're using width: 100vw, a common cause of scroll bars on computers without overlay scrollbars (which is: computers without macOS).

Clicking the icon will open the elements panel with the width: 100vw element so you can test changing it there. Changing it to 100% will often yield the same design on Mac while fixing the horizontal overflow issue elsewhere.

Read more about overflow issues in our article dealing with horizontal overflows.

We recently introduced Polypane Links, an easy way to share links that open in Polypane directly along with a set of panes. Try them out in our article CSS breakpoints used by popular CSS frameworks!

Polypane Share makes it easy to create these links from inside Polypane, either as a QR code or copyable URL. This makes sharing URLs with your team using the right viewports to check really easy.

Polypane share is available when hovering over the address bar and clicking on the QR code icon on the right.

For situations where the polypane:// protocol is not accepted, we also introduce websafe links. These link to a page on polypane.app, and that page then opens Polypane with your URL and panes.

Regular QR codes

You can also switch to regular QRs so you can easily open URLs on your devices to test on them (because testing on real devices is still important, even with Polypane!)

Polypane will automatically detect when you're working on localhost and replace that with your IP address so devices on your network can open the URL.

New & updated debug tools and simulators 👁️‍🗨️

The list of built-in debug tools and simulators in Polypane is always growing. This release adds two new debug tools, two updated simulators and one new simulator. The total is now 37!

Interactive Glaucoma simulator

After implementing the Tunnel Vision simulator, an impairment often associated with Glaucoma (very severe glaucoma causes tunnel vision) we researched what a fully interactive glaucoma visualization should look like.

There are many different visualization available, as there is not one right answer to the question "what does someone with glaucoma see?", but we're very happy with what we think is the first fully interactive Glaucoma visualization for web content:

Glaucoma debug tool overlaid on the Polypane website

Macular degeneration simulator

Macular degeneration is kind of the opposite of tunnel vision: instead of losing your peripheral vision, you lose your central version.

Updated Cataracts simulator

During our research into Glaucoma we also took a critical look at our existing cataracts simulation and determined that it was not doing enough. Here too we looked at the available research into what cataracts is really like to bring the simulator closer to reality.

Detect small text 🔬

Use this to find instances where your text is so small that it causes issues. This debug tool will flag regular text that's smaller than 12px, and form elements that are smaller than 16px. The latter causes iOS to zoom in on your page when focusing a form element, which can look bad and can be confusing to your visitor.

Text Spacing (WCAG 1.4.12)

This debug tool applies the minimum text spacing requirements from the WCAG criterion 1.4.12. Use this to check if any content is lost with these extra settings. Head over to our debug tool docs for a list of specific text spacing changes.

As you see, we have some work to do for this 😉

Chromium 96

Polypane is now running the beta version of Chromium 96. That means you can now use the following features in Polypane:

prefers-contrast emulation, find it in the emulation popover.
Eyedropper API, which powers our color picker!
URLPattern
Container queries (was already available in Polypane 6.x)
Scrollbar gutter
accent-color (was already available in Polypane 6.x)
crypto.randomUUID()

Other new features 📜

The number of new features in Polypane 7 is pretty big, here are some smaller features. Be sure to scroll through the full changelog for everything new. The documentation for all features is fully up to date.

New and updated device presets 📱

With the release of iOS15 and the bottom-aligned address bar, the viewport sizes of iOS devices in portrait mode changed slightly. So all our iOS devices are updated to support the new sizes.

New Samsung mobile phones and tablets are also added to our list of device presets, with both the viewport sizes and device sizes for portrait and landscape. If you're missing a device or screen size, let us know!

Mute audio option 🔇

You can now mute audio for all panes, or for all but the first pane in the global settings. This should help when you're working on sites with audio! You can find this in the global settings menu

Between Polypane 6.3 and Polypane 7, LinkedIn, Telegram for Web and Google all introduced dark modes! So we've updated our designs with support as well. Now all social media previews that Polypane shows support both light and dark mode.

Improved accessibility testing and reporting

The landmark outline overview has new tests. The overview now warns about multiple navigation landmarks that don't have unique labels and about labels that includes the name of the landmark, causing screen readers to repeat themselves.

The Focus order overview now hightlights elements that don't follow the reading direction of the page, which can be confusing for people using the keyboard to navigate your page. These items will be highlighted both in the list and in the focus order overlay on your page.

The images outline is now more performant and does a better job of parsing the different image properties. It will also now warn you about the use of color words in your description, as this can be inaccessible to some visitors.

The Link outline now shows ARIA links as well, though that will also get you a warning to use a real link instead. Resolving relative links has also been improved, so link checking is now more reliable.

Reference image offsets

The reference image feature lets you overlay an image on top of your web page so you can check for visual regressions or design adherence.

You can now add a horizontal and vertical offset to the image to position it correctly.

Get Polypane 7

Polypane is available for Windows, Mac (universal dmg for Intel and M1) and Linux (.deb or AppImage).

Polypane automatically updates on Mac and Windows and on Linux when using the AppImage. Otherwise, head over to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available. Try it for free.

Polypane 7.0.1 Changelog

Improvements

Improved Marker.io flow now returns to button instead of capture flow
Improved Scrollbars are now easier to click
Improved Pane close buttons now appears on focus too
Improved Outline panel: links with the text "learn more" are now flagged
Improved Outline panel: images with the filename as alt text are now flagged
Improved Updated list of google fonts
Improved Updated version of Chromium 96
Improved Updated list of accessibility rulesets
Improved Faster initial pane load time
Improved Prevents false positive virus warnings for the installer on Windows (Thanks Dave!)
Improved Better error handling inside Polypane with options to reload or reset data

Fixes

Fix Crash related to long URLs
Fix Crash related to grid overlay (Thanks Sebastian!)
Fix Error message for Nextjs users (Thanks Alex!)
Fix On some Linux systems settings were saved in the wrong directory
Fix Updating on M1 sometimes updated to Intel version

Full 7.0.0 Changelog

New features

New Eye dropper color picker
New Support for pseudo-element, pseudo-classes, keyframe and font-face in Elements panel
New Web vitals pop-ups show CrUX field data
New Polypane Links integration
New Horizontal overflow detection
New CLS and LCP overlays
New Marker.io integration
New Update to Chromium 96
New Prefers-contrast emulation
New Samsung android phones and tablet device presets
New Mute options for panes
New Dark modes for Google Search, LinkedIn and Telegram previews
New Small font size checker debug tool
New Force text spacing debug tool
New Interactive glaucoma simulator
New Macular degeneration simulator

Improvements

Improved New Google fonts
Improved "Pane zoom" is now renamed to "Scale"
Improved Updated viewports for iOS15
Improved New Ultrawide device preset (Thanks Patrick!)
Improved HTML Validation rules
Improved Live Reload now shows optional notifications
Improved Live Reload supports reloading multiple CSS files with the same name (Thanks Alex!)
Improved Elements panel supports new individual transform options
Improved Elements panel navigator design is clearer
Improved Elements panel specificity notation now uses commas (Thanks Bramus!)
Improved Elements panel specificity links to explainer page for each selector
Improved Elements panel has new color picker with recently selected colors, tints and eye dropper
Improved Elements panel content editor now auto-sizes and has a copy button
Improved Outline panel now warns about similar landmarks without unique title
Improved Outline panel now warns if landmark label includes the role
Improved Outline panel now shows elements with role=link in link overview (and shows a warning)
Improved Outline panel Focus order now warns when focus order goes against reading direction.
Improved Outline panel update image overview design
Improved Outline panel images are now lazy loaded
Improved Outline panel images now warns about colors in alt text
Improved Meta panel list of icons shows dimensions and type of icon
Improved Reference image can now be offset from the site (Thanks Roni!)
Improved Live CSS variable font loading for complex multi-axis fonts improved
Improved Updated Cataracts simulator

Fixes

Fix Legacy mode is now deprecated, will be removed in Polypane 9
Fix Remove "new random pane size" menu item (Thanks Martin!)
Fix Dark mode is now correctly restored on Windows (Thanks Thomas!)
Fix Live Reload preserves all search params when injecting CSS and Images
Fix Scrolling in number inputs no longer scrolls the main workspace
Fix Menus that open dialogs now have ellipsis added to them
Fix Touch emulation now also sets the hover:none media query (Thanks Thomas!)
Fix Detached devtools no longer close and reopen when inspecting an element (Thanks Jason!)
Fix Double clicking to fill height now takes global zoom into account
Fix Polypane Peek tooltip now positioned correctly for elements left offscreen (Thanks Matthias!)
Fix Reset URL when it's invalid on launch (Thanks Markus!)
Fix Preserve search parameters when loading URLs from browser extensions
Fix Support backticks in Live CSS panel
Fix Prevent applying breakpoint panes when there are no breakpoints (Thanks Jens Olaf!)
Fix CSS Breakpoint detection no longer needs initial user input to work (Thanks Jens Olaf!)
Fix Alignment issues in select elements in Panel
Fix Position of quality bar in Full layout
Fix Outline panel Links checker now only matches the word "more" for check of unclear link text.
Fix Outline panel relative URLs are now resolved and checked correctly

How TeliportMe is moving to the web with Polypane

Mon, 11 Oct 2021 00:00:00 GMT

We interviewed Vineet Devaiah, the CEO of TeliportMe on their move to the web and how Polypane is helping them do this.

Hey Vineet, so good to talk to you! Can you introduce us to TeliportMe?

Yeah, Teliportme is the world's largest online virtual tour and 360 panorama sharing website. People can create virtual tours and see other virtual tours easily and intuitively using our interface.

We have six and a half million registered users, about fifteen million app downloads and millions of visits to our website each month. For the last four years we have been building the B2B side of our company, helping businesses create virtual tours and 360 panoramas of their locations. That's been scaling really well.

A live demo of Teliportme's software.

Very cool! How did TeliportMe get started?

Back in 2011 me and my cofounder Abhinav Asthana, now the cofounder of Postman, had this vision for building a crowdsourced street view. We had the idea that augmented reality is going to be the future and people are going to be wearing AR glasses. We were one of the first companies to develop an app for Google Glass back in the day, so we were very geeky in that sense. Still, that was the vision! We wanted to make sure everyone could own their own street view style virtual tours.

TeliportMe started as just an app right? What made you move to the web?

I've been a programmer for a while now and probably have built hundreds of websites in my time but TeliportMe was very much a mobile first app. We were very strict about not building out any features on the web.

We thought, if we start building features on the web then people will start asking for even more things on the web and then we're losing focus. So for the longest time we put a hundred percent of our focus on the mobile app. So for our app around 2014, we didn't even have a login on the web, just a landing page with a "download app" link. Then around 2016 we built the first basic version of our web site where you could log in and see some of your stuff. When we decided to do that, we needed to build a proper user interface, administration UI and all that jazz.

We're good at programming so we banged that out in two, three months, but the design was very functional. We used Tachyons so everything was fast and we had all the components, so we didn't have to worry about the design too much.

Then our customer base grew and changed to larger businesses and our vision of what we wanted started to change. And we needed to change the website

What did you want to change?

There were a few things. Firstly we built our initial site in React since that's what we knew and we didn't care about SEO. But that meant that the site was not properly indexable. That was fine when we didn't care about the site but now we wanted our site to be better indexable and more of a better looking marketing site too.

So this was really the first time we cared about the design, because it just hadn't been necessary even with millions of people visiting the website, since they were all going to the mobile app. But the website was becoming more important, so we started working on it properly

How did you end up using Polypane for this project?

I was in the middle of designing the new website and during the pandemic we had a dramatic change in our company structure where we went from mostly full time people to mostly contractors. Working with contractors is great but you also have to be more specific about what you want to do.

So I was using a browser to manually check sizes, make screenshots and then send those over to the contractors to show what should be changed and where. It was a very time intensive process.

Then I found Polypane and I was like "Oh, this is a cool idea" so I tried it and it really improved my workflow very fast. It obviously helped me look at different resolutions, but also with the fact that I wanted to be very specific about communicating issues I found and not wanting to waste too much time doing that.

What I really like is that Polypane is really smartly designed, the way you have figured out how to integrate it within a workflow and how easily you can use it. From a product perspective, it's really solidly designed.

What results did you see with Polypane?

I do a lot of things other than design so context switching and then checking the design, making screenshots, sending feedback et cetera cost me a lot of time. But with Polypane that was super easy, since you can just load the url, see the different sizes and everything you do is synced.

Because of that there's way less context switching. Polypane really helps there because it's so easy to get to the overview: open the link in Polypane and you can see what it looks like in like five different browsers, so that in itself is a huge time saver. I'd say Polypane saved me an hour for each feedback session we had.

What's next for TeliportMe?

Things are going well. We're a ten year old company and we've been through a lot of ups and downs, so we're cautious about being optimistic, but the product is progressing and the customers are coming in.

Before our move to the web, users were a lot more fleeting. They would download the app and then use it or not, you don't have a lot of control over that. But on the web the feedback cycles are a little bit longer, and people spend more time with your product and they can reach out if they have support questions. So we really see there's more momentum there. We've been doing this for ten years and now it's time for us to move to the web. We're definitely betting on the web now!

For the future we'll keep improving our value proposition, help people with repeated use and become more of a service provider and find partners and agencies that can use our software for their clients.

Thanks Vineet for this interview! I'd urge every web agency to have a look at TeliportMe since it can be a great addition to your service offering!

Polypane 6.3: Tunnel vision simulator, webmanifest support, updated UI

Thu, 05 Aug 2021 00:00:00 GMT

In Polypane 6.3 we added new debug tools and improved the meta panel and outline panel. And we moved the reload button.

What's Polypane? Polypane is a web browser for developers, designers and anyone that works on web projects. It shows sites in multiple fully synced panes and has tons of features that help with responsive design, accessibility and overall site quality.

Tunnel vision simulator

The new tunnel vision simulator will let you experience websites as if you had tunnel vision, with the mouse cursor position acting as your focus. Everything apart from a small area in the center of your vision will be obscured while the page itself remains fully interactive.

Tunnel vision debug tool overlaid on the Polypane website

Tunnel vision can be caused by various diseases like glaucoma or pituitary tumors but also as a result of temporary impairments like alcohol consumption, migraines drugs, panic attacks, altitude sickness or poisoning, or even situational impairments like wearing safety goggles or helmets.

With such a wide range of causes, your site will certainly be used by people with tunnel vision (though we haven't been able to finds specific numbers on how common it is), so it's important that information can be found even when you can't see the entire page, and that related information is close to each other.

Target size cursor debug tool

To make sure all the elements on your site are easily clickable or touchable, they should be at least 44 by 44 pixels and that area should not overlap with other clickable elements. The target size cursor debug tool replaces your cursor with a 44 by 44 pixel square so you can hover over elements and check if they have enough space around them.

Target size cursor hovering over a number of different links showing they are far enough apart.

Web manifest support

The Meta panel now shows the contents of a linked manifest file so you can easily verify its contents. Any theme color specified by it is added to the list of theme colors.

The reload button has been moved 😱

The reload button is now positioned to the left of the address bar, in the same location it's in Google Chrome. A lot of users have requested this change because the reload button inside the address bar messes with their muscle memory.

While we really liked the reload button in the address bar, it's more important to make the Polypane UI as easy to use as possible and sometimes that involves making sure it aligns with other browsers.

Outline panel improvements

We've continued to improve the Outline panel by surfacing more info that helps you build better structures.

Links now show a warning for non-descriptive text like "click here" or "more".
Images show warnings for more variations of redundant text (like "a photo of").
Focus order now also shows which element(s) have an autofocus attribute.

The Outline panel already warns you about many other issues as well, like missing alt attributes, links that don't use https, broken links, skipped heading levels and more. If you haven't opened it yet to inspect your pages, have a look!

Other changes

We've updated the Discord and Slack previews to be in line with recent updates on those platforms (You need a keen eye to spot the differences, but they're there!), and have improved the resolution of relative opengraph image urls for all previews using them.

Performance

We've improved performance in a number of different areas of the application, most notably in opening and interacting with the panel and the elements panel in particular.

Better scroll syncing

Starting in 6.3 Polypane detects when the body and not the html is the scroll container and uses that to sync the scroll position instead. This also works for the full height screenshots.

We recommend avoiding giving the body element a fixed height so the browser can use the viewport as a scroll area for slightly better performance. If your site uses the body element as a scroll container however, Polypane should now work better for you.

Get Polypane 6.3

Polypane is available for Windows, Mac (with versions for Intel and M1) and Linux (.deb or AppImage).

Polypane automatically updates on Mac and Windows. Linux users need to download the new version from the download page. You can find the Mac and Windows versions on that page too.

Don't have Polypane yet? There is a 14 day trial available. Try it for free.

Full Changelog

New Features

New Tunnel vision simulator
New Target size cursor debug tool
New Reload button moved out of address bar
New Webmanifest info in Meta panel
New Support setting Polypane as default browser (Thanks Jared!)

Improvements

Improved Outline panel adds warning for non-descriptive links (Thanks Roel!)
Improved Outline panel adds warning for more redundant alt texts
Improved More complex object rendering supported in Console
Improved Console log message rendering
Improved More accurate Opengraph image link resolution
Improved Discord preview rendering (Thanks Charlie!)
Improved Slack preview rendering
Improved Support scroll sync on the body element as well (Thanks Galen!)
Improved Meta panel: prevent warning for multiple theme colors
Improved Meta panel: explain warning for theme colors in non-hex format
Improved Updated list of Google Fonts
Improved Updates list of accessibility rules
Improved Outline panel focus order now shows elements with autofocus
Improved Elements panel performance
Improved Support SVG favicons in tabs
Improved Improve application of Glaucoma simulator
Improved Website notifications are now being shown

Fixes

Fix Issue where workspaces were not applied correctly (Thanks Galen!)
Fix Prevent incorrect ruler grid sizes (Thanks Nick!)
Fix Highlighting not working on page load
Fix Twitter preview title cutoff
Fix Opengraph warning not detecting the og:image:alt attribute (Thank Charlie!)
Fix Mailto permission requests no longer block and open new tabs
Fix Prevent redirection after accepting web notifications
Fix Peek stopped working in Legacy mode after first click
Fix Element panel shows text content for elements with single text node

Polypane 6.3.1

6.3.1 adds the ability to set custom ignore patterns for live reload, a custom font size for live CSS, updates the Twitter and Google previews and fixes a number of bugs.

New Features

New Set custom ignore patterns for live reloading (Thanks Patrick!)
New Ability to set a custom font size in the Live CSS panel (Thanks Kevin!)
New Open polypane:// links from inside Polypane

Improvements

Improved Google preview rendering is now more accurate
Improved Twitter preview has been updated to the new Twitter design

Fixes

Fix Issue where Elements panel didn't display the correct specificity
Fix Inspector tooltip on mobile devices no longer causes the page to zoom out
Fix Hide 'redundant' warnings when show warnings is unchecked.
Fix Restore 'redundant' image warning style
Fix Issue where the panel menu would pop open without the rest of the panel
Fix Issue where scrolling caused console errors to appear (Thanks Alex!)
Fix Issue where vmin got replaces by in in Element style panel
Fix Issue where the best practices checkbox got reset on new accessibility tests

Polypane 6.3.2

6.3.2 is a bugfix release with some dependency upgrades.

Improvements

Improved Show warning if Polypane is running under Rosetta on Mac
Improved Add new Google Fonts
Improved Update accessibility ruleset

Fixes

Fix Live reload ignorepatterns expecting unix line endings (Thanks Patrick!)
Fix Toybox API key input was broken (Thanks Kave!)
Fix Situation where inlined background images were rewritten incorrectly (Thanks Todd!)

Detecting media query support in CSS and JavaScript

Mon, 19 Jul 2021 00:00:00 GMT

Recently I needed a way to detect support for a media query in CSS and JavaScript. To detect if a browser supports a certain CSS feature, you can use @supports () { ... }, but that doesn't work for media queries. In this article I'll show you how you can.

Why I needed this

For a presentation I did on prefers-reduced-data I wanted to apply something in one of two situations:

There was no support for prefers-reduced-data at all
There was support for prefers-reduced-data and the value was "no-preference".

For this, I couldn't use just @media (prefers-reduced-data: no-preference) because that would be false if either there was no support (since the browser wouldn't understand the media query) or if it was supported but the user wanted to preserve data.

What I needed was a test for the media feature regardless of it's value. To do that, we can use the or notation.

Detecting media query support in CSS

To detect if a media query is supported in CSS at all, you can use the following CSS:

@media not all and (prefers-reduced-data), (prefers-reduced-data) {
  ...;
}

That looks like a bit of weird, so lets dissect what it actually says. Firstly, let's split the two media features:

`(prefers-reduced-data)`

This one looks straightforward but there's something weird: the media feature is missing a value! Usually, media features come with a value like "min-width: 400px", but this one doesn't.

That's because media features have a "shorthand" when they only have two options and prefers-reduced-data does, it only has "no-preference" (off) and "reduce" (on). When you omit the value, it tests for it being on.

So here's how this will resolve:

No preference: false
Reduce: true

But if the browser doesn't support a media feature, it will automatically interpret the media query as "not all", which is always false, so we end with this:

No support: false
No preference: false
Reduce: true

`not all and (prefers-reduced-data)`

The notable thing here is not all and. "all" is the default media type, and it applies to both screen and print. You can omit it but if you add it you need to add "and" in between it and the media feature (which is the part between parentheses).

not is how you can negate a media query. For example, @media not print {...} would apply everywhere except print.

It's worth noting that not applies to the entire media query, so we're really testing for `not (all and (prefers-reduced-data: reduce)).

With all being the default, what we're really checking here for is "not (prefers-reduced-data)" but that's invalid notation until supports for Media Queries level 4 lands. If you use not, for now you always need to add the media type as well.

Here's how this resolves:

no support: still false, since the browser doesn't understand it
support but off: true (its the negation of it being on)
support but on: false

Combined

When a browser interprets the entire media query only one of them has to be true for the entire media query to apply. So lets see the results for these in all three situations: no support, support but off and support and on.

	No support	Support & off	Support & on
`not all and (prefers-reduced-data)`	false	true	false
`(prefers-reduced-data)`	false	false	true
Result	false	true	true

For "No support", the browser does not understand either media query so it converts both to not all and you end up with "false" for both. For the other two situations it's either going to be turned on or off but in both situations one of them is going to resolve to true. In that case, CSS in that media query block will now be applied if the feature is supported, regardless of what its value is.

Detecting media query support in JavaScript

We can use the same media query in JavaScript using the window.matchMedia API:

const isSupported = window.matchMedia(`not all and (prefers-reduced-data), (prefers-reduced-data)`).matches;

window.matchMedia returns an object with a "matches" boolean property that is either true or false. For more on the API, check out the using media queries in JavaScript section of my guide on media queries.

After I shared the above out on Twitter, Mathias pointed out a different method.

const query = '(prefers-reduced-data)';
const resolvedMediaQuery = window.matchMedia(query).media;

const isSupported = query === resolvedMediaQuery;

The window.matchMedia API also returns a "media" property, which is the normalized and resolved string representation of the query you tested. If matchMedia encounters something it doesn't understand, that changed to "not all", and if it does support the query it will return that, regardless of if it matches (you can use the matches property for that).

So by comparing your input to the media, you either get:

No support: '(prefers-reduced-data)' === 'not all' which is false.

Support: '(prefers-reduced-data)' === '(prefers-reduced-data)' which is true.

Which one to use?

What I like about the first option, with the complex media query, is that all the logic happens inside CSS. I also like how you get a boolean, and don't have to do string comparison.

The second can be a little bit easier to understand at a glance, but you need to make sure that your query input is the same as the browser normalizes it.

For example, if you test (prefers-reduced-data ) (notice the space), that would resolve "matches" to true in supported browsers because the white space is not important, but comparing the normalized media query would return false, since that normalization has removed that extra space. So string comparison can be tricky depending on your input.

Edit: Thomas Steiner pointed out you can check for 'resolvedMediaQuery' !== 'not all' instead to avoid the issue of normalization. Clever!

When to use this?

We're set to get a whole lot of new media features in the coming years, like prefers-reduced-data, prefers-contrast, screen-spanning and more.

While transitioning to all browsers supporting this, you'll often want to turn on extra features for browsers that support it without causing issues in older browsers since the new default might not always be the best experience in older browsers. With this media feature you can split the behavior in older browsers without support for newer browsers with support.

Originally posted on Kilian's personal blog.

Polypane 6.2: HTML validation, robots.txt support, RTL emulation and more

Wed, 14 Jul 2021 00:00:00 GMT

In Polypane 6.2 we focused on improving the app performance and consistency, particularly around updating, pane resizing, tab handling and dark mode.

What's Polypane? Polypane is a web browser for developers, designers and anyone that works on web projects. It shows sites in multiple fully synced panes and has tons of features that help with responsive design, accessibility and overall site quality.

We still added a fair few new features, including some that many of you have been requesting. Here's everything new in Polypane 6.2:

HTML validation

The source panel in Polypane now automatically validates your HTML for you. A lot of you have been asking for this, and now it's here!

The HTML validation in Polypane is 100% local so you're not uploading your HTML source (potentially with user data!) to an online validator, and we check the generated source (which the source panel also displays) so you can check the HTML generated by frameworks as well.

For any of the issues you can hover over the element to highlight the elements in all panes. The source panel itself will also scroll to the issue in the HTML and highlight it. Clicking the element takes you to the Elements panel so you can fix the issue.

Toybox systems integration

We've been in contact with the folks that built Toybox systems for a while now and a few months ago we set out to create an integration between Toybox Systems and Polypane. Today, we release it!

Toybox System is a bug reporting tool that makes it really easy to take a screenshot of a part of the page and then share a message with your team. The integration in Polypane lets you create screenshots, drop pins and leave comments and inspect everyone else's comments right inside a pane.

We're very excited about this integration! It makes Polypane an even better tool for QA, since you find issues much faster with Polypane, and now report them super fast using Toybox Systems.

This is the first of a few integrations we plan on releasing. If there are other tools you'd like to see integrated into Polypane, let us know!

Robots.txt support

The Meta panel now shows your site's robots.txt file, ordered by user agent. If you have a robots meta tag, we also show that here so you get the full overview.

Polypane automatically checks if the current page is blocked for each user agent and if you have settings that aren't supported by that user-agent.

As with all other entries in the Meta panel, you can copy each Robots.txt declaration and we'll automatically format it correctly for you.

Other meta panel improvements

The social media previews in the Meta panel have always had support for the light and dark themes of different social media (provided they had one, looking at you LinkedIn) but you had to switch the theme of the entire browser to see them. We've now added a toggle to the previews so you don't have to do that anymore.

We've also improved the accuracy of the Twitter, Facebook and Google previews.

Now that Safari 15 is going to support multiple theme colors, Polypane has been updated to show these in a list together with their media value. Clicking the color preview now copies the color.

Lastly, we've improved many of the checks and warnings in the Meta panel. We now warn about canonical urls that dont have the right format, viewports that limit the user, missing alt attributes and incorrect formatting for image URLs.

RTL emulation

Most of the web is in English, a language that reads from left-to-right. But there are many languages that you read from right-to-left, like Arabic, Hebrew, Farsi and Urdu. Websites in these languages can be given an RTL (right-to-left) direction that tells the browser to render everything in that reading mode. It flips the text-alignment as well as moves the position of markers and other browser-native things.

For people developing bidirectional websites, switching between LTR and RTL often involved editing the source in devtools, updating a cookie or updating the code elsewhere. With the new RTL emulation in Polypane, doing this takes a single click.

Even if you don't create bidirectional websites, you can also use this to check if your logical properties are configured correctly. Properties like margin-inline-end will automatically flip from the right-side to the left-side when switching from LTR to RTL rendering.

Message bus

As a result of our work on supporting Web Components we've been working with a few beta testers to built a new system for developers to communicate between panes, the Polypane Message Bus.

With this message bus you can send and handle messages between panes, letting you implement your own syncing logic where Polypane can't, like for canvas-based websites (like games) or web components with a closed root.

The message bus is very lightweight while unlocking a whole new way for developers and QA to test their sites across viewports and emulated devices. We can't wait to see what you'll do with it!

Check out the documentation on the Message Bus for the API specification.

Other features

Rewritten update logic

The updating logic in Polypane hasn't been touched in a fair few releases and had bugs that prevented some users from automatically updating. For 6.2 we completely rewrote our updating logic. If you experienced issues updating those should be gone from 6.2 onwards.

Disable CSP (Content-security-policy) headers

Polypane does not touch CSP headers in default mode. Unfortunately that means that with very strict CSP settings, certain Polypane functionality is also blocked from running. If this happens on one of your sites, you can now disable CSP in the Edit menu.

New devices

We added new Android devices (based on popularity) and a new UHD (4K) preset. If you're missing a device you want Polypane to emulate, please let us know!

Live reload improvements

Live reload now automatically ignores dotfolders (it already ignored dotfiles) and will ignore any custom query parameters when hot reloading CSS files. This will cause updates to be more performant and CSS updates in particular to happen faster.

Outline panel warnings

We've greatly expanded the number and type of warnings we give in the outline panel, as well as add more support for outlines created with aria attributes.

For the Landmarks overview, we'll now warn about missing-but-expected element, elements of which we expect just one but see multiple, and when landmarks are nested in other landmarks in an unexpected way.

The Links overview now warns you about empty content or href attributes that point to using links for JS logic.

The Focus order overview incorrectly ignored summary elements, but now reports them in the overview.

For the Image overview we made the first step towards helping you create better alt text. Polypane will now warn you when you use redundant language in your alt text, like "image of...".

Of course after implementing that last feature, we promptly found (and fixed) an image on our own site with exactly that alt text!

Color contrast checker

We've improved the color contrast checker under the hood, making it more accurate and implementing an updated design that makes it easier to see which element is checked. We also fixed an issue where some sites didn't allow you to copy the suggestion on click.

Quality-of-life improvements

There's many other Quality-of-life improvements in this release. Interacting with tabs is now more similar to other browsers, the performance of pane resizing has drastically improved, you can right-click a single pane to reload just that pane, we improved the performance of animations across the application and much more.

Check the changelog below for the full list of updates, and of course every new and improved feature has been added to the documentation.

Get Polypane 6.2

Polypane is available for Windows, Mac (with versions for Intel and M1) and Linux (.deb or AppImage).

Polypane automatically updates on Mac and Windows. Linux users need to download the new version from the download page. You can find the Mac and Windows versions on that page too.

Don't have Polypane yet? There is a 14 day trial available. Try it for free.

Full Changelog

New Features

New HTML validation in the Source panel
New Toybox Systems integration
New Robots.txt support in Meta panel
New RTL emulation
New Disable CSP option
New New Samsung and Redmi devices and UHD presets
New Polypane Message Bus

Improvements

Improved Rewritten update logic
Improved Significant improvement to pane resize performance
Improved Meta Panel previews can now be toggled between light and dark mode
Improved Meta panel warns about incorrectly formatted canonical urls
Improved Meta panel warns about viewports that limit scaling
Improved Meta panel supports multiple theme colors and displays their media attribute
Improved Meta panel click a theme color to copy it
Improved Meta panel checks for missing image alt text
Improved Meta panel checks image url formatting
Improved Meta panel rendering of Twitter preview
Improved Meta panel rendering of Facebook preview
Improved Updated Electron
Improved Updated accessibility rules
Improved Updated Google Fonts list
Improved Live reload now ignored all dotfolders
Improved Live reload ignores query params when injecting CSS (Thanks Winston!)
Improved Color contrast labels have updated design
Improved Color contrast checking can now detect contrast issues for floated elements
Improved Color contrast can now copy colors regardless of site settings
Improved Source panel now includes doctype
Improved Outline panel Headings now includes aria-role headings
Improved Outline panel Landmarks now warn about missing elements
Improved Outline panel Landmarks now warn about duplicate elements
Improved Outline panel Landmarks now warn about illegal nesting
Improved Outline panel Links now warn about href or content being empty
Improved Outline panel Focus order now supports summary elements
Improved Outline panel Images warns about redundant text in the alt attribute
Improved Outline panel shows messages when no elements can be found
Improved DOM Treemap devtools extension added (Thanks Christian!)
Improved Support for web component syncing
Improved Clearer active state for inspect button in dark mode (Thanks John!)
Improved Add 'reload and 'reload this pane' options to context menu
Improved Elements panel now supports complex specificity calculations
Improved Improve consistency of colors in dark mode UI
Improved Pane load performance improvements
Improved Improve help text for undocked devtools in Devtools panel
Improved Animation performance across the app
Improved Double click or middle mouse click the tab bar to open a new tab
Improved Click sync for inputs in labels now syncs correct state
Improved Webvitals logic updated, CLS now live-updates
Improved Hover tooltip now shows font weight (Thanks Stephan!)
Improved Clarify wording in a11y panel (Thanks Roel!)

Fixes

Fix Middle mouse clicking a tab now closes it without first focusing it
Fix Element normalization causing issues with Svelte updating (Thanks Richard!)
Fix Overview screenshot on Windows had incorrect dimensions
Fix 'open with Polypane' for HTML files
Fix Touch emulation toggling applies immediately
Fix Outline Panel Focus elements now match other outlines.
Fix Design issue with viewport/device size toggle
Fix CSS button in address bar opened the wrong panel
Fix Aspect ratios no longer sort largest first
Fix Resolve syntax error when emulating a user agent
Fix Reset Window dimensions on launch if launching on different screen configuration (Thanks Claudia!)
Fix Resolve issue in Outline panel when sites have images without SRC attribute
Fix Elements panel color editor can now set opacity again
Fix Elements panel height of add attribute form now correct
Fix 'nodeName of undefined' error message
Fix Meta panel now supports objects in oEmbed
Fix opening URLs from browser extension on Linux
Fix Release notes overlay displays release notes again
Fix overflow issue in a11y panel with large text size (Thanks Hidde!)
Fix Ctrl + needed shift to zoom in (Thanks Alex!)

Fixing contrast issues, on your own site and elsewhere

Tue, 08 Jun 2021 00:00:00 GMT

Insufficient text contrast is the most common accessibility issue on websites today. According to the WebAIM Million report for 2021, 86.4% of home pages world wide have low contrast text. What's worse, this number has been increasing the past three years.

Polypane makes it really easy to fix these color contrast issues, with our algorithm that finds contrast issues and automatically suggests the nearest color with enough contrast. That's really helpful for all the (awesome, amazing and good looking) people building sites with Polypane, but we realized we could use the same code that powers our algorithm and just, well, fix all the contrast issues on any site you visit.

We built a browser extension

It's called "fix contrast" and it's available, for free, for Chrome, Firefox, Edge, Brave, Vivalvi and hopefully soon for Opera and Safari as well.

It does exactly what you expect it to do: it fixes contrast issues on sites you visit, automatically. The same way the suggested colors work in Polypane, except now we also apply them.

It does this while preserving the design of the website. All it does it bump the contrast for the elements that need it, leaving the rest alone.

Here's what the plugin looks like:

You can pick between "Medium" (corresponds to WCAG AA) and "High" (WCAG AAA) settings, or even pick your own preferences if those aren't enough.

The extension will do the rest: calculate color contrast depending on color, opacity, background color and font size, and updates the colors of any elements that need it.

Lastly, it can also change the background color if you want it to, for example when we can't increast or decrease the text color any further (it's already fully white or fully black), but that's optional.

Download for your browser

You can find download links and more information on FixA11y.com.

With 9 our of 10 websites having color contrast issues, this will make the web a more accessible place by fixing an issue for users directly, without having to wait on site authors to resolve their issues. We hope you'll want to use it, and share it with other people for which it would be useful.

As it stands, the extension is available in English and Dutch, and we would love help getting it translated into other languages. If that's something you want to help it, please let us know!

We also announced the Fix Contrast extension over at The A11y Project.

Try out Polypane

At Polypane, we want to make the web a more accessible place. We believe we can make that happen with tooling that doesn't just tell people what's wrong, but also tells them how to fix it.

If you want to read about our accessibility tooling, read our evergreen article Find and fix accessibility issues with Polypane.

This philosophy influences all the choices we make in the application, and the result is that people are coached to making better websites at the point where they're at, without needing to stop working to learn elsewhere.

If you want to make better websites with a tool that helps you improve your web development workflow and the quality of your websites, start a Polypane trial!

A11y tooling in Polypane (video)

Mon, 07 Jun 2021 00:00:00 GMT

On May 25th Kilian Valkhof (the creator of Polypane) joined the Twitch channel of Stephanie Eckles to walk through most of the accessibility options in Polypane. Check out the recording below:

If you prefer reading, check out our evergreen article on finding and fixing accessibility issues in Polypane.

Polypane 6.1: Readability, Content Chaos and rewritten event sync engine

Tue, 01 Jun 2021 00:00:00 GMT

Polypane 6.1 adds two new debug tools and a much more performant, completely rewritten interaction syncing engine along with numerous smaller improvements and bug fixes.

What's Polypane? Polypane is a web browser for developers, designers and anyone that works on web projects. It shows sites in multiple fully synced panes and has tons of features that help with responsive design, accessibility and overall site quality.

Readability debug tool

The readability debug tool will calculate how difficult each sentence on your page is. Darker, redder sentences are harder to understand while lighter, greener sentences are easier to read.

We calculate this using the Automated Readability Index (ARI), which works well for most western, European languages. For pages in Arabic it uses the Automatic Arabic Readability Index (AARI). If you know of other languages that have a Readability Index algorithm, please let us know!

This is a really neat way to check which of your sentences might be a little on the complex sites and should be rewritten.

Content chaos debug tool

The Content chaos debug tool will randomly halve, double or triple the content of each text node on your page. This is a perfect way to test if your layout wont break when there is unexpected text content (such as much longer titles for things than were used in the design, or languages that take significant more or less space).

Rewritten interaction event sync engine

Polypane is the only browser that syncs all your user interactions out of the box: scrolling, clicking, keyboard input, form events, typing and hovers. Making this feature performant is a difficult problem, since you need the same thing to happen at the same time across all panes.

In 6.1 we have completely rewritten our syncing engine (bringing it up to the third engine we've built for this). We were able to take out an intermediate component that improves performance a lot and at the same time is able to more accurately sync interaction events across panes.

In particular, you'll notice a higher frame rate for scrolling and animations on hover are much smoother across panes.

About Browsersync

Starting in Polypane 6.1, we will automatically disable the built-in syncing when we detect Browsersync with ghostMode turned on.

Browsersync has always been slightly slower than Polypane's internal syncing, and what was essentially happening was that Browsersync was continuously resetting the scroll position after Polypane had updated it, leading to a very janky experience.

Polypane has been showing a warning but unfortunately not many people are aware of the option to turn off ghostMode, or even realise they have Browsersync running in their project in the first place. That's why we decided it was better to instead disable the scroll syncing in Polypane, even though it is more performant.

Images overview in outline panel

The online panel now gives you a list of all the images on a page along with their current source, alt text, title, shown dimensions, aspect ratio and actual dimensions when they differ from the shown dimensions.

When the alt text is missing we'll show a warning, and you can right-click any image to save it to disk.

Like the node tooltip, we'll only show the actual size when it differs from the shown dimensions, and we only show the aspect ratio if it's not the same as the pixel value.

Smaller improvements

Polypane inlines stylesheets to enable access to them from the elements panel. We've made this optional which can be slightly faster, at the expense of not showing all the styles in the elements panel. Starting in 6.1 we also rewrite inlined stylesheet so that linked resources (like background images) work correctly.

Polypane now includes the Angular DevTools in the selection of devtools extensions.

We updated our color handling throughout the application making it much more performant. This is most noticable when editing a color in the Elements panel.

It's now no longer possible to navigate to a Facebook, Twitter or Instagram URL in Polypane. We did this ~~as a productivity measure~~ because these sites have server security settings that make Electron applications (of which Polypane is one) crash. We could disable the security settings for these sites but we would rather wait for Electron to be fixed, so we're keeping a close eye on that.

Logging in with Google was broken in Polypane 6 but it now works again.

Read through the full changelog to see the other improvements made.

Get Polypane 6.1

Polypane will automatically update on Mac and Windows. Linux users need to download the new version from the download page and if you're on Mac and Windows but don't want to wait on the update popup, find your download there as well.

Don't have Polypane yet? There is a free 14 day trial available. Get it here.

Full Changelog

New features

New Readability debug tool
New Content chaos testing debug tool (Thanks Rik!)
New Interaction syncing engine rewritten to v3
New Images overview in outline panel
New Option to disable inlining stylesheets
New Angular DevTools now available in the devtools extensions installer

Improvements

Improved Pane load performance improvements
Improved Remove jank when animating hover styles
Improved Clicks are not synced when they create a new tab (when cmd or ctrl is pressed)
Improved Support shorthand notation in combination with custom properties for hover syncing
Improved Prevent Polypane from opening urls that are known to cause crashes
Improved Inlined stylesheets no longer overwrite background images
Improved Increase opacity for unfocused scrollbar (Thanks Sam!)
Improved Form elements now use the Polypane accent color
Improved Improve performance of color picker in elements panel
Improved Upgrade Chromium version
Improved Better color consistency for dark mode
Improved Outline Link checking now ignores javascript, blob and data links
Improved Polypane shows a warning when a site wants Location API access but there is no Google API key (Thanks Eric!)
Improved Mode switcher shortcut is changed so cmd + m for minimize works (Thanks Charlie!)
Improved Scroll syncing is now disabled when Browsersync with ghostMode is detected

Fixes

Fix Log in with Google works again
Fix Fix auto reloading not starting immediately
Fix CSS injection in Live reload for Default mode (Thanks Winston!)
Fix Disabling hover sync also blocked showing the target url on hover
Fix Copy button for empty description was missing (Thanks Charlie!)
Fix Alignment issues in the Outline panel on Mac
Fix Editing text nodes in elements panel sometimes didn't work
Fix Prevent tooltip overlay misalignment on some sites
Fix Prevent duplicate inlining of stylesheets
Fix Polypane console can now print 'null' messages
Fix Escape HTML in attributes in overlay tooltip
Fix Missing rel="noopener" warning was sometimes shown incorrectly
Fix Replace panes button for custom workspaces now replaces panes again (Thanks Sam!)
Fix Elements panel not always showing background image declarations
Fix Show correct version number in getting started page

Device testing is not enough

Thu, 27 May 2021 00:00:00 GMT

When you get started with responsive design, you wouldn't be wrong to think it's all about devices. Questions like "which size to use for mobile" quickly come up, and most testing is done on developers' own devices. "Does it look good on my iPhone? Does it look good on my Samsung Galaxy Tab?"

But reality is different.

Device sizes are not browser sizes

In the last 30 days, this website was shown on 485 unique devices, but well over 3000 unique browser sizes.

The browser size is not the same as device size, even on mobile and tablets. But browser size is what your site is actually shown at.

If you only test device sizes you miss the in-between sizes your real visitors use. On mobile, different browsers have different viewport heights. On tablet a browser might be shown at any size in split view. And on desktop, many people simply don't run their browser full screen all the time.

You need a browser size wall

Good responsive design doesn't care about devices, and neither do your website visitors. So whatever tool you use to test responsive designs should not force you to only use device sizes. Unfortunately, most only support devices.

Device sizes are not browser sizes. Testing only devices makes no sense.

To prove this to you, we built a tool that gives you an overview of all the browser sizes your real visitors use:

Connect with it to your Google Analytics and we'll show you an overview of the actual browser sizes used by your visitors in the last 30 days. You'll quickly see how many different sizes your site is being shown at, and how much variance there is even on mobile sizes.

We're only showing you the top 100 most used browser sizes, since scrolling through hundreds, let alone thousands of them is is not great (believe us, we tried).

Optimizing your site for just a few devices is a losing strategy, and doesn't fit how real people experience your website.

Check out your browser size wall

Match reality by using Polypane

Checking just devices will have you missing all the in-between sizes that your real users use. You need a different model if you want to build sites that work for all your users. You don't need devices, but panes.

Panes in Polypane are freeform, and you can add however many you want. You can size them in many different ways:

1. Yes, you can select from any of our 25+ devices (with full emulation)

Our devices are divided into separate categories and are always up to date with full emulation and the ability to switch between device size and viewport size.

2. Base them on on your @media query breakpoints

Polypane parses your CSS as the page loads and extracts all the breakpoints from your CSS media queries. With a single click you can get an overview of all the sizes the site has been styled for, or you can add them one by one.

3. Built-in and downloadable pane workspaces based on CSS framework sizes

CSS frameworks like Bootstrap and Tailwind come with a set of built-in media queries. We have ready-made overviews for the 11 most used CSS frameworks.

4. Drag to resize any pane on screen!

Panes in Polypane are freeform. If you need one to be a little big, grab the edge and resize it.

But we have one more way: take the browser size wall one step further and create your own Polypane workspace from the sizes your actual visitors use the most.

Create your own browser size workspace

After you checked your browser size wall, you'll want to get that info into Polypane. Use our create workspace tool to create a workspace based on the browser sizes used by your visitors.

Create your own browser size workspace

The best sizes to use are the sizes your own visitors use

Add a little random to your panes

Even when you've done all of that, you still won't get to the hundreds or even thousands of unique sizes and of course, you don't have to check them all. But we have one last neat trick up our sleeve.

With Shift ctrl n you can slightly tweak the size of all the panes on your screen. Do this a couple of times and you've checked effectively all variations.

What's next? Try Polypane.

Device sizes are not enough, and you want a responsive design tool that doesn't force you to use only devices.

With panes in Polypane, you can use your own CSS breakpoints, your visitors sizes, freeform sizes and yes, even devices. Test your site in all the hundreds or thousands of ways real people experience your site.

Start a free trial today

Polypane 6: Peek, Webvitals, new simulators & Chromium 91

Wed, 12 May 2021 00:00:00 GMT

Polypane 6 is now available! It's another packed release with new features, simulators, performance improvements and a new version of Chromium powering it all. Read on to learn about all the cool new things we have for you.

What's Polypane? Polypane is a web browser for developers, designers and anyone that works on web projects. It shows sites in multiple fully synced panes and has tons of features that help with responsive design, accessibility and overal site quality.

Polypane is two years old 🥳

Polypane launched two years ago on May 14th. 32 releases, 18 Chromium versions and 5 major Polypane versions further we're now at Polypane 6.

It's insane to look back at the now 32 releases we made. Polypane has truly become something I couldn't have imagined back then and it's all thanks to your support and suggestions. So thank you, and on to the next 2, 5, 10 years of Polypane!

Polypane peek: the fastest way to inspect elements ever

Polypane peek is a deceptively simple feature, but one that will transform how you use the browser.

Whenever you press alt (or option), Polypane will highlight the element under your cursor and show an tooltip with a bunch of info.

Find out font details, margin sizes and other element info with a single button press. Once you get used to it there's no going back.

And if you do want to dig in, click the element and you're inspecting it in the Polypane element inspector, same as ever.

Web vitals overview

Web vitals are becoming an important part of website performance, so we've implemented web vitals monitoring for all panes. Turn the web vitals overview on by going to the application menu in the top right and checking "Show Webvitals Status".

A green dot means every Web Vital scores "Good", an orange rectangle means that a web vital needs improvement (and we'll show which) and lastly a red triangle means that this page in this pane scores "Poor" for a specific web vital.

Hover over the button to get an overview of the web vitals and your score. This is Polypane's first foray into performance tooling and notifications, and we're eager to hear what you think and what you want to see next!

Astigmatism simulators

Astigmatism is most easily explained as a blurring and ghosting of the vision, but only in a single direction. According to Wikipedia, between 30% and 60% of adults in Europe and Asia have some form of astigmatism, from mild to severe.

When we learned about it we thought it would be a good addition to our growing list of simulators, so we researched how astigmatism works and created simulators that map as close as we could to how people experience astigmatism.

We've added two Astigmatism simulators to our Debug tools: horizontal and vertical astigmatism, which emulate the blurring in a horizontal and vertical direction respectively.

Meta panel improvements

All meta values in the Meta panel now come with a copy button that copies the fully formed HTML string for you. For missing values it copies a template for you to fill in, or will fill it in for you with the right content value.

This follows our philosophy of not just pointing out what's wrong, but also how to improve it. It might be a small feature, but we spend quite some time thinking about the right defaults.

Chromium 91

Polypane now runs Chromium 91, with support for color-gamut emulation, a huge performance increase for devtools and support for container queries.

Polypane has experimental support turned on for a number of new features like @scroll-timeline, container queries and prefers-reduced-data. This way you get to try out and experiment with these features before they become generally available in browsers. For example, here's a demo using @scroll-timeline to change the background color as you scroll, using only CSS:

Bug fixes

Unfortunately, bugs happen. In Polypane 6 we've solved a few big ones. We're really grateful to everyone that helped find and debug these issues with us.

If any of these held you back from trying Polypane and you want to give it another go, please reach out and we'll restart your trial.

Unfocusable devtools on Mac

Refocusing docked devtools on Mac didn't always work or if it did, keyboard input wouldn't be accepted. The underlying bug is now fixed across all Electron apps after we coordinated with the Electron team.

Browser extension on Windows

The browser extension (that lets you open links from your browser straight into Polypane) did not work with Polypane 5.1 on Windows. This happened due to a change in the way we handle command line flags that didn't account for the fact that Windows treats them the same as "open requests" from other applications.

Both the CLI options and the browser extension now work again.

POST calls being overwritten by GETs

The navigation sync feature in Polypane gave panes a timeout before forcing a new URL, and this didn't account for POST requests that took longer than a few seconds.

Polypane now keeps track of POST requests and will wait until they are done before checking if navigation sync is required.

Style caching in the Elements Panel

For performance reasons we only parsed the styles for a pane during load, so if you resized a pane afterwards and new styling would be applied due to media queries, those wouldn't be shown until you reloaded.

Thanks to the performance improvements in Chromium 91 and rewritten logic for style parsing this is now fast enough to get updated styles on-demand, even for sites with significant amounts of CSS.

Other updates

Each Polypane release comes with large updates but also with smaller features. Here's some of the smaller features, but be sure to scroll through the full changelog to find all updates.

Now that the tooltip and element highlighter is so easy to activate, we've also improved the tooltip. For one, it will now stay in view much better than previous versions, taking into account all sides of the pane.

As space allows, we show the dimensions right inside the highlighted content, padding and margin areas. Inside the tooltip, we've added the intrinsic size for images and videos, so you can quickly check if the right version is being used, and we streamlined the tooltip when the alt attribute and accessible name are the same.

Class suggestions in the Elements panel

When you edit classes in the Elements panel, Polypane suggests classes from your stylesheets and the page. Select classes with the arrow keys or mouse, and press enter or click to add them.

CSS Style properties and HTML attributes suggestions in the Elements panel

As you add CSS style properties and HTML attributes the Elements panel will suggest appropriate values for you: all the CSS style properties supported by Chromium and the HTML attributes that are appropriate for the current element.

Support for permission requests

Polypane now shows permission requests, like for notification, audio and location, that you can accept or deny per URL. You can choose to remember this setting.

Web components update

In 5.1.0 we added support for web components across our various Panels, and in 6.0.0 we're expanding that support also to our syncing functionality. For open web components, hovers, clicks, input and keyboard events are now synced across all panes.

Re-applying debug tools

There's now a re-apply button in the debug tools popover so you can quickly recheck for example color contrasts or overflowing issues as you work through them and the page auto-updates.

We really needed this ourselves and its a big quality-of-life feature we hope you'll enjoy.

Easily scroll in the horizontal and vertical layout

You can now use the home, end, page up and page down keys to quickly scroll through the horizontal and vertical layouts rather than using your mouse, the scrollbar, spacebar + click to drag or scroll wheel/two-finger scroll.

Live CSS Panel now gives smarter suggestions

The element selector in the Live CSS panel lets you quickly get a list of CSS selectors to use to target the selected element. But some elements simply don't have a lot of classes or associated CSS selectors. To still give useful suggestions here Polypane now also takes parent elements into account when it can't find enough element-specific selectors.

Best practices in Accessibility panel

We now split out best practices in the Accessibility panel for when you only want to check for WCAG issues.

Spell checking support

The "Edit content" debug tool now has added spell-checking support. Spelling mistakes will be highlighted, and you can right-click them to see a list of suggestions or add the current word to your dictionary. Spell check works in all the languages your current operating system supports.

Fun fact: we implemented this feature after an automated spam bot emailed us we misspelled the word "woah" on our website. Obviously, we did no misspell the word "Woah".

Get Polypane 6

Don't have Polypane yet? There is a free 14 day trial available. Get it here.

Full Changelog

New features

New Polypane peek: Press alt to get the info for the element under the cursor
New Support for permission requests
New Webvitals overview per pane
New Sync events for open webcomponents
New Astigmatism Simulators
New Suggested classes, CSS properties and HTML attributes in Element panel
New Copy Meta attributes and suggestions from Meta panel
New Color gamut emulation
New Container Queries support
New Reload debug tool options
New Home/End, PageUp/PageDown shortcuts for horizontal and vertical layouts (Thanks Jens!)
New Tooltip for images and videos now show intrinsic size
New Tooltip and Element panel now show aspect ratio
New Live CSS panel generates selectors based on parent elements when needed
New Spell checking in the Edit Content Debug Tool
New Update to Chromium 91

Improvements

Improvement Faster app launch
Improvement Faster page loads
Improvement Show dimensions in Element overlay
Improvement Show Margin and padding sizes in the Element overlay
Improvement Edit Panel tabs are now in more logical order
Improvement The 'default' workspace panel is now the first selected one
Improvement Support for SVG elements in Console
Improvement Booleans are styled correctly in the Console
Improvement Updated ruleset for Accessibility panel
Improvement Accessibility panel shows optional best practices (Thanks Erik!)
Improvement Inspect SVG elements from the Accessibility Panel
Improvement Alignments improved in pane headers
Improvement Prevent additional fetch of document happening on load
Improvement Added explanations to pane options
Improvement Console popups are now off by default
Improvement Console popups now filter out console.debug messages by default
Improvement Split debug messages in Console panel, hide by default
Improvement Improved hover performance
Improvement Cleaner license flow
Improvement Prevent pages from reloading during a POST request (Thanks Urs!)
Improvement Show a clearer warning when Polypane detects browser-sync
Improvement Tooltip will now stay in view for left and bottom bounds
Improvement Emulation toggles now have an info tooltip to explain their function
Improvement Show a warning for links where a rel is missing but needed
Improvement Support data urls for favicons and meta panel
Improvement Updated list of Google Fonts
Improvement Updated Discord preview rendering

Fixes

Fix Prevent focus from being removed from pages during load
Fix Prevent devtools on mac from becoming unfocusable
Fix Launching Polypane from browser extension on Windows now works again
Fix Prevent Element panel crash for element with multiple child text nodes
Fix Prevent styling overwrites for Polypane tooltip
Fix Bug where focus pane would remain zoomed in
Fix Bug where zoom would reset to 100 upon clearing
Fix Closing the app on Mac didn't work with active Live Reloading (Thanks Mike!)
Fix Zoom to fit now works on Windows again
Fix Resize handle was overlapping header menus
Fix Slack preview no longer crashes when site contains errors
Fix Polypane no longer tries to test mailto and tel links
Fix Overview screenshot now matches the current browser theme
Fix Prevent stale styling overview for resized panes
Fix 'Paste and go' context menu (Thanks John!)
Fix Sometimes overview screenshot used the wrong layout

Don't you forget about me: overlooked breakpoints in responsive design.

Fri, 23 Apr 2021 00:00:00 GMT

We get it, there's infinite breakpoints you need to test on and only so much hours in a day, so some breakpoints just get a little more attention than others. You focus most of your time on the devices you have.

At Polypane we see and test a lot of websites and we've noticed two size ranges that don't seem to get as much attention:

Between 320px and 375px wide.
Between 930px and 990px wide.

Read on to learn why they're overlooked, and why they're still important.

Testing breakpoints in Polypane is really easy: we automatically detect the breakpoints of your page and create viewports for them, so you get the perfect overview of what you optimize for.

Between 320px and 375px

For the longest time, mobile phones were 320px wide. But that changed a couple of years ago when first Android and then Apple phones became larger and larger, and slowly 375px became the minimum size people use to test with.

But 320px wide is still important! There's still plenty of people around using an older Android or iPhone SE (the model based on an iPhone 5), iPads and other devices can show sites at 320px in split mode, and people can still resize their browser on desktop as well.

More importantly though, 320px is an accessibility requirement. The WCAG success criterion 1.4.10, "Reflow", indicates that at 320 CSS pixels wide you should not have a horizontal scroll bar.

That's not because WCAG is concerned about small phones particularly, but because it's a "reasonable minimum size that authors can achieve" (The "author" in this situation is you, the developer). Specifically, 320px wide is what you get when you zoom in by 400% on a desktop browser that's 1280px wide. That zooming in helps people with low vision.

So next time you check on one of the mobile viewports in Polypane, check the "small android" viewport as well to make sure there's no scroll bars and no breaking

If you do end up with a scrollbar at 320px wide, the quickest way to find the element is to turn on layout debugging in Polypane. That highlights in red all the elements causing the scrollbar.

Between 930px and 990px

Between 930px and 990px is a sort of no man's land. Too wide for mobile phones and tablets in portrait mode, but too narrow for tablets in landscape mode and desktops, it sits right in the middle.

And so often this is the most awkward size, where sites haven't gone from a one or two column layout to a wider layout yet and you end up with elements that seem too large or too wide.

But its also the size where we most often see layout bugs appear, where not-quite mobile/tablet and desktop breakpoints don't quite line up and the layout is broken right in the middle of them.

It's also a very common width for an unmaximized browser on a regular desktop, and if you have for example a Galaxy tab in split mode with a 320px sidebar what's left is ...960px!

So it's worth the effort switching to Polypane's focus mode and quickly scale between 930px and 990px to see if there's some weird jumping around happening.

Polypane workspace

A cool thing in Polypane is that you can import (and export) workspaces with predefined pane sizes. So we made a workspace with these two sizes for you:

Overlooked breakpoint sizes workspace

Download it, import it into Polypane and check your site!

Checking all sizes, impossible?

There's no denying that the amount of screen sizes we need to adapt sites for is always growing. So much so that it feels like you might not be able to check every size. Especially if you need to go through it one by one.

Luckily there's strategies you can use to keep your site more flexible. For one, sticking to some ground rules like only using media queries using min-width makes it much easier to reason about your styling, but you can also use modern CSS like calc() and clamp() to give elements a minimum, ideal and maximum size and then hand it off to the browser to sort it out.

Still, you're gonna have to validate your site at a bunch of different screen sizes.

For that, Polypane is by far the easiest.

It syncs everything you do across viewports so you only have to do it once (scrolling, clicking, typing and even hovering!) while testing all screen sizes at once.

Start a free trial with the link below!

How to find broken links with Polypane

Mon, 12 Apr 2021 00:00:00 GMT

Broken links, or "dead links", on your website are links that go to a URL that doesn't work. Sometimes this is because the site you're linking to has gone offline or has a server error, sometimes it's because there is a spelling mistake in your link. Detecting these is difficult: you don't click on each url on each page every time you make a change, since that simply would take too much time.

Waiting for your visitors to tell you about broken links is also not a great strategy. Sending them to a URL that doesn't work and then waiting for them to tell you is not a great user experience, and very few visitors will take the effort to notify you. Additionally, a page that has broken links is an indicator for search engines that the content is probably outdated or low quality.

With Polypane, you can check for broken links automatically and detect not just broken links but also unneeded redirects. Before we show you how to check for broken links, first a short primer:

Types of broken links

Roughly there are two types of broken links, those with a 4xx status code and those with a 5xx status code.

A 400 status code means you made an error.

A 500 status code means the server made an error.

For example, a "404 not found" means that while the server got and understood your requests, the thing you tried to find was not there. A "500 internal server error" means there was an error in the code of the server that it couldn't recover from.

Those two are the most important, but if you're checking for broken links there are a few others you might encounter in the wild. While this isn't an exhaustive list, they're the ones you'll see most often.

4xx errors, a.k.a. "You messed up"

400 Bad Request There was something wrong with the request, like an error in the request syntax.
401 Unauthorized/403 Forbidden Both can be used to indicate a user does not have the rights to access this link, for example because they're not logged in yet.
404 Not Found as mentioned, this means the URL doesn't exist.
405 Method not Allowed Some URLS can only be accessed with a GET or a POST, but you used a different method.
410 Gone Like a 404, but explicity communicates that there was a resource and it's now been removed.
429 Too Many Requests Some servers might rate limit how often you can open a URL to prevent abuse, they can use this status code.
451 Unavailable for Legal Reasons When a URL is not available because of some legal demand. "Fun" fact: the error code is a reference to the novel Fahrenheit 451.

5xx errors, a.k.a. "We messed up"

500 Internal Server Error As mentioned, the server crashed while trying to respond.
501 Not Implemented Usually used to indicate something will eventually be implemented.
502 Bad Gateway When the server is used as a proxy or gateway, but it got a bad response from the server it was proxying too. For example when you run Nginx as a proxy for a Django, Rails or Express.js server, and that server is down.
503 Service Unavailable Usually sent when the server is over capacity (too many requests, not enough memory, etc.)

There's (much) more error codes than just these (like 418 I'm a teapot, look it up), but they're the ones you see most often "in the wild".

3xx status codes: "Look elsewhere"

When you start testing for broken links you'll soon find URLs returning a code in the 3xx range. Those are used to indicate a resource has moved, either temporarily or permanently. While not a big issue (the URLs still work) these are nice to fix, as you don't know if the redirects will be available forever, and there is a (tiny) performance cost because your browser needs to send a second request to the correct URL.

301 Moved Permanently Used to indicate that the resource has moved to this new location forever. Due to the way the spec was written, a 301 can switch from a POST to a GET.
302 Found Used to indicate that the resource is now moved elsewhere. While this one is still in widespread use, you should really use either 303 or 307.
303 See Other Replaces 302 specifically in the situations where you can GET the resource elsewhere.
304 Not Modified If the resource hasn't changed, your browser can safely get it from the Cache for a faster turnaround.
307 Temporary redirect Same as 302 Found but more explicit in its intent. You can not change the HTTP Method (so a POST stays a POST).
308 Permanent redirect Same as 301 Moved Permanently but more explicit in its intent. You can not change the HTTP Method (so a POST stays a POST).

Some of these are a little vague and seem to overlap, because some details do not really have a material effect on how your browser behaves.

In practice, you'll see 301 and 302 the most, though I assume that will slowly switch over to 307 and 308.

With that little primer out of the way, lets discover how to find and fix broken links in Polypane.

Broken links in the Outline panel

When you open a page in Polypane, the Outline panel parses it to find all the links on the page. To head to the Outline panel, first open the side panel (with ctrl/cmd shift +p, or by clicking the side panel button in the header), going to "Info" and then to the "Outline" tab. By default, Polypane shows the list of headers, but click the dropdown to switch to "links". Make sure "Show issues" is checked.

The links are shown in order with their accessible text content and the URL they go to, this is a great overview to check if all your links have names that make sense (and that they're not all just "Read more").

At the same time, Polypane is checking each URL to detect which status code is returned.

When it's done, it will prefix the status to each URL:

White text on a red background is a big issue, like a broken link.
Red text is a minor issue, like a redirect or server issue.
A checkmark means everything is okay (we got a 200 status code).
A question mark means we couldn't verify a url because it was blocked or returned a 429 status code.

Fixing big issues

Obviously, fixing broken links (those with a 404) are highest priority:

Find out why a url is now offline and where it was moved too (old urls not properly redirecting happens more often than you think), find a suitable alternative or remove the link from your page altogether.

Fixing minor issues

Server issues are big problems but usually not something you can directly do something about (unless it happens on your server!) If the server error comes from a third party website, be kind and let them know which URLs are broken (or point them to Polypane. ;)

It shouldn't be a high priority to fix 301 or 302 (or 307/308) but usually it's an easy fix. A really common one is the link not ending in a /, but the server automatically adding one to all URLs.

For example, the "articles" link in the main navigation on Smashing Magazine is missing that /:

The actual URL is /articles/, with the / at the end. When they add that / in the HTML, the redirect is solved.

Not all redirects can be solved however, as some might be contextual. The links to our dashboard for example might redirect you to log in, and otherwise to the main account overview.

Try it for yourself

Polypane is available with a 14 day free trial, enough time to check all the pages on your site. Start a trial now.

Polypane 5.1: Web components support

Thu, 01 Apr 2021 00:00:00 GMT

Polypane 5.1 introduces support for web components across the application, many improvements to the Outline panel and Contrast checker. There an updates to the Chromium version, Google fonts list and accessibility ruleset.

Web component support

Polypane now has support for web components throughout the application: you can reach into them with the element inspector, inspect and edit them in the Elements panel and all the outline panel lists like headings, links and focus order support web components too.

Because web components are basically engineered to be as isolated from the rest of the page this was quite a lot of work, but it's an important part of the modern web.

Video showing the elements panel inspecting and editing inside web components

Outline panel updates

As mentioned, all overviews now support web components, so you might see a different list compared to Polypane 5 if you use web components.

The outline panel Heading overview has additional warnings for a missing h1 element and empty, hidden or presentational headings are badged for context.

The Links checker now supports links that are missing a protocol (starting a link with // uses the same protocol as the current page) or contain ./ somewhere in the url.

Contrast checker updates

The contrast checker debug tool has been updated to provide less false positives (where the calculated contrast ratio shows as 1) and labels now stick to elements if they're fixed or sticky.

New performance options and notification

Polypane now warns you if your site has an excessive amount of CSS. We defined that at 10.000 unique rule sets (a rule set is a css selector and all its properties together). At 10K unique rule sets/selectors, Polypane has to do a lot of work in parsing all the CSS to provide the features we do. In the future we might disable certain features in Polypane to keep everything performant.

The performance options now have a clear all button to quickly reset all options, and a "keep in first pane" option so you can disable resource intensive features across panes but keep them visible in one of them.

Get Polypane 5.1

Polypane updates automatically on both Mac and Windows. Linux users need to download the new version from the download page.

Don't have Polypane yet? There is a free 14 day trial available. Get it here.

Full changelog

New Full support for Web components in Element inspector
New Full support for Web components in Outline panel
New Performance warning for sites with 10K+ CSS selectors
New Added CSS Stacking Context devtools extension
New Inspect element in Chromium devtools from the Elements panel (Thanks Roel!)
New Heading overview gives warnings for empty, hidden and presentational headings
New Heading overview gives warning if there is no h1 on the page
New Performance options have a reset button and a "keep in first pane" option
Improved More performant scroll sync for sites with smooth scrolling enabled
Improved Contrast checker shows less false positives
Improved Contrast checker labels stick to fixed elements
Improved Updated Chromium to 89.0.4389.90
Improved Breakpoint panels warning limit changed from 16 to 20
Improved Updated Google Fonts list
Improved Links panel can now check links with "./" in them
Improved Links panel can now check links without a protocol
Improved Facebook preview rendering improved for sites without og:image
Improved Twitter preview rendering improved for sites without twitter:image
Improved Keyboard focus styling across the app
Improved Updated accessibility panel ruleset
Improved Errors messages consistency in the Meta panel
Improved Tab order in Pane header
Improved Reference image now takes visible rulers into account
Improved Polypane console panel now uses same fonts as devtools console (Thanks Lars!)
Improved Reloading devtools extensions now always forces a redownload
Improved Automatically open Chromium devtools when switching to the devtools panel and there is just one pane
Improved Prevent caret from changing position when editing style and attributes
Improved Move Twitter preview to the top of the Social previews
Improved Added support for clamp() in style editor
Improved Node tooltip rendering consistency
Improved Icon and tab alignment in the header
Improved Rendering of inspect button right click menu
Improved Rename Header overview to Heading overview (Thanks Roel!)
Improved Meta panel now shows doctype
Improved Address bar can no longer get cleared when you're typing in it.
Improved Context menu now has copy option for selected text
Fix Installed devtools extensions on Windows sometimes caused app not to load (Thanks Michael!)
Fix Crash when console popup couldn't be rendered (Thanks Fabio!)
Fix Context menu in Chromium devtools was not visible
Fix Many typos (Thanks Roel!)
Fix Full layout on Mac and Windows showed white bar at the bottom (Thanks Bjoern!)
Fix Display DOM tree for pages without a doctype
Fix 1px overlap of buttons in menus causing flickering (Thanks Niels!)
Fix Flyout menus on windows were broken (Thanks Warren!)
Fix Error when loading Polypane with layout debugging active (Thanks Sam!)
Fix Deleting attributes from elements panel didn't work
Fix Updating numbers in a calc() sometimes resulted in NaN
Fix Tota11y is no longer loaded twice after navigation in SPA's
Fix Overview screenshot sometimes generated empty image (Thanks Darius!)
Fix Reference image no longer renders behind website
Fix issue where reload in subframes caused main URL to update

Checking webpage quality in 5 minutes with Polypane

Mon, 29 Mar 2021 00:00:00 GMT

In this article we'll check the quality of a web page in about 5 minutes, from meta info to accessibility. Polypane has many features that make it easy to see different parts of your site, inspect them for issues and it will even tell you how to improve any issues it finds.

Because Polypane is completely made for building and testing websites all the tools are easily accessible. You won't need to dig into the browser devtools, have your site be publicly accessible or wait for a spot on slow online tools. Just open Polypane, type in the URL (even localhost) of the page you want to check and go!

Here's 5 topics that each will take you a minute to check:

Minute 1: visual issues

First we'll take a look at how things ...look. By checking our page across different screen sizes we get a quick overview of any glaring visual issues.

Quick overview

We'll begin with a spot check to make sure that there is nothing obviously broken.

1. Switch to the "Most used sizes worldwide" workspace.

Open the side panel, then switch to workspaces, default and select the "Most used sizes worldwide" workspace.

2. Scroll through them to see if everything renders correctly.

You only need to scroll in a single pane, all the other panes will follow. You can always zoom out to get all the panes in one overview by dragging the slider in the top right of the application.

3. Check for hidden overflow issues

Press ctrl + d (or cmd + d on macOS) to turn on Layout debugging. This draws boxes around all your elements so you can fix layout issues easily, but it also checks the entire page for elements that are too wide and cause an unprofessional looking horizontal scrollbar. If you have elements like that, Layout debugging will make them bright red.

Drilling down a bit

We just checked the most used sizes worldwide, but it's also important to check the sizes our site is actually optimized for. Polypane automatically detects all the CSS Breakpoints that a web page uses and creates panes for that. We'll switch to that and redo the layout spot check again.

1. Switch to breakpoint panes in the header.

Tip: right click the icon for an overview of all breakpoints.

This will use the sizes your website is optimised for. Get a warning that there's too many? That's something to look into, there's probably ways to combine them in your CSS and simplify your styling. Click "simplified breakpoints" in the warning and use that instead: it will take all your breakpoints and create 5 screen sizes that span the range of your CSS breakpoints.

2. Scroll through them to see if everything renders correctly.

Again, scroll in any of the panes to scroll in all of them, and adjust the global zoom level as needed.

3. Turn on layout debugging.

Scroll through the page again. Red areas highlight elements causing horizontal scrolling.

That was minute one. We now have a global overview of how our layout is performing at different sizes and whether there are any layout issues we should definitely look into.

Minute 2: Meta information

Meta information is the information search engines like Google and social media like Twitter and Facebook use to display information about your site. So it's pretty important. But unfortunately that information is hard to see in a browser. Typos are quickly made and only discovered when it's already too late.

Polypane can check the meta information of any page. That includes pages that aren't even available publicly yet, like your localhost.

Let's check the meta info.

Open the side panel again and go to the Info tab, then the Meta tab.

The top part of the panel shows you a quick overview of the meta info. Check the following things:

Is there a favicon?
Do the title and description have typos?
Are the title and description too long or too short? Don't worry, we'll tell you when this is the case.
Do we have a language, charset and canonical URL set?

Is something missing or giving warnings? Consider adding or fixing these for better SEO.

Drilling down a bit on the meta info

From here, click open the various items like "Open graph tags", "Twitter tags" et cetera. We're going for speed so just check if there's a warning icon somewhere. These indicate duplicates or other issues and you should make sure to remove or fix them (keeping the one with the right value.)

The social media previews in Polypane are pixel-perfect so you can be sure that they render correctly (even if your site isn't on the right domain yet!). Lets go over what to check:

Do Twitter and Facebook have a nice, large image?
Does the image fit everywhere, or are some parts cut off?
Check for typos in the Twitter and Facebook titles and descriptions.
Is the Facebook description visible? If not, your title is too long. This can also be intentional, but be sure to check!

All the other social media (Slack, LinkedIn, Discord and Telegram) use the values from Twitter and Facebook so if those look good, then the others will too.

Minute 3: take a sip of water and check your console

After all, it's important to stay hydrated.

We're going to stay in the Side panel for this one. Let's switch to the Console tab in the side panel under Edit. How does it look? Does it have a lot of messages? Are there any warnings (with a yellow background and a warning sign) or errors (with a red background and an error sign)?

Ideally this tab would be completely empty, but sometimes there are still console.logs around the code, or third party JS sends some debugging information. They don't do harm but if you can, you should get rid of them.

If there's warnings or errors however, those can have unintended consequences or even cause your site to stop working. That's something to fix.

Minute 4: SEO and links

Real quick, take a look at the address bar. Are you using HTTPS? Great, then let's continue.

If not, do something about that: HTTPS websites are more secure and HTTPS increases your visitors privacy. As a bonus: using HTTPS makes you rank better in many search engines!

Inspect the page structure

Time to open the Outline panel under Info, because we're going to check the page structure to see if there are any issues.

First pass: See any issues in this panel? Fix those.

The Outline panel opens to the headings panel by default, which shows you the hierarchy and content of all headings. Are there any warnings visible, like skipped levels? Or do you see headings that are missing text or have text you don't expect? Polypane shows the accessible name here, which is what assistive technologies read out as the title.

Second pass: Does the general flow of the headings make sense to you? And do the headings themselves make sense?

If they don't make sense on their own, consider rewriting them. Most users of assistive technologies use headings to go through your page and they're also the most valuable parts of your page for search engines. When it comes to headings, you have to make the words count.

Check for issues with links

Click the drop down in the top right of the outline panel to switch to Links. Take another sip of water while Polypane checks all the URLs on your page. Done? Great, let's go through them.

1. Are there any broken links?

Problematic errors, like a 404 or a 500 get a red background and are things you definitely want to fix.

2. Check the list for badges and warnings.

Polypane warns you for some issues when it comes to links, like when they're missing, well, a link, or when they don't use HTTPS. Are there any warnings visible?

3. Are there any other links that don't have a checkmark?

These are almost all redirect issues (HTTP status codes that start with a "3"). They're not super problematic but are nice to fix. Most of them will likely need a "/" added to the end.

Minute 5: Last but absolutely not least: Accessibility

Accessibility is the bedrock of a good website. Without it, nothing else you do will matter. It's at the core of a good user experience, good SEO and even performance. And Polypane brings the tools to make sure everything is in order.

Check the document outline

We already checked a few accessibility issues by making sure our headings look good, but lets switch to "Document outline" in the Outline panel. This shows your site using the HTML5 document outline algorithm. What we're looking for here is if it makes sense in general. The HTML5 document outline combines landmarks (elements like nav, main and aside) with headings. Does this look good, is anything highlighted, indented incorrectly, missing content or have weird titles?

Run an automated accessibility test

Automated accessibility tests don't guarantee your page is accessible but they're a good start. So switch to the Accessibility panel, run a test (maybe take a sip of water again) and see if there's issues that crop up. The tests Polypane runs are a combination of WCAG and best practices.

Don't have any issues? Click the button, you earned it. (Click it again).

Did you find issues? No problem! We identified them so now we can fix them. Note especially the Critical and Serious issues, those are the ones you want to start with. Common issues here are images with missing alt attributes and color contrast issues.

Missing alt attributes are usually an easy fix. Go over them and if an image is decorative add an empty alt attribute (alt="") to indicate it's decorative. Otherwise, make sure to add a description that explains the content of the image so that it makes sense for people that can't see it.

Contrast issues

For contrast issues though, we'll switch over to a more convenient view. Pick a pane (it's easiest if you pick one of the larger ones), click the Debug Tools icon ()and select the Contrast checker debug tool. That will go through your page and test all your text for contrast issues, then show a red label for any text without enough contrast.

Previewing a color contrast suggestion and clicking it to copy the color value.

Note down any elements with a red label. If they show a little arrow (➜) it means Polypane has a suggestion. It has determined the closest color that does have enough contrast and you can copy it with a single click. Easier than going back to your designer or trying out different colors one by one!

Focus order

The focus order of your page is the order in which keyboard users tab through your page and is a reflection of your page structure. In Polypane, you can visualize this using the focus order outline. To do that, we go back to the Outline panel and this time select "Focus order" in the dropdown. Check the list to see if there's not any highlighted issues, then click the "Show Overlay" button next to the list.

This will draw a line from each focusable element to the next in the order that they get focused. Take a look. Does it flow nicely from left to right (for latin scripts), top to bottom? That's good! If it jumps around a lot, especially up and down, that's potentially confusing. See if there is a way to simplify that by improving your HTML structure.

Of course, these together do not 100% guarantee the accessibility of your web page, but they're a couple of different aspects that give you a good idea of how much work there is to do.

You're done!

With those last checks, you're done! You did a complete page quality check in five minutes! (Maybe a little more? who's counting anyway)

Take a sip of water and look at the issues you found. Do you need to look more closely at any of them? If not, scroll back up and start over with the next page. ;)

Polypane 5: Console popups, performance and focus overview

Thu, 04 Mar 2021 00:00:00 GMT

Polypane 5 is out with new ways to see your console messages, new performance settings and a new focus order overview. It has a new Chromium version (89), many performance improvements, updated UI elements and new debug tools.

Polypane is the browser for developing responsive, fast & accessible websites. It has powerful devtools, multiple synced viewports, over 25 debug tools, device emulation, built-in live-reloading and much more. More about Polypane.

Console improvements

In Polypane 4 we introduced the unified console, a single console for all your panes that smartly combines console messages and that sends console commands to all panes.

In Polypane 5 we're bringing the console out of the panel.

Each pane now shows you how many errors, warnings and logs were sent to the console, and new console messages are shown as popups.

With the stats overview you see where console messages come from.

The console message popups are fully interactive just like the ones in the console itself. Hover and click elements to highlight and inspect them, and objects are fully inspectable.

And on the off-chance that you accidentally send a lot of messages to the console (it happens to all of us!), pressing esc will quickly hide them all.

We've also improved the rendering of console messages. Polypane now supports CSS styling in console messages: prefix the part of a text that you want to style with %c, and add a second string with CSS. Polypane will then apply the CSS styling to the message.

console.log(
  '%cI am bold and lightgrey with a purple background',
  'font-weight:bold;color:lightgrey;background:purple'
);

See this in action when the "console.log (styled)" button is clicked in the video below:

Performance

Showing a site many times is going to use more resources than showing it once, there's no way around that. So keeping performance at an acceptable level is always important for us at Polypane, and this release too we've found many ways to speed up different aspects of our UI, from page load times to interactions in many of the panels.

But there is a source of performance issues we can't fix: Performance of webpages themselves.

So we build a performance settings panel to help. Simply put, some CSS and HTML Elements are more taxing than others. Turning them off has a big impact on performance. The performance settings allow you to quickly disable CSS and HTML that is particularly heavy, like CSS animations, or video elements.

The impact of this is really noticable, so we recommend you experiment with this when you notice any performance issues.

Find the Performance settings in the new App Settings menu in the top right of Polypane. The icon of which will show a small gauge when active.

Focus Order overview

In the past few releases we've really expanded the outline panel with new headers, links and landmarks overviews.

In 5 we're adding a focus order overview. All elements on the page that you can focus with the keyboard, in the order that you tab through them.

Like the other overviews, there are warnings for issues:

Positive tabindex are better avoided.
Any element can be made keyboard focusable by adding tabindex=0, but 99% of the time you should probably use a button or a

We'll also highlight any tabindex values.

This focus order overview also has an overlay to visually follow the tab order in your site to see if it makes sense.

Disable images debug tool

We added a new debug tool that disables all images and background images.

This is perfect to verify your layout doesn't break when images can't be loaded, but also when you're testing email newsletters, since many email applications hide images by default.

UI updates

We've improved the node tooltip so the information is now more clearly laid out. It will also show you when an element is keyboard focusable.

Adjusting text size

Many of you have asked for adjustable text sizing in the Polypane interface and you can now do that by going to "Adjust text size" in the View menu. Adjust the text size for the entire interface, or just for the panel. Let us know if this works for you, or if you need more fine-grained control.

Panel updates

We've updated the Accessibility panel with new rules and now display associated WCAG success criteria for issues.

Along with the focus order outline, The Outline panel has improvements for links and headings. we now highlight non-https links, empty href attributes and support testing relative urls as well. The header outline will now warn you for duplicate header content.

The Meta panel features improved rendering for Facebook, Slack, LinkedIn and Discord and updated warnings for missing favicons and other content.

The A11y tab in the Elements panel now highlights if an element is keyboard focusable and has an improved color contrast indicator. When adding new items in the style or attributes tab the value input will automatically size to fit your content.

The Browse panel mutes audio on pages when it's not visible.

The Live CSS panel has two new options to format your CSS using Prettier, and to clear the CSS.

In the Workspace panel Choose to append workspaces instead of replacing your current set of panes.

Isolated panes are now the default

Since Polypane 2 we've supported two types of rendering: the default panes with a shared context, and isolated panes that run in their own context.

Isolated panes had some significant benefits, like emulation options and devtools extensions support. In Polypane 5 this has now become the default mode, and the old mode is now available as "legacy mode" in the edit menu. A few things are still faster in this mode, but for the vast majority of people, the new default is the way to go.

New users will get isolated panes by default, existing users will keep the mode they've been using (though we suggest switching to the new default!)

Pane header improvements

We've changed the Pane header UI with some nice new options.

Pane Settings redesigns

Both the Debug tool settings and Emulation settings were getting very long, so we've split them up into different tabs just like the rulers panel. They take up less space now and we have more room to introduce new features.

Number inputs improvements

Individual pane zoom levels are now shown as a percentage instead of a multiplier, and all inputs in the pane header and across Polypane now support using modifier keys when increasing or decreasing values.

Use the arrow keys or scrollwheel to go up or down by 1, but hold shift and you change the value by 10, cmd/ctrl will change by 100 and alt will change by .1.

Hiding the pane settings when there is no space

When panes get too narrow, for example when zooming out, Polypane will hide the pane icons behind a menu button. You can still access them, but they no longer overlap other panes or the close button.

Other updates

Chromium 89

Polypane now runs Chromium 89, bringing some cool new features like aspect-ratio and @scroll-timeline support.

Color contrast checker

Click the suggested color in the color contrast checker debug tool tooltips to copy it to your clipboard.

New CLI options

Polypane now has two new CLI options:

--reload will reload the current page in an open Polypane. If Polypane hasn't started, it will just load.
-g will launch Polypane without focusing the window.

Combine both to reload in Polypane without focusing the application.

Updates from 4.0.1, 4.0.2 and 4.0.3

There were a few updates in 4.0.2 and 4.0.3 that we didn't officially announce, so we'll mention them here as well: Polypane now has a custom Big Sur icon.

Polypane also has a universal build so it runs extra fast on new Apple M1 machines.

In 4.0.2 we added automated link checking for all links on a page so it's really easy to find broken links and redirects.

Polypane's view source panel now formats your source code using Prettier. There is a new debug tool that shows unneeded scrollbars, particularly useful for developers on Mac.

Check out the full release notes for these versions here: 4.0.1, 4.0.2 and 4.0.3.

Get Polypane 5

Don't have Polypane yet? There is a free 14 day trial available. Get it here.

Full Changelog

New Console message popups
New Disable Images placeholder
New Chromium 89
New Performance settings panel
New Resize the text in the entire UI/panel (Thanks many people!)
New Isolate pane mode is now the default mode
New Focus order outline and visual overlay
New CSS styling support in console messages
New Click a color contrast suggestion to copy it to clipboard
New Polypane --reload and -g CLI commands (Thanks Mike!)
New All number inputs now support modifier keys when increasing/decreasing
New "r" shortcut to reload
New Global settings panel
New Disable Hardware acceleration option
New Added more Angular and Vue.js devtools
Improved New design for element selector tooltip
Improved Element selector tooltip shows if element is keyboard focusable
Improved More consistent hover syncing
Improved Support outlining SVG elements in layout debugging
Improved empty panes message hides instantly when switching tabs
Improved Theme switching now changes color-scheme internally as well
Improved Use more optimized version of React
Improved Add copy image location and save image context menu items
Improved Screenshots now use emulation settings (Thanks Rik!)
Improved Vertical resizing now takes ruler height into account
Improved Context menu for inspect element button in header now displays shortcuts
Improved Split devtools shortcuts to open elements panel/chrome devtools and inspect elements/inspect elements in devtools
Improved Browser-sync live reloading no longer prevents load event (Thanks Rik!)
Improved Updated A11y.css and fix A11y.css counters
Improved Pane header icons hide when panes gets too small
Improved Tabs for pane options and pane debug tools
Improved Touch toggle now switches between "pointer" and "touch".
Improved "Online" network setting is now called "No Throttling"
Improved Pane zoom is now done in percentages (Thanks Rik!)
Improved Outline panel link checking now shows loading indicators
Improved Outline panel link checking now supports relative URLs
Improved Outline panel link checking now shows badge for non-https links
Improved Outline panel link checking now shows badge for empty href attributes
Improved Outline panel: Removed "H1 should be first heading" rule
Improved Outline panel: Added rule for headers with duplicate content
Improved Browse panel is now muted when not visible (Thanks Mico!)
Improved Browse panel is now more secure
Improved Elements panel: adding new values now auto size to fit content
Improved Elements panel: A11y tab improvements: clearer contrast warning, information about keyboard focus
Improved Workspaces: Support appending workspaces and breakpoint panes (Thanks Sam!)
Improved Meta panel: Slack, Linkedin and Discord meta preview rendering improvements
Improved Meta panel: Facebook social media preview style updates
Improved Meta panel: Highlight missing favicon in Meta panel
Improved Source panel HTML formatting is much faster now
Improved Live CSS Panel now has buttons for code formatting and clearing.
Improved Accessibility panel has updated rule set
Improved Accessibility panel now shows related WCAG success criteria (Thanks Dave!)
Improved Info pane: Performance improvements for large HTML files (Thanks Andrew!)
Improved New "Open location" menu item (Thanks Jacob!)
Fix macOS shortcuts not being released when closing the Polypane window
Fix Height of panes in horizontal mode did not fit in certain situations (Thanks Sam!)
Fix Support multi-line text content editing in Elements panel
Fix Show CSRF warning for Ruby on Rails in Legacy mode (Thanks Bob!)
Fix issue where two panes would end up having the same id
Fix Issue where CSS on <html> element was being overwritten
Fix Issue where vertical guides would overwrite horizontal guides
Fix You no longer need to move out of a pane and back in to trigger chromium devtools inspection
Fix Horizontal overflow issue in Meta panel
Fix Deleting devtools extensions works again
Fix Scroll to element on hover now works in default mode
Fix Issue where the placeholdifier debug tool did not apply to top level elements
Fix Opening URLs from the command line
Fix prevent crash when opening about:blank through browser extensions (Thanks Michael!)
Fix Prevent error on pages with missing doctypes
Fix Element panel now shows all styles again
Fix Prevent error when hovering color contrast label
Fix Re-apply emulation settings after new iframes get added to a document

How Maurits Meester combines front-end development with beer

Tue, 09 Feb 2021 00:00:00 GMT

Maurits is a freelance front-end developer and co-founder of Brouwerij Victorie, a brewery in Amsterdam with a gorgeous website. We spoke with him about beer (naturally), e-commerce and Henri's, a Sass design toolbelt.

Hey Maurits, can you tell us about yourself?

My name is Maurits, 33 years old and have been an entrepreneur / freelancer since the beginning of my professional career. I’m that old skool developer that can tell you about supporting Internet Explorer 6 back in the days, that’s how old I am.

After owning and running an agency with 10+ employees, I decided almost two years ago to start freelancing again and do what I like best, developing solutions for end customers and clients. You can find me on Twitter and GitHub.

My main field of expertise is e-commerce development, on a freelance basis as a Magento 2 and Shopware 6 developer. Shopware 6 lets me develop Headless e-commerce solutions with Vue.js. (Sorry Kilian, I don’t hate React, I just like Vue.js better.) I’ve created a few extensions which are available via the Shopware ecosystem.

My preference of working is desktop down, instead of the popular mobile first approach. I think this has grown from working with designers that embraced this approach. I have a strong belief in hiding elements from the desktop size down instead of starting with a minimalistic design on mobile and adding experience to the page on desktop.

What were you looking to improve in your workflow that made you search out a tool like Polypane?

I have to say I wasn’t looking for workflow improvement, I just happened to know Kilian and saw his awesome product. One of the key challenges with the software of Polypane is that you don’t know what you’re missing until you try it.

What did you use before?

I normally just use Chrome development tools and emulate screens in that. One of the things you start to realize using Polypane is the amount of time you spent on resizing or emulating screens.

Besides the manual steps you need to take, I catch myself on being lazy and tending to forget to have a final check across multiple devices. Polypane solved that by becoming a part of my development to deploy process and always being the final check before deploying.

How was it for you to get started with Polypane and how do you use it?

I’m still figuring out all the possibilities Polypane has to offer. Right now I use it to check my work on many screen sizes at once, With the experience I have, I’m pretty aware of the output my code will bring on smaller screens.

But Polypane is much more than a window resizer, the meta info displayed in the sidebar, the a11y features make it easy to improve your website in a glance and have your site optimized and ready to ship. Better websites in less time, that’s what Polypane brings you.

Tell us about Henri's, what do you use it for?

At one of my previous companies a few of my coworkers created Henri's, (with a special shout out to Sil van Diepen who has done most of the work on this great library.) Henris is a modern Sass Tool belt that makes creating fluid web pages easy.

Henris is based on a “grid philosophy” and provides the tools to easily create a "pixel-pretty-close" version of the designer's vision. All of this probably feels really abstract so let’s use an example to clarify this approach:

Your designer loves working on a big canvas, let’s say 1920px by 1080px. They want to create a fluid full width experience for everyone so they design everything full width on 1920x1080. But a lot of our users don’t have these huge desktop screens and instead use small screens or, more likely, tablet or mobile devices so we need to have a tool that makes your design fluid.

This is where Henri's comes in, together with the designer we decide to work on an old-fashioned column kind of design, but instead of working on a 12 column grid we are using a 24 column grid without gaps, just because no one likes gaps right? Your designer starts being creative, designs an awesome page at 1920px width and now it’s time to implement his awesome design on your end-users small screen.

Working on a 1920px design means one column is 80px. Let’s say you have the following headings designed, what will be the translation to grid sizes?

	Designed on 1920px	Grid size	Translates to	On 1440px
Heading 1	80px	1 grid	4,167vw	60px
Heading 2	60px	0.75 grid	3,125vw	45px
Heading 3	52px	0.65 grid	2,70vw	39px
Heading 4	40px	0.5 grid	2,08vw	30px
Heading 5	32px	0.4 grid	1,6668vw	24px

The great thing about this approach is your font will scale with all screen sizes and has the same word wrapping when changing your screen size.

But as you can see and probably notice things will get critical on smaller screens like phones. Let’s say you are watching the page on a device with a width of 375px, this means your H5 will have a font-size of 6,255px which is close to unreadable and not the style you would probably want.

In the past we used to have an explicit sass function to solve the min and max font-sizes, but the new css clamp() function is a much more elegant solution to the problem.

Henri's offers a bunch of other convenient tools, you can find out all about those on the website henris.style and the docs.

Can you tell us about Brouwerij Victorie?

In March of 2020, when the whole pandemic started in the Netherlands me and two friends decided to continue with our plans of starting a brewery: Brouwerij Victorie. With our first range of three beers, a Blond, Saison and Neipa we started a complete new and unknown adventure. Selling beers is something completely different from building websites. Our beers are made for people like ourselves, the creative industry. In the near future we want to have more explicit beers that serve this audience better.

Starting during Covid forced us to think differently and instead of using traditional channels we're selling it through our own e-commerce platform brouwerijvictorie.nl, built with Shopware and Nuxt.

As a special for Polypane users in The Netherlands, get our beer with the special discount code "friendsofPolypane" for 10% off.

Kilian: How awesome is that! I highly recommend Brouwerij Victorie's beers. Half Blond if you prefer a fresh blonde style beer and One Hit Wonder (a saison) if you like to sit with a beer a little longer. And I look forward to trying Juicy You, which is a fruity IPA. They also have a mix box so you can try them all.

Okay, back to web dev again. What results did you see with Polypane?

Being a freelancer I can say that this tool really helps, even if I don't really see that returned in hours saved. What I do notice is that everything I work on ends up looking better. You end up with higher quality output because of that different way of thinking about web development you get using Polypane.

I also frequently share screenshots made in Polypane with product owners so they can see the responsive design in one overview.

What's next for you?

At the moment I’m optimizing the website of our Brewery, we want to have better accessibility and better SEO, so Polypane is really helpful in discovering those pain points. In 2021 we want to introduce two new beers, become a sustainable brand and move our beers from traditional glass bottles to cans, which have a lower carbon footprint and are easier to recycle.

Like every other developer I don’t stop learning, with Vue3 and Vite coming up I would like to build an application completely relying on those new frameworks. I’m trying to be active in the communities I like, but sometimes find it hard to keep up with everything. You can find me on Twitter and GitHub.

Thanks Maurits for this interview! Henri's looks cool and I have nothing against Vue either ;) Go check out the Brouwerij Victorie site for some cool UI elements and responsive design inspiration. If you're in the Netherlands and like beer, I really recommend you give their beers a try.

Faking container queries with CSS Grid

Tue, 02 Feb 2021 00:00:00 GMT

Container queries are an (hopefully) upcoming feature in CSS that will let you create responsive designs that respond to the dimensions of their container (like a div or other HTML element) rather than the dimensions of the entire page, which we currently do with media queries.

This is super helpful for component-based design, since you no longer have to create different variants of a component when you need them to display slightly differently depending on where they're shown.

Unfortunately, container queries don't exist yet.

Recently this became an issue for me when Facebook updated their rich previews on desktop to be shown at three discrete widths depending on the viewport width.

That meant I had to update the previews in the Polypane side panel to show at only those three widths. The side panel can be sized independent of the viewport though, so media queries were not an option. Because they used discrete widths, I also couldn't use auto sizing to let the preview grow along with the width of the side panel. I needed container queries.

Note: this has since been updated/reverted (or I was in some A/B testing group) but the technique I came up with was useful enough to still write an article about.

With CSS Grid and some trickery I managed to implement this in a way that looks very close to container queries.

Just to note: real container queries would let you do significantly more than having three discrete widths so this is in no way a full replacement. But it's useful enough that I think it's a technique to know about.

Defining the problem

The problem we're trying to solve is this: depending on the width of the viewport, the rich previews on Facebook are either 500, 590 or 680 pixels wide. In Polypane, we want to show the largest version that fits in the sidebar.

We can't use the viewport width, since the width of the sidebar is independent of it. And we can't use a fluid width combined with a max-width, since we need it to snap to those three sizes so it acts just like Facebook.

If we look at those three widths we see that from 500 pixels, the width increases by 90 pixels each time. This will come of use later.

Getting the preview exactly right might feel pedantic, but I want the Social media previews in Polypane to be pixel perfect as well as character perfect, so you can be sure that what you see in Polypane is what people see on social media sites.

This is something not even the official validators of Facebook, Twitter and LinkedIn do. In fact, they all use outdated designs that no longer match with the actual sites, making Polypane the only place that matches with reality. That takes a lot of work, but it's totally worth it.

CSS Grid

Admittedly I haven't done a lot with CSS Grid yet so I am by no means a pro. I usually default to Flexbox as it fits most of the things I need to design. Here's how I decide whether to use CSS Grid or Flexbox:

Do I have a bunch of elements that I need to lay out? Then I use Flexbox
Do I have a bunch of areas that I need to put elements in? Then I use CSS Grid.

And in this case, the area should be leading, which led me (along with some help from the Fronteers Slack) to see if I could get CSS Grid for my solution. In CSS Grid you can define a set of areas in two dimensions (though we only need one dimension for this example) so that's what we'll do.

Setup

We begin with setting up a wrapper for our Facebook preview to live in:

<div class="wrapper">
  <div class="preview">Facebook Preview</div>
</div>

And some CSS that will set up the grid in the wrapper, and then position the preview inside it:

.wrapper {
  display: grid;
  max-width: 680px;
  grid-template-columns: 500px repeat(auto-fill, 90px);
}

.preview {
  grid-column: 1 / -1;
}

What we've done here is set up a CSS grid that's at most 680 pixels wide (the widest our preview should get), has one column that's 500px width (the smallest our preview should get) and then a "repeat()" function that adds columns of 90 pixels wide as long as they fit, which is what the auto-fill function does.

Then, for our preview, we set grid-column to 1 / -1. What this means is this element goes from the first grid line from the start (1), to the first grid line from the end (-1). This essentially means it will always occupy all grid areas regardless of how many grid areas there are.

Here's a live, resizable preview you can try and see what happens. The white dotted lines indicate the borders of the grid areas (drag the bottom right corner):

Preview

If you look closely, you can see that it doesn't actually work: while the Facebook preview snaps to 680px and 590px wide, it doesn't go to our 500px width. This is because repeat() always shows at least one column. I initially thought this would be at least zero.

So how do we fix that?

Getting it just right

Since we now know there's always at least one column of 90 pixels, and the minimum size we want is 500px, we need the first column in our CSS Grid to be 500 - 90 = 410 pixels wide. Let's try that:

.wrapper {
  display: grid;
  max-width: 680px;
  grid-template-columns: 410px repeat(auto-fill, 90px);
}

And a new live preview:

Preview

The preview area now snaps to 680, 590 and 500 pixels wide. We've created a container query-like experience where depending on the available total width we snap to a set of fixed sizes.

As noted earlier in the article, Facebook has since reverted/updated to a fluid column that scales along with the viewport. This technique can still be useful to achieve certain effects. Maybe you want things to align on a pixel basis, or have a grid system but want to keep fixed widths within that grid.

If you end up using this, let me know on Twitter!

Find and fix accessibility issues with Polypane

Tue, 19 Jan 2021 00:00:00 GMT

At Polypane, accessibility is one of the three core areas we focus on, along with performance and responsive design. If you're not familiar with Polypane, it's a web browser specifically for web developers. It has all sorts of tools you won't find in regular browsers that make you more effective and efficient.

In this article, we'll focus on a few common accessibility issues and find ways to audit and fix them in your site to make sure it's as accessible as possible.

Live stream recording

Check out this live stream by Stephanie Eckles where Kilian walked through most of the accessibility options in Polypane:

Does my text have enough contrast, and where it doesn't, how do I fix that?

Ideally, text contrast is dealt with during the design, unfortunately this isn't always the case. While there are plenty of places online to check a given text color and a given background (we even built our own free online color contrast tester), your web pages likely have many different colors and backgrounds. For any reasonably complex site you might not know all combinations beforehand.

That makes it really easy to overlook that one grey text that's normally shown on a white background, but has this one place where it's on light gray, or a dark text color with opacity that only works for certain backgrounds.

In Polypane, nearly all inspection of an element will do a quick contrast check for that specific element. Our algorithm determines the real text and background colors, taking into account the color, opacity and all background colors. We then merge that into the actual perceived text and background color and compare that.

We'll show the result in an element tooltip and in the elements panel alongside other information like font-family and font size. That way, the text contrast of the element you're working on is always glanceable.

Polypane also has a color contrast debug tool. This will go through your entire page and find all unique text + background combinations, check all of them and add labels to each element: All passing contrast pairs get a single label with the contrast, and any failing contrast gets a warning label for each instance, so you don't overlook any.

If you have text on top of images then Polypane can't automatically determine if the background is valid. We will check against the background color, and it's good practice to make sure that has enough contrast (for when images don't load) but you can use the Eye Dropper color picker to compare background and foreground. Select both colors and Polypane will automatically compare them for you.

We made it really easy to find contrast issues. But how do you fix them?

If you're lucky, you can use another color from your design system but if you don't have one, or this is a one-off color pair, you have to go back to your designer or use an online contrast tester and find another color yourself. A tedious and time consuming process. We can do better!

For every failing contrast pair, Polypane calculates a text color that has enough contrast with the background, and suggests that to you for easy copying. You can even preview it just by hovering over it. (Our free online contrast checker also suggests improved colors for you)

How does my site look for people with visual impairments like color blindness or farsightedness?

What about situational impairments like bright sunlight or a device with night mode?

Not everyone that visits your site is going to have perfect vision. In fact, a large number of your visitors will definitely have some form of visual impairment. While you can make sure to follow guidelines around minimum text size and not communicate anything just through use of colors, it can be easy to overlook an issue. The best way to get empathy is to try and simulate how other people experience your site.

Color blindness

Between 8 and 10% of men worldwide are color blind (women much less so, at 0.5%), and they fall in three different groups: red-green color blindness, blue-yellow color blindness and full color blindness. Polypane lets you simulate all of these with our accessibility debug tools.

You should test with these simulators to make sure that you don't rely on just color to bring across messages. For example if you just make the border of an input field red when you make an error, you'll find that's barely noticeable, or unnoticeable with any of these simulators turned on. Rather you should provide a second non-color indicator like an error message to communicate the issue to your user.

Red-green color blindness is the most common and the vast majority of people with color blindness have this. In Polypane we offer 4 different simulators: Deuteranopia, Deuteranomaly, Protanopia and Protanomaly. The -anomaly variants here are the less severe version, the -opia variants would be classified as "full" red-green color blindness.

As the name implies, people with this type of color blindness have difficulty seeing the difference between red and green, but also brown and orange and certain shades of blue and purple. You can see how for example the common "green is good, red is bad" coloring of elements can become an issue.

Blue-yellow color blindness is much more rare, at just 0.0002% of men worldwide. The technical name for it is "tritanopia", and tritanomaly is the less severe version. This type of color blindness makes people less sensitive to blue light, making the blue part of anything grey.

Lastly, full colorblindness is the most rare at 0.00003% of men worldwide. It's proper name is "Achromatopsia", with "achromatomaly" being the less severe version where people see some color, but it's severely dulled.

It's worth noting that the simulators in Polypane (and any simulator really) are approximations. Especially the less severe variants come in a range from nearly unnoticeable to close to the full thing, and so the simulator chooses a middle ground there.

Blurred vision

So that's color blindness, but far more people worldwide have some form of farsightedness (roughly 10% world wide), which can cause screens to look blurry. This can be "regular" farsightedness, or other visual impairments that blur vision like cataracts and glaucoma.

Cataracts is the leading cause of blindness. It progressively clouds the lens of your eye. Glaucoma is the second most common cause of blindness and decreases your peripheral vision, followed by your central vision. It's sometimes called tunnel vision, though that's an umbrella term for a number of different impairments.

Using the simulators in Polypane you'll notice how difficult it is to read regular text. People with blurred vision can usually compensate for it with glasses or magnification, but it still helps to make sure that your page remains scannable. Make sure that your headers are large enough to be readable with these simulators. That will make sure your page is scannable without too much strain.

The Tunnelvision and Glaucoma simulators in Polypane are interactive, you can use your mouse to determine where on the page you look.

Situational impairments

Not all visual impairments are physical. Some are situational as well: they only occur when you're in a certain situation. Polypane lets you simulate two of these: Bright sunlight, and night mode.

Screens are hard to read in bright sunlight. They get washed out, there's glare and only the largest contrast remains readable. Maybe not all sites are meant to be used in bright sunlight but if you have a mobile or responsive site, it's going to end up being shown on a screen in bright sunlight at some point. This is a good simulator to check if your nice subtle contrasts aren't too subtle.

Night mode on the other hand, is something that has slowly appeared in most operating systems over the past few years, on computers and mobile devices. Night mode will decrease the amount of blue in a screen at night, making screens more relaxing to your eyes and decreasing the suppression of melatonin. Melatonin is what makes you sleepy and you make more of it at the end of the day as the natural light around you dims. If you ever kept working on your computer until 2 am not feeling tired at all, suppressed melatonin is why.

Night modes in most operating systems are designed to prevent any issues with what's being shown on screen but if you rely on yellows to convey meaning then those might get lost when everything is slightly yellow.

Dyslexia

Around 5% to 10% of people worldwide have some form of dyslexia, a reading impairment. While this is not a situational impairment, it does affect how people experience your site visually.

Some experts suggest it might even be upward of 15% because a lot of people with reading impairments do not realise they have it. Since there is no way to compare our experience reading with anyone else's experience, it's hard to know when your experience is significantly different.

Some people with dyslexia describe it as seeing the letters on screen dance around, and that is what our dyslexia simulator shows. The letters in each word are jumbled and re-ordered as you look at them. They're still mostly readable, but they take more effort than usual.

Not everyone with dyslexia experiences reading like this and the use of the simulator is more for gaining empathy than anything else. Still if you get stuck on a jumbled word, because it's very long or the letters can form multiple words, you might consider changing it to a simpler, clearer word.

Does my page structure make sense for people that depend on it?

Your page structure, like your headings and landmarks (elements like body, nav, main, aside and section) is more important than you think. Many assistive technologies, like screen readers, let users pull up a list of all your headings, landmarks or links for them to quickly go through and see if they find the section they're looking for.

It's important to have a logical order to your page, with headings that don't skip a level and the proper landmarks (like navigation, headers and footers). When your site is built up out of many components and templates, you might not be able to get a good overview of all the headings and their order until they're rendered on a page. Additionally, not all your landmarks might end up with a matching header.

With the Polypane outline panel you get overviews of your headers, links, landmarks, images and the HTML5 outline. That makes it easy to see where you skip a heading level, if there's landmarks with a missing title, and if you have links that don't have a clear text or broken links.

There's 5 different outlines you can check:

Headers

Shows all the headers currently on the page. The overview will warn you when it finds the following issues:

The H1 is not the first header
The page has more than one H1
Heading levels are skipped
Headings are repeated across the page

None of these are strict WCAG failures or spec violations but they are considered best practices. Taking care of these will make it easier for people to use your site by skipping from heading to heading.

Document outline

A outline using the generated HTML5 document outline algorithm. Will highlight landmarks without a clear title.

Landmarks

Shows the HTML5 and ARIA landmarks elements (header, nav, section, footer et cetera) with their accessible name. This overview will highlight issues like invalid nesting of landmarks, missing labels and when the label includes the role of the landmark (causing it to be read twice by screen readers)

Links

Lists all the links on the page with their accessible name. It check the content of the link and whether it's clear enough (and not just "Read more").

Polypane also goes through all your links to check if they're still valid, or if they're broken or redirect.

Images

Lists all the images and gives warnings for empty alt attributes, alt attributes that start with things like "image" or "picture" and alt attributes that mention color (as that might be information that remains unavailable to your visitors).

Can users get to everything on my pages without using a mouse?

Not everyone uses a mouse to interact with your website. People using the keyboard or assistive technologies depend on heading and link outlines like the ones mentioned above, but also on website developers using the right elements for interactivity and a logical tab order.

Keyboard users can search across your page, but are likely to use the tab key to go through interactive elements.

The Focus order outline and visualization in Polypane help you answer two questions.

Can non-mouse users reach everything they need to?
Does the tab order make sense?

Can non-mouse users reach everything they need to?

HTML elements are interactive (like buttons and links) or not (like regular text or divs). Those regular elements can still be made clickable with JavaScript but they can still be inaccessible using a keyboard or assistive technologies.

If elements are missing in the focus order list, they're not accessible to users that don't use a mouse.

Does the tab order make sense?

When you go through a site visually, the order tends to be clear (for western languages: left to right, top to bottom), but the visual order is not always the same as the source order.

The source order however determines the focus order, and when that's different from what people expect, they have a worse time using your site. The focus order visualization in Polypane makes it easy to see if the order makes sense, or if it jumps up and down the page.

Polypane will highlight any elements that do not follow the reading order.

Can people understand my text?

Even if your site may be technically accessible, the content itself can still be difficult to understand for your visitors. We already discussed the dyslexia simulator and how you can improve your site for people with dyslexia, but what about generally hard to read text?

The readability overlay will go through all the sentences on your page and score them. Harder to read sentences are darker red while easier to read sentences are lighter green. This way you can quickly spot sentences you should rewrite or break up into smaller sentences for better understanding.

To measure this we use either the Automated Readability Index, which works well for most Western European languages, or the Automatic Arabic Readability Index when we detect a page written in Arabic.

Are my elements sized correctly?

Polypane offers three debug tools that help with checking if elements have the right size/are styled in the right way

Small text

The Small text debug tool detects elements with text smaller than 12px, and form elements with text smaller than 16px (to prevent iOS from zooming in on focus) and shows a warning for each of them.

Small targets

The Target size cursor will change your cursor into a square that's 44 by 44 pixels, roughly the size of your thumb, and the minimum recommended space per tap target. Hover over your links to check they don't overlap other links, making it hard to click a specific link on mobile.

Target size cursor hovering over a number of different links showing they are far enough apart.

Text Spacing

The WCAG has guidelines for how text should be able to be changed by end users and still retain all info (i.e. no text is cut off or hidden): Success criterion 1.4.12. The Text spacing debug tool applies the limits described in this criterion to your page, letting you check if content becomes inaccessible.

How do I make sure I don't have any code quality issues in my site and are the things I did to improve accessibility actually helping?

There's no denying that accessibility is a large field. This article has already mentioned contrast issues, different visual and situational impairments and document structure but that's only scratching the surface. There's many things that can negatively affect someone's experience on your site, like missing alt attributes for images, links without text, and not defining a page language to name just a tiny few. It would be nice if you didn't need to go through a huge checklist for every page, but could just surface the issues. In Polypane there's multiple ways to do that: through our built-in accessibility panel and two debug tools, A11y.css and Tota11y.

A11y.css is a CSS file that highlights possible risks and mistakes in your page. Mostly for accessibility, but also for mistakes that can cause accessibility issues like a missing charset. It can be a little in-your-face because it draws thick borders around anything it thinks you should check, even for things that are on purpose (like empty alt attributes for decorational images)

Tota11y by Khan academy on the other hand, is a collection of a few different tools. There is a tool to list headings and landmarks (and highlight any order violations), find contrast issues (though not as thorough as the color contrast checker built into Polypane) and highlight any links, images or label that can cause issues (due to missing content, and missing or empty alt or for attributes).

Lastly, Polypane comes with its own Accessibility panel that can run an accessibility check based on the popular Axe ruleset. When you run a test, Polypane analyses your entire page and lists all issues in four separate categories: critical, serious, moderate and minor.

The critical and serious issues are the really important ones to fix. Critical issues are things like missing alt texts for images and wrong use of ARIA.

You can expand each found issue to get more information on which elements are affected by it and the specific problem with each element.

It's important for us that these errors are actionable: that they don't just tell you what's wrong, but also give you suggestions and advice on how to deal with them. For images with missing alt attributes for example, we explain the difference between content and presentational images, and for color contrast issues we'll suggest a color that does have enough contrast.

From the accessibility panel you can click on any element and show it in the element inspector, where you can usually fix the issue by updating the attributes or styling. Once you've done that, copy it over to your source and the issue is resolved!

Interestingly when building the accessibility panel and checking many different websites with it it was more common to see ARIA being misused as a problem rather than lack of ARIA being the issue: accessibility is a complicated topic and it's easy to think you're doing the right thing while actually making it a little harder. Personal knowledge and manual testing are invaluable, but automated tests provide an excellent spot check.

Does my site work well on smaller screens?

There's already plenty written about responsive design but it's also an important accessibility concern. For one, causing a horizontal scrollbar on screens of 320 pixels wide is not allowed according to WCAG rule 1.4.10. And on wider screens, while not a violation, it can look pretty jarring and confusing.

Finding the cause of horizontal overflows can be a real pain, since most of the time it's not immediately clear which element is causing it. You end up randomly deleting elements in the dev tools in the hope of finding the element. That's a lot of tedious work.

Polypane detects whether a pane has a horizontal scrollbar (or has potential for a horizontal scrollbar due to using 100vw for a width) and shows a warning. When you click the warning Polypane will turn on the "layout debugging" debug tool. The Layout debugging tool colors the overflow-causing elements in red so you can find and fix them, for example by making sure the parent element has an overflow:hidden, or by making sure your content fits the available space.

Even though a mobile screen is smaller than your desktop, with screen sizes increasing it becomes harder to reach all parts of the screen easily when holding your phone in one hand. With the reachability debug tool we show which parts of the screen are easier or harder to reach when holding the phone in your hand (right hand or left hand).

Holding your phone in one hand, the bottom part of the screen tends to be easier to reach than the top so depending on your site, placing important items at the bottom of the screen could actually be more user-friendly. Placing items at the bottom of the screen is very common in apps, and we're seeing more websites and web apps migrating to this pattern too.

How do I make sure my site works well for users that prefer dark colors or don't deal well with motion?

Dark mode, while trendy, is also a potential accessibility help for people that find bright computer screens painful or straining to look at. A good dark mode can be a good look alternative to something like inverted colors (a feature on macOS) or force colors (a feature in Edge and on Windows, that forces all your colors to a specified palette, commonly with light text on a black background).

To test and implement your dark mode, with "prefers-color-scheme: dark", you can switch your entire operating system to dark mode, dive deep into the browser dev tools (settings menu, more tools, rendering, scroll down, pick "dark" in the emulation dropdown) or in Polypane, you can pop open the options dropdown and click "dark" to switch to dark mode for a single pane, so it's easy to see it side-by-side with your light design.

Prefers reduced motion

Similarly, people with vestibular disorders can experience discomfort with movement on websites, like large animations and transitions. For them, the "prefers-reduced-motion: reduce" media query can be a solution. When that is set, it's important to tone down animations and transitions. You don't need to disable all animation (though that works, too) but try to make it less swoosh and more subtle fade. Similarly, if you have smooth scrolling turned on, that's a huge movement, so make sure "scroll-behaviour" is set to "auto", not to "smooth".

Testing this in Polypane is straightforward: open the options menu and switch the prefers-reduced-motion option to "reduce". Now you can test it on its own, or side by side with your regular website.

I hope this gives you a taste of the type of accessibility issues you can encounter, how to deal with them and the ways Polypane tries to make them easier to resolve. Polypane has a free trial that gets you running your first accessibility audit within 5 minutes of signing up.

This article was adapted from "How to Find & Fix Common Website Accessibility Issues", first posted on SitePoint.

Debug your visual hierarchy with the squint test

Fri, 11 Dec 2020 00:00:00 GMT

"The squint test" is a method to get a feel for the visual hierarchy of your page and the name is quite literally what you're supposed to do. When you squint your eyes and move away from your screen a little you distort your vision to the point where you can no longer focus on the page but can still make out the large areas and colors in your design. In other words, you only see the visual hierarchy.

When you're designing or building a website, it can be easy to focus in on the details. Is everything precisely aligned to the grid? Are you using the exact right font-size and colors? Is this the right border-radius? But when you focus on the details, the major hierarchy of your website can get away from you.

The squint test is a quick way to check if your page is still on the right track because it hides those details and lets you focus on the larger patterns in your page.

What to look for when doing the squint test 🕵️‍♀️

When you do the squint test there's a few question you're trying to answer:

Is the primary focus of the page clear?
Most pages have one primary focus. One thing they want users to do or one topic. When squinting, is the primary call to action or primary point of focus still recognizable, and is it clear what the primary focus is?

Are relationships between elements clear?
Most visual elements have some sort of relationship with others, like titles and text below it, or the header and the logo. When you squint, is it still clear that they belong together, or is the spacing causing elements to look separate?

Which elements stand out? (and should they stand out?)
Elements with tons of contrast or color stand out more than others. When you squint these elements gain more prominence compared to when you see them with "noisy" text around it. Are these elements the one you want to have stand out?

Another important step for this question is to distinguish between foreground elements and background elements. Are background element like dividers and backgrounds more prominent than the primary focus of the page?

Is the page still recognizable?
Can you still find the logo, are the colors used recognizable as your brand and consistent with the rest of your site?

If an element is interactive, is that still clear when squinting?
You don't want people to have to hunt for buttons and other interactive elements. When squinting, can you still detect whether a link is clickable? If you're just using an underline that might get lost when blurring, but if you also have a different color then it's still clear.

Are elements that look the same when squint actually related?
A common usability concept is "things that look the same are the same". And when they're not that leads to confusion. Are the elements on the page that look the same, also similar in behavior? If not, you might want to make sure they look different too.

The squint test ...without squinting 👀

If you keep squinting while checking your design for all those points you'll end up with quite a headache.

Polypane has two debug tools that can help you do the same tests, no squinting required.

Far-sightedness emulation

The Far-sightedness emulation blurs the page you're looking at to emulate what people with far-sightedness see.

When you squint your eyes you also can't bring the page in focus making this an ideal substitute for the squint test without needing to physically squint.

Turn on the emulation and scroll through your site, taking note of the questions above and seeing where improvements can be made.

Placeholdifier debug tool

But even a blurred page can give you physical discomfort when looking at it for too long, since your eyes will keep trying to get the page into focus.

With the Placeholdifier debug tool every element stays sharp but text and images become solid blocks of color. With this you take away the focus on the actual words and imagery and are left with the general layout and hierarchy.

Run them side by side

With Polypane, you can also show these two debug tools side by side. Because each highlights some issue more than the other, checking a page in both at the same time lets you see the entire overview in one go.

Try it yourself 🤩

Test out these debug tools, and over 25 others (like color blindness simulators, dyslexia emulation and layout debugging) in Polypane by starting a free 14 day trial. Polypane is available on Mac, Windows and Linux.

How Sergio Mattei made the next Makerlog 6x faster with Polypane

Tue, 01 Dec 2020 00:00:00 GMT

Sergio is the creator of Makerlog, a web app that lets Makers log their progress [including me - Kilian] and he is building the next version using Polypane. We interviewed him about his challenges and how Polypane helps him.

Can you tell us about yourself and Makerlog?

Hi folks! I’m Sergio Mattei, maker of Makerlog. Makerlog is a community of over 6,000 software developers learning, building, and growing publicly, together. On our site, you share your daily tasks & earn a streak (count of consecutive days building your product). It’s a fantastic model for accountability & community support: with Makerlog, you’ll never feel alone in your journey.

You're working on a new version of Makerlog. What can users expect from it?

Makerlog’s new version is over six times faster & lighter. It finally brings mobile support, a refreshed design, and a UX that gets out of the way and lets you be more productive with us.

What challenges did you have building this version?

The biggest challenge was certainly refactoring the entire codebase. This was, in essence, a total rewrite of the frontend. Now, I’d usually frown upon a rewrite, but this time it was necessary: it wasn’t delivering a level of reliability & performance you’d expect from a solid community product.

How have you been using Polypane?

Polypane has been with me since the day I started the redesign. From the moment I decided to build mobile-first, Polypane has been an essential tool in my maker arsenal. It helps me perfect every detail: from multiple screen sizes to even SEO optimization with the integrated meta tags analysis. It’s, simply put, the essential toolkit to build products users will love.

What results did you see when using Polypane to build the next version of Makerlog?

I’ve seen shorter dev time, increased mobile usage, and much better SEO & performance rates. Users are happier & less bugs are being reported than ever before.

What's next for you?

Makerlog’s future is very bright! We’re launching the new beta to the public in late December, with a relaunch across many platforms. We’re bringing tons of features to help makers learn, build, and grow together.

It’s the maker’s heyday again. It’s time to get all hands on deck and ship that sh*t, together.

Thank you Sergio for this interview! Sergio can be found on Twitter as @matteing and on Makerlog as Sergio. Join Sergio, me and 6000 others on the Makerlog community at getmakerlog.com.

Creating websites with prefers-reduced-data

Fri, 27 Nov 2020 00:00:00 GMT

Even though more and more people get access to the internet every day, not all of them have fast gigabit connections or unlimited data. Using the media query prefers-reduced-data we can keep our sites accessible to everyone. This media query is part of a set of upcoming media queries designed specifically to support different user preferences and their environments.

Note: Though no browser supports prefers-reduced-data yet, you can emulate the media query in Polypane and, when you enable the right flag, in Chromium.

prefers-reduced-data indicates users want to use as little data as possible. We'll go over why that's important, what support looks like today, the available alternatives, strategies for implementing prefers-reduced-data in your website and what you can do to actually save data.

Watch as video

Kilian presented an abridged version of this article at Shortstack Conference. You can watch the video below, or read on for the full article.

Why reduce data?

The average size for web pages is slowly climbing: pages are getting bigger and bigger with the average size of a desktop page now being over 2MB, and the average size of a mobile page not being far behind at 1.9MB. It doesn't look like this trend is slowing down, the average page size grew by about 40% in the last year along. (source: HTTParchive)

While a 2MB page size might not be such an issue for people on a home network with a gigabit connection, every day more and more people gain access the internet, often with significantly slower connections.

So while the country I'm from, The Netherlands, sits at #12 word wide with an average (mobile) speed of 100Mbps, a country like India sits all the way down at #128 with an average speed or 15Mbps. India has the second highest number of internet users in the world (behind China), yet only 54% of Indians currently have access to the internet. (sources: Speedtest, Wikipedia) That number is growing by 9% every year though. Similar growth is happening in many parts of the world.

In other words: More and more people are gaining access to the internet world wide, yet their internet speed is incomparable to what we are used to in the west.

And then there's also data caps.

Most mobile internet subscriptions come with a data cap, after which access to the internet is cut off, or speed is severely reduced. At 2MB per website, if someone has a 1GB data cap that's 500 web pages, or just 16 pages per day. (Of average size. If someone scrolls through Facebook or Twitter, that data will last them a lot shorter)

Just for fun, check out much tabs you currently have open. With just those, are you over your daily budget of 16? (If so, close some! If you were meant to read them, they'll find their way back.)

Reducing your web pages' size helps with both load time for people with slower internet connections and them having access to your pages in the first place.

A fun anecdote in this vein is how, many years ago, the Youtube team decided to optimize their video pages. It took a long time and a lot of work and at the end they were horrified to find out that the average load time of pages had gone up.
All that work for nothing! Turns out now that their pages were now optimized they had actually become usable for a new group of people: those with slower connections. The average load time went up because an entirely new group of users had access to videos for the first time.

Browser support

There is none.

Now wait, before you close the tab... Support is coming and, in Polypane and other Chromium browsers (provided you set the right flag, see the testing section) you can already emulate the media query so you can future-proof your web pages.

Reduced data for users

Without browser support, how can users opt in to reduced data? There is another way users can currently already send a preference for reduced data to servers, using the "Save-Data" header. This is build in on Mobile Chromium versions (on Android), and is available in various browsers with browser extensions.

The Save-Data: on header

Note: In Polypane, use the Custom headers to add the "Save-Data: on" header and test with it.

The Save-Data header is a Request Header, something the browser sends to the server. The server can then decide to send a different response (like a smaller image). Unfortunately this is something front-end developers usually don't have much say in. Luckily you can also detect if it's on using JavaScript:

if ('connection' in navigator) {
  if (navigator.connection.saveData === true) {
    // prevent loading resources and other data saving measures
  }
}

This "connection" api is available in Chromium browsers and behind a flag in Firefox. In addition to checking if saveData is turned on, you can also get the effective internet speed of a connection. You can combine those together to check if a person either has saveData on, or is on a slow connection in general:

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || {};

if (connection.saveData || ['slow-2g', '2g', '3g'].includes(connection.effectiveType)) {
  // prevent loading resources and other data saving measures
}

On the one hand having this as a header makes it much more powerful, since you can send entirely different responses from the server. Unfortunately having this as a header also means that it's much less flexible and requires a lot of coordination between front-end development, backend developement and server management.

Strategies for implementing `prefers-reduced-data`

Using a media query on the other hand, is something front-end developers are familiar with and know how to use.

The prefers-reduced-data media query has two possible values:

no-preference
reduce

Like prefers-reduced-motion, it's good to think of the prefers-reduced-data: reduce option as the default option: people get the lean, fast experience, and only when they indicate no-preference, we send them more data. That way, ~~older~~ browser that don't support the media query get the lean experience by default.

You might not yet want to do this for new websites until proper support lands. The alternative is to add strategic use of prefers-reduced-data: reduce and prefers-reduced-data: no-preference around your CSS, something we'll go into detail on in the next section.

What to use `prefers-reduced-data` for

So now that we have some strategies for implementing prefers-reduced-data, lets go over what to use it for specifically.

Conditionally load fonts

Though every web developers likes using custom fonts we're also aware of, and often okay with, using alternative fonts. In fact, this is baked into CSS with the concept of "font stacks" and it's specifically this feature we can use to our advantage when conditionally loading fonts:

@media (prefers-reduced-data: no-preference) {
  @font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url('Inter-roman.var.woff2') format('woff2');
  }
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

In this bit of code, we specify a font-stack that uses system fonts as a fallback, and only load our preferred font (Inter) when prefers-reduced-data is set to no-preference. If Inter is not available, it will automatically use the next available font instead.

If you still want to show your preferred font to older browsers, you can add the media query block around your body CSS declaration instead:

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url('Inter-roman.var.woff2') format('woff2');
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

@media (prefers-reduced-data: reduce) {
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,
      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  }
}

This has some code duplication, but because web fonts are loaded only when they are used in the page and not when they're declared in the CSS, this will still prevent loading the font files.

Alternative or no background images

A quick win is to use different or no background images for your CSS. Even with modern image formats like WebP and AVIF images often are still a significant portion of a web page's payload.

/* Serve a smaller image by default */

body {
  background-image: url(/images/small-fast-image.webp);
}

/* But replace it with a large image when applicable */

@media (prefers-reduced-data: no-preference) {
  body {
    background-image: url(/image/large-pretty-image.png);
  }
}

Or maybe you can do away with the image entirely and only use it to enhance your page:

/* use a solid background color by default */

body {
  background: #353546; /* A nice dark blue */
}

/* Overlay it with a textured version */

@media (prefers-reduced-data: no-preference) {
  body {
    background-image: url(/image/nice-texture.png);
  }
}

Instead of a solid color, you could also use gradients to approximate the image to get the same feel. Experiment with it!

Load smaller images in the page

The picture element can be used to serve different images dependent on a media query, and we can also use the prefers-reduced-data media query to send a smaller image rather than a full size or 2x retina size image. Either by setting a media feature on a source like so:

<picture>
  <source srcset="small.jpg" media="(prefers-reduced-data: reduce)" />
  <img src="full-size.jpg" alt="My image" srcset="full-size2x.jpg 2x" />
</picture>

Or by adding it in a sizes attribute, for example like this:

<picture>
  <source
    srcset="/small.jpg 200w,
            /full-size.jpg 400w"
    sizes="(prefers-reduced-data: reduce) 200px,
           (min-width: 400px) 400px,
           200px" />
  <img src="full-size.jpg" alt="My image" />
</picture>

Prevent preloading or autoplaying videos with JavaScript

Videos can have a significant impact on a page's full size (trust me, I have a video on the homepage) and there's two things you'll want to prevent when someone prefers reduced data: you don't want it to auto play (because that will trigger a download) and you also don't want to tell the browser to preload it.

Preloading videos makes starting them much faster which is a great experience for your visitors, but if they prefer reduced data and you preload images, you're potentially wasting their bandwidth on a video they might not watch.

to prevent autoplaying and preloading videos, we need to use the window.matchMedia JavaScript function:

const video = document.createElement('video');
const canAutoPlayAndPreload = window.matchMedia('(prefers-reduced-data: no-preference)').matches;

video.setAttribute('autoplay', canAutoPlayAndPreload);
video.setAttribute('preload', canAutoPlayAndPreload);

This will test the media query on page load and set the right values for the attributes on your video element. For more on window.matchMedia, read Using media queries in JavaScript.

Unfortunately, since browser support for prefers-reduced-data is non-existent, this will prevent preloading for all visitors. For now, it makes more sense to default to the 'happy path' of preloading and autoplaying if there is no support for prefers-reduced-data. To test for that, we have a tricky media query we can use:

const supportsPrefersReducedData = window.matchMedia('not all and (prefers-reduced-data), (prefers-reduced-data)')
  .matches;

Essentially what this says is "evaluate to true when prefers-reduced-data does not match, or when it does match". The comma in a media query acts as an OR. So it will be true if prefers-reduced-data is supported, regardless of the value. But if a browser finds a media query it doesnt understand, it will evaluate it to false.

So with this, we can check if there is support in the first place and use that to autoplay and preload either when:

There is no support.
There is support and the user has no preference.

That looks like this:

const video = document.createElement('video');

const supportsPrefersReducedData = window.matchMedia('not all and (prefers-reduced-data), (prefers-reduced-data)')
  .matches;

const noPreference = window.matchMedia('(prefers-reduced-data: no-preference)').matches;

const canAutoPlayAndPreload = !supportsPrefersReducedData || (supportsPrefersReducedData && noPreference);

video.setAttribute('autoplay', canAutoPlayAndPreload);
video.setAttribute('preload', canAutoPlayAndPreload);

You can improve on this even further by also taking the "Save-Data" header I mentioned earlier into account:

const video = document.createElement('video');
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || {};

// default to save data being on
const saveData = connection.saveData || true;
const slowConnection = ['slow-2g', '2g', '3g'].includes(connection.effectiveType);

const supportsPrefersReducedData = window.matchMedia('not all and (prefers-reduced-data), (prefers-reduced-data)')
  .matches;

const noPreference = window.matchMedia('(prefers-reduced-data: no-preference)').matches;

const canAutoPlayAndPreload =
  !supportsPrefersReducedData || (supportsPrefersReducedData && noPreference) || !saveData || slowConnection;

video.setAttribute('autoplay', canAutoPlayAndPreload);
video.setAttribute('preload', canAutoPlayAndPreload);

Don't auto-load more data on infinitely scrolling pages

Lastly, when users have prefers-reduced-data: reduce on it's advisable to prevent loading in more data without explicit consent from the user.

If you have an infinitely scrolling page that loads in more data, like Twitter, Facebook or Reddit, consider instead adding a "Load more" button when you detect the user prefers reduced data. The implementation of this is going to depend on your own code, but could look something like this:

const button = document.querySelector(".loadmore-button");
const list = document.querySelector(".my-list");

const showButton = window.matchMedia(
    '(prefers-reduced-data: reduce)'
  ).matches;

if (showButton) {
  list.appendChild(button);
  button.addEventListener("click", loadMoreData)
} else {
  list.addEventListener("scroll", function () {
    const shouldLoadData = /* code that checks the scroll position */;
    if (shouldLoadData) {
      loadMoreData()
    }
  });
}

function loadMoreData() {
  // fetch data, show it.
}

Testing with Polypane and Chromium

As you start to implement this media query you'll want to check if your site still looks and behaves like you expect it to. A nice way to test it is to keep two screens side by side so you can compare the differences between the normal view and the reduced data view.

Since there is no browser implementation yet, you can't turn it on with an OS setting (like you can for dark mode). However, you can emulate support for the media query in Polypane and in Chromium.

Prefers reduced motion emulation in Chromium

Turning reduced data emulation on in Chromium is done through the rendering pane, but you'll have to enable the emulation feature before it's visible.

First, you'll want to go to chrome://flags in your browsers.

Search for #enable-experimental-web-platform-features and enable it.

Restart Chromium.

Open your devtools and click the three dots ("kebab" menu) in the top right. Then go to "more tools" and select "Rendering".

In the newly opened Rendering pane you'll see a whole bunch of checkmarks, scroll past them all the way to the bottom.

There is a dropdown with the title "Emulate CSS media feature prefers-reduced-data", that you can set from "No emulation" to "prefers-reduced-data: reduce".

The pane is now in reduced data mode and you can begin testing.

Prefers reduced motion emulation in Polypane

Turning reduced data emulation on in Polypane is done through the emulation settings of a pane.

Go to the Emulate settings of that pane, and click the toggle for "prefers-reduced-data".

The pane is now in reduced data mode and you can begin testing.

In the wild

I haven't seen prefers-reduced-data in the wild yet which is unsurprising given how browsers do not support it yet.

I'll be adding some of the techniques I showed in this article to the Polypane website in the next few weeks.

If you decide to implement reduced data on your site, let me know and we'll see if we can make a list of sites experimenting with this feature!

Polypane 4: Unified Console, DOM tree in elements panel

Mon, 09 Nov 2020 00:00:00 GMT

A new unified Polypane console, a treeview in the elements panel, prefers-reduced-data and locale emulation, docked devtools for isolated panes, new and updated social media previews and debug tools, Chromium 87 and over 60 new features, improvements and fixes.

Polypane is the browser for developing responsive, fast & accessible websites. It has powerful devtools, multiple synced viewports, over 25 debug tools, device emulation, built-in live-reloading and much more. More about Polypane.

Unified console

Polypane now comes with a single place that shows the console messages from all panes. Messages are automatically deduplicated, color-coded and you can easily see which panes emitted which messages. You can log strings, arrays, objects, elements and even DOM objects (like window), we support log, info, debug, table, warn, error and dir and you can easily filter messages by type or by text.

But the Polypane console doesn't just show console messages. It's a fully functioning console that lets you send console commands to all panes at the same time.

There's syntax highlighting as you type, multiline commands, it remembers previous commands (easily go back to them using the arrow keys) and a whole host of convenience utilities: $0 through $4 are the last five elements selected in the Polypane elements panel, $() maps to querySelector while $$() is the same as querySelectorAll, $_ is the output of the previous command etc. Check the console panel documentation for the full list.

We've been using it ourselves for a while and it really changes how you work with multiple panes. The console works just like you expect it to and getting feedback across all panes for a single command really cuts back on debugging time.

DOM Tree in Element inspector

The unified element inspector in Polypane lets you easily inspect and edit elements across all panes. Since launching it April of this year we've made some big improvements to it and in Polypane 4 we're making another leap.

A lot of you have been asking for a DOM tree view of the document, and after creating the view-source panel in our previous release, we went one step beyond and built the tree view for the Polypane element inspector as well.

The new tree view gives you a great overview of your page, from the doctype to the most deeply nested elements, and makes it easier than ever to switch between elements.

It's still really easy to select child element and text nodes and edit them, and we've redesigned the bottom-aligned element inspector to make better use of the space.

Docked devtools in isolate pane mode

We're also continuing to make improvements to our isolate pane mode, which gives you access to device and media query emulation.

Devtools for isolated panes are now docked automatically in the Panel where you can easily access them and switch between them. If you prefer them undocked, that option is still available too.

Updates to the devtools extension manager

From the devtools panel you can also easily open the browser extension manager where you can install your favorite developer tool extensions like the React.js or Vue.js devtools. Updated in this version of Polypane, we show the icon and version number of each extension.

New emulation options: prefers-reduced-data, orientation and locale

We redesigned the emulation panel to make changing and experimenting with different emulation options easier. Because prefers-color-scheme is removing the no-preference option, all our media feature settings can be toggles, making it easy to see at a glance which option is on and which is not.

prefers-reduced-data

The prefers-reduced-data media feature is currently trialing in Chromium 87 and can be used to serve up lighter versions of backgrounds, fonts and other elements loaded through CSS (or not loaded because of CSS, like with hidden elements) to preserve data for people that are on slow connections or have data caps.

We think this feature can have a big impact on websites and are excited to make testing it as easy as clicking a single toggle.

Orientation

Polypane now automatically sends orientation change events when you rotate a pane. If your app depends on these JS events, you can now very easily test them inside Polypane.

This is different from the CSS orientation media feature, which has always worked in Polpane. This feature adds the JS events and matching window.screenOrientation values.

Locale

Locale lets you request pages with any locale other than your default locale, and this influences for example the Intl api.

We've preloaded all the locales we know (and quite a few we don't know) so selecting the one you want to test with, whether that's en-US, nl-NL or az-Cyrl-AZ is easy.

Redesigned "getting started" page

Polypane is a tool with a lot of features and a lot of depth, and we haven't been doing the best job in explaining the basics. With our redesigned "getting started" page this changes.

We gave it a fresh new design with support for both both light and dark modes, It has two dozen new tips, the latest news, easy links to documentation, blogs and support and will tell you when there's a new version of Polypane available.

It also gives you a checklist of seven things to get familiar with as your first use Polypane. As you use Polypane, these items will automatically be checked and if you need help, there's explanations on how to do each of the things with links to documentation.

We hope this helps people get familiar with managing panes in Polypane as fast as possible, so they can explore all the features Polypane has to offer.

Overlays are now Debug tools, and new Disable CSS Debug tool

We've renamed the "Overlays" to Debug tools to make them easier to understand and find and along with it, have updated the icon to something less abstract.

We've also added a new ~~Overl~~... Debug tool, "Disable CSS". As you can probably guess, this disables all CSS on a page, both linked stylesheets and style attributes, giving you the raw HTML styling.

Since the beginning of 2020 Polypane has offered pixel perfect and up-to-date social media previews, updating them whenever the site designs changes. This takes a lot of research to make sure we use the same rendering logic and fallback values as the each service. It's a lot of effort but we feel it's worth it to be sure of how the elements render. If you can't depend on a preview you still have to check the real thing, wasting your time.

So we keep track of changes. The first time this happened was back in January, two weeks after we launched out previews, when Google SERPs changed from the green breadcrumb under the title to a grey breadcrumb above the title.

If your current web development tool still renders SERPS like this:

Instead of like this:

Then they're at least 10 months out of date.

As for Polypane, it definitely wasn't the preview we expected to have to change first, but we swiftly updated even as their experiment was still running.

LinkedIn update

This month LinkedIn launched their new design, updating the colors, margins, amount of text they display and adding a "X min read" indicator.

We've updated our LinkedIn design so you can be sure that if it renders the way you want in Polypane, it renders the way you want on LinkedIn.

Telegram (web)

We got many requests to add Telegram so we reverse-engineered their previews and made an identical copy in Polypane. Telegram's previews work similar to those of Slack and Discord, but they impose more limits on the description length (if you follow Polypane's meta info suggestions you'll be fine!) and have smaller image previews.

New ruler options

Fluid columns and grids can now be given a maximum width so you can easily copy over the grid system a designer made in Sketch, Figma or XD and overlay it on your site as you work.

Additionally, you can now toggle the visibility of guides, grids, columns and rows without removing their settings so they're easier to use and you don't have to re-apply them every time you want to use them.

Chromium 87

Polypane now runs Chromium 87, slightly ahead of the official Chromium release. Chromium 87 brings a host of improvements to Polypane (like the prefers-reduced-data emulation and sameSite support for cookies among other things) and has some nice performance improvements as well. This is a bit of an experiment for us so we're keen to hear your input. Let us know if you like Polypane being a little ahead of the official Chrome!

Improved support for Linux systems

Previous versions of Polypane used native code for some functionality but starting with Polypane 4 we have no native code anymore. This means that Polypane will run on far more versions of Linux. If you had trouble running Polypane in the past, or you're running Polypane in a VM, then this release will let you run it natively.

Other updates

With over 60 changes in total this announcement is long enough. As always all the documentation has been updated for the new release, and you can find the full changelog below.

Some other updates I wanted to highlight:

We added new presets for iPhone 12.
A whole bunch of UI tweaks like a new layout for the bottom-aligned meta panel.
Performance improvements around CRA and Webpack sites with lots of injected CSS.
Scrolling performance and hover syncing improvements.
And a number of bug fixes around pane size handling and custom homepages.

It's a big release, we hope you like it.

Getting Polypane 4

If you don't have Polypane yet there is a free 14 day trial available. Get it here.

Full Changelog

New Polypane unified console panel
New Element inspector now has a tree view
New Docked devtools for isolate pane mode
New Disable CSS debug tool
New Telegram (web) meta preview
New Prefers-reduced-data emulation
New Locale emulation
New Support for screen orientation events
New Redesigned getting started page
New Redesigned emulation options popover
New Chromium 87
New iPhone 12 presets
New Tabs scroll into view when added
New Support for setting the sameSite value for cookies
New Right-click new tab button to choose layout and set default layout
New Right-click between panes to add new pane there
New Tabs are colored by favicon
New Meta panel is colored by favicon
Improved Overlays are now called "Debug tools" and has a new icon
Improved "Simplified breakpoints" now uses mobile-first logic
Improved Linkedin Card redesign
Improved Column and Row overlays now support max size
Improved Ruler overlays can now be turned off individually
Improved Scroll sync performance for pages with many links is improved
Improved New Element inspector horizontal view layout
Improved New Meta panel horizontal view layout
Improved New Storage panel horizontal view layout
Improved Meta name and properties are now cast to lowercase for consistency
Improved Elements panel strips whitespace for the class attribute
Improved Box model rendering in dark mode now has appropriate colors
Improved Updated Google Fonts to latest available fonts and variable fonts
Improved Sync hover styles for uncomputed shorthand styles
Improved Devtools manager shows icon and version of extension
Improved Hide the scrollbar when the pane area is not focused
Improved Naming consistency in main menu improved
Improved Reload menu now shows shortcuts
Improved Update iOS and Device lab workspace presets
Improved CSS Frameworks workspace presets now get calculated height
Improved Favicon testing is now more efficient
Improved Collapse box model now has a chevron icon
Improved Overflow detection now re-runs on pane resize
Improved Accessibility panel upgraded to axe-core 4.0.2
Improved Accessibility panel HTML code is syntax highlighted
Improved Store last used inspect element type in isolate pane mode
Improved individual pane zoom can now go up to 2
Improved Always show pane emulation options for discoverability
Improved Panel rendering performance
Improved Tab out of filled-in css rule in elements panel to apply it
Fix Polypane becoming very slow with invalid HTML
Fix New panes in horizontal and vertical layout are now consistently sized
Fix Disable discretionary ligatures in Slack and Discord previews
Fix iPhone 11 viewport size
Fix Remove ligatures in Accessibility panel code examples
Fix Remove newlines in Accessibility panel code examples
Fix There is no longer uneditable CSS in devtools
Fix Issue where Live CSS wasn't applied to isolate panes on app launch
Fix Prevent dragging app on mac when trying to select text
Fix Meta data refresh no longer triggers an Accessibility test
Fix Bug where pane presets overwrote default workspaces
Fix Address bar now also gets focused when user has a custom homepage
Fix Prevent Debug tools and Emulation popovers from overflowing the viewport
Fix Prevent pane icons clipping popovers
Fix Prevent tabs overwriting each other when a user has a custom homepage
Fix Issue where clicking the ruler options scrolled the pane area
Fix Search params are correctly restored on url load
Fix Alignment of copy icon for element.style
Fix Replace Sharp with Jimp for cross-platform compatibility

4.0.1 changelog

4.0.1 fixes a number of performance issues and bugs, as well as improvements for the elements, console and outline panel

New Link overview in Outline panel
New Header overview in Outline panel
New Landmark overview in Outline panel
New cmd/ctrl + shift + l shortcut to open side browser and focus its address bar
New Tailwind CSS 2.0 2xl breakpoint added to workspace
Improved Element panel style values now grow to fit content
Improved Element panel support color picker for custom properties and other color-like properties
Improved Toggle between viewport size and device size is now more explicit
Improved Treeview performance for long pages increased by order of magnitude
Improved Synced hover styles no longer show up in elements panel and treeview
Improved Better combining of similar Console messages
Improved Meta panel supports HTML4 style of charset
Improved Mac UI alignment fixes
Improved Now correctly syncs clicks on elements that get removed from the DOM as a result of the click
Improved Support trailing ; when adding new styles.
Fix External CSS Files that give a 404 are no longer loaded
Fix Element panel no longer changes 'px' to 'x' when using arrow keys
Fix Issue with auto updating failing due to double download
Fix Getting started page no longer shows overlapping tips
Fix Breakpoints quickswitcher in focus mode now works again
Fix Mac users can now drag Polypane with devtools open
Fix Docked devtools in isolate pane mode now accept mouse input

4.0.2 changelog

4.0.2 adds automated link checking, fixes a number of interaction bugs and improves rendering speed.

New Link overview now checks for broken links and links with issues.
New Live onboarding chat support + live chat support through help menu
New Middle click on history items or address bar suggestions to open them in a new tab.
New Live reload indicators are now also visible on tabs
Improvement Page load times improved by smarter loading of Polypane debug styles.
Improvement Slack card rendering now supports labels and article published time
Improvement Reference image now retina-screen aware, so no longer resizes panes on Mac (Thanks Yahya!)
Improvement Polypane is now smarter about focusing the address bar, only focusses it when manually adding a new tab.
Improvement Easier selection of elements in the element panel (Thanks Alex!)
Improvement Element tooltip now shows accessible name and role when available
Improvement Element inspector now prevent clicks on underlying elements
Improvement More CSS Custom properties now have color pickers
Improvement Outline panel now defaults to headers overview
Improvement Outline panel header is now always visible.
Improvement Dark theme refinements
Improvement Polypane scrollbar now adapts to dark theme
Improvement Speed improvement for SCSS in Live CSS panel
Improvement Keyboard syncing now more reliable (Thanks Alex!)
Improvement More resilient handling of (potentially broken) external stylesheets
Improvement Telegram Web image sizing more accurate
Improvement Minimum pane size updates from 100x100 to 50x50 (Thanks Joel!)
Fix Issue where element highlighting wasn't visible for partically covered elements (Thanks Lori!)
Fix Text in element tooltip now always left-aligned.
Fix Opening new tabs in Isolate pane mode no longer also opens a popup window
Fix Right-click on history items no longer opens new tab
Fix Tab bar had a focus ring
Fix Parent styles being removed after hover
Fix Switching between panel tabs lost which inner tab was focused
Fix Issue where the address bar was spell-checked

4.0.3 changelog

4.0.3 adds Big sur and M1 support for Polypane and many performance improvements.

New Universal Mac binary
New Big Sur style icon for Mac (Thank you many people!)
New View source is now automatically formatted by Prettier
New Unneeded Scrollbar emulation debug tool
New File menu added for Mac users (Thanks John!)
Improvement Retina support for rulers
Improvement Slack preview uses the correct favicon
Improvement Support for all discrete facebook widths
Improvement Handoff/Browse panel renamed to just Browse
Improvement Updated Google fonts database
Improvement Load performance improvements for sites with stylesheets with 30K+ CSS selectors like Tailwind 2 dev version (Thanks Bjoern and Vivian!)
Improvement Performance improvements for side panel
Improvement Linux Icon sizes update
Improvement Devtools button now opens devtools for first pane in Isolate pane mode
Improvement Better CSS Breakpoint detection in 3rd party stylesheets
Improvement Live Chat support available during signup flow as well
Fix Wobbly reload icon on Mac
Fix Closing panel through close button always hide devtools too
Fix Browser layout resizing issue in isolate pane mode
Fix Warning on re-opening the window on Mac
Fix Live CSS panel not clearing style when removing SCSS
Fix Devtools inner panel resizing issue (Thanks Alex!)
Fix Prevent double load for Outline panel
Fix Prevent double load for Element panel
Fix Prevent new tabs from being opened when opening a new url from suggestions with arrow keys
Fix Guides were off by one

Polypane demo with Shawn @swyx Wang

Fri, 16 Oct 2020 00:00:00 GMT

Last Tuesday together with Shawn @swyx Wang we held a livestream to give a tour of Polypane. We used Shawn's website to go through most of the features Polypane has to offer and shared thoughts on modern web development and browsers. Watch the entire live stream here:

How to find the cause of horizontal scrollbars

Thu, 08 Oct 2020 00:00:00 GMT

One of the most time consuming issues when it comes to web development is debugging horizontal scrollbars.

They're easy to overlook while developing (especially on macs) and if users scrolls horizontally, your layout will look broken to them.

On top of that it's hard to determine which element is causing the overflow.

What causes horizontal scrollbars?

There area few common causes for horizontal scrollbars and overflows:

Setting the width of the body to `100vw`

The viewport width unit (vw) is a useful way to make things a certain percentage of the screen wide.

When you use 100vw however, you make something the full width of the viewport and this includes the width of scrollbars. So the end result is that your page is slightly wider than the available width (which is the full width of the viewport without the scrollbars).

In short: if you use width: 100vw on a page that has a vertical scrollbar you end up with a horizontal overflow.

The easy fix is to use width: 100% instead. Percentages don't include the width of the scrollbar, so will automatically fit.

If you can't do that, or you're setting the width on another element, add overflow-x: hidden or overflow: hidden to the surrounding element to prevent the scrollbar.

Fixed width elements

An image or element might have a width of 500px in your desktop layout. When you hardcode that in your CSS, it's going to cause a scrollbar on mobile screens that are only 375 pixels wide.

That might sound overly simple, but it's often the cause of overflow issues. Particularly when images are added through a CMS.

This happens more when you develop the desktop version first, so Mobile first design is a good prevention.

Not clipping off-screen elements or elements that are wider than the viewport

Some design elements might require you to place them outside of the viewport.

Like a menu that slides in the from the right or a wider-than-the-viewport-element with rounded corners to get a certain curve in your design like in this video:

The curve on that site extended past the viewport. Because it wasn't contained in an element with overflow: hidden, all of it was visible after you scrolled.

Finding horizontal scrolling issues

Now that we know some of the reasons overflow happens, lets look at how to find them.

Using the devtools

To find out which elements cause a horizontal scrollbar, you can use the devtools to delete elements one by one until the scrollbar disappears.

When that happens, press ctrl/cmd Z to undo the delete, and drill down into the element to figure out which of the child elements cause the horizontal scrollbar. That works in all browser devtools.

This is obviously very time consuming, so it helps to make all elements visible.

Adding outlines to all elements

By default, elements are "invisible". They're there and take up space, but unless they have a background or border you won't see where they are. So when you make all of them visible, it becomes easier to find the one causing an overflow. A common solution for this it to add outlines to all elements by adding the following style to your CSS:

* {
  outline: 1px solid red;
}

We're using outline here and not border, because outline does not affect the rest of the layout in a way that border does. Adding a border to all elements might cause a horizontal overflow where there wasn't one before.

Of course, editing your CSS file every time you need to debug something is also not very time efficient. Instead you can paste the following line into your console to add an outline to all elements.

$$("*").forEach(el => el.style.outline = "1px solid red");

To get rid of it you reload the page. Doing that also gets rid of any changes you made in the devtools to fix the overflow, so it's not ideal but it will work in any browser.

Polypane: Adding outlines with a shortcut

Polypane has this outline built-in under a handy shortcut: cmd/ctrl + d.

When activated Polypane draws boxes around all elements in all panes. It also uses a different color per element to keep them apart, something that would be a lot of work to do in your own CSS:

While you can now clearly see which elements are overflowing the page, you still have to hunt down their 1px outlines to find them.

Polypane: Highlighting overflowing elements

When Polypane detects a pane that has a horizontal scrollbar, it automatically highlights elements that cause the overflow. See this video for an example.

With this feature you won't have to hunt around for them any longer. All overflowing elements are visually highlighted so you don't have to spend time hunting them down any longer.

With the shared elements editor you quickly verify that the changes you made fix the overflow in all panes.

Polypane: Detecting horizontal overflows automatically

In Polypane, any pane that has a horizonal overflow or contains a layout that uses 100vw for the width is highlighted with a horizontal overflow icon that tells you which issue it found.

Clicking the icon will help you detect the overflow causing elements by highlighting them in red, or show you which layout element has 100vw applied.

With Polypane, debugging horizontal layout issues goes from diving into the devtools to delete elements one by one to your browser telling you there's an issue and giving you the solution by clicking a single button.

Start a trial and try Polypane for yourself.

Beautiful CSS 3D Transform Examples

Mon, 05 Oct 2020 00:00:00 GMT

3D transforms and perspective can be a great trick to add depth and texture to any website but they're tricky to get right. They can easily look skewed, too flat or distorted if you don't use a fitting perspective or go overboard on the angles.

Still, there are sites out there that make excellent use of 3D transforms to make their pages more vibrant and visually interesting. For example, here's Modulz:

3D Transform by Modulz

shadow

div {
  transform:
    perspective(75em)
    rotateX(18deg);
  box-shadow:
    rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
    rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
  border-radius: 10px;
  border: 1px solid;
  border-color:
    rgb(213, 220, 226)
    rgb(213, 220, 226)
    rgb(184, 194, 204);
}

Codepen

Visit the full list

We've been collecting these in a new resource: Beautiful CSS 3D Transform examples. We've taken examples from Framer, MagicPattern, Polypane and other websites, simplified them and placed them side-by-side with their CSS.

Each example comes with a Copy CSS button that lets you easily copy over the CSS that creates the 3D effect. These examples are great startingpoints for you to create your own beautiful CSS 3D transforms and when you do, reach out and we'll add them to the list!

Beautiful CSS 3D Transform examples

Polypane 3.3: Grids and guides, horizontal overflow detection and updated UI

Mon, 31 Aug 2020 00:00:00 GMT

Add grids and guides to your site, detect which elements cause horizontal overflows, new overlays, a refreshed UI and noticable performance improvements. with over 50 changes there's quite a lot to find in the new Polypane 3.3!

Grids and guides

Polypane 3.3 comes with a new set of tools to make measuring, aligning elements and adhering to a grid system easy and quick.

With rulers and guides it's easier than ever to make sure your elements are aligned. With the grid, columns and rows feature you can make sure your website follows your grid system, matches the columns in a design and has the right vertical rhythm.

Horizontal overflow detection

Going through the devtools deleting element one by one just to find which element is causing a horizontal overflow?

Polypane 3.3 radically improves the debugging experience for one of the most annoying front-end bugs there is.

Finding elements that cause a horizontal overflow is now as easy as turning debugging on in Polypane. Any element that causes a horizontal scrollbar is automatically colored red.

As simple as that.

No more searching, scrolling or deleting elements one-by-one in the devtools. Just check which elements are red and fixing those.

Reachability overlay

A small new overlay that we've added is the reachability overlay. It shows how easy parts of the screen are to reach when people hold a phone in their hand.

As a lefty, I made sure there's also a left-handed version!

Element inspector improvements

Since introducing the Polypane element inspector in 3.1, it's steadily become more advanced and more capable. It's a unified inspect element that inspects and edits elements in all panes at the same time. Whether it's styling, content or attributes, there's no faster way to get info about your elements and edit them.

In 3.3 we're making it much easier to use.

With a dedicated button in the header getting element info is just a click away. You can also press the familiar shift + ctrl + c shortcut or right-click on any element to inspect it in the panel.

When you're inspecting we'll show you a lot of interesting information in the tooltip. For example, Polypane displays the rendered font (not just the font-stack in the CSS) so you know for sure which font is being rendered. It will also highlight if an image has a missing alt attribute (among other attribute checks) and if an element has the right contrast. If that's all you wanted to do, just press esc.

When you've found an element you want to inspect, click it to show all the details in the elements panel, from where you can edit the text content, the styling and the attributes, as well as easily copy the complete style or quickly hide it.

It's still easy to get to the regular devtools as well, with the devtools button being still there, right-click also having a "inspect element in devtools" option and the new shortcut shift + alt + c opening devtools in inspect mode.

But we suspect you'll prefer using the Polypane panel: It's faster, easier to use and edits all panes at the same time.

UI updates

This version of Polypane will look familiar, but we've updated a lot of the UI to improve the rendering on different types of screens (1x, retina 2x and also in-between screens like window's 1.25x) and make Polypane easier to use and get started with.

With this update, we also took the opportunity to give Polypane users some more information on what's happening: Inactive buttons now have a clear X next to them, when the Live CSS feature is active we show a small indicator in the addressbar, and while screenshots are generating a notification informs you of this.

Live/auto reloading improvements

We now show notifications when you start or stop live or auto reloading, especially useful because Polypane will now automatically restart live reloading when you switch to a tab that has it configured. One less thing you need to worry about!

Performance improvements

We took a good look at everything happening in Polypane and made some significant performance improvements, both in the regular mode and in isolated pane mode. These will be most noticable when interacting with websites. Navigating between pages is now much smoother and will happen near-instant across all panes.

We also made performance improvements to our interaction synchronisation. We found some cases where Polypane did too much work so we simplified those. This has led to faster and more consistent synchronisation of clicks and scrolling across a wider variety of websites. Not bad!

Getting Polypane 3.3

If you don't have Polypane yet there is a free 14 day trial available. Get it here.

Full changelog

We managed to pack quite the long list of features and improvements into this release, check out the full changelog below. All new features are fully documented in our docs too.

New Rulers, guides, grid, column and row overlays for panes.
New Layout debugging overlay highlights elements that cause horizontal overflows.
New Reachability overlay to see how easy parts of the screen are to reach.
New Inspect element in the element panel is now available in the header and context menus, as well as the inspect element shortcut.
New Updated icons, font and design, speed of UI.
New Visible scrollbars in workspace for easier navigation.
New Updated user agent for better compatibility.
New Indicator in address bar when Live CSS is active.
New Live and autoreloading automatically pause and restart when switching tabs.
New Outline panel highlights and scroll to elements when hovered, and opens them in elements panel when clicked.
Improvement Faster and more precise interaction syncing.
Improvement Panes load new URLs faster and without visible refresh when navigating inside panes.
Improvement Show notification when live/auto reloading starts and stops.
Improvement Element panel can now increase any number in any value using arrow keys and modifier keys.
Improvement Element tooltip shows additional attributes (like role, alt, name and for) and highlight if they're required but missing.
Improvement Element tooltip now has a dark mode.
Improvement Elements panel supports custom CSS properties with multiple fallback values.
Improvement Address bar no longer automatically removes www. from domains.
Improvement Isolated panes are now more performant when loading and reloading.
Improvement Better support for CSS breakpoint detection in lazy loaded CSS.
Improvement Order of color blindness overlays is now consistent.
Improvement Active panes now have a blue topbar rather than a blue shadow.
Improvement Placeholdifier no longer uses external resources.
Improvement Pressing esc now clears focus from inside panes, closes all popovers and clears element selector.
Improvement Show notification while screenshot is being generated.
Improvement You can now turn on isolated panes directly from the devtools extension manager.
Improvement Update list of available Google Fonts.
Improvement New pane is no longer 100% high.
Improvement Restore scroll position in workspace when panes trigger a scroll event.
Improvement Bootstrap workspace updated to Bootstrap v5.
Improvement Update accessibility panel with latest version of Axe.
Improvement Global zoom now supports zooming out to 10%.
Improvement Updated Google SERP rendering.
Improvement Color contrast is now precise up to three digits everywhere it's used.
Improvement Color contrast overlay shows new ratio when showing preview of new color.
Improvement Active overlay is now listed in the Overlay tooltip.
Improvement Prevent overlays from crashing browser in certain situations.
Fix Filters are now viewport aware.
Fix Fix issue in color contrast overlay where new color with insufficient contrast was suggested.
Fix Viewport aware toggle in device selector no longer clears the device selector.
Fix Dark mode UI issue in Elements panel.
Fix Full overview screenshot no longer shows blank page in certain situations.
Fix Maximum height for panes in focus mode is now correct.
Fix Trial end reminder is now consistently shown during last week of trial.
Fix Console error indicator is now cleared after page load in isolated panes.
Fix Outline panel now escapes any HTML strings in headers.
Fix Cookie date field no longer hides delete button when panel is narrow.
Fix Cr24/CRX3 support for devtools extensions (react devtools was affected).
Fix Ctrl + scroll to zoom in and out now works again.
Fix Toggling touch events in isolated panes no longer prevents hover effects in the rest of the browser.
Fix Panes resized to device now consistently get the orientation indicated.
Fix Zoom to fit shortcut takes panel into account.
Fix Pane header now animates along with rest of pane during resizing.

Polypane 3.3.1

This is a bugfix release but it does contain some fun updates and features. Primarily, Polypane now has a view source panel, where you can quickly check the (live) source code of a site. This update also implements support for sites with hash based (#) routing.

Full changelog:

New HTML Source panel
New Hash based routing support
New Live CSS now supports all Google Variable font axes
Improvement Cookies are now handled better in normal mode
Improvement New shortcut cmd/ctrl alt i to open devtools
Improvement Google SERP layout updates
Improvement Overview screenshots now hides the pane icon bar
Improvement Update Google Fonts list
Improvement All popovers (like devtools extensions or live reload settings) now also close on esc
Improvement The elements panel now highlights css properties instead of the values
Improvement Scroll-behaviour is disabled in screenshots and when syncing scroll between panes
Improvement Polypane now parses CSS from other origins again
Improvement Click syncing now works better for checkboxes
Improvement Added "Start over" button during license request flow
Fix Elements panel is no longer opened on page load in Isolate pane mode
Fix Breakpoint names are no longer hidden in dropdown
Fix issue where you couldn't click on the address bar in some places
Fix Prevent live reloading from opening to many listeners
Fix Clear live reloading listeners on tab change more persistently
Fix Prevent reload loop in isolated panes on Windows

Polypane 3.3.2

Bugfix release.

Improvement Add support for more CSS functions like blur() and saturate() in the Elements panel
Improvement Now shows "untitled document" when title element is missing
Improvement Updated minimum dimensions of Polypane
Fix Prevent duplicating site CSS
Fix Prevent issue where Polypane showed print CSS
Fix Alignment issue for copy CSS rule button
Fix Loading indicator now stopf when title element is missing

How Earnworthy uses Polypane to audit landing pages and land 25% more customers

Mon, 17 Aug 2020 00:00:00 GMT

We interviewed Nicholas Scalice, the founder of Earnworthy and creator of the GrowthMarketer.co newsletter about how he uses Polypane to be able to provide quick landing page consultations while focusing on both desktop and mobile.

Can you introduce us to Earnworthy?

Earnworthy is a growth marketing consultancy that I founded in 2015. We're a small but mighty team of 5, and while we are technically based in Boca Raton, Florida, our work structure is fully remote. We specialize in one thing: Helping brands convert more of their website visitors into leads and customers using high-converting landing pages.

One of your services is a landing page audit. What does that process look like?

We do two types of landing page audits. First is a short, free audit that is used as a sales magnet. It has been a tremendous source of new business for us. The way it works is that people see our ads, or visit our site and request to have their landing page reviewed. I then create a 5-10 minute screen share video pointing out a few things I would recommend they do to improve conversions. I record using a tool called Loom, and I pull up the sites in Polypane so that everyone can see the mobile and desktop versions side-by-side.

The other type of landing page audit we do is a paid offering. It's a similar process, but there are more steps involved, such as a speed test, reading level test, and sometimes a five second test. We use Polypane for this audit as well of course!

What were you looking to improve in your workflow that made you search out a tool like Polypane?

The biggest challenge when doing landing page audits is that these days, landing page traffic is primarily mobile traffic, yet, we review pages on our desktops and laptops. I needed a way to review the mobile layout as well. And while I could always pull the page up on my mobile device, this wasn't easy to record and share.

Polypane changed all that. It allows me to view both the mobile and desktop versions of a site side-by-side, and they sync as we scroll. I'm aware that this is like only 1% of the power of Polypane, but for me, it's a game-changer.

How did you find out about Polypane? What other product/methods did you consider?

I was searching for browsers that had more advanced features than regular Google Chrome and Polypane came up.

Another method I had considered was using a Mac app called Reflector to mirror my actual iPhone screen to my desktop and then record the screen from there, while also keeping a desktop browser open. Yeah, it's as complicated as it sounds. It hurt to even write that.

How do you use Polypane during your landing page audit?

It's simple. I open Polypane, pull up the site to be audited, and record my screen using Loom. I don't have to worry about switching devices, as I can see the desktop and mobile versions of a landing page side-by-side that way.

Nicholas has more landing page audits you can watch on the GrowthMarketer YouTube channel.

What results did you see in your audit after you started using Polypane?

The most surprising thing was how many people asked me what browser I was using. People are always curious about tools, but in this case, it generated quite some buzz in the early days, when nobody knew about Polypane.

As for quantifiable results, our closing rate from prospects to clients has gone up around 25% after we started using Polypane for the initial free audit.

I attribute this to the fact that people see more value in the audit video, since we’re able to focus on both mobile and desktop.

Earnworthy develops web pages using the Unbounce editor in the side browser and previews them on multiple sizes.

What's next for Earnworthy, where can we learn more?

Apart from the landing page optimization business, I recently launched a free marketing newsletter where I share cool tips and tools like Polypane once per week. Check it out at GrowthMarketer.co and subscribe!

Polypane ❤ Tumult Hype. New integration

Mon, 27 Jul 2020 00:00:00 GMT

Tumult Hype lets you create beautiful, responsive HTML5 animations and web content.

When you preview your design by clicking the 'preview' button in Hype and selecting Polypane, it will automatically open the viewports you've specified in Hype so you get the full overview with just a single click. If you click the preview button again Polypane focuses and reloads your existing tab, even if you've made changes to that tab. This is the ideal way to test your Tumult Hype creations on multiple screen sizes.

Check out the video for a quick walkthrough:

Tumult Hype is available on macOS from tumult.com and the Mac App Store.

If you're interested in integrating your own tool with Polypane like this, contact us!

How Code& increased their efficiency by 500% maintaining and improving websites like Freshwater SLSC

Wed, 22 Jul 2020 00:00:00 GMT

We interviewed Dale Grant, the owner of Code& on their workflow and how Polypane fits into it. As a development-focused agency they use WordPress for a wide variety of clients and projects.

Can you introduce us to Code&?

Code& is a web development agency from Sydney, Australia. We started in 2012 (under a different name in the UK, have since relocated to Sydney) and there’s currently five of us. There's Rich, senior developer, who lives in the UK, which is great because we can pass work back and forth between different time zones. It means we have almost a full 24 hour day between us. He's been with us for seven years now. Then over here in Sydney we have Marshall who's a junior developer and Lauren oversees our admin. Sarah is our copywriter, currently on maternity leave and then there's myself, Dale. My skill set is in development and I handle client relations as well.

We focus primarily on development and as you'll note we have no designers on our team. We don't do a lot of design work and focus on what we do best: development. We have a handful of talented & trusted designers we work with when the project calls for it.

Despite an oversaturated market we haven't had to spend a cent on advertising since we began and yet we're busy. We’ve found the best form of marketing is referrals, and to get those you have to be good at what you do, focus on the right projects and above all else, be honest and transparent with your clients not only when celebrating the wins, but also when fixing the issues.

What does your current workflow look like?

We have a set structure that we follow for every new client that comes in for a project. We have a lucky 13 step process from start to finish and each of those ones have their own subtasks.

We first set everything up in our internal tools, like Asana (our task manager of choice) and we add our clients into our own Slack. Each client gets their own channel that they participate in and that's where we do all communication. Everything in full view of the client, which has been very, very good for projects.

Side note: It's difficult to get to grips with having all communication in front of the client the first time something goes wrong, because you have to declare that something has gone wrong in full view of the client. But in doing so we've realized that by acknowledging that we know about the problem, the client now knows what we know and they don't have to report it. Even if it's our mistake, we're all human and our clients like to see that it's taken care of and that something is being done.

Then we have steps around collecting and developing content, which usually goes side by side with design. Our copywriter will work with the designer that we're working with to fine tune the content areas to make sure they fit the needed content, for example we might need a full page of this type of content and this section will have a video et cetera.

In terms of development, there's a lot of tasks to check off before you even get stuck into the building, like setting up the environment. We work primarily with WordPress and need to make sure the settings are correct as we get started so when it's pushed to production, everything works as expected.

The actual development will vary project to project and we have a few tasks for our testing. I'm guessing this is fairly standard, but we have a round of internal site testing and if there's budget also some user testing, before we give it to the client to say "yep, we're done". Then we give them two rounds to find anything we missed or anything that needs to be tweaked like last-minute content changes. Then we hand it over and give them a couple of weeks of bug fixing.

When we do user testing we prefer to do that with real customers that we can put in front of the product but if not we source people who we think match the criteria.

What made you choose WordPress as the primary platform for development?

For us it can do anything we need, there's not a site so far that I've come across that we haven't been able to do within WordPress. Obviously you can do the very basic ones, like our own for example. Ours was needed in a short time frame, we based it off a theme and it’ll do the job until we find time to improve.

But we’ve also built, for example, a web app within WordPress for the mining industry here in Australia where people can track their certification. You have to be certified in a lot of different areas depending on your role and you have to gain a number of points within five years, but some of the certificates are only valid for two and there's different variables to it. It's very difficult to keep track off if you're not on top of it. So we built a platform for people to track their certification in.

We've also done a couple of currency exchange platforms which is like reverse engineering WooCommerce. Instead of paying money and getting a product you think of money as the product so they send money in and get money back out.

We just haven't found anything so far you couldn't do in WordPress.

In terms of development environment we use Trellis by Roots to set up all of our environments. We also use it to provision staging and production servers. Roots has modified the structure of WordPress in their project called Bedrock which we use for every single one of our sites. If we have a budget available for a custom build rather than a theme build we'll use their starter theme called Sage - all of these bring WordPress more inline with more modern development practices.

What were you looking to improve in your workflow that made you search out a tool like Polypane?

Testing, either at the end of a project, during the build or even for ongoing quality assurance. Any time we're doing maintenance we test any work that we've done. It takes more time than people realise and you get bogged down in development because you're testing in so many different devices and screen sizes, so many different combinations of everything that it takes a lot of time to go through. And if you change something well then you just got to go and check it all again.

I came across Polypane - I wouldn't even like to admit how long ago but it took me a very, very long time before I took the plunge and gave it a go. I think that's a little bit out of fear of changing your processes and using new tools but it got to the point where it was just like 'this is ridiculous'. I'm spending so much time checking the work my developers are doing and my developers are also spending all this time themselves.

The second thing was realising how many hours per day are we spending just checking and thinking there was an easier way of doing this. Primarily my desire to save time came from the Quality Assurance side of things rather than project work because it's something that's repeatable. We do that every month for somewhere between 30 and 40 clients and we needed to cut down that time so we had more time left over to do things that actually improve their site.

Testing is the least fun part - we’re creators, we live to create not to test! - and it's also the part that the customers never really want you to do. They do when things break but they don't really want to be spending money on you checking things. If that took less time, instead of checking screens we could look at doing something to progress our client’s sites, like conversion optimization or accessibility.

What other ways did you consider to solve this?

We've tried a few things over the years, like an app that would mirror to your iPad as a second screen and we would use that to check how a site would look on that particular screen. That kind of helped, and obviously the responsive mode in browsers or just the old-fashioned method of resizing your browser but both of those take time. I hadn't really come across anything else like Polypane and how it solves this issue.

How was it for the team to get started with Polypane and how do they use it?

With us, Rich started using it first and said that it was awesome, so I got it for the team so we can all use it. It's been really good. The issue that first got me in touch with you, being able to share workspaces with other team members, that feature has been super useful. Rather than write a list and say “we need to check these sizes” and hope people set it up correctly, don’t miss a size or add one wrong etc, with the shared workspace there's none of that and it's fantastic, we love that.

We use Polypane to do quality assurance checks on our staging server; it’s a huge time saver and we found it quicker than running it alongside Vagrant locally.

What results did you see with maintaining and checking websites using in Polypane?

I asked the team to do a rundown comparing our old way of checking sites with the new way using Polypane.

We checked three sites with our old method of resizing the browser and using the developer tools and each of them was around 30 minutes. With Polypane, we did the same work on the same sites in 6 minutes.

That's a massive time saving! In my reaction to that I definitely used a celebratory F word. We're very happy with that because it just means that the team can use that time doing more important and more interesting things.

One of the websites you've been doing this with is the Freshwater Surf Life Saving Club. Can you tell us about them and their website?

Surf clubs are a big part of the community here due to Australian beach culture. Freshwater SLSC for example is over 100 years old, and some other clubs are even older.

The surf clubs started out primarily as surf life savers, so people who patrol the beach and rescue swimmers if they got into trouble. Nowadays a lot of people join these clubs to make friends and compete in various different sports.

They obviously spend their time patrolling on the weekend to make sure people don't drown or don't get swept off in a riptide, but it's also an integral part of the community.

Their potential audience ranges from preteens with something called 'nippers', which teaches kids how to swim in the sea and about the dangers of the sea like riptides and marine creatures. Then on the other end there's 70/80+ year olds who have been part of the club for decades and just want to know what the next event is and of course every age in between.

What are the challenges when building websites with such a broad audience?

Making a website to cater to all these groups was a pretty big challenge to try and tackle. We had a lot of input from the executive committee of the club and their primary focus was communication. We need to make sure that we are communicating everything we need to every possible member that could be part of the club, whether that's young or old and whether they're interested in surf sports, patrols or nippers for their kids.

We had a lot of input from different people all with different goals so we had to juggle how all the different parts of Freshwater were presented. We couldn't just place everything on the homepage even if everyone wanted their section to be on the homepage. One big concern was how we could make sure the older generation could also read things well. So we've got nice big bold text in various places and tested this with some of the older members.

Nowadays, we work a lot with the client to make sure the website stays in good shape. When clients have access to their website, they're going to do things like add content where it's not supposed to go or add five paragraphs instead of one so we like to help them as much as possible.

This is where Polypane helps because you can show clients how the site works on different screen sizes, for different audiences and verify they can understand and read it well.

The new accessibility panel will help us improve the accessibility of the website as we keep maintaining it. We have a few issues right now but with a homepage that long I'm not unhappy with the current state. I've heard rumours of a surprise within Polypane when that panel finds no issues, so discovering that is next on our list!

With a lot of our clients we have a retainer agreement to maintain the website going forward and to keep it excellent. That usually comes with a few hours each month where we either do something they requested or if we find something that is broken or could be made better. There's always things you can do so we have a little list for Freshwater. Thanks to Polypane we now have additional time to make the website work even better.

What's next for Code&?

We’d like to focus more on accessibility, which greatly enhances the web for people with disabilities. Unfortunately, current processes mean this usually gets thrown in the “nice to have” pile, which as we all know gets cut when budget becomes tight. Finding a way to ensure this is included as a standard practise in all our projects is something we’ll be working on going forward.

We’d also like to build on our long term relationships with our clients. Some of our clients have sites that are approaching 10 years old, which may seem ancient in web years but with regular updates and progressive improvements, they’re still going strong. Recently we’ve been compiling our knowledge of solutions to common pain points in areas like conversion optimisation, customer experience and SEO. We’ve also been looking at how site owners, in particular ecommerce store owners use (or why they don’t use) their admin panels. This will not only serve as the starting for future projects, but also help our existing customers improve their existing sites with new tools, new data and new ways to engage their customers without needing a completely new site.

If we can make more things possible in less time for more people, we’re happy!

Thank you Dale! Be sure to check out Code& if you're looking for a WordPress development agency that involves you in the process from day one, cares about accessibility and creates amazing websites and web apps.

CSS breakpoints used by popular CSS frameworks

Wed, 15 Jul 2020 00:00:00 GMT

When using a CSS framework it often doesn't matter what devices people use. These frameworks come with their own set of CSS breakpoints with components that work well with those breakpoints.

Instead of configuring Polypane to show devices, you can configure it to show the breakpoints supported by the frameworks.

Polypane comes with workspace presets for Bootstrap v5, Materialize, Bulma and Tailwind CSS. Adding other ones is as easy as downloading and importing a workspace file.

Breakpoints for each CSS Framework

If you're using Polypane, You can create panes from the exact breakpoints and get the complete overview in a single browser, something that no other browser can do. Which breakpoints are used by each CSS framework? Find the lists below.

Bootstrap v5

Open in Polypane Built into Polypane

--
sm576px
md768px
lg992px
xl1200px
xxl1400px

Name	Description	Minimum width
--	X-Small	none
sm	Small	576px
md	Medium	768px
lg	Large	992px
xl	Extra large	1200px
xxl	Extra extra large	1400px

Find more information in the Bootstrap v5 documentation

Bulma

Open in Polypane Built into Polypane

mobile
tablet769px
desktop1024px
widescreen1216px
fullhd1408px

Name	Minimum width
mobile	none
tablet	769px
desktop	1024px
widescreen	1216px
fullhd	1408px

Find more information in the Bulma documentation

Open in Polypane Download Workspace file

below sm
sm480px
md768px
lg992px
xl1280px
2xl1472px

Name	Minimum width
below sm	none
sm	30em
md	48em
lg	62em
xl	80em
2xl	96em

Find more information in the Chakra UI documentation

Foundation

Open in Polypane Download Workspace file

Small
Medium640px
Large1024px
Xlarge1200px
Xxlarge1440px

Name	Minimum width
Small	none
Medium	640px
Large	1024px
Xlarge (optional)	1200px
Xxlarge (optional)	1440px

Find more information in the Foundation documentation

Halfmoon

Open in Polypane Download Workspace file

sm540px
md720px
lg960px
xl1140px

Name	Minimum width
sm	540px
md	720px
lg	960px
xl	1140px

Find more information in the Halfmoon documentation

Ionic

Open in Polypane Download Workspace file

xs
sm576px
md768px
lg992px
xl1200px

Name	Minimum width
xs	none
sm	576px
md	768px
lg	992px
xl	1200px

Find more information in the Ionic documentation

Mantine

Open in Polypane Download Workspace file

xs500px
sm800px
md1000px
lg1200px
xl1400px

Name	Minimum width
xs	500px
sm	800px
md	1000px
lg	1200px
xl	1400px

Find more information in the Mantine documentation

Material UI

Open in Polypane Built into Polypane

xs
sm600px
md960px
lg1280px
xl1920px

Name	Minimum width
xs	none
sm	600px
md	960px
lg	1280px
xl	1920px

Find more information in the Material UI documentation

Materialize

Open in Polypane Download Workspace file

s
m600px
l992px
xl1200px

Name	Minimum width
s	none
m	600px
l	992px
xl	1200px

Find more information in the Materialize documentation

Open Props

Open in Polypane Download Workspace file

xxs
xs360px
sm480px
md768px
lg1024px
xl1400px
xxl1920px

Name	Minimum width
xxs	240px
xs	360px
sm	480px
md	768px
lg	1024px
xl	1400px
xxl	1920px

Find more information in the Open Props documentation

Semantic UI

Open in Polypane Download Workspace file

mobile
tablet768px
small monitor992px
large monitor1200px

Name	Minimum width
mobile	none
tablet	768px
small monitor	992px
large monitor	1200px

Find more information in the Semantic UI documentation

Skeleton

Open in Polypane Download Workspace file

Mobile440px
Phablet550px
Tablet750px
Desktop1000px
Desktop HD1200px

Name	Minimum width
Mobile	440px
Phablet	550px
Tablet	750px
Desktop	1000px
Desktop HD	1200px

Find more information in the Skeleton documentation

Tailwind CSS (3.0)

Open in Polypane Built into Polypane

sm640px
md768px
lg1024px
xl1280px
2xl1536px

Name	Minimum width
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

Find more information in the Tailwind CSS documentation

UIKit

Open in Polypane Download Workspace file

s640px
m960px
l1200px
xl1600px

Name	Minimum width
s	640px
m	960px
l	1200px
xl	1600px

Find more information in the UIKit documentation

Webflow

Open in Polypane Download Workspace file

Mobile portrait and below478px
Mobile landscape and below767px
Tablet and below991px
Desktop (base)1024px
1280px and above1280px
1280px and above1440px
1280px and above1920px

Name	Minimum width
Mobile portrait and below	478px
Mobile landscape and below	767px
Tablet and below	991px
Desktop (base)	1024px
1280px and above	1280px
1280px and above	1440px
1280px and above	1920px

Find more information in the Webflow documentation

Increasing your productivity as a web developer

Using a CSS framework is one of the 8 ways to increase your productivity as a web developer. Check out the other 7 ways to improve your productivity!

Ground rules for responsive design

Though CSS frameworks help you with a lot of choices, building a solid responsive design still requires you to pay attention to other parts of your page and design. Read about the ground rules for responsive design to created solid responsive websites.

Missing a CSS framework?

Are we missing your favorite CSS framework? Reach out and we'll add it to the list!

How Red Pixel Themes uses Polypane

Fri, 03 Jul 2020 00:00:00 GMT

The following article was written by Vivian of Red Pixel Themes on how they use Polypane in their development process and is part of a series of case studies by Polypane users.

We’re Red Pixel Themes, a web shop that produces web templates made with TailwindCSS. We’re a team of 2 sisters (Vivian and Daniela) who have a passion for beautiful design, have a soft spot for CSS and enjoy working with JavaScript, you can also hire us for custom work.

Our philosophy

Since we’re building templates for other developers to use, we need to take into account lots of different decisions that we, too, have made while working with other templates.

We tend to ask things like “what happens if section X needs to have double or triple the text?” or “what if the customer deletes this section, how would the design accommodate that?” because we want to offer the best possible developer experience. We want to build stuff that we would enjoy using, today and in the future.

Our Process

Here’s how we typically develop one of our templates:

We usually start with one of our starter projects, right now we’re really digging Jekyll.
We then open up Polypane and select our already created workspace with all our defined breakpoints, we zoom out until all breakpoints are visible.
We start coding and we focus on each section, making it look good for all our breakpoints before moving to the next one.
Once the HTML/CSS is done, we open up the accessibility panel and check for any errors we may have.
Next, we open up the meta tags panel and fix any inconsistencies we see there, we also create a simple social image cover in Canva for each template so we can visualize the social cards better.
Lastly, we switch Polypane to focus mode, open the biggest breakpoint and start adding interactivity to the design using AlpineJS or Vue.JS.

You can download the Polypane workspace that Red Pixel Themes uses here: Red Pixel Themes Breakpoints.ppws.

How we discovered Polypane

You probably all know the usual workflow of responsive design coding. You open Chrome, create a few “screens” and then constantly change the view to check each breakpoint for every code change you make. Some people prefer to do it by focusing on each breakpoint first and then take a quick look to all the breakpoints at the end to check for any visual bugs.

This is not an overly bad workflow, it's just very time consuming and since we both freelance full time, we wanted to maximize our time spent on this project so we needed to find a more time efficient alternative to this, ASAP.

In our search, we first tested another developer focused browser called Sizzy since it seemed popular but found it a bit buggy, lacked good synchronized scrolling support and didn’t play well with Browsersync.

We actually discovered Polypane just by googling for other developer-focused browsers, we found similar tools on the market but nothing beat Polypane’s stability and we really liked the regular updates, we thought the project had more potential and was better priced.

We signed up for the trial but didn’t start using it until a week or so later, we’re the kind of devs that read the entire documentation of any tool before using it and by doing that we realized Polypane had so many features it was surprising to find out it was made by a single dev!

Why we stayed

It was me (Vivian) who first started using it to try and see how it could be implemented as a regular tool in our coding workflow. I tested it on a few freelance projects and was sold.

I remember the thing that wow’ed me was the breakpoint detection functionality, it was incredibly useful for our freelance work because sometimes we worked with old CSS codebases that didn’t have clearly defined breakpoints like in Tailwind. Just this feature alone made us a paying customer.

The biggest benefit we got by using Polypane was way shorter dev time. What we used to do in 1 hour in Chrome took 20 minutes in Polypane. It wasthat good.

The second best was having less visual bugs, now that we had clear visibility of all breakpoints at the same time and great synchronized scrolling, it was very easy to spot inconsistencies in the code.

What’s next for Red Pixel Themes

We’re in the middle of finishing up for our big launch, if you love working with Tailwind and need a good start for your next project then check out our available templates, we got a beautiful e-commerce one, one for lawyers/business and many more to come!.

Thank you Vivian for sharing your experiences getting started with and using Polypane! Vivian is also the author of Tailwind Weekly, which is a must-read if you do any Tailwind CSS development.

To learn more about how Polypane can help you build Tailwind sites, learn how well they work together.

Polypane 3.2: Accessibility and viewport sizing

Fri, 12 Jun 2020 00:00:00 GMT

We're introducing two big features in Polypane 3.2: The accessibility panel and viewport sizing. Beyond that we added a whole lot of smaller features and improvements, with nearly 40 items in our release notes.

Accessibility panel

Polypane has long had features to help build more accessible sites, like our contrast checker, outline panel and over a dozen different simulators to test your site for varous visual and other impairments.

In Polypane 3.2 we added an accessibility panel that does automated testing of your page. We spend a lot of time on making it as actionable as possible and really help you understand what the issues are, where they are and how you can solve them.

Issues are ordered by severity, so you just start at the top and work your way down. When you hover over the elements in the accessibility panel, the panes scroll to highlight the element. When you click on the inspect element icon the element will be selected in the Elements panel, where you can usually fix the issue.

The workflow is really enjoyable and we hope it makes you check and fix accessibility issues more often. See how we fix two (minor) issues in record time on our own homepage:

Of course, you want to get to zero issues and if you do, Polypane has a little surprise waiting for you 🎉️

Real viewport sizes

Responsive design is best when it's based on your content. Device sizes change but if you make a responsive design that works well with your content it will keep looking great.

That being said, Polypane has always had a set of default devices with full emulation. The dimensions we used for these devices were the full screen sizes, perfect for developing SPA's or other fullscreen experiences. From Polypane 3.2 on, we'll default our devices to the real viewport size, which is the part of your screen that actually shows your site in the default browser.

We gathered the data for all our devices and made sure we have the real viewport sizes for both portrait and landscape modes. Switching between viewport and no-viewport can be done in the device preset list and rotating devices will automatically use the correct viewport sizes for the device you've selected.

Elements panel improvements

We've been overwhelmed by the feedback you've given on the elements panel. We're glad to hear we made something that has been so useful to you and are constantly working on making it better. In this release, we've made it faster and more stable.

We've added options to quickly hide the selected element (which comes in handy more often than you'd think) and to collapse the box model so that the style panel has more room. Polypane now shows the line height of an element and if the list of classes is very long, it will make it scrollable so the rest of the panel is still usable

But the biggest update it the new popup when you inspect an element. You're probably familiar with it from other browser developer tools, but we think our version is quite a bit more useful. It shows an overview of the element, including the actual font information and the contrast ratio (for every element).

We think we have a pretty good set of info right now, but we'd love to hear from you what you want to see added in this popup!

Overlay updates

All the overlays now have an icon that you can hover to get information on what the overlay does. For the simulators we show how many people are affected by it.

When you have an overlay selected we add a "clear overlay" button at the top of the overlay popup so you can quickly remove the overlay again.

Lastly, out color contrast overlay has seen some cool improvements in the past few releases, and we're adding a new one in 3.2. Now when you hover over the suggested color, we'll update the element with that color so you can immediatelly see how the suggested color will work in your design.

Reload CSS

Polypane's live reloading is a super powerful and low-effort way to get live and hot reloading set up regardless of which web server you use. It will update CSS and images in place for you with zero configuration. But sometimes you don't need live reloading, you just want to edit a single CSS file and see the changes.

With our new reload css function, you can press alt + R or right-click the reload button and Polypane will reload just the CSS without refresing the page. It's a small feature but should be helpful!

Random pane sizes changes

For a long time Polypane had the Shift cmd n shortcut. In the focus layout, it would resize the pane to random dimensions and in horizontal and vertical layouts it would add a new pane with random dimensions

We've now updated the shortcut to resize all visible panes, regardless of layout. This is a great way to stress-test your responsive design and find screen sizes you might have overlooked. It's also a lot of fun!

HTTP(S) Viewer

Polypane now announces itself to the operating system as a HTML file viewer that supports HTTP and HTTPS. This means it will show up in lists of browsers that various tools might show you.

Two such tools, Whisk and Hype, both by the awesome folks at Tumult, have added us to the whitelist in their tools so opening anything from them in Polypane is now super easy. Check out this video by Hype to show you how it works together with Polypane: Hype and Polypane

If you use an app and would like it to support Polypane, let us know and we'll reach out to them.

UI updates

We have a few smaller UI changes and improvements that will make using Polypane a little easier. This is part of an ongoing process to make the Polypane UI more friendly.

Polypane now starts about 1 second faster, and interactions between different panels are now about 300ms faster.
The scroll sync icon in the header now shows a "" if it's disabled.
You can now permanently disable the cache across browser sessions.
We give a warning for pages that have CSRF tokens or SSO login. Logging in on those pages only works in the side panel or when isolated panes are on.
Documentation from the help menu is now opened in the side pane for easy access.

Full changelog

There's more new features, improvements and fixes in this release so read through the full changelog below. All new features are fully documented in our docs too.

New Accessibility panel
New Real viewport sizes
New Reload CSS option
New Elements panel: new element tooltip
New Elements panel: visibility toggle
New Elements panel: toggle box model visibility
New Color contrast previews new color on hover
New Right-click options for reload
New Polypane now registers as http/https protocol viewer to support Tumult Whisk and other tools
New Random size shortcut
New Preact devtools
New Overlays to warn for pages with CRSF or SSO
Improved Simplified getting started page
Improved Startup speed improved by ~1s
Improved Meta panel now warns for user-scalable=no in viewport
Improved Elements panel: Shows line-height in overview
Improved Elements panel: Long list of classes are now scrollable
Improved window.__polypane object now also has the zoom value
Improved Overlays popover has a "clear overlay" button at the top
Improved All overlays now have additional information
Improved Disable cache can now be set to permanent in the menu
Improved Scroll sync icon now has a "" when it's off
Improved Elements & Live CSS panels: selecting an element no longer triggers a click
Improved Modes have been renamed to Layouts
Improved Vertical layout has less horizontal padding
Improved LiveCSS uses the same selection mechanism as Elements panel
Improved Documentation and help is now opened in the side browser
Improved Click handling performance improvements
Improved Faster style detection
Improved First launch has zoomed out panes so more are visible
Fix Emulation is now re-applied when devtools are opened
Fix Workaround for stale devtools after opening a pane
Fix Panes in Vertical layout no longer overlap when they are higher than the viewport
Fix Editing attributes with a textnode selected now edit the element's attributes
Fix Side panels should no longer disappear
Fix Polypane can no longer get into a reloading loop
Fix Workspace import menu is cleared after importing
Fix Hide menu bar is now removed on Linux

Getting Polypane 3.2

If you don't have Polypane yet there is a free 14 day trial available. Get it here.

The complete guide to CSS media queries

Tue, 02 Jun 2020 00:00:00 GMT

Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and which ones should you use? Here's the complete guide to media queries.

What this guide will go through:

What are media queries?
How a media query is structured
Media types
Using media queries
Using media query features
Upcoming media queries
New notations in Media query levels 4 and 5
Deprecated media queries
Using Media Queries in JavaScript

What are media queries?

What is a media query? A media query is a specific feature of CSS that lets you conditionally apply styling based on a media type, a media feature or both. You use them primarily to check the screen dimensions and apply CSS based on that, but media queries can do many other powerful things.

How a media query is structured

Here's the general structure of a media query:

@media <media-type> and (media feature) {
  /*...*/
}

It begins with the @media keyword, also called an "at-rule", optionally followed by a media type and zero or more media features.

A real example of a media query is:

@media screen and (min-width: 400px) {
  /*...*/
}

In English, what this says is this: "if the site is being shown on a screen and that screen's width is at least 400px wide, apply this CSS".

Both the media type and the media feature are optional, so this is a valid media rule:

@media print {
  /*...*/
}

And this is a valid media query too:

@media (min-width: 400px) {
  /*...*/
}

If you leave out the media type, it will be seen as the media type all, which is usually fine.

Logical operators

Next to media type and media features, we also have a few "logical operators" that go inbetween those parts: and, or and not. Here's how those work:

The `and` operator

You can use the "and" operator not just between a type and a feature, but you can also use it to "chain" multiple media features using and, like so:

@media (min-width: 400px) and (max-width: 800px) {
  /*...*/
}

Which tells a browser to apply this CSS if the browser width is between 400 and 800 pixels.

The or operator: `,` (a comma)

You can use a comma to do "or", like so:

@media screen, print {
  /*...*/
}

which applies to screen or print. Each comma separated line is its own media query and as soon as one of them evaluates to true, the CSS in the media query is applied. In the future you'll also be able to use or instead of a comma.

The `not` operator

Lastly, there is not, which can be used to negate an entire media query. So the following query will be applied everywhere except print:

@media not print {
  /*...*/
}

If you use the not operator you must set a media type (like screen or print) as well. If you don't, the media type will be all, and then your media query will read "not all" so it won't get applied anywhere.

not inverts the entire media query. Scroll down to not() notation for an upcoming feature that will allow you to negate just a part of a media query.

There's also the only logical operator, but in modern browsers you don't need to use this, so we'll pretend it doesn't exist.

Nesting

You can nest media queries in other media queries and that will work fine! So instead of

@media (min-width: 400px) and (max-width: 800px) {
  /*...*/
}

you can also write

@media (min-width: 400px) {
  @media (max-width: 800px) {
    /*...*/
  }
}

In this example it might not be so useful, but you could wrap your entire CSS in an @media screen {} and do your responsive design with nested media queries, and then have a fully custom print stylesheet. With this, that'll look a little cleaner.

Imports

You can optionally append one or more comma-separated media queries to the import statement to conditionally import the file, for example like so:

@import 'print.css' print;

@import 'dark.css' screen and (prefers-color-scheme: dark);

If a media query does not match, the CSS won't be applied, but the file will still be downloaded.

Media query in HTML

You can also use a media query in your HTML, for example in a <style> or <link> tag, like so:

<link href="style.css" rel="stylesheet" media="screen and (min-width: 400px)" />

<style media="print">
  /* ... */
</style>

It's worth noting that any linked files will still be downloaded by your browser even if they doesn't apply.

You can also use media queries to control which responsive image to load using the img element with a sizes attribute, or a picture element with different source elements that each have a media attribute, but since that's a large topic and does not concern CSS, we'll leave that for another guide.

Media types

The media type is used to describe the type of device that a browser is running on. There used to be loads, but the level 4 specification deprecated a whole lot that were never implemented anyway, leaving us with 3 we should care about:

all
screen
print

All

As mentioned earlier, if you don't specify a media type, it will default to "all", which means the css will apply to all devices.

Screen

Probably what you're reading this article on now!

Print

For when you print a page, or any "paged" media (Like a book! Did you know people use HTML and CSS to mark up books?)

Did you know you can easily switch between screen and print stylesheets in Polypane with our emulation features?

So just for completeness, here's all the other ones that you never got to use, and probably never will:

aural (which was replaced by speech),
speech (...also deprecated. Originally for use with speech synthesizers, like screen readers. Never implemented in browsers.)
tty (for the terminal),
tv (... like a screen, but different...somehow?),
projection (projectors),
handheld (for phones, they were actually used for a while before media expressions were a thing),
braille (for braille devices) and
embossed (like a combination of print and braille, so for printed braille).

Using media queries

When using media queries it's good to give yourself a few rules, so you don't randomly add media queries and end up with CSS that behaves unpredictably and is hard to maintain.

When starting fresh, I recommend to write CSS from narrow (mobile) to wide (desktop) and then only using min-width for your styling. That way you're always designing "up" and your CSS remains easy to reason about: All the CSS you write will be additive compared to the base styling. Your original CSS might place things in a column:

main {
  display: flex;
  flex-direction: column;
}

and when you get wide enough to show two columns, you switch to horizontal:

@media (min-width: 40rem) {
  main {
    flex-direction: row;
  }
}

Because the main element already has display: flex;, all we needed to do at the wider breakpoint is change the flex-direction. We prevent code duplication and everything is more readable and faster to download.

We can extend this reasoning to all the media features described below. Write your CSS for the starting point: the most well-supported, the smallest or the most accessible version. Then progressively add more styling using media queries.

For more in-depth tips on how to develop a responsive website, read our article Responsive design ground rules.

Using media query features

Media query feature make up the main part of a media query and have the most influence on what you're designing. Media feature do a lot. They let you check for device and browser capabilities, settings and user preferences beyond just the type of device.

Dimensions

By far the most used media features are related to browser dimensions. Here are they:

Width and Height

You can check for exact width, min-width and max-width, and exact height, min-height and max-height.

width and height you'll probably never want to use, they only apply at that exact width.

More useful are the min-* and max-* values, which let you write CSS for screens starting at a certain size and larger (using min-*), or up to a certain size (using max-*).

All the width and height media features support the regular CSS units like pixels and ems. It's recommended to use the em unit for media queries, so it scales nicely when people zoom in their browser. This won't happen with pixels, and rem is the same size as an em when it's used in media queries. rem also has some bugs in Safari. So, em's are best.

If you think sizing in ems is hard because you don't know how large an em is: media queries are handled at the top level, so 1 em is always 16 pixels or what the browser set as the default font size (and so are rems).

Did you know Polypane automatically detects the width and height media queries in a site and creates panes for them? That way, you're always building sites to your own specifications. It also supports sizing panes in ems so you don't even have to calculate between pixels and ems!

Aspect ratio

You can also test for the relation between width and height, with the aspect-ratio and orientation media features.

The aspect-ratio media feature takes a fraction, and also has the more useful min-aspect-ratio and max-aspect-ratio media features. It will lets you check if a browser has a certain ratio between width and height. The way to think about it is: the first number represents the width, the second number represents the height. This means an aspect ratio of 2/1 is twice as wide as it is high.

You can test for (only) square screens:

@media (aspect-ratio: 1/1) {
  /*...*/
}

Or check for screens that are 16 by 9:

@media (aspect-ratio: 16/9) {
  /*...*/
}

Like width and height, you'd usually use the min-* and max-*variants. With a certain aspect ratio you can decide to show images in a portrait or landscape mode, for example.

With min-aspect-ratio, you can check for screens that are wider than they are high:

@media (min-aspect-ratio: 1/1) {
  /*...*/
}

Conversely, by using to max-aspect-ratio: 1/1, you switch that around to only screens that are higher than they are wide.

Instead of doing that though, you can also just use orientation: landscape and orientation: portrait, which mean the same thing and are a little clearer.

Prefers-color-scheme

With prefers-color-scheme you can check if a user prefers to see a dark mode or light mode version of your website.

Some users might prefer dark mode because it's easier on their eyes, because their environment is dark or because they're sensitive to bright lights. Conversely, users might prefer your light mode for the usually increased contrast or because they visit your site in a bright space.

Here's how to test for both:

@media (prefers-color-scheme: dark) {
  /* wants dark mode */
}

@media (prefers-color-scheme: light) {
  /* wants light mode */
}

Between, these, light is considered to be the default. So much so, that a third option no-preference was recently removed from the specifications due to lack of implementations.

Did you know Polypane's emulation mode makes it really easy to test both a dark and light theme side-by-side.

Implementing a dark mode

If you already have a website and want to add dark mode, the neatest way to go about it is to redesign each part. This will give you the most control and highest quality implementation.

For many sites, it might be hard to go through all parts of a site, or there's no time or budget available. For those sites, there's a thing I like to call "cheap dark mode", and it looks like this:

@media (prefers-color-scheme: dark) {
  :root {
    background: #111;
    filter: invert(1) hue-rotate(180deg);
  }

  img,
  video {
    filter: invert(1) hue-rotate(180deg);
  }
}

Here's how it works: First we set a dark background on the :root, which is basically the html element. This doesn't have to be #111 (very dark gray), it can also be pure black (#000) or you can add a little color to it. That all depends on your brand and design, so pick one that works for you.

The next line is where the magic happens. With filter we can invert all the colors. This will make light dark and dark light. It won't affect the background which is why we defined that ourselves.

Invert also has another effect though, it also inverts colors. So blue will become orange, green becomes pink and so on. That's not great, because it means you just lost your brand colors. Fear not though, we can get them back by rotating the hue back to the original colors with hue-rotate(180deg), undoing the invert specifically for the hue of your colors.

At this point, all images and videos on your site look super weird, so what we need to do there is double-apply the invert and hue-rotate, turning both back to their original colors. Now you have a site in dark mode, where all images and videos are shown as they are. Not bad for just a few lines of CSS!

Prefers-reduced-motion

With prefers-reduced-motion, users can indicate they want to see less stuff happening on screen. The reason they want to do this can be things like motion sickness, vestibular disorders or they just plainly don't want to wait for your nice animations to finish.

@media (prefers-reduced-motion: reduce) {
  /* wants reduced motion */
}

@media (prefers-reduced-motion: no-preference) {
  /* doesn't want reduced motion */
}

If a users has prefers-reduced-motion turned on it doesn't mean they want no motion, but you have to be mindful: use motion only where it helps understanding and if you do, keep the motion small (so fade instead of swoosh). Otherwise just turn them off. And for video's, make sure you don't auto-play them.

Implementing reduced motion

If you're starting a new project and want to incorporate support for reduced motion it's a good idea to consider motion an enhancement: have no or little motion as the default, and only when refers-reduced-motion: no-preference is set, add additional motion to your website. That way, the default experience is the more accessible one.

For an existing site, this might be a lot of work, so we also have a cheap reduced motion script:

@media (prefers-reduced-motion: reduce) {
  ::root {
    view-transition-name: none !important;
  }
  body *,
  body *::before,
  body *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
    scroll-behavior: auto !important;
    background-attachment: initial !important;
    view-transition-name: none !important;
  }
}

This will turn off all animation for all elements so it's as relatively blunt method, but it's perfect to retroactively add to a site to make it more accessible. The animation is set to 1ms so the animationend and transitionend events are still fired because your javascript might depend on them, but with the negative delay you won't notice the difference.

Did you know Polypane makes it really easy to test your prefers-reduced-motion implementation side-by-side with a regular pane.

Prefers-contrast

Prefers contrast indicates whether a users prefers more or less contrast in their interface. For example visual impairments can make it difficult to make out details or subtle differences in color so people that have that will prefer higher contrast. On the other hand, other people might be sensitive to harsh high contrast and prefer colors to be closer to each other.

@media (prefers-contrast: more) {
}

@media (prefers-contrast: no-preference) {
}

@media (prefers-contrast: less) {
}

@media (prefers-contrast: custom) {
}

prefers-contrast: custom is an odd one out. If you dont prefer more, less or the same (no-preference) contrast, why does this exist? The custom value will match when forced-colors is active but the user doesn't have a high or low constrast theme selected, but something in the middle. This way, @media (prefers-contrast) without a value will still match and that will let you re-use the media query to reduce visual complexity.

The "increase contrast" option in the macOS accessibility menu will trigger prefers-contrast: more:

When you turn it on, your entire operating system also switches to an increased contrast mode which you can use for inspiration on your site. As you can see from the screenshot, macOS doesn't turn everything full black on full white (though it does bump up the text contrast), but instead it increases the contrast between sections, by adding clear borders instead of soft shadows and suble background tints.

On Windows, prefers-contrast is turned on when you turn on forced-colors and will match more, less or custom depending on the contrast ratio between the background and default text color.

Did you know Polypane makes it really easy to test your prefers-contrast ands forced-colors implementation side-by-side with regular panes.

Color-gamut

Colors on the web so far have been limited to just the sRGB color gamut, but modern screens are able to display much more colors, like the p3 color space. With the color-gamut you can test if a device has such a wider color space.

There are three potential options, and if it supports the larger color space, it automatically includes support for the smaller color space.

srgb This is the one we all know :)
p3 This is what for example modern iPhones use, often called "wide gamut"
rec2020, this is the largest color space available right now, but you basically won't find this in the wild.

If a user has a display with a wider gamut, you can use images in that color space and they'll be more vibrant than ones in sRGB.

Not supported yet, but coming soon are new CSS notations you can use to describe colors in these wider color space (since this is not possible with rgb, hsl or hex, which are limited to sRGB).

For these new colors, there are three new css functions: lab(), lch() and color(). For now, only Safari supports the color() function, and the other two are supported nowhere.

Lab and lch allow you to describe more precise colors than rgb and hsl, but with color() you can explicitly opt-in to a color gamut, like so:

p {
  /* the reddest red that sRGB has */
  color: rgb(255 0 0);
}
@media (color-gamut: p3) {
  p {
    color: color(display-p3 1 0 0); /* The reddest red the display can show */
  }
}

The display-p3 is the only value supported for now, and the three numbers are floating point numbers for the R, G and B channel.

Display-mode

If you're designing a game or video player, you might have more than just the game/video on the page but when someone switches to fullscreen you only want to show the game/video. This media query lets you do that. display-mode is supported by all modern evergreen browsers, and will let you test for how your site is shown with four possible options:

browser
This is the default mode, where your page is shown in a regular browser window.
fullscreen
Your page is displayed full screen and there is no browser chrome visible. If there is no fullscreen media query defined, your browser will instead apply styles defined in a standalone media query.
standalone
The page is not shown fullscreen, but also doesn't have all of the regular browser chrome, Instead it looks like a standalone (desktop) application. If there is no standalone media query defined, your browser will instead apply styles defined in a minimal-ui media query.
minimal-ui
Your page is shown in its own window, but the browser will still show some chrome for controlling navigation (like popup windows). If there is no minimal-ui media query defined, your browser will instead apply styles defined in a browser media query.

As you can see, most of these values fall back to the next one, so if you define a minimal-ui style, that will also be applied to standalone and fullscreen.

Resolution/-webkit-device-pixel-ratio

With the resolution media query you can test for a displays pixel density. There is resolution, which tests for a single specific pixel density and min-resolution and max-resolution which give a lower and upper bound.

You can use this to serve retina background images to displays that support it, for example.

Resolution takes a number with either a dpi (dots per inch), dpcm (dots per centimeter) or dppx (dots per pixel). In CSS, a pixel is always 96dpi, so 1dppx is a regular screen resolution, and 2dppx is 'retina'.

Instead of dppx you can also just use x, so your CSS could look like this:

@media (min-resolution: 1x) {
  /* your regular background here */
}

@media (min-resolution: 2x) {
  /* your retina background here */
}

Older versions of Safari (before TP Release 138) don't support the resolution media query. They have a similar feature called -webkit-device-pixel-ratio (as well as -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio), which accepts a number without a unit. The implied unit is the same as dppx though, so the following CSS has the same effect as the resolution sample above:

@media (-webkit-min-device-pixel-ratio: 1) {
  /* your regular background here */
}

@media (-webkit-min-device-pixel-ratio: 2) {
  /* your retina background here */
}

To improve support, all other modern browser also support the -webkit-device-pixel-ratio notation so between resolution and -webkit-device-pixel-ratio, you can safely use the latter for the widest support. Consider switching to resolution though, unless you also need to support older versions of Safari.

Overflow

Overflow can test how a device handles content that's larger than fits. It exists of two properties, overflow-block, for the block direction (usually top to bottom) and overflow-inline for the inline direction (usually left to right).

For overflow-block there are 4 potential values to check against:

none, meaning that anything that overflows is simply not displayed
scroll, you can scroll to content that overflows
optional-paged, you can scroll but page breaks can be manually triggered
paged, content that overflows is shown on a next page.

And overflow-inline only has two values:

none, meaning that anything that overflows is simply not displayed
scroll, you can scroll to content that overflows

Update

update is used to detect how often the media type can update. Possible values are:

none, meaning it can't update, like printed paper.
slow, where updating is slow like on e-book readers or low power devices.
fast where updating is not constraint by device capabilities, like regular screens.

Inverted colors (Safari only)

This media query indicates that the operating system has inverted all colors. The operating system in this instance is MacOs, the only operating system that supports this (and conversely, only Safari supports this media query). It's either off or on:

@media (inverted-colors: none) {
  /* colors are normal */
}

@media (inverted-colors: inverted) {
  /* colors are inverted */
}

You might think that you'd use this to double-invert your images and videos like we did with our cheap dark mode, but Safari already does this for you. You can however, still hue shift your entire site to make sure your brand colors are followed.

Dynamic-range

Some displays can display "HDR", or "high dynamic range", characterized by large contrast, brightness and color depth. The specification gives two options: high and standard. If it's high, this means that you can use display-p3 colors (currently only supported in Safari) to provide more vibrant colors for your visitors. To test for support for specific color spaces, you can use the color-gamut media feature

Interaction: `pointer` and `hover`

We have many more different input/pointing devices now compared to when the web got started. Mouse pointers still exist, but we also have touch, external controllers like Wii remotes and even things like AR hand detection.

Some things that are easy to do with a mouse are harder or impossible to do with touch devices, like hitting small targets or even hovering. With the interaction media features you can adapt to these devices in clever ways.

The way I would go about this is consider a touch device as the most minimal implementation. It won't have hover effects, and the precision of your input device is coarse (It's the size of your thumb).

@media (hover: none) and (pointer: coarse) {
  /* you're on a touch-only device */
}

For this group, you can't have things popping up on hover so they need to be visible or behind an explicit toggle, and your tap targets will need to be larger.

But those devices could also have support for a stylus, still not allowing hover, but making it easier to point to specific parts on the screen. While it's a good idea to have large enough clickable targets even if pointer: fine, you can for example place them closer and make more efficient use of the space.

@media (hover: none) and (pointer: fine) {
  /* you're on a device without hover but with a stylus
     or other fine pointing device */
}

Then as you start to get hover capabilities, you can add those with:

@media (hover: hover) and (pointer: coarse) {
  /* you're on a device with hover but a coarse pointer*/
}

Devices that allow for hovering but have a coarse pointer are things like Wii controllers and Kinect. They let you point at things but without great precision. You'll want large enough targets and you can add hover effects as an indication of where they're pointing.

Lastly, we end at what many will think of as "normal", but is actually the most well-featured situation: a device with a mouse/trackpad.

@media (hover: hover) and (pointer: fine) {
  /* you're on a device with a mouse or trackpad */
}

These devices can hover over elements and precisely target them. Users of these devices might still have different capabilities (Not just permanent! They also might be tired, or have greasy fingers) so design accordingly.

Though iOS 13.4+ support these media features, it will always match pointer:coarse and hover:none (and their any- counterparts), even when using the new trackpad or the pencil.

Multiple pointing devices

The pointer and hover media queries give you information about the primary pointing device. But what about the touchscreen-with-stylus example where you have a coarse and a fine pointing device simultaneously? Even if the user has a stylus, the primary pointing device is still a touch screen, so coarse. For those situations you can use any-hover and any-pointer. This will test if any pointing device exists that matches the criteria.

Less interesting media queries

There are a few more media queries that are not as useful in daily usage but I didn't want to leave out.

Color

the color media query (and it's min-* and max-* variants) lets you detect if the screen your page is being shown on has any color, and if so, how much:

@media (color) {
  /* you're on a color screen */
}

You can also give it a value which translates to the number of bits per color component, so for each of red, green and blue separately. Most modern screens have 8 bits per channel, but 10 bit screens and even 12 bit screens are becoming more common. The value is not the total number of colors, but the bits per color, so don't confuse it with "8-bit color", which is something different. 8 bits per color channel corresponds to a 24-bit color screen.

@media (min-color: 8) {
  /* you're on a "full" color screen */
}

Monochrome

Somewhat the inverse, monochrome (and it's min-* and max-* variants) lets you detect if the screen is shown on a monochrome (like greyscale) media type. You can again use just the value to detect a monochrome media type:

@media (monochrome) {
  /* you're on a monochrome media type */
}

And like color, it also has an optional value that's the number of bits per pixel. If you test for monochrome: 0, that will check if the device is not monochrome (so it has colors). monochrome: 1 will detect a device with pixels that are either on or off (like e-paper).

An interesting use-case for monochrome is that you can use it to detect when a page is printed in color or in monochrome:

@media print and (monochrome: 0) {
  /* you're printing in color */
}
@media print and (monochrome) {
  /* you're printing in monochrome */
}

Grid

The grid media query will let you detect when a page is shown in text-only terminals or basic phones with fixed fonts. It's value is either a 0 or a 1, and unlike color or monochrome, you need to explicitly add it:

@media (grid: 0) {
  /* shown on a regular screen */
}
@media (grid: 1) {
  /* shown on a grid device  */
}

Upcoming media query features

While all the previous features have pretty good support across modern browsers, there are also many upcoming features that are only supported by a few browsers or that will hopefully be implemented soon.

Please note that some of these are still in a drafting phase, which means they might be changed or scrapped before becoming part of a specification. I'll try to keep this document updated!

Prefers-reduced-data (no support) Available for testing in Polypane

Not everyone is lucky enough to have fast, or reliable, or unlimited data plans. Browsers can send the Save-data: on header, and web servers can then choose to send smaller images and videos and disable any form of polling or preloading. Even though turning on the sending of that header is hidden deep in settings (on mobile) or requires a third-party plugin (on desktop), a large number of people still end up use this header.

Unfortunately dealing with this on a web server level is often hard to do, either because you lack access, or the configuration requirements to make it work are just too complex. That's unfortunate because it's potentially very impactful.

Coming up is a prefers-reduced-data: reduce media query, which will let you target this situation in CSS. Though you can do less with that compared to a save-data header (which you could use to send an entirely different website, basically), you can still use it to prevent downloading unneeded fonts and background images, or to request smaller background images.

You can emulate the prefers-reduced-data media query in Polypane using the emulation panel

While we wait on this feature to land, we can already use JavaScript instead to detect the save data preference or a slow connection using the Network Information API:

const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection || {};

if (connection.saveData || ['slow-2g', '2g', '3g'].includes(connection.effectiveType)) {
  /* data-saving measures like not preloading videos */
  preloadVideo = false;
}

The Network Information API is available in Chromium browsers and behind a flag in Firefox. It can tell if you saveData is on and gives you rough information on the type of connection. effectiveType takes into account not just the type (wifi, cellular etc) but also how long previous roundtrips to the server took and what the download speed is. There's slow-2g, 2g, 3g and 4g as possible values.

To learn more about how to design for prefers-reduced-data, read our article Creating websites with prefers-reduced-data

Prefers-reduced-transparency (Chromium 118, Supported behind a flag in Firefox)

User can use this to indicate they prefer to see things on solid colors, usually due to visual impairments making it hard to read text on, for example, background images. But it can also help people with for example dyslexia or concentration problems to read your content easier. Note it doesn't say no-transparency.

@media (prefers-reduced-transparency: reduce) {
}

@media (prefers-reduced-transparency: no-preference) {
}

Wanting less transparency is not the same as wanting more contrast and should not be lumped together. prefers-contrast and prefers-reduced-transparency are there for different reasons and can be compensated differently for.

Forced-colors (Support in Chromium browsers and Firefox) Available for testing in Polypane

Forced colors, or high contrast, will strip out all your background images if there's text over them and overwrite all your other colors, making everything uniform with the rest of the operating system. This helps people with visual impairments by making all text easier to read for them.

Those of you that have been doing web development for a bit longer might remember that we could style things with "system colors". That's no longer possible due to security implications, but in the forced colors mode a subset of them are back:

CanvasText: the color of text content.
LinkText: the color of links.
GrayText: the color of disabled content
HighlightText: the color of selected text.
Highlight: the background color of selected text.
ButtonText: the color of a <button> element's text.
ButtonFace: the color of a <button> element's background.
Canvas: controls the color of the background.

These color names are not here for you to pick and choose, high color mode already overwrite all your text, background, border and button colors. They're there for you to use on other elements (like icons) to make them fit the rest of the site.

Forced-colors has two possible values:

@media (forced-colors: none) {
}

@media (forced-colors: active) {
}

When forced-colors is active, prefers-color-scheme can be used to detect if there is white text on a black background, or black text on a white background.

On Windows, forced-colors will also activate prefers-contrast with a value of more, less or custom depending on whether you have high, low or average contrast between the text and background colors.

Overwriting forced colors

It's not always desirable for forced-colors to overwrite all the colors, for example in a color selector on an ecommerce website. To disable forced colors for specific elements you can use the css property forced-color-adjust: none;.

-ms-high-contrast (supported in old Edge)

-ms-high-contrast was the implementation of forced colors in the old EdgeHTML version of Edge. It has three possible values to check for, which includes the color scheme:

@media (-ms-high-contrast: active) {
}

@media (-ms-high-contrast: black-on-white) {
}

@media (-ms-high-contrast: white-on-black) {
}

It similarly has color keywords for you to use, but they're slightly different:

WindowText: the color of text content.
-ms-hotlight: the color of links.
GrayText: the color of disabled content
HighlightText: the color of selected text.
Highlight: the background color of selected text.
ButtonText: the color of a <button> element's text.
ButtonFace: the color of a <button> element's background.
Window: controls the color of the background.

Light-level (no support)

Light-level comes with three possible values: dim, normal and washed. What those mean exactly and when they get triggered is up to the operating system.

@media (light-level: dim) {
}

@media (light-level: normal) {
}

@media (light-level: washed) {
}

Light-level will be dim if the screen is in a dark place, like at night, whereas washed means that it's shown under bright lights or in outdoor conditions with lots of sunlight.

Operating systems nowadays already compensate for these situations by increasing or decreasing brightness, but a website owners we can improve the experience more. In dim situations, you might opt to decrease strong contrast here and there and decrease overall brightness. In washed situations you might want to increase the contrast of all text compared to the background.

Scripting (Supported in Firefox 113, Safari 17 and Chromium 120)

Scripting will let you test if JavaScript is available. It has three possible features:

none, JavaScript is not available
initial-only, JavaScript is only available during page load, but not after
enabled, JavaScript is available

Nav-controls (no support)

Nav controls is used to detect if the page is being viewed in a user agent that has navigation controls (specifically, a back button). It has two possible values:

none, meaning there are no navigation controls
back, meaning there is are navigation controls and they're visible ("obviously discoverable", according to the spec, which they explain as UI that's visible as opposed to a shortcut or gesture)

This is useful when your website is shown in a webview in an app, where the app might not have its own navigation controls. This way you can still provide a back button or other means of navigating.

Environment-blending (no support)

Environment blending lets you test whether or not your screen blends with the environment, for example if it's projected onto a piece of glass. There's three potential values:

opaque. Like a regular monitor, or paper (think of this as the default)
additive. For example, a heads-up display like Hololens. Black is transparent, and white is 100% light.
subtractive. For example, an LCD display like a Gameboy screen, embedded in a mirror. Here the opposite happens: 'white' is fully transparent and black has the most contrast.

Screen-spanning (supported in Chromium browsers)

The screen-spanning media feature (which used to be called just "spanning") is made to support devices with multiple screens. It will tell you if a browser spans multiple screens and if those screens are aligned horizontally or vertically. It has three possible values:

none, when the browser does not span multiple screens.
single-fold-horizontal, when the browser spans two screens, with the fold horizontally in the middle.
single-fold-vertical, when the browser spans two screens, with the fold vertically in the middle.

The specification for this is not yet final, and it might get new names and values, in particularly being more explicit about spanning horizontally or verticallym with integer values to support more than two screens.

Your site will work fine spanning across two screens because the browser will just pretend that it's a single screen, but you can use the values above, along with a new set of env() css environment variables that show you where the fold is so you can lay out things on both screens (For example you could use it to have a list on one screen and a map on the other.)

fold-left
fold-top
fold-height
fold-width

These give you an offset for the fold, and you can combine these with calc() to target each screen individually. For Javascript, there's a new api called window.getWindowSegments() that will return an array of your screens. These are static values so won't update if a user rotates their device.

New notations in Media query levels 4 and 5

Alongside the new media queries, the latest specifications (4 and 5) also comes with some new notations. They're useful improvements that are slowly finding their way into browsers.

Range: Replacing `min-` and `max-`

In media query level 4 you can do away with the min-* and max-* versions of media features that have a "range context" (e.g., a min and max version) and instead write them as a simple equation.

/* old notation */
@media (min-width: 300px) {
}

/* new notation */
@media (width >= 300px) {
}

If you have both a min-width and a max-width, you can even combine them into one equation:

/* old notation */
@media (min-width: 300px) and (max-width: 750px) {
}

/* new notation */
@media (300px <= width <= 750px) {
}

You can use both < and > as well as <= and >=. The first two will exclude the edges (so (width > 300px) works like (min-width:301px)), while the last two will include them (and work the same as the min-* and max-* versions).

The range syntax has been supported in Firefox for a long time, Chromium supports it since 104 and Safari since 16.4.

The next few notations aren't supported anywhere yet.

`or` keyword

Instead of a comma, you can now also write or just like how you could already write and. The entire query will then evaluate to true as soon as one of them matches.

/* old notation */
@media (min-width: 300px), (orientation: landscape) {
}

/* new notation */
@media (min-width: 300px) or (orientation: landscape) {
}

`not()` function

You can prepend not to the entire media query, but what if you only want to check a single value? You can do that with the not() notation:

/* instead of this: */
@media (min-width: 300px) and (hover: none) {
}

/* you can also write this: */
@media (min-width: 300px) and (not(hover)) {
}

Custom media queries

Custom media queries let you define a media query once and then use that media query in multiple places without repeating yourself, just like how css custom properties ("variables") work. They even have the same notation.

Here's an example:

/* Define your custom media query */
@custom-media --small-screen (max-width: 768px);

/* Then use it somewhere in your stylesheet */
@media (--small-screen) {
}

/* You can also combine it with other media features */
@media (--small-screen) and (pointer: fine) {
  /* styling for small screens with a stylus */
}

Deprecated media queries

Despite all the new features coming out, there's also parts older specifications that are not recommended for use anymore. You might still see them in the wild here and there, but you shouldn't add them to new projects and if you find them in existing projects, try and refactor them.

Device-* media queries

When media queries were first implemented, the main idea was that they reasoned about the device, so there were media features like device-width, device-height and device-aspect-ratio.

But the size of the device is not always the size of the viewport, so styling based on these makes no sense.

`prefers-color-scheme` lost a value

The no-preference value for prefers-color-scheme was recently removed from the specification so there will only be dark or light as possible values. They removed it because most browsers implemented this media feature with the default being light and never implemented no-preference anyway. The door is left open for re-introducing it in the future, as well as introducing other color scheme preferences, such as "sepia".

Scan

No browser actually supports this feature and it was to be used in tandem with the deprecated tv media type so we'll probably never see support again, but I'll explain it anyway. The scan media query can be used to test for the scanning process that is used to paint an image on a screen (like on a CRT monitor). It has two options:

interlace, where odd and even lines are drawn alternately.
progressive where all lines are drawn one by one.

progressive is described as a screen that is slower to update and probably fuzzier.

Using media queries in JavaScript

Lastly, I want to point out that you can't just use media queries in CSS, you can reason about them in JavaScript as well. You can do this with the window.matchMedia() function.

The window.matchMedia() function takes a media query string and return a "MediaQueryList" object with information on if that particular media query matches:

const match = window.matchMedia("(min-width: 400px)");

// match output:
{
  matches: true,
  media: "(min-width: 400px)",
}

The matches value will tell you if the media query evaluates to true. So if you had video that you wanted to autoplay, you could use a matchMedia function to do that only for people that don't have prefers-reduced-motion: reduce:

const video = document.createElement('video');
const canAutoPlay = window.matchMedia('(prefers-reduced-motion: no-preference)').matches;

video.setAttribute('autoplay', canAutoPlay);

You can also add a listener to the MediaQueryList object. This will let you respond to changes in the document that cause the media query to go from false to true, or the other way around.

const match = window.matchMedia('(min-width: 400px)');

match.addEventListener('change', (e) => {
  if (e.matches) {
    /* do a thing */
  } else {
    /* do another thing */
  }
});

The matchMedia object also used to have an addListener function that you could use for the same purpose, but that has been deprecated.

Test your media queries with Polypane, the browser for developers and designers

Polypane lets you test your website in many different screen sizes and against different media queries like prefers-color-scheme, print stylesheets and prefers-reduced-motion.

It's the fastest way to develop and test websites, and you can try it for free!

Polypane 3.1: New elements panel

Wed, 22 Apr 2020 00:00:00 GMT

Polypane 3.1 is now available and with over 30 new and improved features it's our biggest release ever.

With Polypane 3.1 we're introducing the Polypane elements panel: A completely new elements panel written for Polypane that syncs between all panes letting you easily update styles, content and attributes.

But with 32 other new and improved features there's way more to explore. There are 2 other new panels: Storage and Outline. There's an updated Meta panel that highlights issues, a new Discord preview and updated Twitter and Facebook previews. We've added the ability to import and export workspaces and added some default workspaces for convenience. There's new overlays, updated existing ones and improved performance all around.

Polypane element inspector

In Polypane you've had access to the Chromium devtools element inspector and while it works fine it was never developed to support multiple panes.

So we built our own:

The Polypane element inspector is extremely fast and makes common tasks really easy. All synced with all panes, of course. Here's a quick video showing it in action:

The element inspector is filled with smart features and it s a joy to use. Listing all the features would make this announcement twice as long. Very quickly: select elements in all panes at the same time, live editing of content and attributes, custom widgets for styling, one-click copying of CSS rule sets, automatic contrast checking and so much more. For a full rundown, read the documentation

Meta panel updates

One important theme in Polypane is that we want to help you create better sites. That's why we added warnings for common issues in the Meta panel. We show warnings for missing but important meta elements or when your title and description are too long or short.

If you define certain meta values more than once, we'll show you a warning indicator for that too. Other new things are more prominent place for the canonical url, all icons are now downloadable and if your page supplies oEmbed information that information is now also shown.

All social media cards now have a background color that matches their websites for both dark and light mode, so the preview is even more accurate and you get a better idea of the context where your card is shown.

We added a new social media preview: Discord, in dark and light mode. One of the cool things in the Discord share card is that is uses your site's theme color for the border.

Since the last release of Polypane, Facebook updated it's design and added a dark mode, so that is now updated in Polypane. New (or rather, back again) in this design is that Facebook will show a part of your og:description again but only if your title fits on a single line.

Other new panels

We also added two new panels: Storage and Outline.

The Storage panel has been in the works for a while (I hinted about it in an article in December of 2019) and it makes it super easy to inspect and edit your localStorage, sessionStorage and cookies, including cookies that are httpOnly, which you don't have access to in your own JavaScript.

The Outline panel shows an outline of your headings according to the HTML5 outline algorithm. Easy to quickly check if your page has a logical heading structure or if you're missing steps or have sections that need a title but don't have one.

Workspace import and export

We heard from many of you that you wanted to share your workspaces with your colleagues, so we've added the ability to export and import workspaces. Export your favorite workspaces to Polypane workspace files, share them with your team and they can import them into their own workspaces.

Default workspaces

We've also added a new tab with default workspaces. They include our default three-pane layout, the device lab, all our iOS devices, all our Android devices (including a new Moto G4 preset), the 6 most common screen sizes used worldwide and the default breakpoint for Bootstrap, Material UI, Tailwind and Bulma.

New overlay

We added a new overlay, Hostile CSS. Hostile CSS will inject styling for all default elements. You can use it to check if your component styles are properly isolated from any default CSS.

Color overlay now suggests alternatives

Like our free online Color contrast checker, the Contrast checker overlay will suggest improved colors that have enough contrast. This makes fixing your colors really easy.

Set your own tab homepage

When you open a new tab we show the default 3 panes and the getting started page. in 3.1 you can now change this 'homepage' to whatever configuration you want. Arrange your tabs the way you like, pick a URL, then set the homepage to your current view from the main menu.

Full changelog

There's more new features, improvements and fixes in this release so read through the full changelog below. All new features are fully documented in our docs too.

New Polypane Element Inspector
New Storage panel
New HTML5 Outline panel
New Default workspaces
New Exportable and importable workspaces
New Meta Panel: Discord preview
New Meta Panel: warnings for issues
New Ability to set new tab layout + url
New Hostile CSS overlay
Improvement Color contrast overlay now suggest color
Improvement Color contrast overlay supports testing numerical font-weights
Improvement Meta panel: downloadable images
Improvement Meta Panel: Facebook preview updated
Improvement Meta Panel: Twitter dark mode preview updated
Improvement Meta Panel: Social media previews are now shown on their real background color
Improvement Meta panel: shows oEmbed info
Improvement Panes no longer refresh when switching between horizontal and vertical mode
Improvement Panel settings are stored per tab
Improvement Updated default paneset
Improvement Screenshots now include timestamp
Improvement Disable cache now identical to devtools
Improvement Right click to open links in side browser
Improvement Support for Meteor devtools
Improvement Dragging links or files to tab bar opens them in new tab
Improvement Double click vertical resize to scale panes to 100%
Improvement Polypane loading looks better
Improvement Add Moto G4 pane preset
Improvement On Mac, Polypane now keeps running after last window is closed
Improvement Panel resizing is now faster
Improvement Updated UI of devtools extension manager
Improvement Urls with target="_blank" now open in a new tab
Improvement Scroll position is now saved per tab
Improvement Updated Electron
Improvement Full page screenshot now works with more websites
Fix Zooming shortcuts work again
Fix F12 now turns on inspect element in Isolate pane mode
Fix Figma sign in with Google now works
Fix Screenshot in browser mode now has correct dimensions
Fix No internet message in dark mode now has correct border color
Fix Custom headers are also applied on first load when switching modes
Fix Updated shortcut for fullscreen on Mac

3.1.1 (bugfix update)

Improvement Crashes in the panel no longer crash Polypane
Improvement Element inspector now understands CSS custom properties with fallback values
Improvement Element inspector now understands currentcolor
Improvement Updated Codemirror for Live CSS
Improvement Updated Electron
Improvement Support Google login for isolated panes
Fix Setting panes from a workspace correctly sets pane names
Fix Clicking on dimensions in device chooser sets correct device
Fix Prevent crash when meta description exists but has no content
Fix Live CSS shows Google Fonts as suggestions again
Fix Issue where side panel sometimes disappeared
Fix Opening links with target="_blank" in isolate pane mode no longer opens multiple tabs

Getting Polypane 3.1

If you don't have Polypane yet there is a free 14 day trial available. Get it here.

8 ways to increase your productivity as a web developer (in 2021)

Tue, 14 Apr 2020 00:00:00 GMT

Making websites takes time. There are a lot of parts you have to think about if you want to create a good, solid website and sometimes it might feel like there just isn't a way to go through the work faster. Whether you work alone or with a team of designers and back-end developers, there are a lot of way to be more productive.

A mistake many people and many companies make is that they set out to standardize their product. They only build based on a single Wordpress theme, or all their sites have the same features. If you want to work with bigger clients they almost never want standard work though. They instead want something custom-fit to their needs and requirements. That's more interesting work, more challenging and pays more. But it also means you you can't standardize your product.

You can't (and don't want to) standardize your product, but what you can do is standardize your process. As a lead front-end developer with over 15 years of experience, I spent a lot of time thinking about how to optimally configure this process. If you're intentional about it you can get some impressive productivity gains in all areas of the process. Here's 8 ways to do that, from the beginning of the project through to the end:

Start from a solid base
Agree on design shortcuts
Use handoff tools
Use a CSS framework
Re-use your components
Use Emmet
Use Polypane
Set up automated quality checking

Start from a solid base

If you start from scratch every single time, you can be sure you're never going to be faster than the last time. By creating or using a solid base for your website, you can save time on the things you're doing every time.

Backend developers already know this. Many will create their own starter project based on a language and framework of their choice, rather than a CMS. Where a CMS usually has a set number of functionality that you can only used in the way the CMS intended, a framework is more like a big box of building blocks that you can combine in ways that work best for your current project. This concept can be extended to your front-end too.

Take the last few projects and see which HTML is similar. Every website is going to have roughly the same elements: There's always a <head> with a title, favicon, opengraph info an links to your CSS and JS. 99% of the time a website will have a header with a logo and some form of navigation, and a footer with a copyright rule and some additional links, and most pages will have a content area for your CMS. Making that part of your "starter" or "base" HTML will save you a lot of time.

Additionally, though most of us love checking out new JavaScript frameworks, for your starter base you can probably get away with a few little JavaScript snippets. Cross-platform JavaScript is much easier than it was a few years ago, and most things can be solved with small "vanilla" scripts.

Agree on design shortcuts

Design tools give designers access to all widths, all colors and all font sizes. But in reality your websites will only use a few of each. You can save time during design and during implementation not by cutting corners, but by laying down some ground rules.

This can be super expansive, by creating a full design system, for example in the soon-to-be-released Modulz, where all the available design elements and variants are pre-designed and generated from actual code. You spend more time up front, but the result is something that can be quickly designed and build, often in tandem.

But design shortcuts can also be super simple: get your team to agree on set of design shortcuts that you apply to every part of the design.

For example, agree on a set of margins you re-use for every design element (like 8px/16px/32px/64px) and a designer will never have to worry about making sure all the margins are perfectly 64px instead of 63px (or worse, 63.47845px. Thanks Sketch!). On the flip side, you as a web developer will never have to waste time asking designers if they actually meant to use 60px this one time, or if it should just be 64 like all the rest. You can do the same for font-sizes and even colors.

This simple, low-tech piece of communication can save you hours of (re)development time. If you already agreed on potential margins everywhere, and any design element that uses a slightly different one you can just use the nearest matching one, then you also don't have to do any pixel-bleep-ing sessions with your designer. Or at least a lot less.

Of course it doesn't mean a design can never use a different margin, but the designer would clearly indicate any exceptions in your design file.

Use handoff tools

Working from a design file directly is a recipe for problems. Not only can you accidentally move parts of the UI without realizing, but the interface is geared towards creating a design, not dissecting it to re-implement elsewhere. For that, there are handoff tools.

They take a design and bring a unique interface that is focused on what front-end developers do. Favorites of ours include Avocode, Zeplin and Marvel, but design tools like XD, Figma and Sketch now all include their own handoff modes too.

Get familiar with these tools together with your designer so they can learn the best way to prepare design files for these tools and you as a developer learn how to most efficiently use the tools.

Use a CSS framework

First let me say that I'm not much of a fan of CSS frameworks. Most are big, slow, carry a lot of legacy and overly limiting while providing no good defaults, or if they have good defaults, they're usually someone else's defaults that probably won't work for you and your situation (Oh hi, Material design).

But.

There are interesting new frameworks that could work for you:

Bulma is a "next generation" CSS framework built for modern browsers, so it has a simpler and smaller codebase, is easy to customize and has some good looking defaults. I've seen this work in production really well.

Tailwind - Be warned, you might hate it when you first see it (I know I did). The trick here is that it moves your styling from writing CSS to writing class names. Each style (color, margin etc) gets their own classes so even though you're limited to a few fixed classes, your site will always be consistent. You get to either use the defaults, or customize them.

If you get over the fact you have to style using just classes, developing in it becomes really, really fast. The Polypane dashboard is written with it, for example. If you want to see how varied your designs can be and what the implementations might look like, I recommend Tailwind Toolbox

Re-use your components

While there are good, fast, accessible and responsive components out there, it's difficult to find ones that perfectly fit your and your teams way of working so often you'll end up creating your own. Yet, between projects there's usually UI elements and patterns that you re-use.

Maybe you have the perfect responsive menu, or the perfect contact form with accessible error handling and fancy animation.

Document those in such a way that you can easily implement them in each new project. Over time, they will evolve and you will add new features to them. If you do, don't forget to also update your reference component. Otherwise you'll still be digging around in old project to find that specific version of a component.

Use Emmet

While any text editor or IDE that you use will have support for snippets (use those for the reusable components we just mentioned), using Emmet can save you so much time. It's available for basically all text editors and IDE's.

The concept for Emmet is simple: What if you create HTML by writing CSS selectors? From the Emmet documentation:

This abbreviation:

#page>div.logo+ul#navigation>li*5>a{Item $}

...can be transformed into

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

...with a single "expand" shortcut. You can clearly see which of these two is faster to write, and as a front-end developer you already know CSS so there is very little to learn for such a massive increase in speed.

Just like how Polypane saves you time by all the resizing and reloading you don't have to do, So does Emmet save you time by all the typing you don't have to do.

Use Polypane

Didn't think I was gonna leave this out, right? On average, Polypane saves teams about 60% of their implementation time. That sounds insane, I know, but they're observed numbers. Very simply, if you count up all the time you spend resizing your browser during development, it's a lot. And it's just not something you do only once per page. In Polypane, that resizing doesn't have to happen because you already see all your breakpoints side by side. If you use it for QA, you can decimate the time it takes because you'll have far less devices to manage. More on that in a later article.

Polypane doesn't just save time because you don't have to resize. It has many other tools that will make you as a developer faster, like built-in live reloading that will make refreshing the page obsolete too, or debug tools that do everything from highlighting contrast issues to running visual impairment simulators live.

If you don't use Polypane yet, I challenge you to keep a tally of how much your resize your browser during a single day. Then go use Polypane.

But more importantly, when you build a site and you see all screen sizes at once, issues are caught faster (often before they happen) so your time spent per page will go down. You simply have less fixes to make after your initial implementation. With time you will automatically take those fixes into account with your first pass saving even more time.

That benefit carries pretty far: it also means far less issues come up after a project has been released. Having to do bug fixes on projects that were finished months ago is the most costly waste of time a web development team can have. Imagine not having to download a database and static files, and set up an old project on your machine just to fix a single issue.

Set up automated quality checking

You could manually check your in-progress site every now and then, but quality testers like Lighthouse and Webhint usually take a while to run. Ideally you do not want to wait for them to finish. So rather than running them manually, make them part of your progress. Automate checking every PR, for example, using lighthouse-ci and webhint's CI integration. That way you keep a good overview of how your project is doing quality-wise, without having to waste time waiting for the tests to finish.

Suggestions?

Those are my suggestions for improving the productivity of a web developer. If you have other suggestions, I'd love to hear them!

Reach out on twitter (@polypane or @kilianvalkhof) or email me: kilian@polypane.app and I'll add them to this article.

Color contrast checker that makes suggestions for better colors

Mon, 30 Mar 2020 00:00:00 GMT

For the past week or so I've been helping out with Coronastatus, an online platform that's now live in 20+ countries where people can self-report their health status in relation to the COVID-19 pandemic. One of the things I spent time on was making sure that the site and the colors used were accessible.

Polypane made it super easy to check if a color combination had enough contrast but it doesn't tell you what color would be good enough. There are online tools for that available but they were slow and I quickly decided to built it right into Polypane. In the next version the contrast checker overlay will give you suggestions for better colors:

And as I promised in that tweet, I also started working on an online tool. There are many color contrast checker tools online but they don't update on-the-fly, don't actually calculate the contrast correctly (by not taking alpha into account) or don't give suggestions. I think tools need to be fast, correct and actionable if they're worth using so I decided to build one that is.

It updates on the fly, giving you the ratio and suggested colors as you type your color or as you use the color picker.

It takes transparency into account for the foreground color (mixing it with the background color before calculating the contrast ratio) and the background color (with a warning.)

It suggest the closest color by luminance that meets the required contrast ratio.

It does this for both the AA and AAA levels of the WCAG, and lets you know when the contrast is enough for all text, just for large text, or for no text.

Oh, and it saves your colors and preferred level in the URL, so you can share it out easily :)

Go check it out here:

Color contrast checker that makes suggestions for better colors

Polypane 3: browser tabs and dark mode emulation

Mon, 02 Mar 2020 00:00:00 GMT

Polypane 3 is now available and comes with two big new features: Media Feature emulation and Browser tabs, as well as an upgrade to Chromium 80. To allow for browser tabs we also updated the rest of the UI to match.

Browser Tabs

Even before we launched in early 2019, adding browser tabs has been a popular request. We held off on that for a while due to performance concerns, but we found a nice way to implement tabs without any performance penalty.

With the addition of tabs, we also streamlined the rest of the header and made it fit better with each operating system. Polypane now looks even better on all three platforms with more consistent styling and better integration with each platform.

Each tab has its own full state, history, view mode, zoom levels and of course panes. Tabs can be reordered with drag and drop, and there's shortcuts for adding, removing and switching between tabs.

Media Feature emulation

Media feature emulation lets you toggle media query settings like screen and print, but more interestingly, set values for prefers-color-scheme and prefers-reduced-motion.

This means you can develop dark mode without having to switch your OS level settings or your browser settings. Even better, you can develop your dark and light mode at the same time side-by-side.

prefers-reduced-motion is an important media feature you can use to disable animations and other jarring effects to make your site more usable for people with vestibular disorders or other impairments that make motion unpleasant. Watching this side-by-side again is an excellent way to make sure your site looks good and works good for all your users.

We're working on getting more Media Feature emulations available in updated version of Chromium. We're particularly interested in the prefers-reduced-data feature but there are other ones like Edge's prefers-contrast that would be great to emulate as well.

Other improvements

Polypane 3 updates Chromium from 78 to 80, bringing it up to date with the current release.

We made improvements to our CSS breakpoint detection along with our handling. When you create breakpoints from your CSS, rather than give all panes a 100% height, we now give a height calculated on average device ratios. smaller (mobile) sizes scale to portrait, while larger (desktop) sizes scale to landscape.

Additionally, you can now right-click the breakpoint icon in the header to get a list of your breakpoints, so you can add just a single one. (note: we hide this list if you have too many breakpoints to display comfortably).

Detecting Polypane

In previous releases we added the Polypane user agent and a window.__polypane object so you could detect that your site was being shown on your server and in JavaScript. In Polypane 3 we also add a way to detect that you're running in Polypane in CSS.

When your site runs in Polypane, the HTML element gets an additional class in-polypane. Now you can use your server output, JavaScript and CSS together to display extra debug information when you're working with your site in Polypane.

Interface updates

With the browser tabs we also improved many other parts of the interface. We redesigned the quick switcher, global zoom now works per tab and per view mode and we highlight the active pane with a blue glow, so you know when keyboard input is sent to the site.

New overlay

We also added a new overlay: Audible changes. This overlay sounds a beep every time it detects a change in your HTML. It's a neat way of finding out where you're doing too much DOM manipulation, or when you're doing DOM manipulation where you don't expect it.

Microsoft Edge browser extension

Microsoft recently launched their new chromium-based Edge browser, so we made the Polypane helper extension available for it too. Get it here: Polypane helper for Edge.

Full changelog

There's more new features, improvements and fixes in this release so read through the full changelog below. All new features are fully documented in our docs too.

New Media feature emulation
New Browser tabs
New UI streamlining
New in-polypane class for styling
New Update to Chromium 80
New Individual breakpoints in dropdown
New Audible changes overlay
New Edge browser extension
Improvement CSS Breakpoints are now sized horizontally too
Improvement Zoom now works per view mode
Improvement Active pane is now highlighted
Improvement Windows titlebar integrates into the design
Improvement Workspaces now save emulation options
Improvement Support more sites in the side browser
Improvement Color contrast overlay now detects backgrounds more consistently
Improvment Support more complex login flows in Isolate Pane mode
Fix F12 now opens devtools on windows 10 too
Fix Better handling of license renewal
Fix No longer use occasionally stale data for screenshots
Fix Isolate pane mode could get in a reload loop
Fix OG images not updating when switching between view modes
Fix Viewport screenshot now positions and clears correctly
Fix Panes can now be longer than the viewport in vertical mode
Fix Workspace save shortcut no longer overlaps with Mac screenshot shortcut
Fix Color contrast overlay crashed on some websites

Updated to 3.0.4:

New Clear localStorage option
New Clear All Storage option
Improvement Add 19 new Google fonts to Live CSS, including the Inter variable font
Improvement More accurate live reloading when using IDE's
Improvement Panes now remember their scroll position on reload
Improvement Update Electron
Improvement Faster CSS breakpoint detection
Fix Tab navigation shortcuts
Fix Side browser address bar background color in Dark mode now correct
Fix First login on new machine custom url and paneset choice
Fix Emulation options not being set for new panes created from workspaces
Fix First login on new machine gave incorrect license error
Fix First login on new machine gave incorrect state error

Full release notes for Polypane 3

Getting Polypane 3

If you don't have Polypane yet there is a free 14 day trial available. Get it here.

Polypane is now part of the GitHub Student Developer Pack

Tue, 25 Feb 2020 00:00:00 GMT

We are super proud to announce that Polypane is now part of the GitHub Student Developer Pack. Eligible students get free access to Polypane for a year and can sign up starting today by authenticating with GitHub here: Polypane for GitHub students.

We are really excited to team up with GitHub to make Polypane accessible to students just starting out on their journey to become web developers and designers and we think Polypane will be a great help as they learn to make websites and web applications that work everywhere and for everyone.

CSS specificity calculator

Mon, 24 Feb 2020 00:00:00 GMT

If an element is targeted by multiple selectors, browser use the specificity of the selector to determine which styling to apply. Each selector has a specificity that is determined by what you use in that selector: elements, ID's, classes etc. This specificity is split up in different levels.

This CSS Selector specificity can be confusing if you're just starting out, or if you're working with a particularly complex set of styles. Quickly figuring out which CSS selector has the highest specificity helps a lot in finding out what's going on and getting your bearing on the styling.

To help with this, Polypane now has an online CSS specificity calculator:

Online CSS selector specificity calculator

The Polypane CSS specificity calculator not only has the specificity, but it also tells you how it made that score, and which parts of your selector fall in what category. There's also a short list of gotcha's you might run into when dealing with CSS Specificity.

4 CSS layouts without using media queries

Wed, 22 Jan 2020 00:00:00 GMT

Do you always need media queries to make a website responsive? With flexbox and grid you can make responsive layouts without having to define fixed breakpoints with media queries. Adam Argyle recently showed us a tweet-sized example of this in action, where just 13 lines of CSS give you 4 separate layouts.

All four layouts in action in Polypane:

How does it work? The HTML is surprisingly simple. No wrappers or extra elements:

<form>
  <input type="text" placeholder="Name" />
  <input type="email" placeholder="Email Address" />
  <input type="submit" value="Subscribe" />
</form>

If you want to use this in production, make sure all of these input fields have associated label elements.

The CSS that does the heavy lifting is very small too:

form {
  display: flex;
  flex-wrap: wrap;

  & > input {
    flex: 1 1 10ch;
    margin: 0.5rem;

    &[type='email'] {
      flex: 3 1 30ch;
    }
  }
}

That's 13 rows, blank rows included!

What's that & doing there?
Adam wrote this using postcss-preset-env, which is "Babel for CSS". It lets you write CSS using upcoming specs (like nesting) and compiles it to regular CSS.

So what does this CSS do?

The styling for the form and input elements work in tandem to create the different layouts, so we'll go through their CSS properties one by one. Lets start with the form element.

The form

The form is set to display:flex so has a flex layout. By default, that's a horizontal flex layout where all items fit a single row.

By adding flex-wrap: wrap, you specify that the flex layout can wrap to multiple rows if the elements don't fit a single row. Each of those rows will behave as their own flex layout, which this code uses to its advantage.

The inputs

The meat of this technique lies in the flex property on the inputs. The flex property takes three values (e.g. 1 1 10ch;) and is shorthand for three CSS properties:

flex-grow
flex-shrink
flex-basis

flex-grow applies when there is more space in the surrounding element (the form in this case) than the elements need. It take a positive number (or 0). The number indicates what part of the total an element takes.

The "part of the total" is best illustrated with an example. Say there are two elements, both having flex-grow: 1. They will both be equally wide at 1/2 of the total width. But if the second element has flex-grow: 2, the total number of parts is 1 + 2 = 3. The first item will then be 1/3rd of the total width, and the second element will be 2/3rd of the total width.

flex-shrink works much in the same way, except that it is used when there is less space than the elements would normally take up. Here, a higher number means it ends up being smaller.

In flexbox terminology, if the elements combined take up more space than available, their flexibility is set to shrink. Otherwise it is set to grow. This is not something you set explicitly, but is useful to know when working with flex layouts.

In our 4-layout example flex-wrap is set to wrap, which means that the flexibility will never be set to shrink. Instead, elements will wrap to the next row if they don't fit.

At this point, I have to admit that the calculation example I gave for the flex-grow value was a little simplified. It works that way only if the last property, flex-basis, is set to 0. Normally, flex-basis is set to auto, which makes things a little more complicated.

When flex-basis is set to auto, the number set for flex-grow and flex-shrink also take into account the width of the element, either the implicit width (called the 'content size') or an explicit width. So two elements that both have flex-grow:1 might not end up being equally wide, if one of them has much more content.

You can also set flex-basis to a value. In that situation, the initial size of an element is set to that value. In this layout, the "name" field and the button both get a value of 10ch, and the "email" field is set to 30ch.

What's a ch?
One ch is equivalent to the width of the "0" character in a font.

The effect of this is that the name input and the button are initially 10ch wide, and the email field is 30ch wide. Because we are in a flex layout, that flex-basis value is used as the starting point for the flex-grow or flex-shrink value. Think of them as multipliers for the flex-basis value.

In this layout the "name" field and the button both have a flex-grow of 1, a flex-shrink of 1 and a flex-basis of 10ch. The e-mail field has a flex-grow of 3, a flex-shrink of 1 and a flex-basis of 30ch.

In other words, the email field starts out 3 times as wide as the other field, grows three times as fast but shrinks at the same rate.

How does that get us to 4 layouts?

That's where the flex-wrap comes into play. When elements do not naturally fit side-by-side, they go to the next row. Let's go layout-by-layout from small to large and see what happens.

The smallest layout

The three elements are stacked vertically. Here's what happens:

There is not enough space to have all three elements side-by-side (their total is 50ch wide, 10 + 30 + 10), so elements will wrap to the next row.
Two of them together (either name and email, or email and button) also don't fit, so the end result is that all of them are on their own row.
We end up with three rows.
Each row is it's own smaller flex layout, and each element on a single row is smaller than the total width.
All of them have a positive flex-grow value, and don't share their row with other element, so all of them grow to the full width of their own row.

The second layout

The name field takes the full width, and the email and subscribe button are on row together. Here's what happens:

There is not enough space to have all three elements side-by-side, so elements will wrap to the next row.
Things get sneaky. Even though the name field and the button have the same flex values, a button type element has a slightly different content size, so ends up being slightly smaller than a regular input field. Browsers, right?
Name + email don't fit on a single row so email wraps to the next row. Because of the tiny difference, email + button do fit on a single row.
We end up with two flex rows.
The first row has just the name, so that takes full width because of flex-grow.
The second row is wider than both the email field and button combined, so flex-grow is used to make them fill up the width, the email field at a much bigger ratio compared to the button.

If the last element was not a button, this layout wouldn't be possible.

The third layout

The name field and email field are shown side by side, with the button below it. What happens:

There is not enough space to have all three elements side-by-side so elements can wrap to the next row.
The name and email fields fit side by side, so it's just the button that wraps to the next row.
Name and email fill out the first row in their flex-grow/flex-basis ratio, and the button fills out the second row completely.

The fourth layout

This is the simplest layout. The total width is wider than all elements, so they're distributed on a single row in their respective ratio.

But what about that button? You'd expect it to be as wide as the name field, since they have the same flex value. But here's where the sneaky thing from the second layout comes into play again: the content size of the button is less wide and so ends up being smaller.

Responsive websites without media queries?

Recreating this layout with media queries is possible but would take you 3 breakpoints at set widths and only works when the form is the full width of the page.

With this flexbox solution you can place the form element anywhere and it will fit the element it's in, giving you even more flexibility than just media queries would give you.

Using modern layout algorithm like flexbox and grid give you a lot of extra flexibility when it comes to the way your elements are laid out without needing to explicitly define them. As you can see, they let you do some pretty powerful things!

Polypane 2.1: Edit all your panes at the same time

Tue, 14 Jan 2020 00:00:00 GMT

With Polypane, we want to give you better insights into your site and make the entire developer/designer workflow faster. With Polypane 2.1, we've made some huge improvements for both of those goals.

What's new?

Quick list of the major new features:

Live CSS Edit all panes at the same time
Social media previews See what your page looks like when shared on Facebook, Slack, Twitter and LinkedIn.
Meta info Get a full overview of all your meta tags
Handoff / browse Use Avocode, Zeplin and more directly in Polypane
Workspaces UI Quickly switch between your favorite pane sets

Beyond that, we also added network throttling, new and improved overlays, better indicators, ways to detect when your site is shown in Polypane, speed improvements, and many more smaller features.

If you don't have Polypane yet there is a free 14 day trial available. Get it here.

Live CSS Panel

Write CSS and SCSS that is applied to all panes at the same time. With the Live CSS panel, quickly trying out new styling for your site on multiple sizes is super easy and very satifying.

The CSS editor is fully featured, knows all CSS declarations and will suggest the appropriate ones as you type, so writing CSS is super fast.

Live CSS comes with an element selector. This will let you click on any element in any pane, go through the CSS and find the actual selectors for that element and give them as suggestions in the editor. Selecting elements to write CSS for is super quick and doesn't require you to open devtools to find them.

Lastly, all of the Google fonts are available when you write Live CSS, so trying out new fonts is as easy as saying font-family: Aladin. Polypane will automatically load in the fonts for you.

Meta information panel

The meta information panel shows you all the information that's defined in your <head>. Your title, description and favicon, but also all your meta tags, viewport declaration, language and other information. This makes it super easy to spot missing info or typos.

The meta information panel also gives you previews of the social cards of Twitter, Facebook, Slack and Linkedin, as well as the Google search result. For Twitter and Slack, we also support their dark mode.

In developing this feature, we found out that none of the official social card previews of Twitter, Facebook and Linkedin accurately showed what your card was going to look like. They're all out of date!

Additionally, despite their documentation claiming otherwise, all sites use whatever meta information is available. So we painstakingly reverse engineered the way the social cards were actually rendered and we replicate that with pixel-perfect accuracy.

Our generated social previews: Twitter, Facebook, Linkedin & Slack (clockwise.)

Handoff/browse panel

An important aspect of modern development is handoff: tools that take a design and then display the CSS and dimensions of elements and let you export images, so you don't have to click around in a design tool to figure all that stuff out.

With the handoff panel, you can use all these handoff tools directly inside of Polypane. Your design spec and the site are always side-by-side.

We support a number of handoff tools natively, like Avocode, Invision and Zeplin, but you can also fill in a custom URL.

A custom URL you say? Does that mean you put a browser in a browser?

Well... Yeah!

You can also use the Custom URL option to keep open any reference that you're working with, like MDN, CanIUse, the React documentation or any API documentation.

Workspaces panel

Workspaces were introduced in Polypane 1.1 as a way to save sets of panes using shortcuts or the window menu. Now they have a visual interface.

The workspaces panel contains a visual overview of all 9 workspaces (with a preview) and lets you easily save and restore them.

New in the workspaces panel is that you can name your workspace, so you no longer have to remember if, for example, Your android devices were in workspace 1 or 2.

Where you can find all these new features: the side panel

With the side panel, Polypane gains a new place to add functionality and show site information that is not so easily surfaced in other browsers, but still super important.

You can dock the side panel either on the right or on the bottom so you can make it fit your favorite screen configuration.

New and updated overlays

In Polypane 2 we introduced overlays: simulators and debuggers you could overlay on a pane. These simulators let you quickly check accessibility issues and simulate things like color blindness, or viewing your site in bright sunlight. In Polypane 2.1, we've added more overlays and improved existing ones.

There is a new Z-index overlay (top left) that highlights which elements have a defined z-index. It's based on the plugin that Addy Osmani wrote for Visbug, with UI improvements that we're contributing back to that project as well. We've improved readablity and also show the z-index stack for each element that has one.

We have two new visual impairment simulators: Glaucoma (top center) and Cataracts (top right). Both of these eye conditions blur and dull your vision.

The color contrast checker (bottom left) now works better when backgrounds are defined for ancestors, and no longer needs a reload.

Bright sunlight (bottom center) now has less of a blowout and an additional glare to simulate the reflections that the glass on a device creates.

We have a new Night mode (bottom right) that simulates the way your page looks when Night mode is active, where screens dial down the blue tones and brightness.

Network throttling

In Isolate panes mode you can now throttle your network connection alongside emulating devices, to test how a page behaves in more realistic settings. We currently have 4 settings: Online, Mid tier mobile, low-end mobile and offline.

Detecting Polypane

If you're developing your site, you might want to show additional debug information or test different variants of your page in different panes. Starting in Polypane 2.1 we offer two ways to detect your site running in Polypane, through our User agent and through a __polypane property on the window.

Read about how to detect Polypane

Custom tooltips

We switched out the native tooltips for all buttons for our custom ones, so they show up quicker and look better, making it easier to get started with Polypane.

Indicators

Reference image, Overlays, Emulation and Devtools all have a blue dot when they're active.

For Emulation, we show a yellow dot when the network is throttled, and if you have an error in your console, the Devtools icon will have a red dot. This will tell you at a glance if there is an issue you need to look at, without needing to open the devtools. Emulation and Devtools are available in Isolate Pane mode.

Screenshotting improvements

Each release we further tweak and improve the screenshots we create to get a better result. Polypane is already much better than Chrome, Firefox and nearly all online tools (check out Screenshot comparison page to find out how) and we're continuing to make the screenshots better for dynamic websites. Scripts now load better and animations are handled more consistently.

Performance improvements

We've rewritten parts of Polypane to make them faster and more performant. The synchronised scrolling is now an order of magnitude faster, and most of the messaging and handling of content is done asynchronously, making the UI more responsive.

Full changelog:

There's more new features, improvements and fixes in this release so read through the full changelog below. All new features are fully documented in our docs too.

New Side panel
New Site meta information panel
New Live CSS panel
New Handoff/browse panel
New Workspaces panel
New New overlays: Z-index, Glaucoma, Cataracts and Night mode
New Network throttling
New Live reload delay option
New Detect Polypane from your site
Improvement Use custom tooltips for all buttons
Improvement Faster and more performant scroll syncing
Improvement Color contrast overlay has improved calculations
Improvement Color contrast overlay no longer needs a reload
Improvement Bright sunlight overlay now simulates glare
Improvement Updated emulated user agents
Improvement Better full page screenshotting support
Improvement Icons in the pane header now show activity dots
Improvement Pane devtools show red dot when there are errors
Improvement Clicking pane devtools icon will refocus it if already open
Improvement View mode and Filter buttons simplified
Improvement All popovers will stay inside window
Improvement Close all panes option added to the menu
Improvement Warning when opening more than 15 panes
Improvement Added the f6 shortcut to focus address bar
Improvement Tweak UI icons
Improvement Lower bound of generated breakpoints is now 320px
Fix Full mode no longer overflows screen
Fix Speed and responsiveness improvements
Fix Zoom-to-fit for panes works again
Fix Support multiple levels of imports for breakpoint detection
Fix No longer blocking scripts when making screenshots
Fix 404 page in full mode no longer overlays icons
Fix Prevent syncing of file inputs

2.1.1 Update

Improvement Live CSS now supports Variable Fonts
Improvement Updated Google SERP preview
Improvement Update Twitter preview image aspect ratio
Improvement Add Sketch Cloud to handoff panel
Improvement Add context menu to handoff panel
Improvement Support explicit downloads in handoff panel
Improvement Device mode button in devtools is hidden
Fix context menu being unresponsive on isolated panes
Fix crash when opening sites that patch document
Fix dark mode on first launch on Mac being set incorrectly
Fix workspace UI missing dark mode style
Fix spacing issues in pane header

2.1.2 Update

New Svelte developer tools in Devtools manager
Improvement Higher contrast in Live CSS in dark mode
Improvement Bump font-size in Live CSS editor
Improvement Panes outside of view are unsuspended quicker
Improvement Handoff panel custom urls update quicker
Improvement Overlay switching happens quicker
Improvement Full page screenshot get 40% speed improvement
Fix Full mode was 1 pixel too narrow
Fix Crash with invalid og:url value
Fix Outdated parameters when making overview screenshot
Fix Live CSS preserve checkbox alignment
Fix Occasional reload loop in isolate pane mode

Getting Polypane 2.1

If you don't have Polypane yet there is a free 14 day trial available. Get it here.

Responsive Design Glossary

Mon, 02 Dec 2019 00:00:00 GMT

With responsive design come a lot of new terms and concepts and there wasn't really a single place that listed them all with explanations in plain English. So we created one. No super long articles that bury the explanation two thirds of the way in, but the shortest, clearest explanation we can give. If something can be explained in a single sentence, a single sentence it is, no need to waste your time!

In plain English also means that we didn't write it to become the Wikipedia of responsive design. The term and explanation are to the point and sometimes opinionated. We want you to do the right thing, even if there's a term for the wrong thing!

After you get the introduction and explanation of a term, you're more than welcome to dive into deeper explanations and articles (and we link a few of them we particularly like) but that's up to you.

Go check out our Responsive Design Glossary and if you like it, please share!

Polypane 2: device emulation, new modes and simulators

Wed, 06 Nov 2019 00:00:00 GMT

Polypane 2 is out! In Polypane 2 we're introducing a bunch of often-asked for features, like full device emulation, filtering and a vertical view mode but also some completely new functionality that just might change how you build websites: overlays, simulators and visual diffing.

These new features give you better insights in your site right at your fingertips and make laborious tasks like contrast checking or QA much, much faster.

New logo

We decided to give the logo a little refresh. The colors in the previous version were a little dull and no longer fit with the rest of the colors in our design.

The new logo is also more legible in small sizes, feels fresher, and if you squint it kind of looks like a P.

New view modes

We streamlined the view modes in Polypane. There are now four: Horizontal, which is the default view, Vertical, which is new and lets you scroll vertically to see all panes, Focus mode and Full mode. Devtools mode is gone because Devtools extensions can now be used everywhere with our new isolate panes feature (read on for more about that).

Vertical view mode is really nice to get a really high-level overview of your site by zooming all the way out:

All view modes now have single-key shortcuts so switching between them is even faster. Read more about them in the documentation: view modes.

Overlays and simulators

Polypane now supports "Overlays" for each pane. We already had an overlay for all panes with our "layout debugging" feature, but they can now be applied per pane and the available number of overlays has grown to over 15 items.

Simulate all versions of color blindness, quickly test your site for accessibility issues or make your page editable to quickly make text changes. There's a few more overlays, so try them out!

Overlays will help you develop faster, catch bugs earlier, test your site in new ways and in the end, produce better websites.

In the image above from left to right we have: an accessibility check, a colorblindness simulator, a farsightedness simulator and a dyslexia simulator.

Isolate panes (in beta)

Isolate panes is a new mode that changes the way Polypane works. Websites in Polypane up to now had a shared context, which meant that for example we had a single devtools for all panes. With isolate panes, each pane has its own context. With this each pane has access to devtools extensions, and we can do full device emulation.

If you're doing javascript-heavy sites, or want to test with device emulation, turning Isolate panes on in the edit menu can really improve the experience you have in Polypane. Since Polypane 4 isolate panes are out of beta

Device emulation

You can set the device type, emulate touch, configure the pixelRatio and set the user agent. Our Device presets have been updated to include these, so they will automatically be applied in Isolate panes mode.

Custom HTTP headers

A unique new feature in Polypane is the ability to set custom headers per pane.

With custom headers, you can send extra information to your server and test things like multiple languages using the accept-language header, or come up with your own headers and configure your server to do things like test multiple themes, print additional debug information or discard destructive actions so testing forms becomes much easier. Anything is possible.

Visual diffing with reference images

Each pane can now have a reference image applied to it. Reference images can be overlaid or shown side-by-side with pane. You can use this to compare a site to it's original design, or compare a site to a screenshot made earlier.

We don't think website should look exactly the same as the design, and they're always going to be cross-browser differences so pixel-perfect matching shouldn't be the goal. But this will significantly speed up the work for anyone doing QA or checking that a design has been implemented correctly, and combining Polypane's screenshot functionality with the visual diffing option in the reference image feature is immensely powerful.

Find out more about reference images.

Filtering panes

You can now quickly filter panes based on their device category (Mobile, Tablet, Desktop and Other). If you have a custom list of device presets, it will use your own custom categories. This will quickly let you toggle hide and show various types of devices without losing your custom set panes.

Update to Chromium 78

Polypane is now running on Chromium 78, bringing it up-to-date with Chrome itself.

Full changelog:

New Vertical view mode
New Overlays and simulators
New Device emulation
New Visual diffing support with reference images
New Filter panes
New Isolate panes
New New icon
Improvement Upgrade to Chromium 78
Improvement Better no-caching support
Improvement Shortcuts to switch view modes
Improvement Remember last used folder for live reload
Fix Reload same url works correctly
Fix Support parsing CSS without media queries
Fix Close button and quickswitcher are no longer overlaid by window controls on mac

Update notes

Because of the upgrade to Chromium 78, you will have to reinstall your devtools extensions for them to work.

Getting Polypane 2

If you don't have Polypane yet there is a free 14 day trial available. Get it here.

Polypane 1.3: Full page mode and screenshot improvements

Tue, 24 Sep 2019 00:00:00 GMT

Polypane 1.3 adds a full page mode, screenshot improvements and shortcuts for the quick switcher, as well as laying the groundwork for the upcoming Polypane 2.

What's new in this release?

Full mode

Show a site in the full width of your browser window. Yep, just like other browsers. When building a website, you're not always working on the responsive design. If you're working on some interaction or javascript, having just a large, full width site available is really helpful. Full mode supports developer tools extensions so debugging JavaScript applications works great. Switch to it by right-clicking on the Eye icon.

Full page screenshots improvements

Polypane is best in class when it comes to generating full page screenshots, and we've improved it even more in this release. Videos and page styling that is applied asynchronously while scrolling are now rendered more consistently. Fixed elements are placed better and more scrollbars are hidden, even if you scroll different elements on your page. This results in screenshots that are even closer to what you see when just scrolling the web page.

Quick switcher arrow key support

When in Focus mode or Devtools mode, you can now use the arrow keys to quickly switch between your various panes or breakpoints. This is a really, really quick way to quickly check a design.

In-app release notes

After updating the app, you're now greeted with a quick popover showing you the highlights of the latest release and a link to its blogpost for more information.

Changes to updating

Polypane now only updates on user action rather than on next restart, and if it has trouble updating, it will guide you to the download page instead. You can also manually check for updates.

Account switching

If you want to switch to a new account for your Polypane installation, you can now unlink your current account via the menu. Perfect for those of you that were testing Polypne and getting a new account through your employer.

Proxy support

If you're behind a proxy, Polypane will now automatically use it.

Workpace updates

You can now find workspaces in the main menu, where you can save and restore them in addition to using the shortcuts.

Full changelog:

new Full Page mode
new In-app release notes
new Right-click support for opening and copying links
improvement Arrow key support for quickswitcher
improvement Proxy support
improvement Full page screenshot improvements
improvement Workspaces can now be opened from the menu
improvement CSS breakpoint detection in devtools mode reads external CSS too
improvement Updating Polypane now only happens on user action
Improvement You can manually unlink your account from the menu
bugfix Prevent Polypane from crashing in certain situations in devtools mode
bugfix Screenshots no longer use potentially stale URL
bugfix Pane heights update correctly when switching Workspaces

Most of the features in this release came via user requests. We're focused on making Polypane work for you, so if you have suggestions that would make your usage of Polypane better, reach out and let us know!

We're already hard at work on the next update of Polypane, and this release has been laying the groundwork for the amazing features we have planned for you. Stay tuned!

Getting Polypane 1.3

If you don't have Polypane yet, you can get it here.

The perfect responsive menu (2021)

Fri, 20 Sep 2019 00:00:00 GMT

On a desktop, websites have the space to show the full menu or navbar. On a mobile device that space isn't there and you want to hide the menu behind a toggle (like a hamburger icon), then show it when people click that toggle. How do you offer both in an accessible way that keeps your HTML simple, without duplicating your menu? That's what the perfect responsive menu does.

Though the hamburger icon is well known by now, to better help people that are not familiar with it you can show the icon alongside the word "Menu".

In this article, we'll show you how to create a responsive menu that uses the same HTML on all viewports, is responsive and looks great. The perfect responsive menu.

The HTML

We start with the HTML.

<nav class="navigation">
  <button aria-expanded="false" aria-controls="menu">Menu</button>
  <ul id="menu" hidden>
    <li><a href="/">Home</a></li>
    <li><a href="/benefits">Benefits</a></li>
    <li><a href="/pricing">Pricing</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

The basic menu is as you've probably written before. It's a list of links (an ul) wrapped in a nav element. But two things are different.

First, there's an extra button. The button has some attributes you might not be familiar with: Aria attributes. With these attributes we can help assistive tools like screen readers know the purpose of the button. In this case, the button controls the element with id "menu", and it's currently not expanded.

Second, The menu is initially hidden, using the hidden attribute. We hide it initially because we develop mobile first, and on mobile we only show the button.

The JavaScript

The button by itself won't do anything. For that, we use JavaScript.

const toggleMenu = document.querySelector('.navigation button');
const menu = document.querySelector('.navigation ul');

toggleMenu.addEventListener('click', function () {
  const open = JSON.parse(toggleMenu.getAttribute('aria-expanded'));
  toggleMenu.setAttribute('aria-expanded', !open);
  menu.hidden = !menu.hidden;

  if (!menu.hidden) {
    menu.querySelector('a').focus();
  }
});

When you click on the button, we call a function that will get the current value of the "aria-expanded" attribute, and invert it. It will do the same for the "hidden" attribute on the menu. When the menu is visible, we'll focus the first link so it gets properly announced.

The JSON.parse function helps us convert the attribute from a string to a real boolean.

At this point, the toggle is functional:

See the Pen The perfect responsive menu (skeleton) by Kilian Valkhof (@Kilian) on CodePen.

The CSS

Support for the hidden attribute goes back to IE11, but if you need to support older browsers, then adding the CSS below will let you support them. (keep in mind you might need to change the javascript above too)

[hidden] {
  display: none;
}

At a certain width, the viewport will be wide enough to hide the button and show the menu:

@media (min-width: 40rem) {
  #navigation button {
    display: none;
  }
  #menu {
    display: block;
  }
}

The width at which this happens depends on your design and the length of your menu, so while 40rem works for me, it might not work for you.

To show this in action, toggle the "CSS" panel in the pen below, it will switch between showing just the button and just the menu.

See the Pen The perfect responsive menu (responsive) by Kilian Valkhof (@Kilian) on CodePen.

The finishing touch: styling

At this point, it's up to you how you want to style the button and the menu. You can make it as simple or complicated as you want.

For example, the mobile menu on the Polypane website uses an svg icon for the menu with an animated growing background and a staggered animation of the menu items. I switched to PostCSS (which allows nesting) to make things a little more readable.

See the Pen The perfect responsive menu (styled) by Kilian Valkhof (@Kilian) on CodePen.

It doesn't have to look like this though! With just this skeleton HTML and JavaScript, you can use CSS to style it in many different ways. You might choose to slide open the menu like a dropdown, pushing the rest of the content down, or you could have it slide in from the left like a side panel. And using css transforms you can animate the transition in any way you like.

As long as you keep the HTML and the core functionality of the JavaScript intact, you will have an accessible, responsive menu that uses the same HTML on both mobile and wider viewports. The perfect responsive menu.

Give your eyes some rest with dark mode in Polypane

Tue, 27 Aug 2019 00:00:00 GMT

Whether you like your entire OS to be in dark mode or not, sometimes it's just nice to dim an application and gives your eyes a little rest. That's exactly what dark mode in Polypane, one of our most requested features, gives you.

No more bright flashes

With dark mode, switching from your code editor, IDE or terminal to Polypane will be less jarring and disruptive. Dark mode will turn on automatically for macOS users who have dark mode enabled, and for everyone else it's just a matter of toggling using cmd-i or ctrl-i.

Complete reworking of the UI colors

The Polypane dark mode is a complete recoloring of the UI using css custom properties and with it, support for multiple color schemes. Depending on your feedback, we'll look to add a high contrast mode or even customisable themes. Let us know what you'd like to see!

Try out Dark mode in Polypane and give your eyes some relief.

Polypane 1.2: Dark mode, Full page screenshots, Live reloading and more

Thu, 22 Aug 2019 00:00:00 GMT

There is a new version of Polypane available! It brings dark mode, live reloading, full page screenshots and a ton more great features. Read on for the details. To check out the latest version, start your trial.

What's new?

Dark mode

What can I say, it's dark mode.

Full page screenshots

You can now generate a full page screenshot of any of your panes, as well as just the viewport. This is one of the best implementations out there and it should work really well for nearly all websites.

The full page screenshot in Polypane can correctly handle fixed elements and fixed backgrounds, and it can also deal with viewport units properly.

Most screenshot services don't do either and that means that any page with for example a fixed header will end up with an incorrect screenshot. In Polypane, that just works.

Saved screenshots also include the url and the pane name, so it's easier to keep track of them.

Live reloading

Polypane now has built in live reloading for your projects. Instead of manually refreshing the page, you tell Polypane which folder to watch and if it detects changes, it'll refresh the page for you.

If it's a CSS file or an image Polypane will update them without a page refresh, which is even faster!

If you can't use Live reload, Polypane now also has an Auto reloading mode that will reload the page at a set interval, and of course you can still use your own hot reloading solution as well.

History and autosuggestions

You can now right click the navigation buttons and navigate to any previously visited page.

The addressbar now works more like Chrome or Firefox where you can type fragments of urls and it'll match urls that contain all of them. If you previously visited https://polypane.app/docs/list-of-shortcuts/ for example, you can just type "pol do" and it'll show you all URLs that match. Navigating like this is much quicker and will really change how you use Polypane.

Keyboard and form syncing

Any keyboard input and anything you type into forms is now automatically synced between all panes. This means that if your site uses keyboard shortcuts you can easily test them in all panes at once, and the same goes for filling in and testing forms.

Shortcut overlay

I got a few user requests for this and it's super handy to have. Press F2 (or use the help menu) to quickly show an overlay of all the shortcuts without having to go to the 'getting started' page.

Simplified breakpoints

If you have a large website, it's not strange to have over a dozen CSS breakpoints throughout your site. Showing all of them might not be needed to get a proper overview. With the new simplified breakpoints (which you can find by right-clicking the breakpoints button) Polypane automatically generates 5 panes that map to your sites supported widths. This way you get a good overview of the range of your responsive styles without needing to see every breakpoint.

Support for handling invalid certificates

Polypane will now show you a warning for unsafe certificates (like expired certificates, or ones with the wrong domain) and ask you whether to allow them or not. Your answer will be saved for the current session.

You can now manually clear the cache, cookies and saved basic auth credentials, as well as disable the cache entirely when using Polypane. Find these in the edit menu.

History.replaceState implementation

Polypane now implements history.replaceState calls, where calling it will update the URL and sync the panes.

What's improved?

Speed improvements

I spend a lot of time optimising the Polypane code and also decoupling the main UI from the panes. The UI should now be more responsive and heavy websites should have less influence on the rest of the UI.

Pane header UI

The pane headers have had a facelift. The height is now no longer shown vertically, but sits next to the width above the pane, and there is more space above the header which keeps things clean.

The rotation button is now visible in the header as opposed to the overlay, so it's much easier to quickly rotate a pane.

Quick switcher UI

The quickswitcher, added in 1.1, now spans the whole width and the selected size will be highlighed. The pane resizing animation has been removed to provide a snappier and faster experience.

Quickly zoom by scrolling

You can now press cmd/ctrl and scroll to zoom Polypane in and out.

Many users didn't realise Polypane also had a menu that appears when you press alt, so the menu is now shown by default. If you don't like this behaviour you can revert to the old behaviour in the view menu.

Improved first launch

The first launch, where you enter your email and license key, now has a sleeker design and lets you choose the website you want to start Polypane with.

Full changelog:

new Dark mode
new Full page and viewport screenshots
new Live reloading and Auto reloading
new History and autosuggestions for the address bar
new Synchronize keyboard and forms between panes
new Shortcut overlay
new Simplified breakpoints view
new Support for self signed and invalid certificates
new Disable cache, clear cache, cookies and saved auth options
new First time launch experience now lets you choose URL
new history.replaceState support has been added
improvement Faster rendering of main UI
improvement Pane UI is now more streamlined
improvement Redesigned quick switcher
improvement Saved screenshots now include URL
improvement Zooming now also works with ctrl/cmd + scroll
improvement Menubar on Windows now visible by default
improvement License flow rendering improved design
bugfix Minimum dimensions for the app
bugfix Quit no longer broken on mac

Getting Polypane 1.2

On Mac, Polypane will automatically update. Windows users usually get an automatic update too, but this version requires a one-time manual update. download Polypane and re-install it. Linux users also need to download the new version from the download page.

If you don't have Polypane yet, you can get it here.

Polypane 1.1 release notes

Sun, 07 Jul 2019 22:00:00 GMT

Update 1th aug 2019: Polypane 1.1.1 is now available with the following bugfixes:

Fix: zoom-to-fit on Windows (it got broken in 1.1, sorry!)
Improvement: better breakpoint detection for certain sites
Improvement: warning for browsersync is hidden if Polypane's scroll sync is turned off
Fix: localhost now accepts self-signed certificates silently
Fix: Polypane now overwrites the max connections of devservers on localhost (useful with e.g. Gatsby)
Fix: Windows builds are now also signed :)

Polypane 1.1

1.1 is the first major release after our launch in the middle of May. It's filled with new features, improvements and bugfixes.

Devtools mode and Devtools extension support

Devtools mode is now the normal mode in Polypane.

Polypane has a new Devtools mode that lets you use your favorite devtools extensions like the React and Vue devtools. You can install them right from inside Polypane using the new Devtools Extensions manager.

Because the pane in Devtools mode is completely isolated from the rest of Polypane, you can now also run your Lighthouse Audits in it!

More on Devtools extensions

HTTP Basic Auth support

Many of you are using staging websites that have HTTP Basic Auth in front of them for security. Polypane 1.1 will show a modal to enter the username and password for these sites, and then remember them for the rest of the session, or if you want, permanently.

Workspaces

With workspaces you can store and retrieve your favorite configuration of panes. You can have a workspace for your mobile devices, for a 'quick check' or whatever else you want.

In this release, workspaces have been intentionally kept simple so we can learn from how it's being used and use that to improve the feature in future releases.

Focus mode improvements

Focus mode is a great way to hone in on a single pane, but that doesn't mean you should have to give up using your CSS Breakpoints or the pane sizes you prefer using in the default mode. That's why Focus mode (and Devtools mode) now have a quick switcher at the top of the screen that lets you quickly resize the pane to any of your default mode pane sizes (this works with workspaces too!) or from the CSS breakpoints in the page.

We also made changes to how Focus mode behaves when you resize the pane. When the pane gets resized to wider than the screen, it will automatically be zoomed out to fit. This works when switching to a different pane size, but also when dragging to resize.

Addons for other browsers

You're probably not using Polypane as your daily browser, but what if you want to open the current tab in Polypane? We created browser addons for Chrome and Firefox that let you do that with a single click. Quickly open the current tab in Polypane and get developing!

Clean mode: hiding the header

Space is at a premium on most people's screens and when you're working on your own site in Polypane, you probably don't need the header so much. In Polypane 1.1 you can quickly hide the header via the main menu or a shortcut, giving you a bunch more space and letting you really focus on your project.

Other improvements

Developer ergonomics matter a lot to us, as you can imagine. So we have a ton of smaller improvements too:

A new shortcut to rotate all panes.
Each pane now has a clear 'rotate pane' button in the pane preset overlay.
Shift ctrl/cmd C support for 'inspect element'.
Now associated as viewer for HTML and HTM files, and can be used on mac with open {url} -a "Polypane".
We detect browsersync running and will warn you about their scroll sync.
Zoom in/out now also works in your devtools.
Undocked devtools will be brought forward/get focus when you use inspect element.
Tweaked desktop/laptop screen sizes.

There's always bugs in software, especially in v1, so we fixed a bunch of those too:

The device preset overlay is now also visible when the panes are displaying an error message.
The notification bar is no longer visible on very narrow widths.
Panes that have no height specified can no longer be rotated.
Context menus are now cleared correctly, instead of just made invisible.
Fixed the support links in the license flow.
Random pane shortcut now works again in Focus mode.
Added missing tooltips to pane headers

Getting Polypane 1.1

On Windows and mac, Polypane will automatically update to 1.1. You'll recieve an update notification and after a restart you should have 1.1. For Linux users, you will need to download the new version from the download page.

You can also get the addons for Chrome and Firefox from the download page.

I hope you enjoy this release!

Responsive design ground rules (updated for 2024)

Mon, 01 Jul 2019 22:00:00 GMT

Creating a responsive design can be intimidating. There are many moving parts, things might lay out in ways you didn't expect and keeping all various viewports in mind when laying out a design can be daunting. With these ground rules, your responsive designs will be more robust and predictable.

Video

Prefer a video? We recently discussed these ground rules in a 30 minute presentation for Mintbean:

Rule #1: Keep your viewport simple

Back when the viewport meta tag was first introduced, common knowledge was you had to add in all sorts of values to prevent users from resizing and to have a minimum and maximum screen size. It turns out that doing that is actually hostile to your users.

You really only want two things: set the width to the device your site is shown on, and make sure the initial scale is 1, which means that 1 pixel in your CSS equals one device-independent pixel (and also prevent weird zooming behaviour when rotating mobile devices), like this:

<meta name="viewport" content="width=device-width" />

There are two things you can consider adding:

<meta name="viewport" content="width=device-width, initial-scale=1" />

initial-scale=1 will prevent mobile browsers from zooming out if you have horizontal overflow issues, instead opting for a horizontal scrollbar. Neither is ideal and the true fix is fixing the overflow issue, but between the two I prefer showing the page at the intended zoom level.

<meta name="viewport" content="width=device-width, viewport-fit=cover" />

viewport-fit=cover will tell mobile browsers that your site knows about devices with notches or other device-parts that seem to "overlay" the screen. This will make sure your site is shown in the full screen, even if that means it's partially hidden behind a notch. That will prevent white bands on the sides in landscape mode, but you will have to make sure that you prevent content from ending up behind the notch.

You can do that with CSS env variables:

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Because you don't know if the user has the phone oriented with the notch on the left and right, you can use these env variables to add enough padding or margin to elements to prevent them from going behind the notch or other device parts.

Keep in mind that these env variables are the precise width of the notch, so if you just use the env variable, your content will sit flush to the edge. You'll need to add some padding or margin to make sure your content doesn't sit flush to the edge using calc:

main {
  padding-right: calc(env(safe-area-inset-right) + 1rem);
  padding-left: calc(env(safe-area-inset-left) + 1rem);
}

Rule #2: Mobile first

You develop websites on a large laptop or desktop screen, and usually your client is most interested in the desktop design of a website, so it might feel natural to just start with the design for the desktop site and then work your way down. But starting mobile first is actually easier and will result in less code.

If you build mobile first, you're building up your CSS in complexity. What I mean with that is that your mobile views are usually much simpler and thus require less CSS. They almost always have just a single column, and lack many of the additional flourishes you have space for on larger screens. If you build mobile-first, this means that, as you add styling for larger and larger media queries, you're adding to the design.

If you start desktop first, you already have all this styling that you then need to write more CSS for just to undo your more advanced desktop styling. So you're writing more CSS and if you're not carefully undoing all CSS, you end up with things like horizontal overflowing or text not fitting.

With mobile first, you save a large chunk of CSS you simply don't have to write, making it smaller and your website faster.

Rule #3: Design from content out

To determine where your breakpoint will be, you can opt to use values like 320px, 375px, 768px and 1024px, which all map to various real device widths. Basically, design for specific devices. But when new devices become more popular (#375IsTheNew320) your design might not look so good on those devices.

Stephen Hay, who wrote the book on responsive design workflows, advices you to start with your small screen, then:

"expand until it looks like shit. Time for a breakpoint!"

This focus on the content will force you to think of websites as inherently fluid. You can't design only your pixel perfect widths, because they don't exist.

Quick rule of thumb: you want your line lengths to be around 70 characters long. That translates (depending on the font!) to about 36 to 40 em.

Rule #4: Use ems in your media queries

With specific device widths no longer mattering, you should also switch out those breakpoint widths in pixels, to widths in ems. Your media queries are based on the content so this will let your site look great even for people that have made their browsers base font-size larger or smaller or have zoomed in their browser.

@media (min-width: 704px) { ... }

@media (min-width: 44em) { ... }

The rest of your design will properly adjust to this and make your site more robust.

Why not rems? At the level of media queries, rems and ems are the same so it doesn't matter which one you use, except em is shorter and rems have rendering issues in Safari.

Read more about using ems in our complete guide to CSS media queries

Rule #5: Min-width or max-width, pick one

Responsive design makes for an incredibly complex system. When your media queries use both min-width and max-width, or even combinations of them, you're massively increasing that complexity and reasoning about it becomes even harder.

min-width	max-width
@media (min-width: 30rem) { ... }	@media (max-width: 52rem) { ... }
@media (min-width: 44rem) { ... }	@media (max-width: 44rem) { ... }
@media (min-width: 52rem) { ... }	@media (max-width: 30rem) { ... }

If all your media queries work "up" or "down", you always know where to look when your site doesn't look as you expect it to at a certain size. CSS in new media queries you write will then never influence your earlier sizes. Just find out from which media query down (or up) you need to update your CSS.

Rule #6: Avoid fixed dimensions

It can be very tempting to use fixed dimensions for elements. After all, your favorite hand-off tool probably lets you copy them with ease. Elements with fixed widths (or margins) could easily break your layout if you're not careful.

Try to style element sizes in relation to their surroundings. Use percentages or viewport units. Prevent setting width and height and try to use their min- and max- counterparts. And if you do end up with a width breaking something somewhere, a max-width:100% can work wonders.

Rule #7: Use modern layout techniques

To expand on the previous rule, modern layout methods like Flexbox, CSS Grid and container queries are built to be inherently flexible and size according to their surroundings. If you make use of these layout methods, you'll end up needing much less media queries to achieve the same design.

Less media queries means less to reason about, and your code is shorter to boot.

A great way to (re-)learn how to build common layouts with Flexbox and CSS Grid is Every-layout.dev. It lists common layouts and explains how to build them using modern techniques.

Rule #8: Leave room for text rendering differences

It's tempting to create breakpoints right at the place where an unfavorable line-break occurs. To get that "pixel perfect". Of course we know the web isn't pixel perfect, and it never was.

If your breakpoints are too close to readable line breaks, then it might work in your browser, but different browsers and different operating systems have different ways of rendering text, which means that the line of text might be a couple of pixel wider or smaller,, and your design could break.

Instead, try to be a little bit loose with your media queries, leave a little space for things to be off by a few pixels before big changes in your design.

Rule #9: Decide in the browser

To follow these rules, it doesn't make sense to create all your breakpoints in a design tool. On the other hand, designing the entire site in a browser is difficult too. So what's the happy medium?

Create your designs in a design tool, with some rough responsive variants, but keep the choice of when to switch over to another design for when you're actually working in the browser. The Sketch artboard might be 750px wide, but if you're in the browser and the layout already makes more sense at 44em (that's 704 pixels), then use 44em in your css.

Rule #10: Give Polypane a try

With Polypane, creating sites and apps in a mobile-first, content-out way comes naturally:

Start with a single pane and design your smallest screen.
Add a new pane, and widen it until, to quote Stephen, it "looks like shit".
Check the width of the pane and use that em value as your new breakpoint.
Style it and repeat.

Start using Polypane for free with a 14 day trial.

Responsive CSS breakpoints for the top 50 websites 2019

Mon, 27 May 2019 00:00:00 GMT

With Polypane, it's simple to see a website in all the responsive widths it's designed for. Polypane intelligently parses the CSS and finds all the media query declarations. We looked at the top 50 websites worldwide (according to Alexa) to see how they deal with Responsive design.

Top 50 websites and responsive design

Out of the 50 websites, 12 websites defined no media queries at all, almost one in 4! For the most part these sites were targeted at China and Asia in general. It could be that they use browser sniffing instead to show a mobile version for smaller screens, or they have the data that people use their mobile apps instead of the web.

In the data below, I chose to discard the 12 websites without media queries. Here's some quick stats:

Media Queries

406 Total

10.7 Average

9 Median

3 Mode

29 Most for a single site (twitter.com, netflix.com, livejasmin.com)

1 Least for a single site (tmall.com, Bilibili.com)

The number of media queries in itself doesn't really say anything about how responsive a website really is, but it's a good proxy. So we can say that the most responsive popular websites are twitter.com, netflix.com and livejasmin.com.

Widths

There is quite a large range of widths that media queries have been defined for. The smallest is a max-width of 119 pixels, on aliexpress.com, and the largest is a min-width of 2560 pixels on bing.com. That means the total range of the top 50 websites in the world is 2441 pixels wide.

Ranges

In order to see how responsive websites really are, we can also use their total range (the difference between their widest width and smallest width) of the media queries as a proxy. The higher the range, the more widths a website supports.

The website with the widest range of media query widths is Twitter.com with a range of 1975 pixels (a minumum of 325 to a maximum of 2300 pixels). Runners-up are Livejasmin.com with 1850 pixels, Microsoft.com with 1459 pixels and Bing.com with 1440 pixels.

We already filtered out the websites without any media queries, but if you look at the websites with the least amount of range something else appears, there are a further 4 sites that have a range of zero, meaning that their smallest and largest breakpoint are the same; they have just one media query or one width defined in them.

If we discard those, we can also see which of the responsive websites are the least responsive: tmall.com has a range of just 150 pixels, followed by linkedin.com with 207 pixels, taobao.com with a range of 210 pixels and imdb.com with a range of 435 pixels. For all these sites it seems that they use different methods to target mobile devices.

Some quick stats again:

1975px Total range

859px Average

867px Median

822px Mode (3 times)

1975 widest for a single site (twitter.com)

150 Least for a single site (tmall.com)

If we compare the stats we can surmise that the websites with the most media queries also tend to have the widest range, and that the most popular websites on average have media queries for a range of about 800 to 900 pixels.

Start and end widths

With just the range it is hard to judge what a site is optimised for. A range of 800 pixels starting at 300px is much different from one starting at 1024 pixels, for example.

The most used width to start with is 320 pixels wide, used 6 times (7 if you count the one that starts at 319px). This might not surprise you, as it's commonly seen as the minimum width due to the iPhone SE and smaller android phones having this width. The average starting point is much larger though, 580 pixels. This is due to some outliers in the media queries. For example, bilibili.com's starts at 1400pixels wide.

The mean is 'just' 440 pixels wide. If you built your website mobile first then 440 pixels might indeed be the first width where you want to add new styling. (This website's first media query is 480px).

On the other end of the spectrum, the average widest media query is 1439 pixels, with a mean of 1400. 1440px is a common (wide) desktop width, especially for designers, so this might be a natural stop in the width most websites need. In the future, when ultra-wide monitors become more prominent, we might see even wider media queries.

Conclusion

As you can see there is a lot of variety in the way the top 50 websites choose to work with responsive design. The best advice to take away from this is to make sure that the media queries and responsive widths that you choose work well for your site. Start mobile first, and work your way up. When you develop your own site, you might find yourself ending up with the same values as the average of these or something wildly different, and both can be valid outcomes.

Are you wondering how your site compares? Get Polypane

Why you need a development browser

Thu, 25 Apr 2019 00:00:00 GMT

You're probably looking at this site in Google Chrome or Firefox. That's fine, that's exactly what they're for: browsing the web, and being really, really good at browsing the web. They're built for that. They're built for searching things and streaming videos and for sharing funny cat videos.

But they're not built for web development. Not really.

And that's kind of weird.

You're not using a pdf editor or a word processor to write code, you use a text editor or even an IDE that's filled to the brim with features that make you a better developer. You're designing in tools that are specifically made for UI design, not drawing pixels in MS Paint or tools made to edit photo's (right?) So why is your browser not also an highly-optimised tool that makes you more efficient and better at your job?

Simply, modern browsers are built to consume the web, not create the web. With Polypane, we're changing that. Polypane is a browser where, for every feature, every bit of design and every bit of code, we figure out how we can make you better and more efficient at your job.

And we think we're doing a pretty good job.

Polypane is the only browser that lets you develop a website for all viewports and devices at once, and gives you the best overview of them. It's the only browser that has built-in features like breakpoint detection, css layout debugging and multi-pane screenshots. All these features help you get more done, faster.

What about devtools?

Devtools are awesome, there's no denying that. That's why Polypane ships with the same powerful devtools as Chromium.

For consumer browsers, devtools are a tacked-on piece of software. They're in the browser but they're not really part of the browser. We think devtools can extend way beyong the right side or bottom part of your browser. With Polypane, your browser is the devtool.

Stop resizing your browser

When you start using Polypane, even if you're not using any of the previously mentioned functions, you're already speeding up your workflow and being more efficient. You're no longer doing the single most-used action by developers: resizing their browser.

Just switching to Polypane means your days of wiggling the right side of your browser (or opening devtools) just to resize a page, are over.

Thats because in Polypane, you're always in responsive mode. You're also always in full-screen mode. Using Polypane gives you the full overview. Read more about Polypane's benefits.

Roadmap, and why Polypane is a subscription

Sat, 30 Mar 2019 00:00:00 GMT

Hi, I'm Kilian. I'm the solo developer of Polypane. Let me tell you about why Polypane is a subscription, and what that means for the roadmap.

Polypane is a subscription so that I can focus on adding new features continuously and get them in your hands earlier, instead of hoarding them up and having big new releases that you'll have to re-purchase. I think this is the best model for everyone using Polypane and it also makes it more sustainable for me as a creator.

For the roadmap, this means that I can focus on features that users will benefit the most from and actually adjust based on your feedback. Features such as the scroll syncing came out of this process, it has been immensely useful.

For the coming year, we have a couple of different themes on the roadmap:

Providing more insight into your site structures,
Integration with other development and design tools,
Sharing and cooperation.

We also have tons and tons of smaller features planned and we'll release them as we go.

Updates will be released continuously with major versions roughly every quarter. Major updates include rendering engine updates and bigger features. Minor updates with feature improvements and bug fixes will be released as-needed (probably every month or so.)

If you have any questions or suggestions for me, let me know via the support page or chat with me directly in the bottom right corner of the site.

Polypane Blog

My take on fading content using transparent gradients in CSS

Technique one: background-clip

Browser support

Downsides

Technique two: mask-image

Browser support

Downsides

Fading text content

Polypane 17.1

New Social media designs

New browser extensions

Chromium security fixes

Performance improvements

Hover/Blur styles

Pages with many links or headings

Get Polypane 17.1

Polypane 17.1 Changelog

Experimental Chromium Web Platform Features

Which features are deemed "experimental"?

A better overview

Finding features

What do you want to see?

Polypane 17: Meta panel updates, Reference image split slider and Chromium 120

Meta panel updates

Overview of missing tags

Warnings for viewport and canonical

Other improvements

Reference image split slider

Show page title and favicon in history and suggestions

Context menu options on images

Accessible role and name in Track Focus Debug tool

Elements panel updates

Scoping root and limit badges

Updated class editor

New icon for forced element states

Bug fixes

Narrow minimum width

Console.table

Native window controls on Windows

Updated Pixel device presets

Chromium 120

Experimental Web Platform features

Get Polypane 17

Polypane 17 Changelog

Using Selectlist in React

Select in React

Selectlist in React

Selectlist as a separate React component

Polypane 16: workflow improvements, scoped styles and Chromium 118

@scope support in the elements panel

Prefers-reduced-transparency emulation

Meta panel improvements

New X style

Domain overwriting

Updated Mastodon style

Reveal Password field context menu option

Measure text now counts sentences and supports more languages.

Accessibility workflow improvements

Copyable content

Quickly zoom in to 200% and 400%

Highlighted aria-hidden

Export Cookies for Polypane Cloud

Updated React DevTools

Notable Fixes

Browse panel reloads

Service workers

Chromium 118

Get Polypane 16

Polypane 16 Changelog

Where to put text so it doesn't overlap in the new X (Twitter) preview (2023)

The new URL overlay

The safe zone

Template overlays

680x383px

1280x720px

1366x766px

Pixel perfect preview

Using the Intl segmenter API

How we use the segmenter API in Polypane