Problem/Motivation
For example "html5-respond.js" will not be able to see:
@media all and (min-width: 480px) {
#main {
padding-top: 3em; /* Move all the children of #main down to make room. */
position: relative;
}
#navigation {
position: absolute;
top: 0; /* Move the navbar up inside #main's padding. */
height: 3em;
width: $zen-grid-width;
}
}
This is because when "Aggregate and compress CSS files" is disabled stylesheets will be included thus:
<style>
@import url("http://example.com/sites/all/themes/zen/css/layouts/responsive-sidebars.css?m4u26e");
</style>
However when enabled they will be included thus:
<link type="text/css" rel="stylesheet" href="http://example.com/sites/default/files/css/css_C6Lm1iN6RJbU2Q3JAy6Q5tdHG9VMYHLIm5Wi_XDDXkU.css" media="all" />
Respond only looks at stylesheets added with a link tag and not those @import with a style tag.
Proposed resolution
- Make respond support @import rules (https://github.com/scottjehl/Respond/issues/107)
- Document that this is a known issue on the Zen project page summary or associated documentaion
Related
Respond.js has a nice piece of text on their project page summary entitled "Hey, this thing isn't working!!" that describes this issue.
Comment | File | Size | Author |
---|---|---|---|
#1 | respond.js_.warning-1608216.patch | 1.34 KB | gaele |
Comments
Comment #1
gaele CreditAttribution: gaele commentedThis adds a warning to the theme settings page: "Respond.js will only function if CSS agregation is enabled."
Comment #2
gaele CreditAttribution: gaele commentedAnd I've added a doc page: http://drupal.org/node/1864544 (copied from the respondjs module page).
Comment #3
dmatamales CreditAttribution: dmatamales commentedThanks for the info.
IE 7/8 are still a pretty big deal. I assumed something was wrong with my setup and was tearing my hair out trying to get it to work.
I wish this was a bit more prominently mentioned somewhere until the next build when the warning patch in #1 will hopefully be included. I don't think an additional message on the project page would be too out of line.
Comment #4
echoz CreditAttribution: echoz commentedRespond.js has problems (see #1539682: Turn off Respond.js by default, use .lt-ie9 rules for IE8 layouts) but while we have it in use, we'll add a note where it gets enabled.
This has been catching people for a while...
#1600450: IE pushes navigation region below content region
#1855848: Incompatibility with Nice menus: horizontal menu gets located under the page content in IE8
#1589192: Zen 5.x in IE8 has single-column layout
#1719300: Sidebar first displaying below main content in IE 8
Marking #1600450: IE pushes navigation region below content region as a duplicate and commiting this, slightly altered, thanks for the patch Gaele!
Comment #5.0
(not verified) CreditAttribution: commentedCopy paste fixed