Skip to content

Commit bb0ef3f

Browse files
committed
Update README.md.
[ci skip]
1 parent 5a8758e commit bb0ef3f

File tree

1 file changed

+56
-39
lines changed

1 file changed

+56
-39
lines changed

README.md

Lines changed: 56 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@ load("parserlib.js");
4646

4747
### HTML page
4848

49-
To use the CSS parser on an HTML page, you can either include the entire library on your page:
49+
To use the CSS parser on an HTML page, you can either include the entire
50+
library on your page:
5051

5152
```html
5253
<script src="parserlib.js"></script>
@@ -71,12 +72,17 @@ You can create a new instance of the parser by using the following code:
7172
var parser = new parserlib.css.Parser();
7273
```
7374

74-
The constructor accepts an options object that specifies additional features the parser should use. The available options are:
75+
The constructor accepts an options object that specifies additional features
76+
the parser should use. The available options are:
7577

76-
* `starHack` - set to true to treat properties with a leading asterisk as if the asterisk wasn't there. Default is false.
77-
* `underscoreHack` - set to true to treat properties with a leading underscore as if the underscore wasn't there. Default is false.
78-
* `ieFilters` - set to true to accept IE < 8 style `filter` properties. Default is false.
79-
* `strict` - set to true to disable error recovery and stop on the first syntax error. Default is false.
78+
* `starHack` - set to true to treat properties with a leading asterisk as if
79+
the asterisk wasn't there. Default is `false`.
80+
* `underscoreHack` - set to true to treat properties with a leading underscore
81+
as if the underscore wasn't there. Default is `false`.
82+
* `ieFilters` - set to true to accept IE < 8 style `filter` properties.
83+
Default is `false`.
84+
* `strict` - set to true to disable error recovery and stop on the first
85+
syntax error. Default is `false`.
8086

8187
Here's an example with some options set:
8288

@@ -90,11 +96,14 @@ You can then parse a string of CSS code by passing into the `parse()` method:
9096
parser.parse(someCSSText);
9197
```
9298

93-
The `parse()` method throws an error if a non-recoverable syntax error occurs, otherwise it finishes silently.
94-
This method does not return a value nor does it build up an abstract syntax tree (AST) for you,
95-
it simply parses the CSS text and fires events at important moments along the parse.
99+
The `parse()` method throws an error if a non-recoverable syntax error occurs,
100+
otherwise it finishes silently.
101+
This method does not return a value nor does it build up an abstract syntax
102+
tree (AST) for you, it simply parses the CSS text and fires events at important
103+
moments along the parse.
96104

97-
Note: The `parseStyleSheet()` method is provided for compatibility with SAC-based APIs but does the exact same thing as `parse()`.
105+
Note: The `parseStyleSheet()` method is provided for compatibility with
106+
SAC-based APIs but does the exact same thing as `parse()`.
98107

99108
## Understanding syntax units
100109

@@ -103,9 +112,10 @@ These types are designed to give you easy access to all relevant parts of the CS
103112

104113
### Media Queries
105114

106-
The `parserlib.css.MediaFeature` type represents a specific media feature in a media query,
107-
such as `(orientation: portrait)` or `(color)`. Essentially, this type of object represents
108-
anything enclosed in parentheses in a media query. Object of this type have the following properties:
115+
The `parserlib.css.MediaFeature` type represents a specific media feature in a
116+
media query, such as `(orientation: portrait)` or `(color)`. Essentially, this
117+
type of object represents anything enclosed in parentheses in a media query.
118+
Object of this type have the following properties:
109119

110120
* `name` - the name of the media feature such as "orientation"
111121
* `value` - the value of the media feature (may be `null`)
@@ -146,7 +156,8 @@ this type of object wraps the various parts into a single interface. Each instan
146156

147157
The `parts` array always has at least one item.
148158

149-
The `parserlib.css.PropertyValuePart` type represents an individual part of a property value. Each instance has the following properties:
159+
The `parserlib.css.PropertyValuePart` type represents an individual part of a
160+
property value. Each instance has the following properties:
150161

151162
* `type` - the type of value part ("unknown", "dimension", "percentage", "integer", "number", "color", "uri", "string", "identifier" or "operator")
152163

@@ -162,18 +173,20 @@ The parts are "1em" (dimension), "/" (operator), "1.5em" (dimension), "Times New
162173

163174
### Selectors
164175

165-
The `parserlib.css.Selector` type represents a single selector. Each instance has a `parts` property,
166-
which is an array of `parserlib.css.SelectorPart` objects, which represent atomic parts of the selector,
167-
and `parserlib.css.Combinator` objects, which represent combinators in the selector.
176+
The `parserlib.css.Selector` type represents a single selector. Each instance
177+
has a `parts` property, which is an array of `parserlib.css.SelectorPart` objects,
178+
which represent atomic parts of the selector, and `parserlib.css.Combinator`
179+
objects, which represent combinators in the selector.
168180
Consider the following selector:
169181

170182
```css
171183
li.selected > a:hover
172184
```
173185

174-
This selector has three parts: `li.selected`, `>`, and `a:hover`. The first part is a `SelectorPart`,
175-
the second is a `Combinator`, and the third is a `SelectorPart`. Each `SelectorPart` is made up
176-
of an optional element name followed by an ID, class, attribute condition, pseudo class, and/or pseudo element.
186+
This selector has three parts: `li.selected`, `>`, and `a:hover`. The first
187+
part is a `SelectorPart`, the second is a `Combinator`, and the third is a
188+
`SelectorPart`. Each `SelectorPart` is made up of an optional element name
189+
followed by an ID, class, attribute condition, pseudo class, and/or pseudo element.
177190

178191
Each instance of `parserlib.css.SelectorPart` has an `elementName` property, which represents
179192
the element name as a `parserlib.css.SelectorSubPart` object or `null` if there isn't one,
@@ -186,7 +199,6 @@ of `SelectorPart` arguments that were passed to `not()`.
186199
Each instance of `parserlib.css.Combinator` has an additional `type` property that indicates
187200
the type of combinator: "descendant", "child", "sibling", or "adjacent-sibling".
188201

189-
190202
## Using events
191203

192204
The CSS parser fires events as it parses text. The events correspond to important parts
@@ -214,20 +226,20 @@ There is no additional information provided for these events. Example:
214226

215227
```js
216228
parser.addListener("startstylesheet", function() {
217-
console.log("Starting to parse style sheet");
229+
console.log("Starting to parse stylesheet");
218230
});
219231

220232
parser.addListener("endstylesheet", function() {
221-
console.log("Finished parsing style sheet");
233+
console.log("Finished parsing stylesheet");
222234
});
223235
```
224236

225237
### `charset` event
226238

227-
The `charset` event fires when the `@charset` directive is found in a style sheet.
228-
Since `@charset` is required to appear first in a style sheet, any other occurances
239+
The `charset` event fires when the `@charset` directive is found in a stylesheet.
240+
Since `@charset` is required to appear first in a stylesheet, any other occurances
229241
cause a syntax error. The `charset` event provides an `event` object with a property
230-
called `charset`, which contains the name of the character set for the style sheet. Example:
242+
called `charset`, which contains the name of the character set for the stylesheet. Example:
231243

232244
```js
233245
parser.addListener("charset", function(event) {
@@ -237,7 +249,7 @@ parser.addListener("charset", function(event) {
237249

238250
### `namespace` event
239251

240-
The `namespace` event fires when the `@namespace` directive is found in a style sheet.
252+
The `namespace` event fires when the `@namespace` directive is found in a stylesheet.
241253
The `namespace` event provides an `event` object with two properties: `prefix`,
242254
which is the namespace prefix, and `uri`, which is the namespace URI. Example:
243255

@@ -249,7 +261,7 @@ parser.addListener("namespace", function(event) {
249261

250262
### `import` event
251263

252-
The `import` event fires when the `@import` directive is found in a style sheet.
264+
The `import` event fires when the `@import` directive is found in a stylesheet.
253265
The `import` event provides an `event` object with two properties: `uri`,
254266
which is the URI to import, and `media`, which is an array of media queries
255267
for which this URI applies. The `media` array contains zero or more
@@ -279,8 +291,8 @@ parser.addListener("endfontface", function(event) {
279291

280292
### `startpage` and `endpage` events
281293

282-
The `startpage` event fires when `@page` is encountered and the `endpage` event fires
283-
just after the closing right brace (`}`) is encountered after `@page`.
294+
The `startpage` event fires when `@page` is encountered and the `endpage` event
295+
fires just after the closing right brace (`}`) is encountered after `@page`.
284296
The `event` object has two properties: `id`, which is the page ID, and `pseudo`,
285297
which is the page pseudo class. Example:
286298

@@ -313,9 +325,9 @@ parser.addListener("endpagemargin", function(event) {
313325

314326
### `startmedia` and `endmedia` events
315327

316-
The `startmedia` event fires when `@media` is encountered and the `endmedia` event fires
317-
just after the closing right brace (`}`) is encountered after `@media`.
318-
The `event` object has one property, `media`, which is an array of
328+
The `startmedia` event fires when `@media` is encountered and the `endmedia`
329+
event fires just after the closing right brace (`}`) is encountered after
330+
`@media`. The `event` object has one property, `media`, which is an array of
319331
`parserlib.css.MediaQuery` objects. Example:
320332

321333
```js
@@ -418,17 +430,19 @@ parser.addListener("error", function(event) {
418430
The CSS parser's goal is to be on-par with error recovery of CSS parsers in browsers.
419431
To that end, the following error recovery mechanisms are in place:
420432

421-
* **Properties** - a syntactically incorrect property definition will be skipped over completely. For instance, the second property below is dropped:
433+
* **Properties** - a syntactically incorrect property definition will be
434+
skipped over completely. For instance, the second property below is dropped:
422435

423436
```css
424437
a:hover {
425438
color: red;
426-
font:: Helvetica; /* dropped! */
439+
font:: Helvetica; /* dropped! */
427440
text-decoration: underline;
428441
}
429442
```
430443

431-
* **Selectors** - if there's a syntax error in *any* selector, the entire rule is skipped over. For instance, the following rule is completely skipped:
444+
* **Selectors** - if there's a syntax error in *any* selector, the entire rule
445+
is skipped over. For instance, the following rule is completely skipped:
432446

433447
```css
434448
a:hover, foo ... bar {
@@ -438,11 +452,14 @@ a:hover, foo ... bar {
438452
}
439453
```
440454

441-
* **@ Rules** - there are certain @ rules that are only valid in certain contexts. The parser will skip over `@charset`, `@namespace`, and `@import` if they're found anywhere other than the beginning of the input.
455+
* **@ Rules** - there are certain @ rules that are only valid in certain
456+
contexts. The parser will skip over `@charset`, `@namespace`, and `@import`
457+
if they're found anywhere other than the beginning of the input.
442458

443-
* **Unknown @ Rules** - any @ rules that isn't recognized is automatically skipped, meaning the entire block after it is not parsed.
459+
* **Unknown @ Rules** - any @ rules that isn't recognized is automatically
460+
skipped, meaning the entire block after it is not parsed.
444461

445462
## Running Tests
446463

447-
You can run the tests via `npm test` from the repository's root. You
464+
You can run the tests via `npm test` from the repository's root. You
448465
may need to run `npm install` first to install the necessary dependencies.

0 commit comments

Comments
 (0)