		@@ -12,3 +12,3 @@ # CSS Polyfills
		- moving content using `move-to:`
		- constructing stylable DOM elements using nestable `:before`, `:after`, and `:outside` selectors
		- constructing stylable DOM elements using nestable `::before`, `::after`, and `::outside` selectors
		- looking up target counters and text using `target-counter(...)` and `target-text(...)`
		@@ -52,4 +52,4 @@ - setting strings using `string-set:`

		- `:outside` : Creates a new element around the selected one (like `:before`)
		- `:before:after` : Allows chaining of pseudoelements
		- `::outside` : Creates a new element around the selected one (similar to `::before`)
		- `::before::after` : Allows chaining of pseudoelements
		- `:footnote-call` : A marker element that remains if an element is moved elsewhere in the page
		@@ -99,19 +99,19 @@ - `:has(selector)` : Matches an element if elements inside it match `selector` (from jQuery)

		Browsers support simple `:before` and `:after` selectors to add a single elemnt to the DOM.
		Browsers support simple `::before` and `::after` selectors to add a single element to the DOM.
		Nestable selectors allow creating elements of arbitrary complexity.

		Additionally, the `:outside` selector allows wrapping an element with another for styling.
		Additionally, the `::outside` selector allows wrapping an element with another for styling.

		Nested selectors and `:outside` are defined in [CSS3 Generated and Replaced Content Module](http://www.w3.org/TR/css3-content/).
		Nested selectors and `::outside` are defined in [CSS3 Generated and Replaced Content Module](http://www.w3.org/TR/css3-content/).

		Example:

		h3:before:before { content: 'Ch '; }
		h3:before { content: counter(chap); }
		h3:before:after { content: ': '; }
		h3:outside:before { content: '[chapter starts here]'; }
		h3::before::before { content: 'Ch '; }
		h3::before { content: counter(chap); }
		h3::before::after { content: ': '; }
		h3::outside::before { content: '[chapter starts here]'; }

		## Looking up Target Counters and Text

		Browsers support simple counters in conjunction with `:before` and `:after` for numbering tables, figures, etc.
		Browsers support simple counters in conjunction with `::before` and `::after` for numbering tables, figures, etc.

		@@ -126,3 +126,3 @@ Labeling links that use those counters is trickier. For example a link that says "See Table 4.2: Sample Dataset" is not possible to describe.
		h3 { counter-increment: chap; }
		h3:before { content: 'Ch ' counter(chap) ': '; }
		h3::before { content: 'Ch ' counter(chap) ': '; }

		@@ -168,3 +168,3 @@ .xref { content: 'See ' target-text(attr(href), content()); }
		// Place a number next to the actual footnote
		.footnote:before { content: counter(footnote) ': '; }
		.footnote::before { content: counter(footnote) ': '; }

		@@ -176,3 +176,3 @@ // Define a location where the footnotes will be collected

		Additinoally, it may be useful to define custom functions that manipulate the DOM.
		Additionally, it may be useful to define custom functions that manipulate the DOM.
		For example, a sorted glossary at the end of a page can be described in CSS using `move-to: glossary;` and a custom function `x-sort` used in `content: x-sort(pending(glossary));`.
		@@ -179,0 +179,0 @@

dist/css-polyfills.js

Sorry, the diff of this file is too big to display

css-polyfills - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics