Detect CSS Reflows
User guide
- Getting Started
Api
Concepts
Configurations
Configuring webhint
Connectors
Development flow integration
Extensions
Formatters
Hints
- Avoid CSS limits
- Avoid HTTP redirects
- axe accessibility check
- Babel configuration hint set
- Compatibility of CSS, HTML and JavaScript features
- Correct `Content-Type` header
- Correct manifest extension
- Correct viewport
- Detect CSS Reflows
- Disallowed HTTP headers
- External links disown opener
- Has web app manifest
- Highest document mode
- HTTP cache
- Leading '.' in `classList.add` or `classList.remove`
- Manifest has name
- Minify JavaScript
- Modern DOCTYPE
- No `createElement` with SVG
- No `P3P` headers
- No broken links
- No byte-order mark
- No Inline CSS Styles
- No protocol-relative URLs
- No small error pages
- No vulnerable libraries
- Nu HTML test
- Optimal compression
- Optimize images
- Performance budget
- Prefixed CSS first
- scoped-svg-styles
- Specify button type
- SSL server test
- TypeScript configuration hints set
- Unneeded HTTP headers
- Use `Strict-Transport-Security` header
- Use `X-Content-Type-Options` header
- Use Apple touch icon
- Use charset `utf-8`
- Use HTTPS
- Use subresource integrity
- Valid `Set-Cookie` header
- Valid `theme-color`
- Valid manifest
- webpack configuration hints set
Parsers
Server configurations
Troubleshoot
- Api
- Concepts
- Configurations
- Configuring webhint
- Connectors
- Development flow integration
- Extensions
- Formatters
- Hints
- Parsers
- Server configurations
- Troubleshoot
Detect CSS Reflows (detect-css-reflows
)
Let the developers know if changes to a specific CSS property inside @keyframes will trigger changes on the Layout, Composite or Paint rendering pipeline.
Why is this important?
Understanding what rendering pipeline operations will be triggered by changes
on specific CSS properties can prevent users from introducing unintentional
performance hits. Paint
and Layout
operations should be minimized or avoided
when combined with animations.
What does the hint check?
It scans the css properties inside @keyframes property against a defined set of properties and associated rendering triggers.
Examples that trigger the hint
left
property triggers a Layout
operation its use should be minimized inside
@keyframes
to avoid jankiness or slow animations.
@keyframes performance-with-layout-trigger {
0% {
left: 0;
}
100% {
left: 400px;
}
} |
Examples that pass the hint
A better approach is to use translate
which will trigger only once, at the
end of the animation.
@keyframes performance-without-layout-trigger {
0% {
transform: translateX(0);
}
100% {
transform: translateX(400px);
}
} |
Can the hint be configured?
You can decide the granularity and severity of your reports up to the following categories:
- detect-css-reflows/composite
- detect-css-reflows/layout
- detect-css-reflows/paint
How to use this hint?
To use it you will have to install it via npm
:
npm install hint --save-dev |
Note: You can make npm
install it as a devDependency
using the --save-dev
parameter, or to install it globally, you can use the -g
parameter. For
other options see
npm
‘s documentation.
And then activate it via the .hintrc
configuration file:
{
"connector": {...},
"formatters": [...],
"parsers": [...],
"hints": {
"detect-css-reflows/composite": "off",
"detect-css-reflows/layout": "hint",
"detect-css-reflows/paint": "off"
},
...
} |