maccied
commented
11 years ago Further to my previous post on this, it appears that At-rules inside @media are invalid in CSS2.1 which is why IE9 (and older versions of FF ignore them):
http://www.w3.org/TR/CSS21/media.html#at-media-rule
Not sure how easy this will be to fix, but perhaps an easier option would be to add a configuration parameter to RequestReduce that will allow certain CSS urls to be ignored in the same way that javascriptUrlsToIgnore parameter works for javascript?
This would at least allow me to exclude the fonts.css from processing, but still enable processing of the rest of my CSS which would be a good compromise.
Thanks for a great library!
RequestReduce is breaking my custom fonts in IE9. It adds a '@media screen { .... }' tag around my font face code. IE doesn't appear to like this, as if I use the RequestReduce CSS but remove this tag from around the @Font-face code, then it is OK.
For info, I have two CSS files - the first one called font.css contains the following:
@font-face { font-family: 'NewsGothCnBTRegular'; src: url('fonts/news_gothic_condensed_bt-webfont.eot'); src: url('fonts/news_gothic_condensed_bt-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/news_gothic_condensed_bt-webfont.woff') format('woff'), url('fonts/news_gothic_condensed_bt-webfont.ttf') format('truetype'), url('fonts/news_gothic_condensed_bt-webfont.svg#NewsGothCnBTRegular') format('svg'); }
The other CSS file containing the rest of the site styles doesn't cause any problem, it is just the media tags around the font.css styles that cause a problem. After RR has optimised, the fonts.css styles look as follows:
@media screen { @font-face { font-family: 'NewsGothCnBTRegular'; src: url('http://localhost/styles/main/fonts/news_gothic_condensed_bt-webfont.eot'); src: url('http://localhost/styles/main/fonts/news_gothic_condensed_bt-webfont.eot?#iefix') format('embedded-opentype'),url('http://localhost/styles/main/fonts/news_gothic_condensed_bt-webfont.woff') format('woff'),url('http://localhost/styles/main/fonts/news_gothic_condensed_bt-webfont.ttf') format('truetype'),url('http://localhost/styles/main/fonts/news_gothic_condensed_bt-webfont.svg#NewsGothCnBTRegular') format('svg'); } }
Removing the @media screen { } outer tag, rectifies the problem.
This is not a problem in Firefox, Chrome, etc
Because I can't disable particular CSS urls, I have had to switch RequestReduce off from processing all my CSS files.