-
Notifications
You must be signed in to change notification settings - Fork 69
/
Copy pathindex.html
36 lines (35 loc) · 57.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html><html lang="en"><head><meta charset="utf-8"> <title>Detect CSS Reflows - Paint | webhint documentation</title> <meta property="og:url" content="https://webhint.io"><meta property="og:type" content="website"><meta property="og:image" content="https://webhint.io/static/images/apple-touch-icon-c01d89d4f3.png"><meta property="og:description" content="Let the developers if changes to the CSS properties inside @keyframes will trigger a paint operation"><meta property="og:title" content="Detect CSS Reflows - Paint"><meta name="description" content="Let the developers if changes to the CSS properties inside @keyframes will trigger a paint operation"><meta name="viewport" content="width=device-width"><meta name="theme-color" content="#4046dd"><link rel="manifest" href="/static/site-191e52bc08.webmanifest"><link rel="apple-touch-icon" href="/static/images/apple-touch-icon-c01d89d4f3.png"><link type="application/opensearchdescription+xml" rel="search" href="/static/opensearch-e74f2b7427.xml" title="webhint"> <link rel="preload" href="/static/fonts/montserrat-400-501ce09c42.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/static/fonts/montserrat-300-0a7c6df06e.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/static/fonts/source-sans-pro-76d8cbb049.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/static/fonts/montserrat-500-f0f2716c5f.woff2" as="font" type="font/woff2" crossorigin><link rel="stylesheet" href="/static/styles/common-f214f33c0e.css" integrity="sha384-cDhs8IivMHLpN1JvOWoXQwAPO8Z7/zXdSUlaHWihlFDUAGaS77VY3VJDheGLvCQp" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" integrity="sha384-m2ikRCzP5EF96BXBKTjWxBJqZRlS6qNhm7+rE2Rvl8fIkEANrThfw+EVyeePWhM4" crossorigin="anonymous"> <link rel="stylesheet" href="/static/styles/docs-d7f231991c.css" integrity="sha384-/Sc4ciof042QnsY1Ddjl4AD1/AwIBfml96vL/PMusDqWzC7mWtmofPleP4kVTE/w" crossorigin="anonymous"> <link rel="icon" href="/static/images/scan/favicon-32x32-fede2c8c9f.png"> </head><body> <div id="disclaimer" class="disclaimer">This site uses cookies for analytics. By continuing to browse this site, you agree to this use. <button type="button" class="close" aria-label="close">X</button></div> <header class="header"><div class="header-social"><div class="header-social__container container"><span class="openjsf-header">An <a target="_blank" rel="noopener" href="https://openjsf.org" aria-label="Visit the OpenJS Foundation home page">OpenJS Foundation</a> Project</span><ul class="header-social__list"><li class="github-icon"><a target="_blank" rel="noopener" href="https://github.com/webhintio" aria-label="Follow webhint on GitHub"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path class="github-icon-svg-header" d="M12.5.4C5.7.4.2 5.9.2 12.7c0 5.4 3.5 10 8.4 11.7.6.1.8-.3.8-.6v-2.1C6 22.4 5.3 20 5.3 20c-.6-1.4-1.4-1.8-1.4-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.9 1.3 1.9 1.3 1.1 1.9 2.9 1.3 3.6 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.6-1.4-5.6-6.1 0-1.3.5-2.4 1.3-3.3-.2-.4-.6-1.6 0-3.3 0 0 1-.3 3.4 1.3 1-.3 2-.4 3.1-.4 1 0 2.1.1 3.1.4C17.9 5.2 19 5.5 19 5.5c.7 1.7.2 2.9.1 3.3.8.9 1.3 2 1.3 3.3 0 4.7-2.9 5.8-5.6 6.1.4.4.8 1.1.8 2.3v3.4c0 .3.2.7.8.6 4.9-1.6 8.4-6.2 8.4-11.7C24.8 5.9 19.3.4 12.5.4"/></svg></a></li><li class="twitter-icon"><a target="_blank" rel="noopener" href="https://twitter.com/webhintio" aria-label="Follow webhint on Twitter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24"><path class="twitter-icon-svg-header" d="M25 4.4c-.9.4-1.9.7-2.9.8 1-.6 1.8-1.6 2.2-2.8-1 .6-2.1 1-3.2 1.2-.9-1-2.2-1.6-3.7-1.6-2.8 0-5 2.3-5 5 0 .4 0 .8.1 1.2C8.3 8 4.6 6 2.1 2.9c-.4.8-.7 1.6-.7 2.6 0 1.8.9 3.3 2.2 4.2-.8-.1-1.5-.3-2.2-.7v.1c0 2.4 1.7 4.5 4.1 5-.4.1-.9.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.5 3.5 4.7 3.5-1.9 1.3-4 2.1-6.4 2.1-.4 0-.8 0-1.2-.1C2.6 21.2 5.3 22 8.1 22c9.3 0 14.4-7.7 14.4-14.4v-.7c1-.6 1.8-1.5 2.5-2.5"/></svg></a></li><li class="medium-icon"><a target="_blank" rel="noopener" href="https://medium.com/webhint" aria-label="Follow webhint on Medium"><svg xmlns="http://www.w3.org/2000/svg" viewBox="4 2 40 40"><path class="medium-icon-svg-header" d="M5 40V5h35v35H5zm8.56-12.63c0 .56-.03.7-.32 1.03l-2.45 3v.38h6.9v-.4l-2.4-2.98c-.3-.34-.35-.5-.35-1.03v-8.95l6.13 13.36h.7L27 18.42v10.64c0 .3 0 .35-.2.53L25 31.4v.37h9.2v-.4l-1.82-1.8c-.2-.17-.22-.23-.22-.52v-13.1c0-.3.03-.36.2-.54l1.83-1.8v-.32h-6.5L23.1 24.8l-5.2-11.55h-6.8v.4l2.14 2.63c.24.3.3.37.3.77V27.4z"/></svg></a></li></ul></div></div><div class="nav-bar container"><nav class="nav"><a href="/" class="clear logo--container"><img src="/static/images/webhint-logo-a56febcd8b.svg" alt="webhint" class="header__logo navbar__navitem"></a><ul class="nav__navbar"> <li class="navbar__navitem"><a role="button" href="/docs/user-guide/" id="install" aria-haspopup="true" aria-expanded="false" class="navitem__button expandable">Get webhint</a> <ul role="group" id="submenu-install" class="navbar__submenu" hidden> <li><a href="/docs/user-guide/extensions/extension-browser/">In browser DevTools</a></li> <li><a href="/docs/user-guide/extensions/vscode-webhint/">In VS Code</a></li> <li><a href="/docs/user-guide/">Standalone CLI</a></li> </ul> </li> <li class="navbar__navitem"><a role="button" href="" id="docs" aria-haspopup="true" aria-expanded="false" aria-controls="submenu-docs" class="navitem__button expandable">Documentation</a> <ul role="group" id="submenu-docs" class="navbar__submenu" hidden> <li><a href="/docs/contributor-guide/">Contributor Guide</a></li> <li><a href="/docs/user-guide/hints/">Hints</a></li> <li><a href="/docs/user-guide/">User Guide</a></li> </ul> </li> <li class="navbar__navitem"><a role="button" href="/about/" id="about" aria-haspopup="true" aria-expanded="false" aria-controls="submenu-about" class="navitem__button expandable">About</a> <ul role="group" id="submenu-about" class="navbar__submenu" hidden> <li><a href="/about/project_charter/">Project Charter</a></li> <li><a href="/about/faq/">FAQ</a></li> <li><a href="/about/changelog/">Changelog</a></li> <li><a href="/about/governance/">Governance</a></li> <li><a target="_blank" rel="noopener" href="https://js.foundation/community/code-of-conduct">Code of Conduct</a></li> </ul> </li> </ul><div class="nav-bar--container"><div class="nav-bar__input"><form role="search"><label for="search-input" class="visually-hidden">Search the documentation</label> <input type="search" id="search-input" placeholder="Search Documentation" name="q" aria-label="Search"> <button type="submit" aria-label="search" class="button-search"></button></form></div><button type="button" class="mobile-close-button" aria-label="Close Search Overlay">Close</button></div><div class="nav-bar--mobile-buttons"><button type="button" class="header__toggle mobile-nav-button" aria-label="Menu"></button> <button type="button" class="header__toggle mobile-search-button" aria-label="Search"></button></div></nav></div></header> <main class="container"> <article class="content" aria-labelledby="page-heading"><nav class="breadcrumb" aria-label="breadcrumbs"><ul><li><a href="/">Home</a></li><li><a href="../../../../">Documentation</a></li> <li><a href="../../../" class="guide-category"> User guide </a></li> <li aria-current="location">Detect CSS Reflows - Paint</li></ul></nav><header class="page-intro"><h1 id="page-heading">Detect CSS Reflows - Paint</h1><div class="documentation-actions"><ul><li><a target="_blank" href="https://github.com/webhintio/hint/edit/main/packages/hint-detect-css-reflows/paint/README.md">Edit</a></li></ul></div></header><div class="section" id="main"><div class="layout layout--sidebar"><div class="module module--secondary mobile-view"><ul class="toc-mobile-view"><li><p role="button" id="mobile-toc" aria-controls="mobile-toc-submenu" aria-expanded="false" aria-haspopup="true" class="toc-mobile-view__button expandable"> User guide </p><ul role="group" class="toc-mobile-view__dropdown" id="mobile-toc-submenu" hidden> <li class="dropdown__subitem"><a href="../../" class="subitem--single">Getting Started</a></li> <li class="dropdown__subitem"><p>Api</p><ul> <li class="subitem"><a href="https://webhint.io/docs/user-guide/api/using-api/">Using the API</a></li> </ul></li> <li class="dropdown__subitem"><p>Concepts</p><ul> <li class="subitem"><a href="https://webhint.io/docs/user-guide/concepts/configurations/">Configurations</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/concepts/connectors/">Connectors</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/concepts/formatters/">Formatters</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/concepts/hints/">Hints</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/concepts/parsers/">Parsers</a></li> </ul></li> <li class="dropdown__subitem"><p>Configurations</p><ul> <li class="subitem"><a href="https://webhint.io/docs/user-guide/configurations/configuration-development/">webhint development configuration</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/configurations/configuration-web-recommended/">webhint recommended web configuration</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/configurations/configuration-accessibility/">webhint's accessibility configuration</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/configurations/configuration-progressive-web-apps/">webhint's recommended progressive web apps configuration</a></li> </ul></li> <li class="dropdown__subitem"><p>Configuring webhint</p><ul> <li class="subitem"><a href="https://webhint.io/docs/user-guide/configuring-webhint/summary/">Configure webhint in your project</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/configuring-webhint/browser-context/">Browser configuration</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/configuring-webhint/rules-timeout/">Hints timeout</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/configuring-webhint/ignoring-domains/">Ignoring domains</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/configuring-webhint/using-relative-resources/">Using relative resources</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/configuring-webhint/website-authentication/">Website authentication</a></li> </ul></li> <li class="dropdown__subitem"><p>Connectors</p><ul> <li class="subitem"><a href="https://webhint.io/docs/user-guide/connectors/connector-jsdom/">jsdom</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/connectors/connector-local/">Local</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/connectors/connector-puppeteer/">Puppeteer</a></li> </ul></li> <li class="dropdown__subitem"><p>Development flow integration</p><ul> <li class="subitem"><a href="https://webhint.io/docs/user-guide/development-flow-integration/summary/">Development flow integration</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/development-flow-integration/local-server/">Test a local server</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/development-flow-integration/travis-and-azure/">Travis CI and Azure Web Apps</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/development-flow-integration/circleci/">Using CircleCI and webhint</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/development-flow-integration/travisci/">Using Travis CI and webhint</a></li> </ul></li> <li class="dropdown__subitem"><p>Extensions</p><ul> <li class="subitem"><a href="https://webhint.io/docs/user-guide/extensions/extension-browser/">Webhint DevTools integration</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/extensions/vscode-webhint/">Webhint Visual Studio Code extension</a></li> </ul></li> <li class="dropdown__subitem"><p>Formatters</p><ul> <li class="subitem"><a href="https://webhint.io/docs/user-guide/formatters/formatter-codeframe/">Codeframe</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/formatters/formatter-excel/">Excel</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/formatters/formatter-html/">HTML</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/formatters/formatter-json/">JSON</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/formatters/formatter-stylish/">Stylish</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/formatters/formatter-summary/">Summary</a></li> </ul></li> <li class="dropdown__subitem"><p>Hints</p><ul> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-stylesheet-limits/">Avoid CSS limits</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-no-http-redirects/">Avoid HTTP redirects</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-axe/">axe accessibility check</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-babel-config/">Babel configuration hint set</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-compat-api/">Compatibility of CSS, HTML and JavaScript features</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-content-type/">Correct `Content-Type` header</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-manifest-file-extension/">Correct manifest extension</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-meta-viewport/">Correct viewport</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-detect-css-reflows/">Detect CSS Reflows</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-no-disallowed-headers/">Disallowed HTTP headers</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-disown-opener/">External links disown opener</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-manifest-exists/">Has web app manifest</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-highest-available-document-mode/">Highest document mode</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-http-cache/">HTTP cache</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-leading-dot-classlist/">Leading '.' in `classList.add` or `classList.remove`</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-manifest-app-name/">Manifest has name</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-minified-js/">Minify JavaScript</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-doctype/">Modern DOCTYPE</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-create-element-svg/">No `createElement` with SVG</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-no-p3p/">No `P3P` headers</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-no-broken-links/">No broken links</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-no-bom/">No byte-order mark</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-no-inline-styles/">No Inline CSS Styles</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-no-protocol-relative-urls/">No protocol-relative URLs</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-no-friendly-error-pages/">No small error pages</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-no-vulnerable-javascript-libraries/">No vulnerable libraries</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-html-checker/">Nu HTML test</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-http-compression/">Optimal compression</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-image-optimization-cloudinary/">Optimize images</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-performance-budget/">Performance budget</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-css-prefix-order/">Prefixed CSS first</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-scoped-svg-styles/">scoped-svg-styles</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-button-type/">Specify button type</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-ssllabs/">SSL server test</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-typescript-config/">TypeScript configuration hints set</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-no-html-only-headers/">Unneeded HTTP headers</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-strict-transport-security/">Use `Strict-Transport-Security` header</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-x-content-type-options/">Use `X-Content-Type-Options` header</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/">Use Apple touch icon</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-meta-charset-utf-8/">Use charset `utf-8`</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-https-only/">Use HTTPS</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-sri/">Use subresource integrity</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-validate-set-cookie-header/">Valid `Set-Cookie` header</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-meta-theme-color/">Valid `theme-color`</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-manifest-is-valid/">Valid manifest</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/hints/hint-webpack-config/">webpack configuration hints set</a></li> </ul></li> <li class="dropdown__subitem"><p>Parsers</p><ul> <li class="subitem"><a href="https://webhint.io/docs/user-guide/parsers/parser-babel-config/">Babel config</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/parsers/parser-css/">CSS</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/parsers/parser-html/">HTML</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/parsers/parser-javascript/">JavaScript</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/parsers/parser-jsx/">JSX</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/parsers/parser-less/">LESS</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/parsers/parser-manifest/">Manifest</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/parsers/parser-package-json/">package.json config</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/parsers/parser-sass/">SASS</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/parsers/parser-typescript/">TypeScript</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/parsers/parser-typescript-config/">TypeScript config</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/parsers/parser-webpack-config/">webpack config</a></li> </ul></li> <li class="dropdown__subitem"><p>Server configurations</p><ul> <li class="subitem"><a href="https://webhint.io/docs/user-guide/server-configurations/summary/">Examples of server configurations</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/server-configurations/iis/">Basic `web.config` for IIS</a></li> <li class="subitem"><a href="https://webhint.io/docs/user-guide/server-configurations/apache/">Basic server configuration for Apache</a></li> </ul></li> <li class="dropdown__subitem"><p>Troubleshoot</p><ul> <li class="subitem"><a href="https://webhint.io/docs/user-guide/troubleshoot/summary/">Troubleshoot webhint installation and runtime issues</a></li> </ul></li> </ul></li></ul></div><div class="module module--secondary table-of-contents treeview main-view" role="navigation"><ul role="tree" aria-labelledby="page-heading" tabindex="0"> <li role="treeitem" aria-label="subsection" tabindex="0" aria-expanded="false"><div class=" toc-section-title "><span class="text">Api</span><span class="icon"></span></div><ul role="group"> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/api/using-api/" tabindex="-1"> Using the API </a></div></li> </ul></li> <li role="treeitem" aria-label="subsection" tabindex="0" aria-expanded="false"><div class=" toc-section-title "><span class="text">Concepts</span><span class="icon"></span></div><ul role="group"> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/concepts/configurations/" tabindex="-1"> Configurations </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/concepts/connectors/" tabindex="-1"> Connectors </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/concepts/formatters/" tabindex="-1"> Formatters </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/concepts/hints/" tabindex="-1"> Hints </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/concepts/parsers/" tabindex="-1"> Parsers </a></div></li> </ul></li> <li role="treeitem" aria-label="subsection" tabindex="0" aria-expanded="false"><div class=" toc-section-title "><span class="text">Configurations</span><span class="icon"></span></div><ul role="group"> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/configurations/configuration-development/" tabindex="-1"> webhint development configuration </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/configurations/configuration-web-recommended/" tabindex="-1"> webhint recommended web configuration </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/configurations/configuration-accessibility/" tabindex="-1"> webhint's accessibility configuration </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/configurations/configuration-progressive-web-apps/" tabindex="-1"> webhint's recommended progressive web apps configuration </a></div></li> </ul></li> <li role="treeitem" aria-label="subsection" tabindex="0" aria-expanded="false"><div class=" toc-section-title "><span class="text">Configuring webhint</span><span class="icon"></span></div><ul role="group"> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/configuring-webhint/summary/" tabindex="-1"> Configure webhint in your project </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/configuring-webhint/browser-context/" tabindex="-1"> Browser configuration </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/configuring-webhint/rules-timeout/" tabindex="-1"> Hints timeout </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/configuring-webhint/ignoring-domains/" tabindex="-1"> Ignoring domains </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/configuring-webhint/using-relative-resources/" tabindex="-1"> Using relative resources </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/configuring-webhint/website-authentication/" tabindex="-1"> Website authentication </a></div></li> </ul></li> <li role="treeitem" aria-label="subsection" tabindex="0" aria-expanded="false"><div class=" toc-section-title "><span class="text">Connectors</span><span class="icon"></span></div><ul role="group"> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/connectors/connector-jsdom/" tabindex="-1"> jsdom </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/connectors/connector-local/" tabindex="-1"> Local </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/connectors/connector-puppeteer/" tabindex="-1"> Puppeteer </a></div></li> </ul></li> <li role="treeitem" aria-label="subsection" tabindex="0" aria-expanded="false"><div class=" toc-section-title "><span class="text">Development flow integration</span><span class="icon"></span></div><ul role="group"> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/development-flow-integration/summary/" tabindex="-1"> Development flow integration </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/development-flow-integration/local-server/" tabindex="-1"> Test a local server </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/development-flow-integration/travis-and-azure/" tabindex="-1"> Travis CI and Azure Web Apps </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/development-flow-integration/circleci/" tabindex="-1"> Using CircleCI and webhint </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/development-flow-integration/travisci/" tabindex="-1"> Using Travis CI and webhint </a></div></li> </ul></li> <li role="treeitem" aria-label="subsection" tabindex="0" aria-expanded="false"><div class=" toc-section-title "><span class="text">Extensions</span><span class="icon"></span></div><ul role="group"> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/extensions/extension-browser/" tabindex="-1"> Webhint DevTools integration </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/extensions/vscode-webhint/" tabindex="-1"> Webhint Visual Studio Code extension </a></div></li> </ul></li> <li role="treeitem" aria-label="subsection" tabindex="0" aria-expanded="false"><div class=" toc-section-title "><span class="text">Formatters</span><span class="icon"></span></div><ul role="group"> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/formatters/formatter-codeframe/" tabindex="-1"> Codeframe </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/formatters/formatter-excel/" tabindex="-1"> Excel </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/formatters/formatter-html/" tabindex="-1"> HTML </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/formatters/formatter-json/" tabindex="-1"> JSON </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/formatters/formatter-stylish/" tabindex="-1"> Stylish </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/formatters/formatter-summary/" tabindex="-1"> Summary </a></div></li> </ul></li> <li role="treeitem" aria-label="subsection" tabindex="0" aria-expanded="true"><div class=" toc-section-title--active "><span class="text">Hints</span><span class="icon"></span></div><ul role="group"> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-stylesheet-limits/" tabindex="0"> Avoid CSS limits </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-no-http-redirects/" tabindex="0"> Avoid HTTP redirects </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-axe/" tabindex="0"> axe accessibility check </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-babel-config/" tabindex="0"> Babel configuration hint set </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-compat-api/" tabindex="0"> Compatibility of CSS, HTML and JavaScript features </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-content-type/" tabindex="0"> Correct `Content-Type` header </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-manifest-file-extension/" tabindex="0"> Correct manifest extension </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-meta-viewport/" tabindex="0"> Correct viewport </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-detect-css-reflows/" tabindex="0"> Detect CSS Reflows </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-no-disallowed-headers/" tabindex="0"> Disallowed HTTP headers </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-disown-opener/" tabindex="0"> External links disown opener </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-manifest-exists/" tabindex="0"> Has web app manifest </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-highest-available-document-mode/" tabindex="0"> Highest document mode </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-http-cache/" tabindex="0"> HTTP cache </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-leading-dot-classlist/" tabindex="0"> Leading '.' in `classList.add` or `classList.remove` </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-manifest-app-name/" tabindex="0"> Manifest has name </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-minified-js/" tabindex="0"> Minify JavaScript </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-doctype/" tabindex="0"> Modern DOCTYPE </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-create-element-svg/" tabindex="0"> No `createElement` with SVG </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-no-p3p/" tabindex="0"> No `P3P` headers </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-no-broken-links/" tabindex="0"> No broken links </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-no-bom/" tabindex="0"> No byte-order mark </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-no-inline-styles/" tabindex="0"> No Inline CSS Styles </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-no-protocol-relative-urls/" tabindex="0"> No protocol-relative URLs </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-no-friendly-error-pages/" tabindex="0"> No small error pages </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-no-vulnerable-javascript-libraries/" tabindex="0"> No vulnerable libraries </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-html-checker/" tabindex="0"> Nu HTML test </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-http-compression/" tabindex="0"> Optimal compression </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-image-optimization-cloudinary/" tabindex="0"> Optimize images </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-performance-budget/" tabindex="0"> Performance budget </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-css-prefix-order/" tabindex="0"> Prefixed CSS first </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-scoped-svg-styles/" tabindex="0"> scoped-svg-styles </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-button-type/" tabindex="0"> Specify button type </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-ssllabs/" tabindex="0"> SSL server test </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-typescript-config/" tabindex="0"> TypeScript configuration hints set </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-no-html-only-headers/" tabindex="0"> Unneeded HTTP headers </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-strict-transport-security/" tabindex="0"> Use `Strict-Transport-Security` header </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-x-content-type-options/" tabindex="0"> Use `X-Content-Type-Options` header </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-apple-touch-icons/" tabindex="0"> Use Apple touch icon </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-meta-charset-utf-8/" tabindex="0"> Use charset `utf-8` </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-https-only/" tabindex="0"> Use HTTPS </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-sri/" tabindex="0"> Use subresource integrity </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-validate-set-cookie-header/" tabindex="0"> Valid `Set-Cookie` header </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-meta-theme-color/" tabindex="0"> Valid `theme-color` </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-manifest-is-valid/" tabindex="0"> Valid manifest </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/hints/hint-webpack-config/" tabindex="0"> webpack configuration hints set </a></div></li> </ul></li> <li role="treeitem" aria-label="subsection" tabindex="0" aria-expanded="false"><div class=" toc-section-title "><span class="text">Parsers</span><span class="icon"></span></div><ul role="group"> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/parsers/parser-babel-config/" tabindex="-1"> Babel config </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/parsers/parser-css/" tabindex="-1"> CSS </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/parsers/parser-html/" tabindex="-1"> HTML </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/parsers/parser-javascript/" tabindex="-1"> JavaScript </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/parsers/parser-jsx/" tabindex="-1"> JSX </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/parsers/parser-less/" tabindex="-1"> LESS </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/parsers/parser-manifest/" tabindex="-1"> Manifest </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/parsers/parser-package-json/" tabindex="-1"> package.json config </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/parsers/parser-sass/" tabindex="-1"> SASS </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/parsers/parser-typescript/" tabindex="-1"> TypeScript </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/parsers/parser-typescript-config/" tabindex="-1"> TypeScript config </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/parsers/parser-webpack-config/" tabindex="-1"> webpack config </a></div></li> </ul></li> <li role="treeitem" aria-label="subsection" tabindex="0" aria-expanded="false"><div class=" toc-section-title "><span class="text">Server configurations</span><span class="icon"></span></div><ul role="group"> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/server-configurations/summary/" tabindex="-1"> Examples of server configurations </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/server-configurations/iis/" tabindex="-1"> Basic `web.config` for IIS </a></div></li> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/server-configurations/apache/" tabindex="-1"> Basic server configuration for Apache </a></div></li> </ul></li> <li role="treeitem" aria-label="subsection" tabindex="0" aria-expanded="false"><div class=" toc-section-title "><span class="text">Troubleshoot</span><span class="icon"></span></div><ul role="group"> <li role="treeitem" aria-selected="false"><div class=" toc-subsection-title " aria-current=""><a class="text" href="https://webhint.io/docs/user-guide/troubleshoot/summary/" tabindex="-1"> Troubleshoot webhint installation and runtime issues </a></div></li> </ul></li> </ul></div><div class="module module--primary wrap-text"> <h1 id=detect-css-reflows-paint-detect-css-reflowspaint>Detect CSS Reflows - Paint (<code>detect-css-reflows/paint</code>)<a href="#detect-css-reflows-paint-detect-css-reflowspaint" class="headerlink" title="Detect CSS Reflows - Paint (detect-css-reflows/paint)"></a></h1><p>Let the developers know if changes to a specific CSS property will trigger
changes on the Paint rendering pipeline.</p>
<h2 id=why-is-this-important>Why is this important?<a href="#why-is-this-important" class="headerlink" title="Why is this important?"></a></h2><p>Understanding what rendering pipeline operations will be triggered by changes
on specific CSS properties can prevent users from introducing unintentional
performance hits.</p>
<h2 id=what-does-the-hint-check>What does the hint check?<a href="#what-does-the-hint-check" class="headerlink" title="What does the hint check?"></a></h2><p>It scans the css properties against a defined properties and associated
rendering triggers.</p>
<h3 id=examples-that-trigger-the-hint>Examples that <strong>trigger</strong> the hint<a href="#examples-that-trigger-the-hint" class="headerlink" title="Examples that trigger the hint"></a></h3><p>A list of code examples that will fail this hint.
It’s good to put some edge cases in here.</p>
<h3 id=examples-that-pass-the-hint>Examples that <strong>pass</strong> the hint<a href="#examples-that-pass-the-hint" class="headerlink" title="Examples that pass the hint"></a></h3><p>In the following example, this hint will warn user that making changes to
the <code>padding-left</code> property will trigger changes on the <code>Paint</code> pipeline.</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="hljs-selector-class">.example</span> {
<span class="hljs-attribute">padding-left</span>: auto;
}</pre></td></tr></table></figure><h2 id=can-the-hint-be-configured>Can the hint be configured?<a href="#can-the-hint-be-configured" class="headerlink" title="Can the hint be configured?"></a></h2><p>You can decide the granularity and severity of your reports up to the
following categories:</p>
<ul>
<li>detect-css-reflows/layout</li>
</ul>
<h2 id=how-to-use-this-hint>How to use this hint?<a href="#how-to-use-this-hint" class="headerlink" title="How to use this hint?"></a></h2><p>To use it you will have to install it via <code>npm</code>:</p>
<figure class="highlight bash"><table><tr><td class="code"><pre>npm install hint --save-dev</pre></td></tr></table></figure><p>Note: You can make <code>npm</code> install it as a <code>devDependency</code> using the <code>--save-dev</code>
parameter, or to install it globally, you can use the <code>-g</code> parameter. For
other options see
<a target="_blank" href="https://docs.npmjs.com/cli/install" ><code>npm</code>‘s documentation</a>.</p>
<p>And then activate it via the <a href="https://webhint.io/docs/user-guide/configuring-webhint/summary/" ><code>.hintrc</code></a>
configuration file:</p>
<figure class="highlight json"><table><tr><td class="code"><pre><span class="hljs-punctuation">{</span>
<span class="hljs-attr">"connector"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>...<span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">"formatters"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>...<span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">"parsers"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>...<span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span>
<span class="hljs-attr">"hints"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span>
<span class="hljs-attr">"detect-css-reflows/paint"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"error"</span>
<span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span>
...
<span class="hljs-punctuation">}</span></pre></td></tr></table></figure><h2 id=further-reading>Further Reading<a href="#further-reading" class="headerlink" title="Further Reading"></a></h2><!-- Link labels: -->
</div></div><a href="#main" class="anchor-top" hidden aria-label="back to top">top</a></div></article> </main> <footer class="footer footer--home"><div class="footer-nav container"> <div class="footer-nav__item"><p class="category"><a href="/docs/user-guide/">Get webhint</a></p><ul> <li><a href="/docs/user-guide/extensions/extension-browser/">In browser DevTools</a></li> <li><a href="/docs/user-guide/extensions/vscode-webhint/">In VS Code</a></li> <li><a href="/docs/user-guide/">Standalone CLI</a></li> </ul></div> <div class="footer-nav__item"><p class="category"><a href="">Documentation</a></p><ul> <li><a href="/docs/contributor-guide/">Contributor Guide</a></li> <li><a href="/docs/user-guide/hints/">Hints</a></li> <li><a href="/docs/user-guide/">User Guide</a></li> </ul></div> <div class="footer-nav__item"><p class="category"><a href="/about/">About</a></p><ul> <li><a href="/about/project_charter/">Project Charter</a></li> <li><a href="/about/faq/">FAQ</a></li> <li><a href="/about/changelog/">Changelog</a></li> <li><a href="/about/governance/">Governance</a></li> <li><a target="_blank" rel="noopener" href="https://js.foundation/community/code-of-conduct">Code of Conduct</a></li> </ul></div> <ul class="footer-nav__item social-list"><li class="github-icon"><a target="_blank" rel="noopener" href="https://github.com/webhintio" aria-label="Follow webhint on GitHub"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path class="github-icon-svg" d="M12.5.4C5.7.4.2 5.9.2 12.7c0 5.4 3.5 10 8.4 11.7.6.1.8-.3.8-.6v-2.1C6 22.4 5.3 20 5.3 20c-.6-1.4-1.4-1.8-1.4-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.9 1.3 1.9 1.3 1.1 1.9 2.9 1.3 3.6 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.6-1.4-5.6-6.1 0-1.3.5-2.4 1.3-3.3-.2-.4-.6-1.6 0-3.3 0 0 1-.3 3.4 1.3 1-.3 2-.4 3.1-.4 1 0 2.1.1 3.1.4C17.9 5.2 19 5.5 19 5.5c.7 1.7.2 2.9.1 3.3.8.9 1.3 2 1.3 3.3 0 4.7-2.9 5.8-5.6 6.1.4.4.8 1.1.8 2.3v3.4c0 .3.2.7.8.6 4.9-1.6 8.4-6.2 8.4-11.7C24.8 5.9 19.3.4 12.5.4"/></svg></a></li><li class="twitter-icon"><a target="_blank" rel="noopener" href="https://twitter.com/webhintio" aria-label="Follow webhint on Twitter"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24"><path class="twitter-icon-svg" d="M25 4.4c-.9.4-1.9.7-2.9.8 1-.6 1.8-1.6 2.2-2.8-1 .6-2.1 1-3.2 1.2-.9-1-2.2-1.6-3.7-1.6-2.8 0-5 2.3-5 5 0 .4 0 .8.1 1.2C8.3 8 4.6 6 2.1 2.9c-.4.8-.7 1.6-.7 2.6 0 1.8.9 3.3 2.2 4.2-.8-.1-1.5-.3-2.2-.7v.1c0 2.4 1.7 4.5 4.1 5-.4.1-.9.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.5 3.5 4.7 3.5-1.9 1.3-4 2.1-6.4 2.1-.4 0-.8 0-1.2-.1C2.6 21.2 5.3 22 8.1 22c9.3 0 14.4-7.7 14.4-14.4v-.7c1-.6 1.8-1.5 2.5-2.5"/></svg></a></li><li class="medium-icon"><a target="_blank" rel="noopener" href="https://medium.com/webhint" aria-label="Follow webhint on Medium"><svg xmlns="http://www.w3.org/2000/svg" viewBox="4 2 40 40"><path d="M5 40V5h35v35H5zm8.56-12.63c0 .56-.03.7-.32 1.03l-2.45 3v.38h6.9v-.4l-2.4-2.98c-.3-.34-.35-.5-.35-1.03v-8.95l6.13 13.36h.7L27 18.42v10.64c0 .3 0 .35-.2.53L25 31.4v.37h9.2v-.4l-1.82-1.8c-.2-.17-.22-.23-.22-.52v-13.1c0-.3.03-.36.2-.54l1.83-1.8v-.32h-6.5L23.1 24.8l-5.2-11.55h-6.8v.4l2.14 2.63c.24.3.3.37.3.77V27.4z" class="medium-icon-svg"/></svg></a></li><li class="openjsf-icon"><a target="_blank" rel="noopener" href="https://openjsf.org" aria-label="Visit the OpenJS Foundation home page"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 314.4"><linearGradient id="openjsf-logo-gradient" gradientUnits="userSpaceOnUse" x1="28.765" y1="49.831" x2="243.506" y2="264.571"><stop offset=".214" stop-color="#0075c9"/><stop offset=".707" stop-color="#80bc00"/><stop offset="1" stop-color="#fde021"/></linearGradient><path d="M271.4 78.1L137 .5l-.9-.5-.9.5L1.6 77.7l-.7.4-.9.5v157.2l.9.5 134.4 77.6.9.5.9-.5 132.6-76.5 1.8-1 .9-.5V78.6l-1-.5zm-148.7-58L89.8 77H24.1l98.6-56.9zM84.4 86.4L69 113.1 22.8 86.4h61.6zm-12 39.4l54.3 31.4-54.3 31.4-18.1-31.4 18.1-31.4zm-8-4.6L49 147.9 18.1 94.5l46.3 26.7zm-53.7-20.9l32.9 56.9-32.9 56.9V100.3zm38.2 66.3l15.4 26.7L18.1 220l30.8-53.4zM69 201.3L84.4 228H22.8L69 201.3zm-44.9 36.1h65.7l32.9 56.9-98.6-56.9zm107.4 53.4l-30.8-53.4h30.8v53.4zm0-62.8H95.2l-18.1-31.4 54.3-31.4V228zm0-78.9l-54.3-31.4 18.1-31.4h36.2v62.8zm0-72.1h-30.8l30.8-53.4V77zm76.4 44.2l46.2-26.7-30.8 53.4-15.4-26.7zm10 36l-18.1 31.4-54.3-31.4 54.3-31.4 18.1 31.4zm-14.7-44.1l-15.4-26.7h61.6l-46.2 26.7zM248.1 77h-65.7l-32.8-56.9L248.1 77zM140.8 23.6L171.6 77h-30.8V23.6zm0 62.8H177l18.1 31.4-54.3 31.4V86.4zm0 78.9l54.3 31.4L177 228h-36.2v-62.7zm0 72.1h30.8l-30.8 53.4v-53.4zm8.8 56.9l32.8-56.9h65.7l-98.5 56.9zm38.2-66.3l15.4-26.7 46.2 26.7h-61.6zm20.1-34.8l15.4-26.7 30.8 53.4-46.2-26.7zm53.7 20.9l-32.9-56.9 32.9-56.9v113.8z" fill="url(#openjsf-logo-gradient)"/><path class="openjsf-icon-svg" d="M308.4 202.7h64.2v5.8H315V257h52.2v6H315v49.9h-6.6zM383.8 279.7c0-19 15.2-34.4 34.5-34.4s34.2 15.4 34.2 34.4-14.9 34.5-34.2 34.5c-19.3 0-34.5-15.5-34.5-34.5m62.2 0c0-16.4-11.2-28.7-27.7-28.7s-28 12.3-28 28.7 11.5 28.9 28 28.9 27.7-12.5 27.7-28.9M469.9 288.5v-41.7h6.3v40.7c0 13.5 6.3 21.1 19 21.1 14.3 0 24.3-9.6 24.3-24.8v-37h6.3V313h-6.3l.2-14.6c-4.4 9.9-13.5 16-25.1 16-14.8 0-24.7-9.7-24.7-25.9M543 246.8h6.3l-.2 14.8c4.4-10 13.6-16.2 25.3-16.2 14.8 0 24.6 9.9 24.6 26.3V313h-6.3v-40.2c0-13.6-6.3-21.6-19.1-21.6-14.3 0-24.3 9.4-24.3 24.8v37H543v-66.2zM616.3 279.7c0-19.5 13.8-34.4 32.8-34.4 13.5 0 23.2 7.3 28 17.2v-66.6h6.3V313h-6.3l.3-16.5c-4.7 10.2-15.6 17.8-28.4 17.8-18.9-.1-32.7-15.1-32.7-34.6m61.3 0c0-16.4-11-28.7-27.7-28.7-16.4 0-26.9 12.3-26.9 28.7s10.5 28.9 26.9 28.9c16.7 0 27.7-12.5 27.7-28.9M748 271.4c0-14.9-6.8-20.6-17.7-20.6-10.1 0-16.9 4.2-21.6 11.4l-4.5-3.2c5.5-8.6 14.9-13.6 26.3-13.6 13.6 0 23.8 8.3 23.8 25.5v42.2H748l.3-10.2c-4.2 6.3-11.5 11.5-22.9 11.5-15.1 0-25-7-25-20.3 0-13.1 11.5-19.3 24.2-19.3H748v-3.4zm-22.6 8.5c-10.1 0-18.6 3.9-18.6 13.9 0 10.1 6.6 14.8 19.3 14.8 11 0 21.9-6.5 21.9-16.7v-12h-22.6zM782.5 295.4v-43.3h-10.4v-5.4h10.4v-23.2h6.3v23.2h19.1v5.4h-19.1v43.1c0 9.7 3.4 13.3 8.9 13.3 5.8 0 8.1-2.3 10.5-4.9l4.1 3.9c-3.2 3.7-7.1 6.6-14.6 6.6-8.4.1-15.2-5.2-15.2-18.7M829.5 218.2c0-3.1 2.6-5.4 5.4-5.4 2.8 0 5.4 2.3 5.4 5.4 0 3.2-2.6 5.3-5.4 5.3-2.8.1-5.4-2-5.4-5.3m2.3 28.6h6.3V313h-6.3v-66.2zM857.1 279.7c0-19 15.2-34.4 34.5-34.4s34.2 15.4 34.2 34.4-14.9 34.5-34.2 34.5c-19.2 0-34.5-15.5-34.5-34.5m62.3 0c0-16.4-11.2-28.7-27.7-28.7s-28 12.3-28 28.7 11.5 28.9 28 28.9 27.7-12.5 27.7-28.9M943.9 246.8h6.3l-.2 14.8c4.4-10 13.6-16.2 25.3-16.2 14.8 0 24.6 9.9 24.6 26.3V313h-6.3v-40.2c0-13.6-6.3-21.6-19.1-21.6-14.3 0-24.3 9.4-24.3 24.8v37h-6.3v-66.2zM308.4 73.1c0-41.4 31.8-71.3 71.7-71.3 39.6 0 71.5 29.8 71.5 71.3 0 41.4-31.9 71.3-71.5 71.3-39.9-.1-71.7-29.9-71.7-71.3m121 0c0-29.6-20.4-51.9-49.4-51.9s-49.6 22.3-49.6 51.9c0 29.6 20.6 51.9 49.6 51.9 29-.1 49.4-22.3 49.4-51.9M473.9 56.8h20.8l-.6 15.9c5.5-10.6 15.7-17.8 30.4-17.8 22 0 39.8 18.6 39.8 44.5s-18 44.9-40.2 44.9c-14.3 0-24.5-6.9-29.4-16.5v58h-20.8v-129zm69.2 42.6c0-15.5-9.4-26.1-24.3-26.1-15.1 0-24.9 10.6-24.9 26.1 0 16.1 9.8 26.7 24.9 26.7 15 .1 24.3-10.5 24.3-26.7M635 127c11.2 0 19.4-4.5 24.3-9.2l12 12.7c-8 8-19 13.9-36.1 13.9-29.4 0-48.4-19-48.4-44.7 0-25.5 20-44.7 45.7-44.7 29.2 0 45.7 21.6 44.3 51.7h-69C610.3 119 619.3 127 635 127m21.1-34.7c-1.8-11.6-9-20.2-23.3-20.2-13.3 0-22.5 7.3-24.9 20.2h48.2zM699.7 56.8h20.6l-.4 15.9c5.3-11.2 16.1-17.8 29-17.8 19 0 32.1 13.5 32.1 36.7v50.8h-20.6V93.3c0-12.3-5.7-19.4-17.8-19.4-13.5 0-22.3 8.2-22.3 22v46.5h-20.6V56.8zM803.5 120.9l17.6-10.8c4.9 8.8 10.6 14.9 20.8 14.9 11.6 0 19.2-5.5 19.2-21.6V3.7h21.6v100c0 27.6-16.5 40.6-39.8 40.6-20.6 0-32.8-10.6-39.4-23.4M904.9 115.6l17.8-9.8c6.5 10.8 14.9 19.4 31.8 19.4 14.1 0 24.1-7.6 24.1-19 0-12-8.2-17.4-23.3-24.1l-9.2-4.1c-20.2-9-32.5-19.2-32.5-40.6 0-20.6 15.9-35.3 39-35.3C971 2 983.5 9 991.8 23.9l-16.9 10.4c-5.3-9.2-11.4-13.5-22.3-13.5-11 0-18 6.7-18 16.1 0 10.4 5.9 15.1 20 21.2l9 4.1c23.7 10.4 36.3 21.4 36.3 43.7 0 24.3-19 38.4-45.1 38.4-26.3 0-42.2-13-49.9-28.7"/></svg></a></li></ul></div></footer> <script src="/static/scripts/treeview-54e979828f.js" integrity="sha384-VsYH3fD7SgMz9uDJ//T+K9HTnT0d3KEnDIHdcc8htlYrgZHpXStWu7gKniu7+Ya2" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" integrity="sha384-8uEk67aWSZHvjtAX9hf2AB+KzYcssy31vRRTi9oP81zHtyIj7PQGAykGbQpB1L2J" crossorigin="anonymous"></script><script src="/static/scripts/common-0cfb479c53.js" integrity="sha384-wOMtgTnli7Qkpwsb6QgS0Gpya9/5r0+T/sUgGBAW/tH0sfafWVCu29Ea1tXPVCyc" crossorigin="anonymous"></script><script>docsearch({apiKey:"2ee58f908e6d720c4f72a9645ce0e857",indexName:"webhint",inputSelector:"#search-input",appId:"0R8E5SPAFP",debug:!1})</script> </body></html>