Feed - Polypane Blog

The devtools features you wish you had, available in Polypane 🔗

A while ago Adam Argyle of the Chrome Devtools team asked developers on X/Twitter a question: Adam got a ton of responses with many good… [...]

Clever Polypane Debugging Features I'm Loving by Ryan Trimble 🔗

Over on CSS Tricks , Ryan Trimble recently wrote about a feature in Polypane that he just discovered: the different overlays that the… [...]

Polypane 22 🔗

In Polypane 22 we added the option to screenshot social media previews, the elements panel has been updated with new element-specific pseudo… [...]

Polypane 21.1 🔗

Polypane 21.1 adds scroll syncing to all scrollable areas as well as various improvements and fixes. What's Polypane ? Polypane is the web… [...]

Polypane on the ConTejas Code Podcast 🔗

I joined Tejas on the ConTejas Code Podcast to talk about running Polypane from both a technical and strategic/business perspective. We… [...]

Polypane 21 🔗

This is a boring release, primarily to fix stability issues on some Apple Silicon devices. It's also based on the latest Chromium 128 so… [...]

Polypane 20.1: The accessibility tree 🔗

Polypane 20.1 adds a live accessibility tree and emulation for the default font-size, Lets you copy and save SVGs as easily as images, has… [...]

Getting stuck: all the ways position:sticky can fail 🔗

CSS's position: sticky is a dream come true for web developers. It allows elements to switch between relative and fixed positioning based… [...]

Polypane on the JS Party Podcast 🔗

I joined the folks at Changelog to talk about all things Polypane and had a great time chatting about everything from the business side of… [...]

Polypane 20: Browser features and performance 🔗

Polypane 20 improves the features and performance of the Elements and Outline panel, as well as improving general browser features and… [...]

Capturing screenshots in Polypane 🔗

Sharing in-progress work, pointing out a bug, or clarifying which area you're talking about: as a developer you're sharing screenshots all… [...]

Polypane 19: Workflow improvements 🔗

Polypane 19 comes with updated performance tests, a live DOM view in the elements panel and tons of workflow improvements. It also runs on a… [...]

How to check your site in different languages and writing modes 🔗

Building sites that support multiple writing modes and languages is challenging. You don't always know the language or even the script, and… [...]

Polypane 18: Introducing Polypane Portal 🔗

With Polypane Portal you can now build and test your sites across all browsers, engines and devices, all without leaving Polypane. We added… [...]

Field-sizing just works! 🔗

field-sizing is wild. It's a new CSS property that makes input , textarea and select automatically scale to the size of their content… [...]

My take on fading content using transparent gradients in CSS 🔗

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… [...]

Polypane 17.1 🔗

Polypane 17.1 is primarily a bugfix and security release, but contains a few new features and newly supported browser extensions, as well as… [...]

Experimental Chromium Web Platform Features 🔗

Polypane ships with the "experimental web platform features" flag enabled. This means you get to use a whole bunch of cool features as they… [...]

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

Polypane 17 ships with new features in the meta panel, a new split slider feature in the reference image tool, an updated console.table… [...]

Using Selectlist in React 🔗

Selectlist is an upcoming element that replaces the native select element with a fully stylable and customizable one, while still keeping… [...]

Polypane 16: workflow improvements, scoped styles and Chromium 118 🔗

Polypane 16 ships a ton of improvements to common workflows, updates to the meta panel social media previews, support for @scope in the… [...]

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

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

Using the Intl segmenter API 🔗

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… [...]

Announcing Polypane Cloud: Accessibility testing for entire sites 🔗

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… [...]

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

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… [...]

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

Container queries in the Polypane Elements panel, color pickers now show contrast lines, the ability to force pseudo states like hover or… [...]

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

They are fundamental CSS concepts you use every single day whether you know it or not: the offset parent and stacking context . In this… [...]

Polypane 14 🔗

Polypane 14 is here! In this release we added support for testing with multiple sessions, a new Elements Debug panel to quickly help you… [...]

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

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… [...]

Polypane on PodRocket 🔗

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

Polypane 13.1 🔗

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… [...]

Using Polypane to check a website with James Q Quick 🔗

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

Building a lightbox with the Dialog element 🔗

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… [...]

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

Polypane 13 is here! We're launching beta support for regular browser extensions, have a new way to search for elements and have added… [...]

Polypane on Syntax.fm 🔗

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… [...]

Polypane 12: introducing the Command bar 🔗

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… [...]

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

Polypane 11 now renders JSON files in a completely new viewer, adds a ton of new accessibility testing features and improves upon existing… [...]

Thanks iPhone 14, designing for device sizes is dead 🔗

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… [...]

How Blhack doubled their development speed with Polypane 🔗

We are Blhack , an Italian software house. We develop tailor-made solutions for our customers' needs. Our technology stack is based on Ruby… [...]

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

Nureply is a cold emailing tool created by Onur Geneş that helps you to write automated emails with personalization and send those emails to… [...]

How Matchless Web halved their mobile optimization time 🔗

Matchless Web Studio is a one-man web agency based in Clinton, Mississippi USA. The aforementioned one man in charge is me (Jon Phillips… [...]

How Short Hills Design saves over $700 per year thanks to Polypane 🔗

Short Hills design is a closely-knit team of six located in the USA, UK, Canada and Finland that helps healthcare and other professional… [...]

Polypane 10: detachable panel, navigation sync, element screenshots and more 🔗

Polypane 10 brings a number of often requested workflow features to Polypane: a detachable panel, the ability to turn off navigation sync… [...]

Polypane 9.1: Form autofilling, fast overview screenshot and outline panel overlays 🔗

Polypane 9.1 comes with new features to quickly test forms, a much faster and robust overview screenshot feature, support for the INP web… [...]

:where() :is() :has()? New CSS selectors that make your life easier 🔗

When people talk about CSS complexity, a major contributor to that is CSS specificity, or writing effective CSS selectors. The more you add… [...]

Polypane 9: Screenshot editor, structured data support and new debug tools 🔗

Polypane 9 ships with a completely new way of making and editing screenshots, support for different types of structured data in the Meta… [...]

Forced colors explained: A practical guide 🔗

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… [...]

Create a Polypane account with GitHub 🔗

Today we launch the option to start a Polypane trial with GitHub Auth. When you register for a Polypane trial click the "Register with… [...]

Always open localhost in your development browser 🔗

Many development servers will automatically open their URL when you launch them, and without configuration that happens in your default… [...]

Developing for color blindness with Polypane 🔗

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… [...]

Polypane 8.1: Resizable element tree, disable JS feature, new debug tools and more 🔗

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… [...]

How we made the State of CSS more responsive and accessible 🔗

Each year, the state of CSS takes a global survey of the CSS landscape. Its results are highly regarded and influence browsers, toolmakers… [...]

Polypane is now part of the GitHub Education Intro to Web Dev pack 🔗

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… [...]

Polypane 8: better Elements Inspector, new syncing features, Chromium 98 and more 🔗

Polypane 8 comes with a better Elements inspector, big performance improvements, Chromium 98 and many other new and improved features, like… [...]

The breakpoints we tested in 2021 & 2022, and the ones to test in 2023 🔗

Which screen sizes to design, build and test on is a perennial topic in web development. While well-built responsive websites will work at… [...]

Improving your CLS and LCP Core Web Vitals 🔗

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… [...]

The EyeDropper API: Pick colors from anywhere on your screen 🔗

With the new EyeDropper API in Chromium, websites can let visitors pick colors from anywhere on their screen, adding another feature to the… [...]

Polypane 7 🔗

Polypane 7 adds a new color picker tool, support for pseudo-elements and pseudo-classes in the Elements panel, new Web Vitals data and… [...]

How TeliportMe is moving to the web with Polypane 🔗

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… [...]

Polypane 6.3: Tunnel vision simulator, webmanifest support, updated UI 🔗

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… [...]

Detecting media query support in CSS and JavaScript 🔗

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… [...]

Polypane 6.2: HTML validation, robots.txt support, RTL emulation and more 🔗

In Polypane 6.2 we focused on improving the app performance and consistency, particularly around updating, pane resizing, tab handling and… [...]

Fixing contrast issues, on your own site and elsewhere 🔗

Insufficient text contrast is the most common accessibility issue on websites today. According to the WebAIM Million report for 2021 , 86.… [...]

A11y tooling in Polypane (video) 🔗

On May 25th Kilian Valkhof (the creator of Polypane) joined the Twitch channel of Stephanie Eckles to walk through most of the… [...]

Polypane 6.1: Readability, Content Chaos and rewritten event sync engine 🔗

Polypane 6.1 adds two new debug tools and a much more performant, completely rewritten interaction syncing engine along with numerous… [...]

Device testing is not enough 🔗

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… [...]

Polypane 6: Peek, Webvitals, new simulators & Chromium 91 🔗

Polypane 6 is now available! It's another packed release with new features, simulators, performance improvements and a new version of… [...]

Don't you forget about me: overlooked breakpoints in responsive design. 🔗

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… [...]

How to find broken links with Polypane 🔗

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… [...]

Polypane 5.1: Web components support 🔗

Polypane 5.1 introduces support for web components across the application, many improvements to the Outline panel and Contrast checker… [...]

Checking webpage quality in 5 minutes with Polypane 🔗

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… [...]

Polypane 5: Console popups, performance and focus overview 🔗

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… [...]

How Maurits Meester combines front-end development with beer 🔗

Maurits is a freelance front-end developer and co-founder of Brouwerij Victorie , a brewery in Amsterdam with a gorgeous website. We spoke… [...]

Faking container queries with CSS Grid 🔗

Container queries are an (hopefully) upcoming feature in CSS that will let you create responsive designs that respond to the dimensions of… [...]

Find and fix accessibility issues with Polypane 🔗

At Polypane, accessibility is one of the three core areas we focus on, along with performance and responsive design. If you're not familiar… [...]

Debug your visual hierarchy with the squint test 🔗

"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… [...]

How Sergio Mattei made the next Makerlog 6x faster with Polypane 🔗

Sergio is the creator of Makerlog , a web app that lets Makers log their progress [including me - Kilian] and he is building the next… [...]

Creating websites with prefers-reduced-data 🔗

Even though more and more people get access to the internet every day, not all of them have fast gigabit connections or unlimited data… [...]

Polypane 4: Unified Console, DOM tree in elements panel 🔗

A new unified Polypane console, a treeview in the elements panel, prefers-reduced-data and locale emulation, docked devtools for isolated… [...]

Polypane demo with Shawn @swyx Wang 🔗

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… [...]

How to find the cause of horizontal scrollbars 🔗

One of the most time consuming issues when it comes to web development is debugging horizontal scrollbars . They're easy to overlook while… [...]

Beautiful CSS 3D Transform Examples 🔗

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… [...]

Polypane 3.3: Grids and guides, horizontal overflow detection and updated UI 🔗

Add grids and guides to your site, detect which elements cause horizontal overflows, new overlays, a refreshed UI and noticable performance… [...]

How Earnworthy uses Polypane to audit landing pages and land 25% more customers 🔗

We interviewed Nicholas Scalice, the founder of Earnworthy and creator of the GrowthMarketer.co newsletter about how he uses Polypane to… [...]

Polypane ❤ Tumult Hype. New integration 🔗

Tumult Hype lets you create beautiful, responsive HTML5 animations and web content. When you preview your design by clicking the 'preview… [...]

How Code& increased their efficiency by 500% maintaining and improving websites like Freshwater SLSC 🔗

We interviewed Dale Grant, the owner of Code& on their workflow and how Polypane fits into it. As a development-focused agency they use… [...]

CSS breakpoints used by popular CSS frameworks 🔗

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… [...]

How Red Pixel Themes uses Polypane 🔗

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… [...]

Polypane 3.2: Accessibility and viewport sizing 🔗

We're introducing two big features in Polypane 3.2: The accessibility panel and viewport sizing . Beyond that we added a whole lot of… [...]

The complete guide to CSS media queries 🔗

Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen… [...]

Polypane 3.1: New elements panel 🔗

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… [...]

8 ways to increase your productivity as a web developer (in 2021) 🔗

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… [...]

Color contrast checker that makes suggestions for better colors 🔗

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… [...]

Polypane 3: browser tabs and dark mode emulation 🔗

Polypane 3 is now available and comes with two big new features: Media Feature emulation and Browser tabs , as well as an upgrade to… [...]

Polypane is now part of the GitHub Student Developer Pack 🔗

We are super proud to announce that Polypane is now part of the GitHub Student Developer Pack . Eligible students get free access to… [...]

CSS specificity calculator 🔗

If an element is targeted by multiple selectors, browser use the specificity of the selector to determine which styling to apply. Each… [...]

4 CSS layouts without using media queries 🔗

Do you always need media queries to make a website responsive? With flexbox and grid you can make responsive layouts without having to… [...]

Polypane 2.1: Edit all your panes at the same time 🔗

With Polypane, we want to give you better insights into your site and make the entire developer/designer workflow faster. With Polypane 2.… [...]

Responsive Design Glossary 🔗

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… [...]

Polypane 2: device emulation, new modes and simulators 🔗

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… [...]

Polypane 1.3: Full page mode and screenshot improvements 🔗

Polypane 1.3 adds a full page mode, screenshot improvements and shortcuts for the quick switcher, as well as laying the groundwork for the… [...]

The perfect responsive menu (2021) 🔗

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… [...]

Give your eyes some rest with dark mode in Polypane 🔗

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… [...]

Polypane 1.2: Dark mode, Full page screenshots, Live reloading and more 🔗

There is a new version of Polypane available! It brings dark mode, live reloading, full page screenshots and a ton more great features. Read… [...]

Polypane 1.1 release notes 🔗

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… [...]