or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-polyfill.mdcross-domain-proxy.mdindex.mdmatchmedia-listeners.mdmatchmedia-polyfill.md
tile.json

tessl/npm-respond-js

Fast and lightweight polyfill for min/max-width CSS3 Media Queries for IE 6-8 and more

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/respond.js@1.4.x

To install, run

npx @tessl/cli install tessl/npm-respond-js@1.4.0

index.mddocs/

Respond.js

Respond.js is a fast and lightweight CSS3 Media Query polyfill specifically designed to enable responsive web design in browsers that don't support CSS3 media queries, particularly Internet Explorer 6-8. It focuses exclusively on min-width and max-width media queries, providing a complete solution with matchMedia polyfill support and cross-domain CSS loading capabilities.

Package Information

  • Package Name: respond.js
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install respond.js or download from GitHub releases

Core Imports

Standard browser inclusion:

<script src="respond.min.js"></script>

With matchMedia polyfill bundled:

<script src="respond.src.js"></script>

With full matchMedia addListener support:

<script src="respond.matchmedia.addListener.min.js"></script>

Module bundler usage (webpack, Rollup, etc.):

// Note: Respond.js is designed for legacy browser support
// Modern bundlers may not need this polyfill
import 'respond.js';
// or
require('respond.js');

For cross-domain CSS (CDN support):

<link href="http://external.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<script src="respond.proxy.js"></script>

Basic Usage

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Mobile first styles */
    .container { width: 100%; }
    
    /* Responsive styles with media queries */
    @media screen and (min-width: 480px) {
      .container { width: 480px; }
    }
    
    @media screen and (min-width: 768px) {
      .container { width: 768px; }
    }
  </style>
  
  <!-- Include respond.js after CSS -->
  <script src="respond.min.js"></script>
</head>
<body>
  <div class="container">
    Content adapts to screen size in IE6-8
  </div>
</body>
</html>

Architecture

Respond.js operates through several key components:

  • CSS Parser: AJAX-based CSS retrieval and media query extraction using regular expressions
  • Media Query Engine: Evaluates min/max-width conditions against current viewport
  • Style Injection: Dynamic <style> element creation and DOM manipulation for rule application
  • Resize Handler: Throttled window resize monitoring with 30ms debounce
  • Cross-Domain Proxy: iframe-based system for CDN-hosted stylesheets
  • matchMedia Polyfill: Complete window.matchMedia implementation with addListener support

Capabilities

Core Media Query Polyfill

Main respond.js functionality that parses CSS files and applies media query rules dynamically in non-supporting browsers.

// Global respond object
interface Respond {
  /** Re-parse all stylesheets and update media query application */
  update(): void;
  /** Get the pixel value of 1em for media query calculations */
  getEmValue(): number;
  /** Flag indicating if browser natively supports media queries */
  mediaQueriesSupported: boolean;
}

declare global {
  interface Window {
    respond: Respond;
  }
}

Core Polyfill

matchMedia Polyfill

Provides window.matchMedia functionality for testing CSS media queries in JavaScript, enabling programmatic media query evaluation.

interface MediaQueryList {
  /** Whether the media query currently matches */
  matches: boolean;
  /** The original media query string */
  media: string;
}

/** 
 * Test a CSS media query in JavaScript
 * @param query - CSS media query string to test
 * @returns MediaQueryList object with match result
 */
declare function matchMedia(query: string): MediaQueryList;

matchMedia Polyfill

matchMedia addListener Extension

Extends matchMedia with change event support, allowing JavaScript code to respond to media query state transitions.

interface MediaQueryListWithListeners extends MediaQueryList {
  /** 
   * Add listener for media query state changes
   * @param listener - Callback function called on state change
   */
  addListener(listener: (mql: MediaQueryList) => void): void;
  
  /** 
   * Remove previously added listener
   * @param listener - Listener function to remove
   */
  removeListener(listener: (mql: MediaQueryList) => void): void;
}

matchMedia Listeners

Cross-Domain CSS Support

Proxy system enabling respond.js to work with stylesheets hosted on CDNs or different domains, overcoming same-origin policy restrictions.

<!-- Required proxy setup elements -->
<link href="http://external.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<script src="respond.proxy.js"></script>

Cross-Domain Proxy

Types

/** Regular expressions used for CSS parsing */
interface RespondRegex {
  /** Matches @media blocks in CSS */
  media: RegExp;
  /** Matches @keyframes rules */
  keyframes: RegExp;
  /** Matches CSS url() functions */
  urls: RegExp;
  /** Extracts media query conditions and content */
  findStyles: RegExp;
  /** Matches media type with optional "only" keyword */
  only: RegExp;
  /** Matches min-width media queries */
  minw: RegExp;
  /** Matches max-width media queries */
  maxw: RegExp;
}

/** Internal media style object */
interface MediaStyle {
  /** Media type (e.g., "screen", "print", "all") */
  media: string;
  /** Index in rules array */
  rules: number;
  /** Whether the query has conditional expressions */
  hasquery: boolean;
  /** Minimum width value with unit */
  minw: string | null;
  /** Maximum width value with unit */
  maxw: string | null;
}

/** AJAX request queue item */
interface RequestItem {
  /** URL of CSS file to fetch */
  href: string;
  /** Media attribute from link element */
  media: string;
}