open-index/open-npm huggingface dataset:
npm package: @hint/configuration-accessibility
Description: webhint's axe-based accessibility configuration for WCAG 2.1 Level A and Level AA requirements
Latest version: 2.0.28

# webhint's accessibility configuration (`@hint/configuration-accessibility`)

This is a `webhint` configuration package to use for enabling
accessibility hints based on [`axe-core`][axe core] provided
via [hint-axe][hint axe] and it is installed automatically
with webhint:

```bash
npm install hint --save-dev
```

**Note:** The recommended way of running webhint is as a `devDependency` of
your project.

The minimum required [`.hintrc`][hintrc] file to use it is
the following:

```json
{
    "extends": ["accessibility"]
}
```

and it will be as if you had this:

```json
{
    "connector": "puppeteer",
    "formatters": [
        "html",
        "summary"
    ],
    "hints": {
        "axe/aria": "error",
        "axe/color": "error",
        "axe/forms": "error",
        ...
    },
    "hintsTimeout": 120000
}
```

If you prefer to use another formatter (or any other hint/connector,
etc.) you can do something like:

```json
{
    "extends": ["accessibility"],
    "formatters": ["codeframe"]
}
```

<!-- Link labels: -->

[axe core]: https://github.com/dequelabs/axe-core/
[hint axe]: https://webhint.io/docs/user-guide/hints/hint-axe/
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/configuration-development
Description: webhint's recommended hints configuration for development
Latest version: 8.3.20

# webhint development configuration

To examine your raw source, use `@hint/configuration-development`.

> **NOTE**:  To examine development and live websites, use
> `@hint/configuration-web-recommended`.

This `webhint` configuration package is installed automatically by webhint.

To install `webhint`, run the command in the following code snippet.

```bash
npm install hint --save-dev
```

> **NOTE**:  The recommended way of running webhint is as a `devDependency` of
> your project.

Copy the following code snippet and add it to your
[.hintrc][UserGuideConfiguringWebhintSummary] file.

```json
{
    "extends": ["development"]
}
```

The following code snippet is an expanded version of the previous code snippet.

```json
{
    "connector": "local",
    "extends": [
        "accessibility",
        "progressive-web-apps"
    ],
    "formatters": [
        "html",
        "summary"
    ],
    "hints": {
        "axe": "error",
        "babel-config/is-valid": "error",
        "disown-opener": "error",
        "highest-available-document-mode": "error",
        "manifest-exists": "off",
        "meta-charset-utf-8": "error",
        "meta-viewport": "error",
        ...
    },
    "hintsTimeout": 10000
}
```

The following code snippet includes another formatter \(or any other
hint or connector, and so on\).

```json
{
    "extends": ["development"],
    "formatters": ["codeframe"]
}
```

<!-- links -->

[UserGuideConfiguringWebhintSummary]: https://webhint.io/docs/user-guide/configuring-webhint/summary/ "Configure webhint | webhint"
npm package: @hint/configuration-progressive-web-apps
Description: webhint's recommended hints configuration for progressive web apps (PWAs)
Latest version: 7.0.29

# webhint's recommended progressive web apps configuration (`@hint/configuration-progressive-web-apps`)

This packages is a `webhint`'s configuration package to use for
checking progressive web apps (PWAs) and it is installed automatically
by webhint:

**Note:** The recommended way of running webhint is as a `devDependency` of
your project.

The minimum required [`.hintrc`][hintrc] file to use it is
the following:

```json
{
    "extends": ["progressive-web-apps"]
}
```

and it will be as if you had this:

```json
{
    "connector": {
        "name": "puppeteer"
    },
    "formatters": [
        "html",
        "summary"
    ],
    "hints": {
        "apple-touch-icons": "error",
        "manifest-app-name": "error",
        "manifest-exists": "error",
        "manifest-file-extension": "error",
        "manifest-icons": "error",
        "manifest-is-valid": "error",
        ...
    },
    "hintsTimeout": 120000,
    "parsers": [
        "manifest"
    ],
    ...
}
```

If you prefer to use another formatter (or any other hint/connector,
etc.) you can do something like:

```json
{
    "extends": ["progressive-web-apps"],
    "formatters": ["codeframe"]
}
```

<!-- Link labels: -->

[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/configuration-web-recommended
Description: webhint's recommended hints configuration for live websites
Latest version: 8.2.24

# webhint recommended web configuration

To examine development or in-production websites, use
`@hint/configuration-web-recommended`.

> **NOTE**:  This package is for use against any content served from a web
> server.

This `webhint` configuration package is installed automatically by webhint.

To install `webhint`, run the command in the following code snippet.

```bash
npm install hint --save-dev
```

> **NOTE**:  The recommended way of running `webhint` is as a `devDependency`
> of your project.

Copy the following code snippet and add it to your
[.hintrc][UserGuideConfiguringWebhintSummary] file.

```json
{
    "extends": ["web-recommended"]
}
```

The following code snippet is an expanded version of the previous code snippet.

```json
{
    "connector": {
        "name": "puppeteer"
    },
    "extends": [
        "accessibility"
    ],
    "formatters": [
        "html",
        "summary"
    ],
    "hints": {
        "axe": "error",
        "content-type": "error",
        "disown-opener": "error",
        "highest-available-document-mode": "error",
        "html-checker": "error",
        "http-cache": "error",
        "http-compression": "error",
        ...
    },
    "hintsTimeout": 120000
}
```

The following code snippet includes another formatter \(or any other
hint or connector, and so on\).

```json
{
    "extends": ["web-recommended"],
    "formatters": ["codeframe"]
}
```

<!-- links -->

[UserGuideConfiguringWebhintSummary]: https://webhint.io/docs/user-guide/configuring-webhint/summary/ "Configure webhint | webhint"
npm package: @hint/connector-chrome
Description: hint connector for Google Chrome
Latest version: 4.0.9
Deprecated: @hint/connector-chrome is obsolete, please use @hint/connector-puppeteer

# Chrome (`@hint/connector-chrome`)

A connector to use Google Chrome via the [chrome debugging
protocol][cdp] in `webhint`.

## Installation

First, you need to install [`webhint`](https://webhint.io/):

```bash
npm install hint
```

Then, install the new connector:

```bash
npm install @hint/connector-chrome
```

## Usage

Configure the connector name in your [`.hintrc`][hintrc]
configuration file:

```json
{
    "connector": {
        "name": "chrome"
    },
    ...
}
```

## Options

The set of settings supported by Chrome connector are:

* `ignoreHTTPSError (boolean)`: Indicates if errors with certificates
  should be ignored. Use this when checking self-signed certificates.
  It is `false` by default.
* `launcherOptions (object)`: Allows you to pass in additional Chrome
  command line API flags. This connector uses
  [Chrome Launcher][chrome-launcher] to start Chrome and
  `launcherOptions` will be relied to it so the same options are
  supported.
* `waitFor (number)`: time in milliseconds the connector will wait after
  the site is ready before starting the DOM traversing and stop listening
  to any network request. By default, it will wait until the network is
  somehow "quiet" even though more requests could be processed after DOM
  traversing. Default is `5000`.

```json
{
    "connector": {
        "name": "chrome",
        "options": {
            "ignoreHTTPSErrors": false,
            "launcherOptions": {
                "defaultProfile": true,
                "flags": ["--headless", "--disable-gpu"]
            },
            "waitFor": 10000
        }
    },
    ...
}
```

## Further Reading

* [Connectors overview][connectors]

<!-- Link labels: -->

[cdp]: https://chromedevtools.github.io/devtools-protocol/
[chrome-launcher]: https://github.com/googlechrome/chrome-launcher
[chrome-launcher-issue]: https://github.com/GoogleChrome/chrome-launcher/issues/118
[cli flags]: https://github.com/GoogleChrome/chrome-launcher/blob/master/docs/chrome-flags-for-tools.md
[connectors]: https://webhint.io/docs/user-guide/concepts/connectors/
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/connector-jsdom
Description: hint connector for JSDOM
Latest version: 4.1.28

# jsdom (`@hint/connector-jsdom`)

A connector to use [jsdom][jsdom] in `webhint`.

## Installation

This package is installed automatically when adding webhint to your project
so running the following is enough:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {
        "name": "jsdom"
    },
    ...
}
```

## Options

The set of settings supported by jsdom connector are:

* `ignoreHTTPSError (boolean)`: Indicates if errors with certificates
  should be ignored. Use this when checking self-signed certificates.
  It is `false` by default.
* `waitFor (number)`: time in milliseconds the connector will wait after
  the site is ready before starting the DOM traversing and stop listening
  to any network request. By default, it will wait until the network is
  somehow "quiet" even though more requests could be processed after DOM
  traversing. Default is `5000`.

```json
{
    "connector": {
        "name": "jsdom",
        "options": {
            "ignoreHTTPSErrors": false,
            "waitFor": 10000
        }
    },
    ...
}
```

## Further Reading

* [Connectors overview][connectors]

<!-- Link labels: -->

[connectors]: https://webhint.io/docs/user-guide/concepts/connectors/
[jsdom]: https://github.com/jsdom/jsdom
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/connector-local
Description: hint local connector
Latest version: 3.2.28

# Local (`@hint/connector-local`)

A local connector to analyze the local files in your project
with `webhint`.

## Installation

This package is installed automatically when adding webhint to your project
so running the following is enough:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {
        "name": "local"
    },
    ...
}
```

## Options

`local` allows you to configure the following:

* `pattern`: Add or ignore files defined in the pattern. By default the
  `local` connector will use the following pattern `['**', '!.git/**']`. This
  doesn't apply if you are targeting just a file or if you are using the
  options `content`.
* `watch`: Run `webhint` in watch mode. Watch files and trigger the analysis
  on changes.

```json
{
    "connector": {
        "name": "local",
        "options": {
            "pattern": ["**", "!.git/**"],
            "watch": false
        }
    },
    ...
}
```

In addition, the `local` connector accept a new parameter in the
method `collect` that allow you to pass the content to analyze as an string.
To use that property, you need to call to the `executeOn` method in
the engine with the content to analyze.

```js
engine.executeOn(url, {content: '{{your content}}'});
```

## Further Reading

* [Connectors overview][connectors]

<!-- Link labels: -->

[connectors]: https://webhint.io/docs/user-guide/concepts/connectors/
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/detect-css-reflows
Description: Let the developers know of what operations will be triggered by changes on the css properties
Latest version: 1.0.0
Deprecated: Renaming to hint-detect-css-reflows

# detect-css-reflows (`hint-detect-css-reflows`)

Let the developers know if changes to a specific CSS property 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.

## What does the hint check?

It scans the css properties against a defined properties and associated
rendering triggers.

### Examples that **trigger** the hint

A list of code examples that will fail this hint.
It's good to put some edge cases in here.

### Examples that **pass** the hint

In the following example, this hint will warn user that making changes to
the `padding-left` property will trigger changes on the `Layout` and `Paint`
pipeline.

```css
.example {
    padding-left: auto;
}
```

## Can the hint be configured?

You can decide the granularity and severity of your reports up to the
following categories:

- hint-detect-css-reflows/composite
- hint-detect-css-reflows/layout
- hint-detect-css-reflows/paint

## How to use this hint?

To use it you will have to install it via `npm`:

```bash
npm install hint-detect-css-reflows
```

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](https://docs.npmjs.com/cli/install).

And then activate it via the [`.hintrc`][hintrc]
configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "parsers": [...],
    "hints": {
        "detect-css-reflows": "error"
    },
    ...
}
```

## Further Reading

<!-- Link labels: -->

[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
[understanding-critical-path]: https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path
npm package: @hint/extension-browser
Description: webhint browser extension
Latest version: 2.4.17

# Webhint DevTools integration

Use webhint directly from your browser DevTools to get feedback while debugging.

## DevTools integration (Edge)

As of 2021, webhint is included by default in Edge DevTools. With DevTools
open, webhint will analyze sites automatically, and results and recommended
fixes will appear in the Issues tab. Additionally, underlines in the Elements
tab show which parts of the codebase are affected. To learn more, visit the
[Microsoft Edge documentation](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/issues/).

![webhint integration into Edge DevTools](images/edge-devtools.png)

## DevTools extension (Chrome, Edge, Firefox)

The webhint browser extension provides a visual interface within DevTools that
allows you to run and re-run site scans that test against all browsers and
all hint types or to just a select few.

![The webhint browser extension running against webhint.io.](images/extension-browser-0.png)

To install the browser extension, click one of the links below and follow the
installation instructions.

 > Note: The links below redirect to externally-hosted storefronts.

- [webhint browser extension for Google Chrome](https://chrome.google.com/webstore/detail/webhint/gccemnpihkbgkdmoogenkbkckppadcag)
- [webhint browser extension for Microsoft Edge (Chromium)](https://microsoftedge.microsoft.com/insider-addons/detail/mlgfbihcfnkaenjpdcngdnhcpkdmcdee)
- [webhint browser extension for Mozilla Firefox](https://addons.mozilla.org/en-US/firefox/addon/webhint/)

Open DevTools in the browser. Once the webhint extension is installed, it will
appear as a tab within DevTools. From here, you can customize the scan by
selecting which hint categories, browsers, or resources to include or exclude.
Click "Start scan" to begin scanning the site.

![Choosing settings for a webhint site scan.](images/extension-browser-1.png)

To contribute to the extension please read the [`CONTRIBUTING.md`][contributing]
file of the package.

<!-- Link labels -->

[contributing]: https://github.com/webhintio/hint/blob/main/packages/extension-browser/CONTRIBUTING.md
npm package: @hint/formatter-codeframe
Description: hint formatter that prints the results using the codeframe style
Latest version: 3.1.36

# Codeframe (`@hint/formatter-codeframe`)

The `codeframe` formatter shows the results in table format indicating
the resource, line and column as well as the part of the code where the
error was found (if applicable):

![Example output for the codeframe formatter](images/codeframe-output.png)

To use it you will have to install it via `npm`:

```bash
npm install @hint/formatter-codeframe --save-dev
```

**Note:** The recommended way of running webhint is as a `devDependency` of
your project.

And then activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": ["codeframe"],
    "hints": {
        ...
    },
    ...
}
```

<!-- Link labels: -->

[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/formatter-excel
Description: webhint formatter that outputs the result in an Excel file (xlsx)
Latest version: 3.1.36

# Excel (`@hint/formatter-excel`)

The `excel` formatter outputs the results in an Excel file (`xlsx`),
each resource in its sheet:

![Example output for the summary sheet of the excel
formatter](images/summary.png)

![Example output for one of the details sheet of the excel
formatter](images/details.png)

The file will be created in the folder where `webhint` is called from
(i.e.: `process.cwd()`).

To use it you will have to install it via `npm`:

```bash
npm install @hint/formatter-excel --save-dev
```

**Note:** The recommended way of running webhint is as a `devDependency` of
your project.

And then activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": ["excel"],
    "hints": {
        ...
    },
    ...
}
```

<!-- Link labels: -->

[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/formatter-html
Description: A hint formatter that outputs the issues in an HTML file.
Latest version: 4.3.17

# HTML (`@hint/formatter-html`)

The `html` formatter outputs the result in a HTML file.

![Example output for the html formatter](images/html-output.png)

A new folder `hint-report` will be created with the results.

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": ["html"],
    "hints": {
        ...
    },
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

<!-- Link labels: -->

[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/formatter-json
Description: webhint formatter that prints the JSON object of the results
Latest version: 3.1.36

# JSON (`@hint/formatter-json`)

The `json` formatter does a `JSON.stringify()` of the results. Output is not
very user friendly, but it can be useful when using it as input for
other tools:

![Example output for the json formatter](images/json-output.png)

To use it you will have to install it via `npm`:

```bash
npm install @hint/formatter-json --save-dev
```

**Note:** The recommended way of running webhint is as a `devDependency` of
your project.

And then activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": ["json"],
    "hints": {
        ...
    },
    ...
}
```

<!-- Link labels: -->

[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/formatter-stylish
Description: webhint formatter that prints the results using the stylish style
Latest version: 3.1.36

# Stylish (`@hint/formatter-stylish`)

The `stylish` formatter prints the results in table format indicating
the resource, line, and column:

![Example output for the stylish formatter](images/stylish-output.png)

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": ["stylish"],
    "hints": {
        ...
    },
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

<!-- Link labels: -->

[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/formatter-summary
Description: The `summary` formatter prints the results of a site analysis in a table with how many errors or warnings a hint has found:
Latest version: 3.0.39

# Summary (`@hint/formatter-summary`)

The `summary` formatter prints the results of a site analysis in
a table with how many errors or warnings a hint has found:

![Example output for the summary formatter](images/summary-output.png)

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": ["summary"],
    "hints": {
        ...
    },
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

<!-- Link labels: -->

[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/hint-amp-validator
Description: hint that that validates AMP HTML pages using the AMP Validator
Latest version: 2.10.18

# AMP HTML validator (`amp-validator`)

> AMP HTML is a way to build web pages that render with reliable and
fast performance. It is our attempt at fixing what many perceive as
painfully slow page load times – especially when reading content on
the mobile web. AMP HTML is built on existing web technologies; an
AMP page will load (quickly) in any modern browser.

***From [AMPProject - AMP HTML][ampproject]***

## Why is this important?

If you are building an AMP page, you need to make sure the HTML is
valid. Only valid AMP content can be added to an [AMP Cache][amp-cache].

## What does the hint check?

This hint uses [amphtml-validator][amphtml-validator] to validate the
HTML of your page.

## Can the hint be configured?

Yes, you can decide if you want to receive errors only, or also
warnings found by [`amphtml-validator`][amphtml-validator].
By default, all warnings and errors are reported. If you prefer to
see only the errors, you can use the following hint configuration
in your [`.hintrc`][hintrc] file:

```json
{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "amp-validator": ["error", {
            "errorsOnly": true
        }],
        ...
    },
    ...
}
```

## How to use this hint?

To use it you will have to install it via `npm`:

```bash
npm install @hint/hint-amp-validator --save-dev
```

**Note:** The recommended way of running webhint is as a `devDependency` of
your project.

And then activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "amp-validator": "error",
        ...
    },
    "parsers": [...],
    ...
}
```

## Further Reading

* [What is AMP][amp]
* [How AMP Works][amp-works]

<!-- Link labels: -->

[amp-cache]: https://www.ampproject.org/docs/guides/how_cached
[amp-works]: https://www.ampproject.org/learn/about-how/
[amp]: https://www.ampproject.org/learn/overview/
[amphtml-validator]: https://www.npmjs.com/package/amphtml-validator
[ampproject]: https://github.com/ampproject/amphtml
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/hint-babel-config
Description: hint that that checks if the Babel configuration is valid.
Latest version: 2.4.28

# Babel configuration hint set (`babel-config`)

`babel-config` contains hints to check if your Babel configuration
has the most recommended configuration.

## Why is this important?

Babel needs to be properly configured to reflect user's preference.

## Hints

* [babel-config/is-valid][is-valid]

## How to use this hint?

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "babel-config/is-valid": "error",
        ...
    },
    "parsers": [...],
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

## Further Reading

* [Babel Documentation][babel documentation]

<!-- Link labels: -->

[babel documentation]: https://babeljs.io/docs/usage/babelrc/
[is-valid]: https://github.com/webhintio/hint/blob/HEAD/packages/hint-babel-config/docs/is-valid.md
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/hint-button-type
Description: Check if button has type attribute set
Latest version: 3.0.23

# Specify button type (`button-type`)

`button-type` checks if all buttons have a `type` attribute set.

## Why is this important?

The default type for `<button>` is `submit` (not `type="button"` as one might expect).
This can lead to surprising keyboard behavior within a form.

The best way to avoid unexpected surprises is to always explicitly
set a type on `<button>`s.

## What does the hint check?

This hint checks whether the `type` attribute of a `<button>` is explicitly set.

### Examples that **trigger** the hint

```html
<button></button>
```

### Examples that **pass** the hint

```html
<button type="submit"></button>
<button type="button"></button>
```

## How to use this hint?

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "parsers": [...],
    "hints": {
        "button-type": "error"
    },
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

## Further Reading

What can the user read to know more about this subject?

* [Never forget type="button" on generated buttons!][generated-buttons] by Lea Verou.

<!-- Link labels: -->

[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
[generated-buttons]: https://lea.verou.me/2018/05/never-forget-typebutton-on-generated-buttons/
npm package: @hint/hint-compat-api
Description: hint to validate if the HTML, CSS, and JavaScript APIs of the project are deprecated or not broadly supported
Latest version: 4.5.8

# Compatibility of CSS, HTML and JavaScript features (`compat-api`)

`compat api` contains hints to check if your CSS, HTML, and JavaScript
have deprecated or not broadly supported features.

## Why is this important?

You need to know if all the properties that you are using in your files
are compatible with the target browsers that you want to support.

## Hints

* [compat-api/css][compat-api-css]
* [compat-api/html][compat-api-html]

## How to use these hints?

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "compat-api/css": "error",
        "compat-api/html": "error",
        ...
    },
    "parsers": [...],
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

<!-- Link labels: -->

[compat-api-css]: https://github.com/webhintio/hint/blob/HEAD/packages/hint-compat-api/docs/css.md
[compat-api-html]: https://github.com/webhintio/hint/blob/HEAD/packages/hint-compat-api/docs/html.md
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
[npm docs]: https://docs.npmjs.com/cli/install
npm package: @hint/hint-create-element-svg
Description: Infrom users that they need to use createElementNS to create SVG elements instead of createElement
Latest version: 1.3.27

# No `createElement` with SVG (`create-element-svg`)

This hint informs users that they need to use [`createElementNS`][createElementNS]
to create SVG elements instead of [`createElement`][createElement].

## Why is this important?

SVG-in-HTML is a fantastic addition to the web platform, but since SVG
is an XML-based language there is some nuance to how it can be used.
When parsing HTML, SVG elements are automatically created correctly so
long as they are inside an `<svg>...</svg>` block. However, SVG elements
cannot be *dynamically* created using `createElement` in the same way
as HTML elements.

For example, calling `document.createElement('circle')` actually returns
an *HTML* element named `circle` instead of an SVG element. This is for
compatibility with existing web content which may have created custom
(although invalid) HTML elements using these same names.

In order to dynamically create SVG elements, you must explicitly tell the
browser you want SVG by using the [SVG namespace][svg namespace] with
`createElementNS`. For example, to create an SVG `circle` call
`document.createElementNS('http://www.w3.org/2000/svg', 'circle')`.

## What does the hint check?

This hint scans JavaScript source code to check if `createElement` is
called with any known SVG element names.

### Examples that **trigger** the hint

```javascript
const container = document.getElementById('container');
const svg = document.createElement('svg');

container.appendChild(svg);
```

### Examples that **pass** the hint

```javascript
const container = document.getElementById('container');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

container.appendChild(svg);
```

## How to use this hint?

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "parsers": [...],
    "hints": {
        "create-element-svg": "error"
    },
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

## Further Reading

[Document.createElementNS][createElementNS vs createElement]
[SVG: Scalable Vector Graphics][svg]

<!-- Link labels: -->

[createElement]: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
[createElementNS]: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
[createElementNS vs createElement]: http://zhangwenli.com/blog/2017/07/26/createelementns/
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
[svg]: https://developer.mozilla.org/en-US/docs/Web/SVG
[svg namespace]: https://www.w3.org/2000/svg
npm package: @hint/hint-css-prefix-order
Description: Ensure vendor-prefixed versions of a CSS property are listed before the unprefixed version.
Latest version: 1.5.8

# Prefixed CSS first (`css-prefix-order`)

Ensure vendor-prefixed versions of a CSS property are listed before the
standardized, unprefixed version.

## Why is this important?

When multiple versions of the same CSS property are specified, the last
*supported* one will be used due to how browsers handle
[fallback values][css-fallback]. This means the [order matters][css-order]
when using both vendor-prefixed and unprefixed versions of the same
property. Specifically, the unprefixed version must be listed last to ensure
standardized behavior takes precedence.

## What does the hint check?

This hint examines CSS files looking for blocks containing both prefixed
and unprefixed CSS properties or values. The hint then verifies the last
listed version of a particular property in a block is unprefixed.

### Examples that **trigger** the hint

```css
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
```

```css
display: grid;
display: -ms-grid;
```

### Examples that **pass** the hint

```css
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
```

```css
display: -ms-grid;
display: grid;
```

## How to use this hint?

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "parsers": [...],
    "hints": {
        "css-prefix-order": "error"
    },
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

<!-- Link labels: -->

[css-fallback]: https://www.w3.org/TR/css-2018/#partial
[css-order]: https://css-tricks.com/ordering-css3-properties/#article-header-id-0
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/hint-detect-css-reflows
Description: Let the developers know of what operations will be triggered by changes on the css properties
Latest version: 1.0.7

# 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.

```css
@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.

```css
@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`:

```bash
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](https://docs.npmjs.com/cli/install).

And then activate it via the [`.hintrc`][hintrc]
configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "parsers": [...],
    "hints": {
        "detect-css-reflows/composite": "off",
        "detect-css-reflows/layout": "hint",
        "detect-css-reflows/paint": "off"
    },
    ...
}
```

## Further Reading

<!-- Link labels: -->

[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
[understanding-critical-path]: https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path
npm package: @hint/hint-https-only
Description: hint that that checks if your site is using HTTPS and if it has mixed content.
Latest version: 2.4.27

# Use HTTPS (`https-only`)

`https-only` checks if your site is using HTTPS and warns against
having mixed content.

## Why is this important?

HTTPS is important to guarantee content integrity. Even when your site
doesn't have sensitive information, an attacker can change the content
or inject malicious scripts (like a [crypto miner][crypto miner] to
use your user's CPU power).

Also, [certain browser features][certain features] are only available
if the site is on HTTPS.

## What does the hint check?

This hint checks two things:

* The main target is served using HTTPS
* If the main target is an HTML file, all its resources should be on
  HTTPS too
* If there are any redirects accessing the resources, it will validate
  all of them are done over HTTPS

### Examples that **trigger** the hint

If your site is not served using HTTPS.

```bash
hint http://example.com
```

If your site is served using HTTPS, but one or more resources use HTTP.

```html
<body>
    <img src="http://example.com/image.png" />
    <script src="http://example.com/script.js"></script>
</body>
```

### Examples that **pass** the hint

Your site is served using HTTPS and its resources too.

```html
<body>
    <img src="https://example.com/image.png" />
    <script src="https://example.com/script.js"></script>
</body>
```

## How to use this hint?

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "https-only": "error",
        ...
    },
    "parsers": [...],
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

## Further Reading

* [Yes your site needs HTTPS][needs https]
* [MDN Mixed Content][mixed content]
* [W3C Mixed Content spec][spec]

[crypto miner]: https://scotthelme.co.uk/protect-site-from-cryptojacking-csp-sri/
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
[mixed content]: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
[needs https]: https://doesmysiteneedhttps.com/
[certain features]: https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts
[spec]: https://w3c.github.io/webappsec-mixed-content/
npm package: @hint/hint-leading-dot-classlist
Description: Inform users about classList.add or classList.remove with leading '.' in the argument pitfall
Latest version: 1.0.20

# Leading '.' in `classList.add` or `classList.remove`

This hint informs users that they should to use
[`Element.classList`][classlist] argument without a leading '.' as it
may lead to unintended results.

## Why is this important?

When writing selectors either in CSS or using DOM methods like
`querySelector`, class names are referred to using a leading '.',
e.g. `document.querySelector('.foo')`. However when modifying the
`classList` of an element the raw class name is expected to be used
instead, e.g. `element.classList.add('foo')`.

Unfortunately if a leading '.' is provided to the `classList` APIs
it will succeed without an error, treating the '.' as part of the
name itself. This typically causes selectors elsewhere in the code
to fail to match this element. Figuring out why can be tedious and
time-consuming until the typo has been found.

## What does the hint check?

This hint scans JavaScript source code to check if the argument in
`element.classList.add` or `element.classList.remove` contains a
leading '.'. If so it emits a warning to help save time debugging
this subtle issue.

### Examples that **trigger** the hint

```javascript
const element = document.getElementById('foo');

element.classList.add('.foo');
element.classList.remove('.foo');
```

### Examples that **pass** the hint

```javascript
const element = document.getElementById('foo');

element.classList.add('foo');
element.classList.remove('foo');
```

## How to use this hint?

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "parsers": [...],
    "hints": {
        "leading-dot-classlist": "warning"
    },
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

## Further Reading

[Element.classList][classlist]

<!-- Link labels: -->

[classlist]: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
npm package: @hint/hint-manifest-file-extension
Description: hint that that checks if the web app manifest file has the correct file extension
Latest version: 3.0.24

# Correct manifest extension (`manifest-file-extension`)

`manifest-file-extension` warns against using non-standard file
extensions for the [web app manifest][spec] file.

## Why is this important?

While the [`.webmanifest`][file extension] file extension is not
enforced by the specification, nor is it required by browsers, using
it makes it:

* [easier to set custom server configurations][server configs] for
  the web app manifest file
* possible to benefit from [existing configurations][other configs]

## What does the hint check?

The hint checks if the recommended [`.webmanifest`][file extension]
file extension is used for the web app manifest file.

### Examples that **trigger** the hint

```html
<link rel="manifest" href="site.json">
```

```html
<link rel="manifest" href="site.manifest">
```

### Examples that **pass** the hint

```html
<link rel="manifest" href="site.webmanifest">
```

## How to use this hint?

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "manifest-file-extension": "error",
        ...
    },
    "parsers": [...],
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

## Further Reading

* [Web App Manifest Specification][spec]

<!-- Link labels: -->

[file extension]: https://w3c.github.io/manifest/#media-type-registration
[other configs]: https://github.com/jshttp/mime-db/blob/67a4d013c31e73c47b5d975062f0088aea6cd5cd/src/custom-types.json#L85-L92
[server configs]: https://github.com/w3c/manifest/issues/346
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/
[spec]: https://www.w3.org/TR/appmanifest
npm package: @hint/hint-minified-js
Description: hint that that checks if the JavaScript used by the web page is minified
Latest version: 2.4.27

# Minify JavaScript (`minified-js`)

This hint checks whether JavaScript used by your web page is minified
or not.

## Why is this important?

Minifying your JavaScript is a great way to improve your page load
time. This includes removing unused variables and methods, renaming
variables and methods to smaller names, removing code comments, etc.
Minification should generate a smaller file, and thus less code to
parse.

## What does the hint check?

This hint generates an *"Improvement Index"* value for the script
content and compares it against a derived threshold value to determine
whether the content is minified or not.

Improvement index is generated by comparing the number of tokens (from
the abstract syntax tree generated from the code) with the total content
length of a file.

```javascript
const tokenRatio = tokenLength / contentLength;
const improvementIndex = Math.round((1 - tokenRatio) * 100);

if (improvementIndex > threshold) {
    // Script might be unminified
}
```

By default, the hint uses **`75`** as the threshold value to compare
against. If the calculated improvement index value is greater than
the threshold, the script will be flagged as unminified.

*The value 75 was derived after running tests on some of the most used
libraries and a couple of custom JavaScript files.* See the [sample
repo][Improvement Index tests repo] with the test files and results.

## Can the hint be configured?

By default, the hint uses **`75`** as the threshold value. But you
can override that with a custom value in your [`.hintrc`][hintrc]
config:

```json
{
    "connector": {...},
    "formatters": [...],
    "parsers": ["javascript"],
    "hints": {
        "minified-js": ["error", {
            "threshold": 80
        }]
    },
    ...
}
```

## How to use this hint?

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "minified-js": "error",
        ...
    },
    "parsers": ["javascript"],
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

## Further Reading

Here are some useful topics if you are new to minification:

* [Minification][Minification Wiki]
* [Minify Resources (HTML, CSS, and JavaScript)][Google Speed Insights]

<!-- Link labels: -->

[Google Speed Insights]:
https://developers.google.com/speed/docs/insights/MinifyResources
[Improvement Index tests repo]:
https://github.com/kshyju/ImprovementIndex-Comparison
[Minification Wiki]:
https://en.wikipedia.org/wiki/Minification_(programming)
[NPM documentation]:
[https://docs.npmjs.com/cli/install]
[hintrc]:
https://webhint.io/docs/user-guide/configuring-webhint/summary/

<!-- Link labels: -->
npm package: @hint/hint-no-bom
Description: hint that that warns against using the BOM character at the beginning of a text file.
Latest version: 4.2.27

# No byte-order mark (`no-bom`)

`no-bom` warns against having the byte-order mark (BOM) character
at the beginning of a text file.

## Why is this important?

Having the BOM character at the beginning of a file over the internet
(especially HTML) can have some bad side effects on some browsers.
The BOM character can be used to indicate the charset of the content
is `UTF-8` but this doesn't mean it will be considered. For example,
Internet Explorer 10 and 11 give a higher precedence to the HTTP header
while previous versions gave the precedence to BOM for the encoding.

You can learn about other problems in [this section][bom problems].

## What does the hint check?

This hint checks that all text-based media type files are served
without the BOM character at the beginning.

### Examples that **trigger** the hint

A text file (such as HTML) that starts with the BOM character `U+FEFF`
will fail.

### Examples that **pass** the hint

A text file (such as HTML) that doesn't start with the BOM character
`U+FEFF` will pass.

## How to use this hint?

This package is installed automatically by webhint:

```bash
npm install hint --save-dev
```

To use it, activate it via the [`.hintrc`][hintrc] configuration file:

```json
{
    "connector": {...},
    "formatters": [...],
    "hints": {
        "no-bom": "error",
        ...
    },
    "parsers": [...],
    ...
}
```

**Note**: The recommended way of running webhint is as a `devDependency` of
your project.

## Further Reading

* [Byte order mark (Wikipedia)][bom]
* [The byte-order mark (BOM) in HTML][bom in html]

<!-- Link labels: -->

[bom]: https://en.wikipedia.org/wiki/Byte_order_mark
[bom in html]: https://www.w3.org/International/questions/qa-byte-order-mark.en
[bom problems]: https://www.w3.org/International/questions/qa-byte-order-mark.en#problems
[hintrc]: https://webhint.io/docs/user-guide/configuring-webhint/summary/