source: trip-planner-front/node_modules/css-blank-pseudo/README.md@ fa375fe

Last change on this file since fa375fe was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 2.2 KB
Line 
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
8the [Selectors Level 4] specification.
9
10```css
11input {
12 /* style an input */
13}
14
15input:blank {
16 /* style an input without a value */
17}
18```
19
20## Usage
21
22From the command line, transform CSS files that use `:blank` selectors:
23
24```bash
25npx css-blank-pseudo SOURCE.css TRANSFORMED.css
26```
27
28Next, 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
36That’s it. The script is 509 bytes and works in all browsers.
37
38---
39
40If you support Internet Explorer 11, use the **browser legacy** script, which
41is 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
51The [PostCSS plugin](README-POSTCSS.md) clones rules containing `:blank`,
52replacing them with an alternative `[blank]` selector.
53
54```css
55input:blank {
56 background-color: yellow;
57}
58
59/* becomes */
60
61input[blank] {
62 background-color: yellow;
63}
64
65input:blank {
66 background-color: yellow;
67}
68```
69
70Next, the [JavaScript library](README-BROWSER.md) adds a `blank` attribute to
71elements 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
Note: See TracBrowser for help on using the repository browser.