the-forest/client/node_modules/css-blank-pseudo/README.md
2024-09-17 20:35:18 -04:00

105 lines
2.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# CSS Blank Pseudo [<img src="http://jonathantneal.github.io/js-logo.svg" alt="" width="90" height="90" align="right">][CSS Blank Pseudo]
[![NPM Version][npm-img]][npm-url]
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
[CSS Blank Pseudo] lets you style form elements when they are empty, following
the [Selectors Level 4] specification.
```css
input {
/* style an input */
}
input:blank {
/* style an input without a value */
}
```
## Usage
From the command line, transform CSS files that use `:blank` selectors:
```bash
npx css-blank-pseudo SOURCE.css --output TRANSFORMED.css
```
Next, use your transformed CSS with this script:
```html
<link rel="stylesheet" href="TRANSFORMED.css">
<script src="https://unpkg.com/css-blank-pseudo/dist/browser-global.js"></script>
<script>cssBlankPseudo(document)</script>
```
⚠️ Please use a versioned url, like this : `https://unpkg.com/css-blank-pseudo@3.0.0/dist/browser-global.js`
Without the version, you might unexpectedly get a new major version of the library with breaking changes.
⚠️ If you were using an older version via a CDN, please update the entire url.
The old URL will no longer work in a future release.
Thats it. The script works in most browsers.
## How it works
The [PostCSS plugin](README-POSTCSS.md) clones rules containing `:blank`,
replacing them with an alternative `[blank]` selector.
```css
input:blank {
background-color: yellow;
}
/* becomes */
input[blank] {
background-color: yellow;
}
input:blank {
background-color: yellow;
}
```
Next, the [JavaScript library](README-BROWSER.md) adds a `blank` attribute to
elements otherwise matching `:blank` natively.
```html
<input value="" blank>
<input value="This element has a value">
```
## ⚠️ `:not(:blank)`
with option : `preserve` `true`
```css
input:not(:blank) {
background-color: yellow;
}
/* becomes */
input:not([blank]) {
background-color: yellow;
}
input:not(:blank) {
background-color: yellow;
}
```
When you do not include the JS polyfill one will always match in browsers that support `:blank` natively.
In browsers that do not support `:blank` natively the rule will be invalid.
_currently no browsers support `:blank`_
[discord]: https://discord.gg/bUadyRwkJS
[npm-img]: https://img.shields.io/npm/v/css-blank-pseudo.svg
[npm-url]: https://www.npmjs.com/package/css-blank-pseudo
[CSS Blank Pseudo]: https://github.com/csstools/postcss-plugins/tree/main/plugins/css-blank-pseudo
[PostCSS Preset Env]: https://preset-env.cssdb.org/
[Selectors Level 4]: https://drafts.csswg.org/selectors-4/#blank