Documentation

Table of Contents

How It Works

NoCSS is a custom-written stylesheet that explicitly sets CSS properties to browser-default values, recreating the unstyled look of a page with no CSS.

The strategy is simple but powerful:

  1. Apply universal selector * with !important to clear common author styling regardless of specificity
  2. Set explicit default values with !important for root, body, headings, lists, tables, and form elements
  3. Include pseudo-elements ::before and ::after
  4. Restore correct display types for block, inline, and table elements
  5. Add specific rules for common elements (links, headings, lists, etc.)
*, *::before, *::after { background: transparent !important; margin: 0 !important; padding: 0 !important; /* ... explicit browser-default values ... */ }

Browser Support

NoCSS uses only standard CSS properties with explicit values, so it works in all browsers:

  • Chrome/Edge: All modern versions
  • Firefox: All modern versions
  • Safari: All modern versions
  • Opera: All modern versions

Note: Since NoCSS uses explicit property values rather than relying on special CSS keywords, it has broad browser compatibility.

Limitations

While NoCSS is powerful, it has some limitations you should be aware of:

1. Inline Styles

Inline styles with !important will still take precedence over NoCSS. Regular inline styles are overridden. For example:

<div style="color: red !important;">Text</div>

2. JavaScript-Applied Styles

Styles applied dynamically via JavaScript after NoCSS loads may not be fully overridden, especially if they use inline styles or high-specificity selectors.

3. Shadow DOM

Styles within Shadow DOM (used by web components) cannot be affected by external stylesheets like NoCSS.

4. Browser Differences

User-agent styles differ between browsers. A page with NoCSS applied will look slightly different in Chrome vs. Firefox vs. Safari.

Caching & CDN

NoCSS is designed to be CDN-friendly with optimal caching headers:

  • Content-Type: text/css; charset=utf-8
  • Cache-Control: public, max-age=31536000, immutable (1 year)
  • Access-Control-Allow-Origin: * (CORS enabled)

Best Practice: Use versioned filenames (e.g., /no.v1.min.css) for production to ensure immutable caching works correctly. When you need to update, release a new version with a new filename.

Versioning

NoCSS follows a versioning strategy to enable immutable caching:

Latest: /no.css (may change)
Versioned: /no.v1.min.css (immutable)

When to bump versions:

  1. Create a new file: /no.v2.css and /no.v2.min.css
  2. Update /no.css to the new version
  3. Update documentation and examples
  4. Users on old versions continue to work (cached)
  5. New users get the latest version

Recommendation: Always use versioned URLs in production (/no.v1.min.css) to avoid breaking changes and leverage long-term caching.

Security & Privacy

✅ Safe to Use

  • NoCSS is a pure CSS file with no JavaScript
  • No data collection or tracking
  • No cookies or external requests
  • Open source and auditable

⚠️ Bookmarklet Warning

If using the bookmarklet version, be aware:

  • Bookmarklets execute JavaScript in the context of the current page
  • Do not use on sensitive pages (banking, email, etc.)
  • Only use on pages you trust
  • Review the bookmarklet code before using it

For security issues or vulnerability reports, please see our SECURITY.md file for responsible disclosure guidelines.

← Back to Home