I have a completely valid CSS stylesheet, which works, and queries are recognized, but when I minify (and concatenate) the stylesheets with SquishIt, the media queries seemingly stop working, and I can’t figure out why.
This is the minified CSS, beautified:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
border:0;
outline:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
background:transparent;
color:inherit;
margin:0;
padding:0;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
body {
line-height:1;
word-wrap:break-word;
overflow-x:hidden;
font-family:"Helvetica Neue","Lucida Grande","Segoe UI",Arial,Helvetica,Verdana,sans-serif;
}
ol,ul {
list-style:none;
margin-bottom:1em;
margin-left:30px;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:none;
}
:focus {
outline:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
th {
text-align:left;
}
.layout-section {
width:93.75%;
text-align:left;
margin:0 auto;
}
header#layout-header {
margin-bottom:20px;
padding:12px 0;
}
header#layout-header h1 {
display:inline-block;
font-family:Calibri,Candara,Segoe,"Segoe UI",Optima,Arial,Helvetica,sans-serif;
font-weight:700;
font-size:2.4em;
margin:0 auto;
}
section#layout-content {
padding:6px 0;
}
section#layout-content h1 {
margin-bottom:12px;
}
#noscript-padding {
padding-bottom:37px;
}
#noscript-notice {
position:fixed;
top:0;
left:0;
width:100%;
z-index:99;
text-align:center;
font-family:sans-serif;
font-weight:700;
font-size:1.1em;
background-color:#ce756b;
color:#fff;
border-bottom:2px solid #9d0000;
cursor:not-allowed;
padding:6px 0;
}
#noscript-notice .ie-warning {
padding-top:6px;
}
html,body,form {
height:100%;
}
section#layout-container {
min-height:100%;
height:auto!important;
margin:0 auto -72px;
}
a#menu-icon {
float:right;
font-size:12px;
font-weight:700;
line-height:22px;
height:22px;
letter-spacing:.1em;
margin-top:10px;
color:#fff;
background:#4e4e4e;
text-transform:uppercase;
text-decoration:none;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
padding:0 10px;
}
nav#menu {
margin-top:30px;
}
nav#menu ol {
background:#1c1c1c;
padding:5px 0;
}
nav#menu li a {
display:block;
font-weight:700;
text-transform:uppercase;
letter-spacing:.1em;
line-height:2em;
height:2em;
color:#fff;
text-decoration:none;
border-bottom:1px solid #383838;
padding:0 20px;
}
nav#menu li:last-child a {
border-bottom:none;
}
.left {
float:left;
}
.right {
float:right;
}
.hidden {
display:none!important;
}
h1 {
font-size:1.6em;
}
h2 {
font-size:1.5em;
}
h3 {
font-size:1.4em;
}
h4 {
font-size:1.3em;
}
h5 {
font-size:1.2em;
}
h6 {
font-size:1.1em;
}
hr {
border:0 none;
height:1px;
margin-bottom:20px;
}
blockquote {
margin-bottom:10px;
padding:10px 10px 1px;
}
pre,code {
font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",monospace,serif;
}
pre {
margin-bottom:10px;
max-height:600px;
overflow:auto;
width:auto;
padding:5px;
}
b,strong,.bold {
font-weight:700;
}
i,em,.italic {
font-style:italic;
}
del {
text-decoration:line-through;
}
img {
border:none;
}
ol,ul,li,p {
word-wrap:break-word;
}
ol {
list-style:decimal outside none;
}
ul {
list-style:disc outside none;
}
nav ol,nav ul {
list-style:none;
margin:inherit;
}
form legend {
padding-bottom:12px;
}
form input,form textarea,form button,form a.button {
margin-bottom:10px;
margin-right:3px;
display:inline-block;
padding:8px;
}
form input[type=text],form input[type=password],form textarea {
width:75%;
}
form input[type=submit],form form button.submit {
display:block;
text-align:center;
}
fieldset .field-validation-valid,fieldset .field-validation-error {
font-size:.8em;
display:block;
margin-bottom:15px;
}
fieldset .field-validation-valid.tooltip-icon,fieldset .field-validation-error.tooltip-icon {
display:inline-block;
margin-bottom:0;
background-image:url(/content/images/sprites/icons.png);
width:16px;
height:16px;
vertical-align:middle;
}
fieldset .field-validation-valid.tooltip-icon {
background-position:-208px -192px;
}
fieldset .field-validation-error.tooltip-icon {
background-position:-32px -192px;
}
.dialog {
display:none;
position:absolute;
top:50%;
left:50%;
font-size:100%;
background-color:#fff;
border:2px solid #222;
padding:15px;
}
.dialog>header {
font-family:Trebuchet MS,Helvetica,sans-serif;
font-size:1.4em;
font-weight:700;
margin-bottom:7px;
text-decoration:underline;
}
.dialog.notification {
cursor:pointer;
-webkit-box-shadow:2px 2px 5px #400;
-moz-box-shadow:2px 2px 5px #400;
box-shadow:2px 2px 5px #400;
color:#fff;
}
.dialog .dialog-buttons {
text-align:right;
margin-top:20px;
}
.tooltip {
text-align:center;
color:#fff;
background:#111;
position:absolute;
z-index:100;
padding:15px;
}
.tooltip:after {
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #111;
content:'';
position:absolute;
left:50%;
bottom:-10px;
margin-left:-10px;
}
.tooltip.tooltip-top:after {
border-top-color:transparent;
border-bottom:10px solid #111;
top:-20px;
bottom:auto;
}
.tooltip.tooltip-left:after {
left:10px;
margin:0;
}
.tooltip.tooltip-right:after {
right:10px;
left:auto;
margin:0;
}
nav#menu li span {
color:#fff;
}
nav#menu li a:hover,nav#menu li a:focus {
color:#1c1c1c;
background:#ccc;
}
a,button,input[type=submit] {
cursor:pointer;
}
button.disabled,a.button.disabled {
cursor:not-allowed;
}
nav a,button.submit,input[type=submit] {
font-variant:small-caps;
}
input[type=submit],button.submit,a.button {
border:1px solid #313131;
background-color:#dbdbdb;
color:#171515;
}
form input.valid {
background-color:#F0FFFF;
}
form input.input-validation-error {
background-color:#fff0ff;
}
.dialog.notification.notification-error {
background-color:#ce756b;
border:2px solid #9d0000;
}
.dialog.notification.notification-message {
background-color:#ff8c00;
border:2px solid #cc8c00;
}
.exception {
padding:8px;
}
.exception>header {
font-weight:700;
font-size:1.1em;
color:#c00000;
margin-bottom:5px;
}
.exception>.stacktrace {
line-height:1.2em;
color:#333;
display:none;
}
.exception>.stacktrace p {
font-size:.8em;
margin:0 0 0 5px;
}
.exception>.inner {
margin-left:20px;
display:none;
}
section.rendering-error {
color:#C00000;
font-size:.8em;
font-weight:700;
margin:10px;
}
h2.error-description {
font-size:1em;
text-align:center;
color:#462046;
}
section#error-page {
text-align:center;
padding:20px;
}
section#error-page img {
width:160px;
}
img#nomnom-standing {
vertical-align:middle;
}
section.logon-container p.login-required {
display:block;
margin-bottom:24px;
}
form.site-logon {
vertical-align:top;
}
form.site-logon input[type=submit] {
margin:0 auto;
}
form.provider-logon {
display:block;
margin-top:35px;
}
form.provider-logon a.logon-provider-button {
display:inline-block;
margin:4px;
}
form.provider-logon a.provider-icon {
background-image:url(/content/images/sprites/providers-small.png);
width:32px;
height:32px;
}
form.provider-logon a.provider-icon.google-icon {
background-position:0 0;
}
form.provider-logon a.provider-icon.fb-icon {
background-position:-32px 0;
}
form.provider-logon a.provider-icon.twitter-icon {
background-position:-64px 0;
}
form.provider-logon a.provider-icon.yahoo-icon {
background-position:-96px 0;
}
section.create-post {
width:90%;
max-width:300px;
padding-left:12px;
margin:0 auto;
}
section.posts>article,section.more-posts {
margin-top:20px;
}
section.posts>article:first-child {
margin-top:0;
}
section.posts>article>header {
font-size:1.5em;
font-weight:700;
text-align:left;
}
section.posts>article>a.post-thumbnail img {
max-height:125px;
max-width:40%;
float:left;
margin-top:8px;
margin-right:12px;
margin-bottom:12px;
}
section.posts>article>a.post-image img {
max-height:300px;
max-width:100%;
margin-top:8px;
}
section.posts>article>section {
font-size:.8em;
line-height:1.2em;
text-align:left;
}
section.posts>article>section.post-description {
margin-top:8px;
}
div#push,footer#footer,fieldset .field-validation-valid.model-validation,h1.error-title,section#error-page>section#server-room,section#error-page>aside#error-content,section#error-page>footer,img#servers,section.preview-container {
display:none;
}
.clear,section.posts>article {
clear:both;
}
.center,section.logon-container,form.site-logon p,form.provider-logon section.provider-buttons,section.posts,section.more-posts {
text-align:center;
}
ins,a,a.button:hover {
text-decoration:none;
}
a:hover,#noscript-notice a {
text-decoration:underline;
}
@media only screen andmin-width768px{
header#layout-header {
margin-bottom:30px;
}
#noscript-padding {
padding-bottom:22px;
}
div#push {
display:inherit;
height:72px;
}
footer#footer {
display:inherit;
margin-top:40px;
height:12px;
text-align:center;
font-size:.7em;
padding:10px 0;
}
section#layout-content {
position:relative;
}
nav#menu {
margin-top:0;
position:absolute;
top:16px;
right:3.125%;
max-width:45%;
}
nav#menu ol {
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
padding:5px;
}
a#menu-icon,nav#menu li.nav-top {
display:none;
}
nav#menu li {
display:inline-block;
}
nav#menu li a {
float:left;
border:none;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
border-bottom:inherit;
padding:0 10px;
}
header#layout-header h1 {
font-size:3.2em;
}
.exception {
margin-bottom:20px;
}
img#server {
padding-right:2px;
}
img#nomnom {
padding-left:4px;
}
section#error-page {
max-width:500px;
margin:0 auto;
}
section#error-page img {
width:200px;
}
section#error-page>img#notfound-sign,section#error-page>aside#error-content {
display:inline-block;
vertical-align:middle;
}
aside#error-content {
width:250px;
padding-left:30px;
border-left:1px solid #642D64;
margin-left:10px;
text-align:left;
}
aside#error-content header {
color:#642D64;
font-weight:700;
margin-bottom:20px;
}
aside#error-content p {
font-size:.9em;
line-height:1.3em;
margin-bottom:10px;
}
section#error-page>footer {
clear:both;
}
section#error-page>footer .apologies {
text-align:center;
padding-top:30px;
color:#642D64;
clear:left;
font-size:1.2em;
}
section#error-page>footer a {
text-align:center;
display:block;
padding-top:3px;
}
section.logon-container {
margin-top:3%;
}
form.site-logon {
display:inline-block;
margin-right:15px;
width:300px;
}
form.provider-logon {
padding-left:30px;
border-left:1px solid #ddd;
margin-top:0;
display:inline-block;
}
form.provider-logon a.provider-icon {
background-image:url(/content/images/sprites/providers-large.png);
width:100px;
height:60px;
}
form.provider-logon a.provider-icon.google-icon {
background-position:0 0;
}
form.provider-logon a.provider-icon.fb-icon {
background-position:-100px 0;
}
form.provider-logon a.provider-icon.twitter-icon {
background-position:-200px 0;
}
form.provider-logon a.provider-icon.yahoo-icon {
background-position:-300px 0;
}
form.provider-logon section.provider-buttons {
width:230px;
margin:0 auto;
}
section.create-post {
max-width:400px;
padding-left:20px;
}
section.posts {
min-width:700px;
max-width:900px;
margin:0 auto;
}
section.posts>article:first-child+article {
margin-top:0;
}
section.posts>article {
clear:none;
float:left;
width:45%;
}
section.posts>article.even {
margin-right:35px;
clear:both;
}
section.posts>article>a.post-thumbnail img {
max-height:200px;
max-width:50%;
}
section.posts>article>a.post-image img {
max-height:450px;
max-width:95%;
margin-top:16px;
}
.exception>.stacktrace,.exception>.inner,h1.error-title {
display:inherit;
}
}
@media only screen andmin-width1024px{
header#layout-header {
margin-bottom:40px;
}
nav#menu {
top:28px;
}
header#layout-header h1 {
font-size:4.6em;
}
section#error-page {
max-width:1200px;
}
section#error-page>section#server-room {
margin-right:20px;
display:inherit;
float:left;
}
section#error-page>section#server-room img {
width:180px;
}
section#error-page>footer {
display:inherit;
}
img#server {
vertical-align:middle;
}
img#nomnom {
vertical-align:bottom;
}
section#error-page>img#servers {
margin-right:20px;
display:inherit;
float:left;
width:40%;
}
section#error-page>img#nomnom-standing,section#error-page>aside#error-content {
margin-top:20px;
}
section.posts {
max-width:1000px;
}
section.posts>article,section.more-posts {
margin-top:32px;
}
section.posts>article.even {
margin-right:50px;
}
}
@media only screen\0{
#noscript-padding {
padding-bottom:67px;
}
}
@media only screen\0 andmin-width768px{
#noscript-padding {
padding-bottom:47px;
}
}
I’m using YuiCompressor,
but apparently it minifies media queries as:
@media only screen andmin-width768px{
How should I fix this?
Post here which decribes the same problem and the solution is to download the latest version of the compression software:
http://www.456bereastreet.com/archive/201012/yui_compressor_and_css_media_queries/