{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/polypane-7/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"Polypane 7\",\n  \"cover\": \"/img/mail/icon.svg\",\n  \"date\": \"2021-11-08\",\n  \"type\": [\"announcement\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `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.`), mdx(PolypaneIntro, {\n    mdxType: \"PolypaneIntro\"\n  }), mdx(\"h2\", {\n    \"id\": \"new-color-picker-\"\n  }, `New color picker 🎯`), mdx(\"p\", null, `A proper, screen-wide color picker has been on our wishlist since 2016 and thanks to new APIs in Chromium we've finally\nbeen able to include it.`), mdx(\"img\", {\n    src: \"/doc-img/colorpicker/icon.png\",\n    className: \"imgshadow\",\n    alt: \"The Polypane address bar with the color picker icon highlighted.\"\n  }), mdx(\"p\", null, `You can pick a color from anywhere on your screen by clicking the color picker icon in the address bar, or by pressing `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `shift`), ` + `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `alt`), ` + `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `p`), `.`), mdx(\"p\", null, `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)\nThis is an overview of previously selected colors and accessibility info of your last two selected colors.`), mdx(\"p\", null, `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.`), mdx(\"img\", {\n    src: \"/doc-img/colorpicker/ui.png\",\n    className: \"imgshadow\",\n    alt: \"The Color Picker UI showing the selected colors and previously selected colors.\"\n  }), mdx(\"p\", null, `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.`), mdx(\"div\", {\n    style: {\n      \"position\": \"relative\",\n      \"width\": \"100%\",\n      \"paddingTop\": \"56.25%\"\n    }\n  }, mdx(\"a\", {\n    id: \"video\",\n    style: {\n      \"position\": \"absolute\",\n      \"top\": \"-100px\"\n    }\n  }), mdx(\"iframe\", {\n    src: \"https://www.youtube.com/embed/rldFPBecGIE?&autoplay=false&start=0\",\n    allow: \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\",\n    allowFullScreen: \"\",\n    style: {\n      \"position\": \"absolute\",\n      \"top\": \"0px\",\n      \"left\": \"0px\",\n      \"width\": \"100%\",\n      \"height\": \"100%\"\n    },\n    frameBorder: \"0\"\n  })), mdx(\"p\", null, `For a full overview check the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/color-picker/\"\n  }), `color picker docs`), `.`), mdx(\"h2\", {\n    \"id\": \"elements-panel-updates-\"\n  }, `Elements panel updates 🔍`), mdx(\"p\", null, `The Elements panel is now more compact, so there is more place for the tabs that let you edit the styles, attributes etc.`), mdx(\"p\", null, `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\neasier to get that data back into your CMS or HTML after you're done editing it.`), mdx(\"h3\", {\n    \"id\": \"pseudo-elements-and-pseudo-classes\"\n  }, `Pseudo-elements and pseudo-classes`), mdx(\"p\", null, `The biggest change is that the Polypane elements panel now supports pseudo-elements like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `::before`), `, and\npseudo-classes like `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `:hover`), ` with `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `full editing capability`), `.`), mdx(\"p\", null, `This took a lot of work to get right, but having it makes it\nmuch easier to edit more complex layouts.`), mdx(\"img\", {\n    src: \"/blogs/polypane-7/pseudos.png\",\n    className: \"imgshadow\",\n    alt: \"The Elements Panel with the ::before and ::after pseudo-elements highlighted in the tree view and the style tab.\"\n  }), mdx(\"p\", null, `They are collapsed by default so they don't get in the way of editing the element itself, but toggle them open\nand you can edit the pseudo-elements and classes across all your panels.`), mdx(\"p\", null, `The style panel will also show associated `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@font-face`), ` and\n`, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `@keyframe`), ` styles that you can edit too. Find them at the bottom of the style panel.`), mdx(\"h3\", {\n    \"id\": \"new-color-chooser-\"\n  }, `New Color chooser 🎨`), mdx(\"p\", null, `With the release of our new color picker we decided to also revise the color picker in the Elements panel and give it a\nmuch needed upgrade.`), mdx(\"p\", null, `The new color chooser is more performant, lets you pick colors from anywhere on the screen, makes it easier to switch between notations,\nshows tints and shades for your selected color so you can easily go darker or lighter, and also has handy access to the\nlast picked colors from the color picker.`), mdx(\"p\", null, `And it also comes in dark mode.`), mdx(\"img\", {\n    src: \"/blogs/polypane-7/colorpicker.png\",\n    style: {\n      margin: 'auto',\n      maxWidth: '100%',\n      display: 'block'\n    },\n    alt: \"The new Color picker in light and dark mode side by side.\"\n  }), mdx(\"h2\", {\n    \"id\": \"web-vitals-field-data-and-visualizations-\"\n  }, `Web Vitals Field data and Visualizations 💓`), mdx(\"p\", null, `The Web Vitals overlay now shows CrUX Field data when available, so you can compare your experience to real world\nusage and also see how well your pages do overall.`), mdx(\"img\", {\n    src: \"/doc-img/webvitals.png\",\n    className: \"imgshadow\",\n    alt: \"The Web Vitals tooltip showing the different scores. First input delay is orange, because it scored 'needs improvement'.\"\n  }), mdx(\"p\", null, `The overlay switches between the mobile CrUX data and desktop CrUX data depending on the size of a pane, matching the way\nCrUX field data make the distinction. This way you always compare to the right data.`), mdx(\"p\", null, `Knowing how well your pages do in the wild and how your current experience compares to them is useful, but one thing we\nalways try to do with Polypane is help with the next step: `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `if you have a bad score, how do you fix it?`)), mdx(\"p\", null, `The new visualizations for the Cumulative Layout Shift and highlight of the Largest Contentful Paint element can be\nturned on from the Web Vitals tooltip and instantly tell you which elements you should improve.`), mdx(\"video\", {\n    src: \"/blogs/polypane-7/cls-demo.mp4\",\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      maxWidth: '100%'\n    }\n  }, \"Visualisation of the Cumulative Layout Shift on the Polypane getting started page.\"), mdx(\"h2\", {\n    \"id\": \"markerio-integration-🧩\"\n  }, `Marker.io integration 🧩`), mdx(\"p\", null, `We're pretty excited to now have integrated support for `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://marker.io/?utm_source=polypane\"\n  }), `Marker.io`), `! We worked together with the\nMarker.io team to make this a first-class integration.`), mdx(\"p\", null, `With Marker.io you can screenshot and annotate parts of the page and send them to whatever project management you use,\nlike Jira or Asana, to Slack or you can even have it emailed to you.`), mdx(\"img\", {\n    src: \"/blogs/polypane-7/markerio.png\",\n    className: \"imgshadow\",\n    alt: \"Marker.io running in Polypane.\"\n  }), mdx(\"p\", null, `Marker.io is extremely helpful for anyone doing testing and QA, and we've had many requests for this integration specifically\nso we're very excited about it. Learn more over on the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/integrations/markerio/\"\n  }), `Marker.io integration page`), `. The\nintegrations we offer in Polypane are growing with every release, so we've made a dedicated `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/integrations/\"\n  }), `integrations`), ` page\nwhere you can find an overview.`), mdx(\"h3\", {\n    \"id\": \"discount-for-markerio\"\n  }, `Discount for Marker.io`), mdx(\"p\", null, `The folks at Marker.io have been kind enough `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `to offer a 10% discount to Polypane users!`), ` Find your discount code by on\nthe new `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://dashboard.polypane.app/deals\"\n  }), `deals page in the dashboard`), `!`), mdx(\"h2\", {\n    \"id\": \"horizontal-overflow-detection-️\"\n  }, `Horizontal overflow detection 🖱️`), mdx(\"p\", null, `Polypane has had `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/layout-debugging/\"\n  }), `tools to help with horizontal overflow`), `, but one thing that was missing was\npro-active notification of overflow issues. In Polypane 7 we've added just that. When Polypane detects horizontal overflow\nissues in a pane it will show a new icon below it:`), mdx(\"img\", {\n    src: \"/doc-img/horizoverflow.png\",\n    className: \"imgshadow\",\n    alt: \"An icon and popup warning showing a horizontal overflow issue.\"\n  }), mdx(\"p\", null, `When you click on the icon layout debugging for that pane turns on, so you can quickly find the overflow-causing elements\nhighlighted in red.`), mdx(\"p\", null, `Not only that, it will also detect when you're using `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `width: 100vw`), `, a common cause of scroll bars on computers without\noverlay scrollbars (which is: computers without macOS).`), mdx(\"img\", {\n    src: \"/doc-img/horizontalscroll.png\",\n    className: \"imgshadow\",\n    alt: \"An icon and popup warning showing a 100vw width detected.\"\n  }), mdx(\"p\", null, `Clicking the icon will open the elements panel with the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `width: 100vw`), ` element so you can test changing it there.\nChanging it to `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `100%`), ` will often yield the same design on Mac while fixing the horizontal overflow issue elsewhere.`), mdx(\"p\", null, `Read more about overflow issues in our article `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/strategies-for-dealing-with-horizontal-overflows/\"\n  }), `dealing with horizontal overflows`), `.`), mdx(\"h2\", {\n    \"id\": \"polypane-share-\"\n  }, `Polypane Share 🔗`), mdx(\"p\", null, `We recently introduced `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/link/\"\n  }), `Polypane Links`), `, an easy way to share links that open in Polypane directly along\nwith a set of panes. Try them out in our article `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/css-breakpoints-used-by-popular-css-frameworks/\"\n  }), `CSS breakpoints used by popular CSS frameworks`), `!`), mdx(\"p\", null, `Polypane Share makes it easy to create these links from inside Polypane, either as a QR code or copyable URL.\nThis makes sharing URLs with your team using the right viewports to check really easy.`), mdx(\"p\", null, `Polypane share is available when hovering over the address bar and clicking on the QR code icon on the right.`), mdx(\"p\", null, `For situations where the `, mdx(\"code\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"language-text\"\n  }), `polypane://`), ` protocol is not accepted, we also introduce websafe links. These link to a page\non polypane.app, and that page then opens Polypane with your URL and panes.`), mdx(\"img\", {\n    src: \"/doc-img/share-qr-polypane.png\",\n    className: \"imgshadow\",\n    alt: \"The Polypane Share popup is open and showing a QR code.\"\n  }), mdx(\"h3\", {\n    \"id\": \"regular-qr-codes\"\n  }, `Regular QR codes`), mdx(\"p\", null, `You can also switch to regular QRs so you can easily open URLs on your devices to test\non them (because testing on real devices is\nstill important, even with Polypane!)`), mdx(\"p\", null, `Polypane will automatically detect when `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `you're working on localhost and replace that\nwith your IP address so devices on your network can open the URL`), `.`), mdx(\"img\", {\n    src: \"/doc-img/share-qr-regular.png\",\n    className: \"imgshadow\",\n    alt: \"The Share popup is open and showing a QR code.\"\n  }), mdx(\"h2\", {\n    \"id\": \"new--updated-debug-tools-and-simulators-️🗨️\"\n  }, `New & updated debug tools and simulators 👁️‍🗨️`), mdx(\"p\", null, `The list of built-in debug tools and simulators in Polypane is always growing.\nThis release adds two new debug tools, two updated simulators and one new simulator. The total is now 37!`), mdx(\"h3\", {\n    \"id\": \"interactive-glaucoma-simulator\"\n  }, `Interactive Glaucoma simulator`), mdx(\"p\", null, `After implementing the Tunnel Vision simulator, an impairment often associated with\nGlaucoma (very severe glaucoma causes tunnel vision) we researched what a fully interactive glaucoma visualization should\nlook like.`), mdx(\"p\", null, `There are many different visualization available, as there is not one right answer to the question \"what does someone with glaucoma see?\",\nbut we're very happy with what we think is `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `the first fully interactive Glaucoma visualization for web content:`)), mdx(\"video\", {\n    src: \"/doc-img/overlays/glaucoma.mp4\",\n    controls: true,\n    className: \"imgshadow\",\n    style: {\n      margin: '2rem auto',\n      maxWidth: '100%'\n    }\n  }, \"Glaucoma debug tool overlaid on the Polypane website\"), mdx(\"h3\", {\n    \"id\": \"macular-degeneration-simulator\"\n  }, `Macular degeneration simulator`), mdx(\"p\", null, `Macular degeneration is kind of the opposite of tunnel vision: instead of losing your peripheral vision, you lose your\ncentral version.`), mdx(\"img\", {\n    src: \"/doc-img/overlays/macular.png\",\n    className: \"imgshadow\",\n    alt: \"The Macular degeneration simulator.\"\n  }), mdx(\"h3\", {\n    \"id\": \"updated-cataracts-simulator\"\n  }, `Updated Cataracts simulator`), mdx(\"p\", null, `During our research into Glaucoma we also took a critical look at our existing cataracts simulation and determined that\nit was not doing enough. Here too we looked at the available research into what cataracts is really like to bring the\nsimulator closer to reality.`), mdx(\"img\", {\n    src: \"/doc-img/overlays/cataracts.png\",\n    className: \"imgshadow\",\n    alt: \"The improved Cataracts simulator.\"\n  }), mdx(\"h3\", {\n    \"id\": \"detect-small-text-\"\n  }, `Detect small text 🔬`), mdx(\"p\", null, `Use this to find instances where your text is so small that it causes issues. This debug tool will flag regular text\nthat's smaller than 12px, and form elements that are smaller than 16px. The latter causes iOS to zoom in on your page when\nfocusing a form element, which can look bad and can be confusing to your visitor.`), mdx(\"img\", {\n    src: \"/doc-img/overlays/smalltext.png\",\n    className: \"imgshadow\",\n    alt: \"A warning pointing to an element with small text.\"\n  }), mdx(\"h3\", {\n    \"id\": \"text-spacing-wcag-1412\"\n  }, `Text Spacing (WCAG 1.4.12)`), mdx(\"p\", null, `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 `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/debug-tools/#text-spacing-wcag-1412\"\n  }), `debug tool docs`), ` for a list of specific text spacing changes.`), mdx(\"img\", {\n    src: \"/doc-img/overlays/forcespacing.png\",\n    className: \"imgshadow\",\n    alt: \"The Polypane homepage with expanded text spacing. Some elements are no longer fully readable.\"\n  }), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, `As you see, we have some work to do for this`), ` 😉`), mdx(\"h2\", {\n    \"id\": \"chromium-96\"\n  }, `Chromium 96`), mdx(\"p\", null, `Polypane is now running the beta version of Chromium 96. That means you can now use the following features in Polypane:`), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"code\", _extends({\n    parentName: \"li\"\n  }, {\n    \"className\": \"language-text\"\n  }), `prefers-contrast`), ` emulation, find it in the emulation popover.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Eyedropper API, which powers our color picker!`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `URLPattern`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Container queries (was already available in Polypane 6.x)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `Scrollbar gutter`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `accent-color (was already available in Polypane 6.x)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, `crypto.randomUUID()`)), mdx(\"h2\", {\n    \"id\": \"other-new-features-\"\n  }, `Other new features 📜`), mdx(\"p\", null, `The number of new features in Polypane 7 is pretty big, here are some smaller features. Be sure to scroll through the\nfull changelog for everything new. The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/\"\n  }), `documentation`), ` for all features is fully up to date.`), mdx(\"h3\", {\n    \"id\": \"new-and-updated-device-presets-\"\n  }, `New and updated device presets 📱`), mdx(\"p\", null, `With the release of iOS15 and the bottom-aligned address bar, the viewport sizes of iOS devices in portrait mode changed\nslightly. So all our iOS devices are updated to support the new sizes.`), mdx(\"p\", null, `New Samsung mobile phones and tablets are also added to our list of device presets, with both the viewport sizes and\ndevice sizes for portrait and landscape. If you're missing a device or screen size, let us know!`), mdx(\"h3\", {\n    \"id\": \"mute-audio-option-\"\n  }, `Mute audio option 🔇`), mdx(\"p\", null, `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\nworking on sites with audio! You can find this in the global settings menu`), mdx(\"h3\", {\n    \"id\": \"updated-social-media-previews-️\"\n  }, `Updated social media previews 🖼️`), mdx(\"p\", null, `Between Polypane 6.3 and Polypane 7, LinkedIn, Telegram for Web and Google all introduced dark modes! So we've updated our\ndesigns with support as well. Now all social media previews that Polypane shows support both light and dark mode.`), mdx(\"img\", {\n    src: \"/blogs/polypane-7/linkedin-dark.png\",\n    className: \"imgshadow\",\n    alt: \"LinkedIn dark mode preview.\"\n  }), mdx(\"img\", {\n    src: \"/blogs/polypane-7/google-dark.png\",\n    className: \"imgshadow\",\n    alt: \"Google dark mode preview.\"\n  }), mdx(\"h3\", {\n    \"id\": \"improved-accessibility-testing-and-reporting\"\n  }, `Improved accessibility testing and reporting`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `The landmark outline`), ` overview has new tests. The overview now warns about multiple navigation landmarks\nthat don't have unique labels and about labels that includes the name of the landmark, causing screen readers to repeat themselves.`), mdx(\"p\", null, `The `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Focus order`), ` overview now hightlights elements that don't follow the reading direction of the page, which can be\nconfusing for people using the keyboard to navigate your page. These items will be highlighted both in the list and in\nthe focus order overlay on your page.`), mdx(\"p\", null, `The `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `images`), ` outline is now more performant and does a better job of parsing the different image properties. It will\nalso now warn you about the use of color words in your description, as this can be inaccessible to some visitors.`), mdx(\"p\", null, `The `, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Link`), ` outline now shows ARIA links as well, though that will also get you a warning to use a real link instead.\nResolving relative links has also been improved, so link checking is now more reliable.`), mdx(\"h3\", {\n    \"id\": \"reference-image-offsets\"\n  }, `Reference image offsets`), mdx(\"p\", null, `The `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/reference-image/\"\n  }), `reference image`), ` feature lets you overlay an image on top of your web page so you can check\nfor visual regressions or design adherence.`), mdx(\"p\", null, `You can now add a horizontal and vertical offset to the image to position it correctly.`), mdx(\"h2\", {\n    \"id\": \"get-polypane-7\"\n  }, `Get Polypane 7`), mdx(\"p\", null, `Polypane is available for Windows, Mac (universal dmg for Intel and M1) and Linux (.deb or AppImage).`), mdx(\"p\", null, `Polypane automatically updates on Mac and Windows and on Linux when using the AppImage. Otherwise, head over to\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/download/\"\n  }), `the download page`), ` to download the latest version!`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Don't have Polypane yet? There is a 14 day trial available. `, mdx(\"a\", _extends({\n    parentName: \"strong\"\n  }, {\n    \"href\": \"https://dashboard.polypane.app/register\"\n  }), `Try it for free`), `.`)), mdx(\"h2\", {\n    \"id\": \"polypane-701-changelog\"\n  }, `Polypane 7.0.1 Changelog`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improvements`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Marker.io flow now returns to button instead of capture flow`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Scrollbars are now easier to click`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Pane close buttons now appears on focus too`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: links with the text \"learn more\" are now flagged`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel: images with the filename as alt text are now flagged`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated list of google fonts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated version of Chromium 96`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated list of accessibility rulesets`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Faster initial pane load time`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Prevents false positive virus warnings for the installer on Windows (Thanks Dave!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Better error handling inside Polypane with options to reload or reset data`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Fixes`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Crash related to long URLs`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Crash related to grid overlay (Thanks Sebastian!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Error message for Nextjs users (Thanks Alex!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` On some Linux systems settings were saved in the wrong directory`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Updating on M1 sometimes updated to Intel version`)), mdx(\"h2\", {\n    \"id\": \"full-700-changelog\"\n  }, `Full 7.0.0 Changelog`), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `New features`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Eye dropper color picker`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Support for pseudo-element, pseudo-classes, keyframe and font-face in Elements panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Web vitals pop-ups show CrUX field data`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Polypane Links integration`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Horizontal overflow detection`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` CLS and LCP overlays`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Marker.io integration`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Update to Chromium 96`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Prefers-contrast emulation`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Samsung android phones and tablet device presets`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Mute options for panes`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Dark modes for Google Search, LinkedIn and Telegram previews`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Small font size checker debug tool`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Force text spacing debug tool`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Interactive glaucoma simulator`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `New`), ` Macular degeneration simulator`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Improvements`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` New Google fonts`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` \"Pane zoom\" is now renamed to \"Scale\"`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated viewports for iOS15`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` New Ultrawide device preset (Thanks Patrick!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` HTML Validation rules`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Live Reload now shows optional notifications`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Live Reload supports reloading multiple CSS files with the same name (Thanks Alex!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel supports new individual transform options`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel navigator design is clearer`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel specificity notation now uses commas (Thanks Bramus!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel specificity links to explainer page for each selector`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel has new color picker with recently selected colors, tints and eye dropper`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Elements panel content editor now auto-sizes and has a copy button`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel now warns about similar landmarks without unique title`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel now warns if landmark label includes the role`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel now shows elements with role=link in link overview (and shows a warning)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel Focus order now warns when focus order goes against reading direction.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel update image overview design`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel images are now lazy loaded`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Outline panel images now warns about colors in alt text`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Meta panel list of icons shows dimensions and type of icon`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Reference image can now be offset from the site (Thanks Roni!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Live CSS variable font loading for complex multi-axis fonts improved`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Improved`), ` Updated Cataracts simulator`)), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `Fixes`)), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Legacy mode is now deprecated, will be removed in Polypane 9`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Remove \"new random pane size\" menu item (Thanks Martin!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Dark mode is now correctly restored on Windows (Thanks Thomas!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Live Reload preserves all search params when injecting CSS and Images`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Scrolling in number inputs no longer scrolls the main workspace`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Menus that open dialogs now have ellipsis added to them`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Touch emulation now also sets the hover:none media query (Thanks Thomas!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Detached devtools no longer close and reopen when inspecting an element (Thanks Jason!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Double clicking to fill height now takes global zoom into account`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Polypane Peek tooltip now positioned correctly for elements left offscreen (Thanks Matthias!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Reset URL when it's invalid on launch (Thanks Markus!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Preserve search parameters when loading URLs from browser extensions`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Support backticks in Live CSS panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Prevent applying breakpoint panes when there are no breakpoints (Thanks Jens Olaf!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` CSS Breakpoint detection no longer needs initial user input to work (Thanks Jens Olaf!)`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Alignment issues in select elements in Panel`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Position of quality bar in Full layout`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Outline panel Links checker now only matches the word \"more\" for check of unclear link text.`), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, `Fix`), ` Outline panel relative URLs are now resolved and checked correctly`)));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":10,"tableOfContents":{"items":[{"url":"#new-color-picker-","title":"New color picker 🎯"},{"url":"#elements-panel-updates-","title":"Elements panel updates 🔍","items":[{"url":"#pseudo-elements-and-pseudo-classes","title":"Pseudo-elements and pseudo-classes"},{"url":"#new-color-chooser-","title":"New Color chooser 🎨"}]},{"url":"#web-vitals-field-data-and-visualizations-","title":"Web Vitals Field data and Visualizations 💓"},{"url":"#markerio-integration-🧩","title":"Marker.io integration 🧩","items":[{"url":"#discount-for-markerio","title":"Discount for Marker.io"}]},{"url":"#horizontal-overflow-detection-️","title":"Horizontal overflow detection 🖱️"},{"url":"#polypane-share-","title":"Polypane Share 🔗","items":[{"url":"#regular-qr-codes","title":"Regular QR codes"}]},{"url":"#new--updated-debug-tools-and-simulators-️🗨️","title":"New & updated debug tools and simulators 👁️‍🗨️","items":[{"url":"#interactive-glaucoma-simulator","title":"Interactive Glaucoma simulator"},{"url":"#macular-degeneration-simulator","title":"Macular degeneration simulator"},{"url":"#updated-cataracts-simulator","title":"Updated Cataracts simulator"},{"url":"#detect-small-text-","title":"Detect small text 🔬"},{"url":"#text-spacing-wcag-1412","title":"Text Spacing (WCAG 1.4.12)"}]},{"url":"#chromium-96","title":"Chromium 96"},{"url":"#other-new-features-","title":"Other new features 📜","items":[{"url":"#new-and-updated-device-presets-","title":"New and updated device presets 📱"},{"url":"#mute-audio-option-","title":"Mute audio option 🔇"},{"url":"#updated-social-media-previews-️","title":"Updated social media previews 🖼️"},{"url":"#improved-accessibility-testing-and-reporting","title":"Improved accessibility testing and reporting"},{"url":"#reference-image-offsets","title":"Reference image offsets"}]},{"url":"#get-polypane-7","title":"Get Polypane 7"},{"url":"#polypane-701-changelog","title":"Polypane 7.0.1 Changelog"},{"url":"#full-700-changelog","title":"Full 7.0.0 Changelog"}]},"excerpt":"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…","frontmatter":{"title":"Polypane 7","cover":"/img/mail/icon.svg","date":"2021-11-08","updated":null},"fields":{"slug":"/blog/polypane-7/","date":"2021-11-07T23:00:00.000Z","ogFileName":"polypane-7"}}},"pageContext":{"slug":"/blog/polypane-7/"}},"staticQueryHashes":["4164364741","425175329"]}