Q: Is it a preprocessor or a postprocessor?

Both words fit. It's called a post processor because it processes CSS after it reaches the browser, rather than in a build step like Sass or LESS. That timing is what lets it use the live page: element counts, sizes, visibility, sticky state and text.

Q: Do I need Node.js, npm or a build step?

No. Add one script tag and call css.open('/css/site.css'). It is also published on npm, as npm install css-pp, for projects that prefer packages.

Q: Does it work with WordPress, Shopify, PHP or any CMS?

Yes. It is plain JavaScript that runs on any page, whatever generates the HTML. Load the script in your theme and open your stylesheet.

Q: How big is it?

29.5 KB minified and 10.4 KB gzipped for version 3.2.1.

Q: Which browsers are supported?

All current browsers. The core features are ES5. The state and content selectors use IntersectionObserver, MutationObserver and ResizeObserver, which every evergreen browser has supported since 2020. Without IntersectionObserver, :seen and :in-view act as if the element is visible, so content is never hidden.

Q: Is it free for commercial use?

Yes. It's released under the MIT License, so you can use it in commercial and closed-source projects. Keep the copyright notice in the file.

Q: Does processing CSS in the browser slow the page down?

Very little. In Chrome on a desktop, a 74 KB production stylesheet with variables and nesting compiles in about 9 ms, and a 107 KB plain stylesheet in about 6 ms. Set css.defaults.localCache = 1 so returning visitors render from a cached copy.

Q: Will it hurt SEO?

No. Your HTML and text aren't changed; only CSS is generated. Google renders JavaScript as part of indexing. Write hidden-until-seen styles as .x:not(:seen) { opacity: 0 }. Crawlers and browsers that don't run the script then skip the rule, so the content stays visible to them.

Q: What about a flash of unstyled content?

By default (css.defaults.invisible = 1), the page stays hidden until your stylesheets are processed, so nobody sees unstyled markup.

Question 1

What is CSS Post Processor?

Accepted Answer

CSS Post Processor (css-pp) is a free, open-source JavaScript library that extends CSS in the browser. It adds variables with JavaScript expressions, mixins, nesting, per-element values through $[index], and selectors native CSS lacks: :seen, :in-view, :stuck, :overflowing, :contains() and numeric attribute comparisons such as [data-stock<5]. It is 10.4 KB gzipped, has no dependencies and needs no build step.

Question 2

Is it a preprocessor or a postprocessor?

Accepted Answer

Both words fit. It's called a post processor because it processes CSS after it reaches the browser, rather than in a build step like Sass or LESS. That timing is what lets it use the live page: element counts, sizes, visibility, sticky state and text.

Question 3

Do I need Node.js, npm or a build step?

Accepted Answer

No. Add one script tag and call css.open('/css/site.css'). It is also published on npm, as npm install css-pp, for projects that prefer packages.

Question 4

Does it work with WordPress, Shopify, PHP or any CMS?

Accepted Answer

Yes. It is plain JavaScript that runs on any page, whatever generates the HTML. Load the script in your theme and open your stylesheet.

Question 5

How big is it?

Accepted Answer

29.5 KB minified and 10.4 KB gzipped for version 3.2.1.

Question 6

Which browsers are supported?

Accepted Answer

All current browsers. The core features are ES5. The state and content selectors use IntersectionObserver, MutationObserver and ResizeObserver, which every evergreen browser has supported since 2020. Without IntersectionObserver, :seen and :in-view act as if the element is visible, so content is never hidden.

Question 7

Is it free for commercial use?

Accepted Answer

Yes. It's released under the MIT License, so you can use it in commercial and closed-source projects. Keep the copyright notice in the file.

Question 8

Does processing CSS in the browser slow the page down?

Accepted Answer

Very little. In Chrome on a desktop, a 74 KB production stylesheet with variables and nesting compiles in about 9 ms, and a 107 KB plain stylesheet in about 6 ms. Set css.defaults.localCache = 1 so returning visitors render from a cached copy.

Question 9

Will it hurt SEO?

Accepted Answer

No. Your HTML and text aren't changed; only CSS is generated. Google renders JavaScript as part of indexing. Write hidden-until-seen styles as .x:not(:seen) { opacity: 0 }. Crawlers and browsers that don't run the script then skip the rule, so the content stays visible to them.

Question 10

What about a flash of unstyled content?

Accepted Answer

By default (css.defaults.invisible = 1), the page stays hidden until your stylesheets are processed, so nobody sees unstyled markup.

Question 11

Does it work with a Content Security Policy?

Accepted Answer

Partly. Variable expressions use eval(). Without 'unsafe-eval', plain values, mixins, nesting and the state and content selectors still work, but JavaScript expressions and $[index] don't.

Question 12

How do I select a parent element in CSS?

Accepted Answer

Use the native :has() pseudo-class: .card:has(img) selects cards that contain an image. :has(> .child) selects the direct parent of .child whatever element it is. Every current browser has supported it since December 2023. css-pp adds parent selection based on visibility, text, numbers and overflow, for example .post:has(.excerpt:overflowing). See Parent and sibling selectors.

Question 13

How do I select previous siblings in CSS?

Accepted Answer

Put the sibling combinator inside :has(): li:has(~ .current) selects every item before .current, and li:has(+ .current) selects only the one immediately before it.

Question 14

How do I style a sticky header only when it is stuck?

Accepted Answer

With css-pp: header:stuck { box-shadow: 0 2px 12px rgb(0 0 0 / .15) }. It works in every browser, at the top or bottom, in the page or in a scrolling container. Native CSS only has Chromium's scroll-state(stuck) container queries.

Question 15

How do I select an element by its text content?

Accepted Answer

With css-pp: .badge:contains("Sold out"), or :contains("sold out" i) for a case-insensitive match. Native CSS has no text selector.

Question 16

How do I compare a number in an attribute selector?

Accepted Answer

With css-pp: [data-stock<5], [data-price>=100], [data-score>4.5]. Native attribute selectors only compare text.

Question 17

How do I detect truncated text with CSS?

Accepted Answer

With css-pp: .title:overflowing matches when the content is wider or taller than the box, for example when text-overflow: ellipsis is cutting it off. Combine it with :has() to show a "Read more" link only when needed.

Question 18

How do I reveal elements on scroll without JavaScript?

Accepted Answer

Load css-pp and write .card:not(:seen) { opacity: 0; translate: 0 2rem } with a transition on .card. Each card fades in the first time it enters the viewport. Use :in-view to animate every time it enters.

Question 19

How do I give every slide a different background image in one CSS rule?

Accepted Answer

.slider > div { background-image: url(/img/slide-$[index].jpg) }. css-pp replaces $[index] with each element's position: 0, 1, 2 and so on. Native CSS can't put a computed value inside url().

Question 20

How do I highlight the active navigation link with CSS?

Accepted Answer

With css-pp: nav a:current { font-weight: 700 }. It matches links to the current page and to its parent sections, so "Docs" stays active on every docs page; :current(exact) matches the page alone. Native CSS specifies :local-link for this, but no browser supports it.

Question 21

How do I shrink or hide a header when the page scrolls?

Accepted Answer

With css-pp: html:scrolled(80px) header { height: 56px } shrinks it after 80px of scrolling, and html:scrolling-down header { translate: 0 -100% } hides it while scrolling down and brings it back on the way up.

Question 22

How do I detect when flex items wrap to a new line?

Accepted Answer

With css-pp: li:wrapped matches items that wrapped below the first row, so nav:has(li:wrapped) .menu-button { display: block } shows a hamburger menu exactly when the links stop fitting.

Question 23

How do I fade images in when they finish loading?

Accepted Answer

With css-pp: img { transition: opacity .4s } img:not(:loaded) { opacity: 0 }. img:broken matches images that failed to load, for fallbacks.

Question 24

How do I make text fill its container?

Accepted Answer

With css-pp: h1 { font-size: fit(24px, 120px) } sizes the text to fill the element's width on one line, between the two limits.

Question 25

How do I make cards the same height?

Accepted Answer

With css-pp: .card h3 { height: same } gives every matched element the height of the tallest one, across rows and containers. If the cards share one CSS grid, native subgrid works too.

Question 26

How do I detect a click on a pseudo-element like ::after?

Accepted Answer

Browsers report a click on ::after as a click on the element, so plain JavaScript can't tell them apart. With css-pp: css.on('click', '.chip::after', function (e) { ... }) fires only when the pointer is on the ::after, in every browser. It uses the browser's own hit-testing, so it is exact even for rotated or inline pseudo-elements.

Question 27

How do I change a pseudo-element's style with JavaScript?

Accepted Answer

With css-pp: css.pseudo(el, '::after').set('color', 'red') styles that one element's ::after, and css.pseudo(el, '::after').text = 'New' changes its text. Natively you can only read pseudo-element styles with getComputedStyle(el, '::after').

Question 28

Can I use :hover on ::before or ::after?

Accepted Answer

Not in native CSS: .x::after:hover is invalid. With css-pp it works: .chip::after:hover { color: red } applies only while the pointer is on the pseudo-element, and ::after:active while it is pressed.

Question 29

Where do I report a bug or ask a question?

Accepted Answer

Use the contact page. Include the browser, a short stylesheet that shows the problem, and what you expected to happen.

Question 30

Who maintains it?

Accepted Answer

Alex Bobrov, who created it and has maintained it since 2016. See About.

Frequently asked questions

About the library#

What is CSS Post Processor?#

Is it a preprocessor or a postprocessor?#

Do I need Node.js, npm or a build step?#

Does it work with WordPress, Shopify, PHP or any CMS?#

How big is it?#

Which browsers are supported?#

Is it free for commercial use?#

Performance and SEO#

Does processing CSS in the browser slow the page down?#

Will it hurt SEO?#

What about a flash of unstyled content?#

Does it work with a Content Security Policy?#

How do I…#

How do I select a parent element in CSS?#

How do I select previous siblings in CSS?#

How do I style a sticky header only when it is stuck?#

How do I select an element by its text content?#

How do I compare a number in an attribute selector?#

How do I detect truncated text with CSS?#

How do I reveal elements on scroll without JavaScript?#

How do I give every slide a different background image in one CSS rule?#

How do I highlight the active navigation link with CSS?#

How do I shrink or hide a header when the page scrolls?#

How do I detect when flex items wrap to a new line?#

How do I fade images in when they finish loading?#

How do I make text fill its container?#

How do I make cards the same height?#

How do I detect a click on a pseudo-element like ::after?#

How do I change a pseudo-element's style with JavaScript?#

Can I use :hover on ::before or ::after?#

Help#

Where do I report a bug or ask a question?#

Who maintains it?#