Skip to content
This repository

um-media'd? how about un? also super long lines are lame #120

Closed
wants to merge 1 commit into from

1 participant

Eddie Monge
Eddie Monge

No description provided.

Eddie Monge

giving up on getting this landed

Eddie Monge eddiemonge closed this June 24, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Apr 16, 2012
Eddie Monge um-media'd? how about un? also super long lines are lame 8b91aa0
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 65 additions and 28 deletions. Show diff stats Hide diff stats

  1. 93  README.md
93  README.md
Source Rendered
@@ -4,9 +4,14 @@
4 4
  - Copyright 2011: Scott Jehl, scottjehl.com
5 5
  - Dual licensed under the MIT or GPL Version 2 licenses. 
6 6
  
7  
-The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable [responsive web designs](http://www.alistapart.com/articles/responsive-web-design/) in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).
  7
+The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable 
  8
+[responsive web designs](http://www.alistapart.com/articles/responsive-web-design/) in browsers that don't support CSS3 
  9
+Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch 
  10
+              - support for other non-supporting browsers as well (more information on that soon).
8 11
 
9  
-If you're unfamiliar with the concepts surrounding Responsive Web Design, you can read up [here](http://www.alistapart.com/articles/responsive-web-design/) and also [here](http://filamentgroup.com/examples/responsive-images/)
  12
+If you're unfamiliar with the concepts surrounding Responsive Web Design, you can read up 
  13
+[here](http://www.alistapart.com/articles/responsive-web-design/) and also 
  14
+[here](http://filamentgroup.com/examples/responsive-images/)
10 15
 
11 16
 [Demo page](http://scottjehl.github.com/Respond/test/test.html) (the colors change to show media queries working)
12 17
 
@@ -18,12 +23,13 @@ Usage Instructions
18 23
 
19 24
 
20 25
 <pre>
21  
-    @media screen and (min-width: 480px){
22  
-        ...styles for 480px and up go here
23  
-    }
  26
+@media screen and (min-width: 480px){
  27
+...styles for 480px and up go here
  28
+}
24 29
 </pre>
25 30
 
26  
-2. Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance IE users will not see a flash of um-media'd content)
  31
+2. Reference the respond.min.js script (1kb min/gzipped) after all of your CSS (the earlier it runs, the greater chance 
  32
+IE users will not see a flash of un-media'd content)
27 33
 
28 34
 3. Crack open Internet Explorer and pump fists in delight
29 35
 
@@ -31,7 +37,8 @@ Usage Instructions
31 37
 CDN/X-Domain Setup
32 38
 ======
33 39
 
34  
-Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.
  40
+Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a 
  41
+subdomain), you'll need to upload a proxy page to enable cross-domain communication.
35 42
 
36 43
 See `cross-domain/example.html` for a demo:
37 44
 
@@ -40,14 +47,14 @@ See `cross-domain/example.html` for a demo:
40 47
 - Reference the file(s) via `<link />` element(s):
41 48
 
42 49
 <pre>
43  
-	&lt;!-- Respond.js proxy on external server --&gt;
44  
-	&lt;link href=&quot;http://externalcdn.com/respond-proxy.html&quot; id=&quot;respond-proxy&quot; rel=&quot;respond-proxy&quot; /&gt;
45  
-	
46  
-	&lt;!-- Respond.js redirect location on local server --&gt;
47  
-	&lt;link href=&quot;/path/to/respond.proxy.gif&quot; id=&quot;respond-redirect&quot; rel=&quot;respond-redirect&quot; /&gt;
48  
-	
49  
-	&lt;!-- Respond.js proxy script on local server --&gt;
50  
-	&lt;script src="/path/to/respond.proxy.js"&gt;&lt;/script&gt;
  50
+&lt;!-- Respond.js proxy on external server --&gt;
  51
+&lt;link href=&quot;http://externalcdn.com/respond-proxy.html&quot; id=&quot;respond-proxy&quot; rel=&quot;respond-proxy&quot; /&gt;
  52
+
  53
+&lt;!-- Respond.js redirect location on local server --&gt;
  54
+&lt;link href=&quot;/path/to/respond.proxy.gif&quot; id=&quot;respond-redirect&quot; rel=&quot;respond-redirect&quot; /&gt;
  55
+
  56
+&lt;!-- Respond.js proxy script on local server --&gt;
  57
+&lt;script src="/path/to/respond.proxy.js"&gt;&lt;/script&gt;
51 58
 </pre>
52 59
 
53 60
 Note: HUGE thanks to @doctyper for the contributions in the cross-domain proxy!
@@ -58,30 +65,57 @@ Support & Caveats
58 65
 
59 66
 Some notes to keep in mind:
60 67
 
61  
-- This script's focus is purposely very narrow: only min-width and max-width media queries and all media types (screen, print, etc) are translated to non-supporting browsers. I wanted to keep things simple for filesize, maintenance, and performance, so I've intentionally limited support to queries that are essential to building a (mobile-first) responsive design. In the future, I may rework things a bit to include a hook for patching-in additional media query features - stay tuned!
  68
+- This script's focus is purposely very narrow: only min-width and max-width media queries and all media types (screen, 
  69
+- print, etc) are translated to non-supporting browsers. I wanted to keep things simple for filesize, maintenance, and 
  70
+- performance, so I've intentionally limited support to queries that are essential to building a (mobile-first) 
  71
+- responsive design. In the future, I may rework things a bit to include a hook for patching-in additional media query 
  72
+- features - stay tuned!
62 73
 
63  
-- Browsers that natively support CSS3 Media Queries are opted-out of running this script as quickly as possible. In testing for support, all other browsers are subjected to a quick  test to determine whether they support media queries or not before proceeding to run the script. This test is now included separately at the top, and uses the window.matchMedia polyfill found here: https://github.com/paulirish/matchMedia.js . If you are already including this polyfill via Modernizr or otherwise, feel free to remove that part.
  74
+- Browsers that natively support CSS3 Media Queries are opted-out of running this script as quickly as possible. In 
  75
+- testing for support, all other browsers are subjected to a quick  test to determine whether they support media 
  76
+- queries or not before proceeding to run the script. This test is now included separately at the top, and uses the 
  77
+- window.matchMedia polyfill found here: https://github.com/paulirish/matchMedia.js . If you are already including this 
  78
+- polyfill via Modernizr or otherwise, feel free to remove that part.
64 79
 
65  
-- This script relies on no other scripts or frameworks (aside from the included matchMedia polyfill), and is optimized for mobile delivery (~1kb total filesize min/gzip)
  80
+- This script relies on no other scripts or frameworks (aside from the included matchMedia polyfill), and is optimized 
  81
+- for mobile delivery (~1kb total filesize min/gzip)
66 82
 
67  
-- As you might guess, this implementation is quite dumb in regards to CSS parsing rules. This is a good thing, because that allows it to run really fast, but it's looseness may also cause unexpected behavior. For example: if you enclose a whole media query in a comment intending to disable its rules, you'll probably find that those rules will end up enabled in non-media-query-supporting browsers.
  83
+- As you might guess, this implementation is quite dumb in regards to CSS parsing rules. This is a good thing, because 
  84
+- that allows it to run really fast, but it's looseness may also cause unexpected behavior. For example: if you enclose 
  85
+- a whole media query in a comment intending to disable its rules, you'll probably find that those rules will end up 
  86
+- enabled in non-media-query-supporting browsers.
68 87
 
69  
-- Respond.js doesn't parse CSS refrenced via @import, nor does it work with media queries within style elements, as those styles can't be re-requested for parsing.
  88
+- Respond.js doesn't parse CSS refrenced via @import, nor does it work with media queries within style elements, as 
  89
+- those styles can't be re-requested for parsing.
70 90
 
71  
-- Due to security restrictions, some browsers may not allow this script to work on file:// urls (because it uses xmlHttpRequest). Run it on a web server.
  91
+- Due to security restrictions, some browsers may not allow this script to work on file:// urls (because it uses 
  92
+- xmlHttpRequest). Run it on a web server.
72 93
 
73  
-- Currently, media attributes on link elements are supported, but only if the linked stylesheet contains no media queries. If it does contain queries, the media attribute will be ignored and the internal queries will be parsed normally. In other words, @media statements in the CSS take priority.
  94
+- Currently, media attributes on link elements are supported, but only if the linked stylesheet contains no media 
  95
+- queries. If it does contain queries, the media attribute will be ignored and the internal queries will be parsed 
  96
+- normally. In other words, @media statements in the CSS take priority.
74 97
 
75  
-- Reportedly, if CSS files are encoded in UTF-8 with Byte-Order-Mark (BOM), they will not work with Respond.js in IE7 or IE8. Noted in issue #97
  98
+- Reportedly, if CSS files are encoded in UTF-8 with Byte-Order-Mark (BOM), they will not work with Respond.js in IE7 
  99
+- or IE8. Noted in issue #97
76 100
 
77  
-- WARNING: Including @font-face rules inside a media query will cause IE7 and IE8 to hang during load. To work around this, place @font-face rules in the wide open, as a sibling to other media queries. 
  101
+- WARNING: Including @font-face rules inside a media query will cause IE7 and IE8 to hang during load. To work around 
  102
+- this, place @font-face rules in the wide open, as a sibling to other media queries. 
78 103
 
79 104
 
80 105
 How's it work?
81 106
 ======
82  
-Basically, the script loops through the CSS referenced in the page and runs a regular expression or two on their contents to find media queries and their associated blocks of CSS. In Internet Explorer, the content of the stylesheet is impossible to retrieve in its pre-parsed state (which in IE 8-, means its media queries are removed from the text), so Respond.js re-requests the CSS files using Ajax and parses the text response from there. Be sure to configure your CSS files' caching properly so that this re-request doesn't actually go to the server, hitting your browser cache instead.
83  
-
84  
-From there, each media query block is appended to the head in order via style elements, and those style elements are enabled and disabled (read: appended and removed from the DOM) depending on how their min/max width compares with the browser width. The media attribute on the style elements will match that of the query in the CSS, so it could be "screen", "projector", or whatever you want. Any relative paths contained in the CSS will be prefixed by their stylesheet's href, so image paths will direct to their proper destination
  107
+Basically, the script loops through the CSS referenced in the page and runs a regular expression or two on their 
  108
+contents to find media queries and their associated blocks of CSS. In Internet Explorer, the content of the stylesheet 
  109
+is impossible to retrieve in its pre-parsed state (which in IE 8-, means its media queries are removed from the text), 
  110
+so Respond.js re-requests the CSS files using Ajax and parses the text response from there. Be sure to configure your 
  111
+CSS files' caching properly so that this re-request doesn't actually go to the server, hitting your browser cache 
  112
+instead.
  113
+
  114
+From there, each media query block is appended to the head in order via style elements, and those style elements are 
  115
+enabled and disabled (read: appended and removed from the DOM) depending on how their min/max width compares with the 
  116
+browser width. The media attribute on the style elements will match that of the query in the CSS, so it could be 
  117
+"screen", "projector", or whatever you want. Any relative paths contained in the CSS will be prefixed by their 
  118
+stylesheet's href, so image paths will direct to their proper destination
85 119
 
86 120
 API Options?
87 121
 ======
@@ -97,4 +131,7 @@ Alternatives to this script
97 131
 ======
98 132
 This isn't the only CSS3 Media Query polyfill script out there; but it damn well may be the fastest.
99 133
 
100  
-If you're looking for more robust CSS3 Media Query support, you might check out http://code.google.com/p/css3-mediaqueries-js/. In testing, I've found that script to be noticeably slow when rendering complex responsive designs (both in filesize and performance), but it really does support a lot more media query features than this script. Big hat tip to the authors! :)
  134
+If you're looking for more robust CSS3 Media Query support, you might check out 
  135
+http://code.google.com/p/css3-mediaqueries-js/. In testing, I've found that script to be noticeably slow when rendering 
  136
+complex responsive designs (both in filesize and performance), but it really does support a lot more media query 
  137
+features than this script. Big hat tip to the authors! :)
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.