Foren

Media Queries and css fast load

Jesse Paria, geändert vor 11 Jahren.

Media Queries and css fast load

Junior Member Beiträge: 69 Beitrittsdatum: 04.03.11 Neueste Beiträge
I just created a really nice responsive theme using media queries, but when I tested with css fast load, the media queries stop functioning all together.

After analyzing the compressed css, I realized that fast load removes a space between the "and" and the viewport width, which apparently is required. If I add that space back in, the media query starts working again.

Before compression

@media screen and (max-width: 1001px) {
	....css here
}


After compression

@media screen and(max-width:1001px) {
	....css here
}



Unfortunately this theme is built for a server that has fast load turned on, so I need to make it work with this compression.

Has anyone else run into these issues? Found a solution?

I see that in Liferay 6.1 they are using Javascript to add classes to HTML elements instead of using media queries. Seems like they are skirting the problem and I just don't understand why you would use Javascript when the W3C has created a specific method for doing something with CSS. Anyway, that is beside the point.

Any help would be appreciated.

Thanks
Jesse
Jesse Paria, geändert vor 11 Jahren.

RE: Media Queries and css fast load

Junior Member Beiträge: 69 Beitrittsdatum: 04.03.11 Neueste Beiträge
Ok I found a partial solution but I'll also share what I tried to help anyone else that runs into this

According to the w3C spec on media queries. this:
@media all and (max-width: 1001px) {
	....css here
}

Is the same as this
@media (max-width: 1001px) {
	....css here
}


So I removed the "and" and "all" from my queries, and that appears to solve the problem. However, I am not sure what you would do if you wanted to specify a media type other than "all."

I also tried putting the css in a separate file and then importing that file from main.css with the @import statement (as below). This did not work at all.
@import url(adaptive.css) (max-width: 1001px);


I also added the css as a separate file in the portal normal file with a
<link rel="stylesheet" href="adaptive.css" type="text/css" media="screen">


This also appears to work because it doesn't get compressed. Then you can just wrap your css within the media query, but your css will not be compressed.

You can also put your media query directly within the link statement in the portal_normal.css (as below)
<link rel="stylesheet" href="adaptive.css" type="text/css" media="screen and (max-width: 1001px)">


Hope this helps.
[ Et V ], geändert vor 11 Jahren.

RE: Media Queries and css fast load

Junior Member Beiträge: 30 Beitrittsdatum: 10.01.08 Neueste Beiträge
Hi,

It's a bug in the YUI Compressor use by Liferay.
A possible workaround is to disable the compressor on this line.

Like this :
 @media all and /*!YUI Compressor */(max-width: 1001px) 


Hope this helps
Richard Lee, geändert vor 10 Jahren.

RE: Media Queries and css fast load

Junior Member Beiträge: 28 Beitrittsdatum: 19.01.11 Neueste Beiträge
Hi stumbled upon this thread after noticing some of my media queries were broken. I also noticed the compressor trips up when theres empty selectors in media queries too

Before compressor:
@media (max-width:980px){
      
     .empty { }
      .container {
         width:940px;
      }
}


After compressor - notice the extra right curly brace

 .container {width:940px;}}
thumbnail
Peter Siman, geändert vor 9 Jahren.

RE: Media Queries and css fast load

New Member Beiträge: 10 Beitrittsdatum: 13.05.09 Neueste Beiträge
Hi all,
I have found this ticket on yui-compressor Github page. Unfortunatelly it stays opened even after 2 years.

https://github.com/yui/yuicompressor/issues/102