New Transparent capture is in preview. Record every app's traffic with no proxy configuration, on Windows, macOS and Linux. Learn more

cssStyleFilter Filter

Select responses whose content type identifies a CSS stylesheet, useful for caching, header rewriting and theme debugging during a session.

cssStyleFilter is a small, purpose built filter that helps frontend engineers shape proxy behavior around stylesheet traffic. It works equally well in a Fluxzy desktop session and in a headless CI capture.

When to use this filter

Use cssStyleFilter when you want to target stylesheet responses, typically those served with the text/css MIME type. It is a convenient way to single out CSS assets in a busy capture where HTML, JavaScript and images all flow through the same proxy.

Typical situations:

  • Bypassing or invalidating cache on CSS while iterating on a theme.
  • Adding a CORS or COEP header only for stylesheets without touching other asset types.
  • Tagging CSS assets so you can quickly review which stylesheets a page actually loaded.

The filter evaluates on the responseHeaderReceivedFromRemote scope, response headers must be available before it fires. Combine it with a hostFilter if you need to narrow the match to a specific CDN or origin.

Real world examples

Disable cache on CSS during a theme iteration

Strip cache headers from stylesheet responses so the browser always fetches the latest version while you are tuning the theme.

rules:
- filter:
    typeKind: CssStyleFilter
  actions:
  - typeKind: RemoveCacheAction

Add a permissive CORS header for stylesheets loaded across origins

Allow a static stylesheet served from a CDN to be loaded by a different origin during integration testing.

rules:
- filter:
    typeKind: FilterCollection
    operation: and
    children:
    - typeKind: HostFilter
      pattern: cdn.example.com
      operation: Exact
    - typeKind: CssStyleFilter
  actions:
  - typeKind: AddResponseHeaderAction
    headerName: Access-Control-Allow-Origin
    headerValue: https://app.example.com

Tag every CSS asset to audit stylesheet loading

Tag stylesheet responses so the timeline view makes it easy to count and order CSS loads when investigating a render performance issue.

rules:
- filter:
    typeKind: CssStyleFilter
  actions:
  - typeKind: ApplyTagAction
    tag:
      value: css-asset

Reference

cssStyleFilter

Description

Select exchanges having response content type mime matching css.

Evaluation scope

Evaluation scope defines the timing where this filter will be applied.

responseHeaderReceivedFromRemote This scope occurs the moment fluxzy has done parsing the response header.

YAML configuration name

cssStyleFilter

Settings

This filter has no specific characteristic

The following table describes the customizable properties available for this filter:

Property Type Description DefaultValue
inverted boolean Negate the filter result false

Example of usage

The following examples apply a comment to the filtered exchange

Select exchanges having response content type mime matching css.

rules:
- filter:
    typeKind: CssStyleFilter
  actions:
  - typeKind: ApplyCommentAction
    comment: filter was applied

.NET reference

View definition of CssStyleFilter for .NET integration.

See also

The following filters are related to this filter:

Frequently asked questions

Which content types match?

The filter matches the standard CSS MIME type, text/css. Stylesheets served with an incorrect or generic content type may not match.

Does it work on requests?

No. cssStyleFilter inspects the response Content-Type header on the remote side, it does not look at the request.

Can it be combined with a host filter?

Yes. Wrap both in a filterCollection with operation: and to target stylesheets coming from a specific origin or CDN.

Is there a way to match minified versus unminified CSS?

Not directly, the filter only looks at the MIME type. Use pathFilter to inspect the URL if your build pipeline uses a .min.css suffix.

Learn more about Fluxzy rules