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
To install, run
npx @tessl/cli install tessl/npm-respond-js@1.4.00
# Respond.js
1
2
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.
3
4
## Package Information
5
6
- **Package Name**: respond.js
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install respond.js` or download from [GitHub releases](https://github.com/scottjehl/Respond/releases)
10
11
## Core Imports
12
13
Standard browser inclusion:
14
15
```html
16
<script src="respond.min.js"></script>
17
```
18
19
With matchMedia polyfill bundled:
20
21
```html
22
<script src="respond.src.js"></script>
23
```
24
25
With full matchMedia addListener support:
26
27
```html
28
<script src="respond.matchmedia.addListener.min.js"></script>
29
```
30
31
Module bundler usage (webpack, Rollup, etc.):
32
33
```javascript
34
// Note: Respond.js is designed for legacy browser support
35
// Modern bundlers may not need this polyfill
36
import 'respond.js';
37
// or
38
require('respond.js');
39
```
40
41
For cross-domain CSS (CDN support):
42
43
```html
44
<link href="http://external.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
45
<link href="/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
46
<script src="respond.proxy.js"></script>
47
```
48
49
## Basic Usage
50
51
```html
52
<!DOCTYPE html>
53
<html>
54
<head>
55
<style>
56
/* Mobile first styles */
57
.container { width: 100%; }
58
59
/* Responsive styles with media queries */
60
@media screen and (min-width: 480px) {
61
.container { width: 480px; }
62
}
63
64
@media screen and (min-width: 768px) {
65
.container { width: 768px; }
66
}
67
</style>
68
69
<!-- Include respond.js after CSS -->
70
<script src="respond.min.js"></script>
71
</head>
72
<body>
73
<div class="container">
74
Content adapts to screen size in IE6-8
75
</div>
76
</body>
77
</html>
78
```
79
80
## Architecture
81
82
Respond.js operates through several key components:
83
84
- **CSS Parser**: AJAX-based CSS retrieval and media query extraction using regular expressions
85
- **Media Query Engine**: Evaluates min/max-width conditions against current viewport
86
- **Style Injection**: Dynamic `<style>` element creation and DOM manipulation for rule application
87
- **Resize Handler**: Throttled window resize monitoring with 30ms debounce
88
- **Cross-Domain Proxy**: iframe-based system for CDN-hosted stylesheets
89
- **matchMedia Polyfill**: Complete window.matchMedia implementation with addListener support
90
91
## Capabilities
92
93
### Core Media Query Polyfill
94
95
Main respond.js functionality that parses CSS files and applies media query rules dynamically in non-supporting browsers.
96
97
```javascript { .api }
98
// Global respond object
99
interface Respond {
100
/** Re-parse all stylesheets and update media query application */
101
update(): void;
102
/** Get the pixel value of 1em for media query calculations */
103
getEmValue(): number;
104
/** Flag indicating if browser natively supports media queries */
105
mediaQueriesSupported: boolean;
106
}
107
108
declare global {
109
interface Window {
110
respond: Respond;
111
}
112
}
113
```
114
115
[Core Polyfill](./core-polyfill.md)
116
117
### matchMedia Polyfill
118
119
Provides window.matchMedia functionality for testing CSS media queries in JavaScript, enabling programmatic media query evaluation.
120
121
```javascript { .api }
122
interface MediaQueryList {
123
/** Whether the media query currently matches */
124
matches: boolean;
125
/** The original media query string */
126
media: string;
127
}
128
129
/**
130
* Test a CSS media query in JavaScript
131
* @param query - CSS media query string to test
132
* @returns MediaQueryList object with match result
133
*/
134
declare function matchMedia(query: string): MediaQueryList;
135
```
136
137
[matchMedia Polyfill](./matchmedia-polyfill.md)
138
139
### matchMedia addListener Extension
140
141
Extends matchMedia with change event support, allowing JavaScript code to respond to media query state transitions.
142
143
```javascript { .api }
144
interface MediaQueryListWithListeners extends MediaQueryList {
145
/**
146
* Add listener for media query state changes
147
* @param listener - Callback function called on state change
148
*/
149
addListener(listener: (mql: MediaQueryList) => void): void;
150
151
/**
152
* Remove previously added listener
153
* @param listener - Listener function to remove
154
*/
155
removeListener(listener: (mql: MediaQueryList) => void): void;
156
}
157
```
158
159
[matchMedia Listeners](./matchmedia-listeners.md)
160
161
### Cross-Domain CSS Support
162
163
Proxy system enabling respond.js to work with stylesheets hosted on CDNs or different domains, overcoming same-origin policy restrictions.
164
165
```html
166
<!-- Required proxy setup elements -->
167
<link href="http://external.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
168
<link href="/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
169
<script src="respond.proxy.js"></script>
170
```
171
172
[Cross-Domain Proxy](./cross-domain-proxy.md)
173
174
## Types
175
176
```javascript { .api }
177
/** Regular expressions used for CSS parsing */
178
interface RespondRegex {
179
/** Matches @media blocks in CSS */
180
media: RegExp;
181
/** Matches @keyframes rules */
182
keyframes: RegExp;
183
/** Matches CSS url() functions */
184
urls: RegExp;
185
/** Extracts media query conditions and content */
186
findStyles: RegExp;
187
/** Matches media type with optional "only" keyword */
188
only: RegExp;
189
/** Matches min-width media queries */
190
minw: RegExp;
191
/** Matches max-width media queries */
192
maxw: RegExp;
193
}
194
195
/** Internal media style object */
196
interface MediaStyle {
197
/** Media type (e.g., "screen", "print", "all") */
198
media: string;
199
/** Index in rules array */
200
rules: number;
201
/** Whether the query has conditional expressions */
202
hasquery: boolean;
203
/** Minimum width value with unit */
204
minw: string | null;
205
/** Maximum width value with unit */
206
maxw: string | null;
207
}
208
209
/** AJAX request queue item */
210
interface RequestItem {
211
/** URL of CSS file to fetch */
212
href: string;
213
/** Media attribute from link element */
214
media: string;
215
}
216
```