| [6a3a178] | 1 | # CSS Blank Pseudo [<img src="http://jonathantneal.github.io/js-logo.svg" alt="" width="90" height="90" align="right">][CSS Blank Pseudo]
|
|---|
| 2 |
|
|---|
| 3 | [![NPM Version][npm-img]][npm-url]
|
|---|
| 4 | [![Build Status][cli-img]][cli-url]
|
|---|
| 5 | [![Support Chat][git-img]][git-url]
|
|---|
| 6 |
|
|---|
| 7 | [CSS Blank Pseudo] lets you style form elements when they are empty, following
|
|---|
| 8 | the [Selectors Level 4] specification.
|
|---|
| 9 |
|
|---|
| 10 | ```css
|
|---|
| 11 | input {
|
|---|
| 12 | /* style an input */
|
|---|
| 13 | }
|
|---|
| 14 |
|
|---|
| 15 | input:blank {
|
|---|
| 16 | /* style an input without a value */
|
|---|
| 17 | }
|
|---|
| 18 | ```
|
|---|
| 19 |
|
|---|
| 20 | ## Usage
|
|---|
| 21 |
|
|---|
| 22 | From the command line, transform CSS files that use `:blank` selectors:
|
|---|
| 23 |
|
|---|
| 24 | ```bash
|
|---|
| 25 | npx css-blank-pseudo SOURCE.css TRANSFORMED.css
|
|---|
| 26 | ```
|
|---|
| 27 |
|
|---|
| 28 | Next, use your transformed CSS with this script:
|
|---|
| 29 |
|
|---|
| 30 | ```html
|
|---|
| 31 | <link rel="stylesheet" href="TRANSFORMED.css">
|
|---|
| 32 | <script src="https://unpkg.com/css-blank-pseudo/browser"></script>
|
|---|
| 33 | <script>cssBlankPseudo(document)</script>
|
|---|
| 34 | ```
|
|---|
| 35 |
|
|---|
| 36 | That’s it. The script is 509 bytes and works in all browsers.
|
|---|
| 37 |
|
|---|
| 38 | ---
|
|---|
| 39 |
|
|---|
| 40 | If you support Internet Explorer 11, use the **browser legacy** script, which
|
|---|
| 41 | is 671 bytes:
|
|---|
| 42 |
|
|---|
| 43 | ```html
|
|---|
| 44 | <link rel="stylesheet" href="TRANSFORMED.css">
|
|---|
| 45 | <script src="https://unpkg.com/css-blank-pseudo/browser-legacy"></script>
|
|---|
| 46 | <script>cssBlankPseudo(document)</script>
|
|---|
| 47 | ```
|
|---|
| 48 |
|
|---|
| 49 | ## How it works
|
|---|
| 50 |
|
|---|
| 51 | The [PostCSS plugin](README-POSTCSS.md) clones rules containing `:blank`,
|
|---|
| 52 | replacing them with an alternative `[blank]` selector.
|
|---|
| 53 |
|
|---|
| 54 | ```css
|
|---|
| 55 | input:blank {
|
|---|
| 56 | background-color: yellow;
|
|---|
| 57 | }
|
|---|
| 58 |
|
|---|
| 59 | /* becomes */
|
|---|
| 60 |
|
|---|
| 61 | input[blank] {
|
|---|
| 62 | background-color: yellow;
|
|---|
| 63 | }
|
|---|
| 64 |
|
|---|
| 65 | input:blank {
|
|---|
| 66 | background-color: yellow;
|
|---|
| 67 | }
|
|---|
| 68 | ```
|
|---|
| 69 |
|
|---|
| 70 | Next, the [JavaScript library](README-BROWSER.md) adds a `blank` attribute to
|
|---|
| 71 | elements otherwise matching `:blank` natively.
|
|---|
| 72 |
|
|---|
| 73 | ```html
|
|---|
| 74 | <input value="" blank>
|
|---|
| 75 | <input value="This element has a value">
|
|---|
| 76 | ```
|
|---|
| 77 |
|
|---|
| 78 | [cli-img]: https://img.shields.io/travis/csstools/css-blank-pseudo/master.svg
|
|---|
| 79 | [cli-url]: https://travis-ci.org/csstools/css-blank-pseudo
|
|---|
| 80 | [git-img]: https://img.shields.io/badge/support-chat-blue.svg
|
|---|
| 81 | [git-url]: https://gitter.im/postcss/postcss
|
|---|
| 82 | [npm-img]: https://img.shields.io/npm/v/css-blank-pseudo.svg
|
|---|
| 83 | [npm-url]: https://www.npmjs.com/package/css-blank-pseudo
|
|---|
| 84 |
|
|---|
| 85 | [CSS Blank Pseudo]: https://github.com/csstools/css-blank-pseudo
|
|---|
| 86 | [PostCSS Preset Env]: https://preset-env.cssdb.org/
|
|---|
| 87 | [Selectors Level 4]: https://drafts.csswg.org/selectors-4/#blank
|
|---|
