Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
On Wed, May 22, 2013 at 2:37 PM, Micky Hulse mickyhulse.li...@gmail.com wrote:
Howdy,
I'm in a situation where I would like to use @media all { ... } and
@media screen { ... } around blocks of CSS in a large collection of
style sheets.
Test page using @media all { ... }:
http://jsbin.com/alugiv/1
Test page using @media screen { ... }:
http://jsbin.com/alugiv/2
I've tested in IE6-8 and it appears that those browsers ignore the
media queries (or, they follow the rules) and load all styles found
within the MQ blocks (and, the cascade does not appear to be
affected).
Question: My test page is simple, so maybe I'm missing something
obvious (or some sort of corner case) ... Is what I'm seeing actually
true? Do old IEs not mind @media screen/all { ... } syntax?
Where would I go to find official docs that state weather or not this
is the case? I'd like to use this on a production site, but I kinda
want to confirm that what I'm seeing in my tests is really going to
work for me via a live site. :)
Can anyone confirm or shed light on official documentation somewhere?
Thanks!
M
IE 6/7/8 do not support media queries. See scripting work-around here:
http://12412.org/2012/01/media-queries-ie/
Best,
David Laakso
--
Chelsea Creek Studio
http://ccstudi.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
On 5/22/13 11:37 AM, Micky Hulse wrote:
Howdy,
I'm in a situation where I would like to use @media all { ... } and
@media screen { ... } around blocks of CSS in a large collection of
style sheets.
Test page using @media all { ... }:
http://jsbin.com/alugiv/1
Test page using @media screen { ... }:
http://jsbin.com/alugiv/2
I've tested in IE6-8 and it appears that those browsers ignore the
media queries (or, they follow the rules) and load all styles found
within the MQ blocks (and, the cascade does not appear to be
affected).
Question: My test page is simple, so maybe I'm missing something
obvious (or some sort of corner case) ... Is what I'm seeing actually
true? Do old IEs not mind @media screen/all { ... } syntax?
Where would I go to find official docs that state weather or not this
is the case? I'd like to use this on a production site, but I kinda
want to confirm that what I'm seeing in my tests is really going to
work for me via a live site. :)
Can anyone confirm or shed light on official documentation somewhere?
IE 8 does not process media queries, but does process the at-rules that you
have in your examples. Your media queries are commented out.
So - how did you test? On a screen, I'd expect both sets of CSS to apply. When
printing, I'd only expect the @media all rules to apply. Did you find
something different on printing?
On printing your second test page, it identifies as Mobile in IE 7 and 8 in
my testing, showing the screen rules are ignored.
P.S. You surround your CSS with HTML comments. That was only needed for the
very first browsers. I don't think anyone now uses browsers so old they display
the CSS on the screen. :-)
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
On Wed, May 22, 2013 at 2:37 PM, Micky Hulse mickyhulse.li...@gmail.com wrote:
Howdy,
I'm in a situation where I would like to use @media all { ... } and
@media screen { ... } around blocks of CSS in a large collection of
style sheets.
Test page using @media all { ... }:
http://jsbin.com/alugiv/1
Test page using @media screen { ... }:
http://jsbin.com/alugiv/2
I've tested in IE6-8 and it appears that those browsers ignore the
media queries (or, they follow the rules) and load all styles found
within the MQ blocks (and, the cascade does not appear to be
affected).
Question: My test page is simple, so maybe I'm missing something
obvious (or some sort of corner case) ... Is what I'm seeing actually
true? Do old IEs not mind @media screen/all { ... } syntax?
Where would I go to find official docs that state weather or not this
is the case? I'd like to use this on a production site, but I kinda
want to confirm that what I'm seeing in my tests is really going to
work for me via a live site. :)
Can anyone confirm or shed light on official documentation somewhere?
Thanks!
M
What I do is to repeat my styles, without MQs, inside a conditional
for old IE. This allows the cascade to render a desktop-only layout
for old IE. A bit low-fi maybe, but works well for me and have had no
issues other than the usual fixes needed for old IE regardless of MQs.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
Thanks for the replies everyone, as always, I really appreciate your help!
Sorry in advance for the following rambling e-mail. For those of you
that actually make it to the end, I hope I made it worth your time. :)
On Wed, May 22, 2013 at 1:07 PM, David Laakso laakso.davi...@gmail.com wrote:
IE 6/7/8 do not support media queries. See scripting work-around here:
http://12412.org/2012/01/media-queries-ie/
Thanks for link!
soapbox
Honestly, I think respond.js is great for smaller sites/projects/demo
pages, but I've gone crazy trying to maintain respond.js on a larger
site ... It's especially annoying if your CSS lives one multiple asset
servers (I've come to the conclusion that the overhead for the
CDN/X-Domain setup is not worth the hassle).
Additionally, the current GitHub maintainer (Scott) doesn't appear to
take care of updates to improve the code and/or pull requests.
https://github.com/scottjehl/Respond/pulls
24 open pull requests! Some dating as far back as 2 years ago!
https://github.com/scottjehl/Respond/issues
84 open issues! Again, going back as far as 2 years.
Nothing against Scott, but when I see a repository flounder like
respond.js, I take a step back and think to myself what are my
alternatives. If I had a repo that was as popular as his is, I'd
probably be more on top of managing pull requests and sorting out
issues.
Additionally, due to the number of people using that code (4,230
stars), I'd probably recruit some maintainers ... Of course, anyone
can fork the code and do what they please, but there's nothing better
than having a community of people improving one version/branch of code
(like most of the other popular, and well maintained, GitHub repos)
vs. many forks that each have their own set of improvements.
Not only that, going back to what I said before, IMHO, respond.js (and
the other MQ polyfills) can be a huge pain in arse for larger sites
(at least it has been for me). :)
/soapbox
When you say IE 6/7/8 do not support media queries, I understand
this limitation.
The reason why I asked is because, when using @media all { ... } and
@media screen { ... }, unless I'm mistaken, IE 6-8 appear to load ALL
styles (even the styles within the argumentless MQ blocks).
To clarify, when testing the below two demo pages, IE 6-8 show me
desktop styles and the cascade from ALL media queries:
http://jsbin.com/alugiv/1
http://jsbin.com/alugiv/2
For those wanting to see a version of my code that actually responds
(in a normal browser) see here:
http://jsbin.com/alugiv/4
When I load the above demo #4 in IE 9, then I just get mobile
styles, as one would expect.
To summarize, and not to sound like a broken record, I'm just wanting
to know why IE 6 - 8 appear to ignore (maybe read is a better
term) argumentless @media all { ... } and @media screen { ... } and
load ALL styles.
Maybe my simple test page is fooling me? Maybe I need to make my test
case more complex? That's why I'm here ... Just figured someone would
be able to confirm, or deny, that what I'm seeing is actually true.
I could create a more complex test page to see if I'm missing
something obvious, but I thought I'd ask here before I head down that
path.
On Wed, May 22, 2013 at 1:18 PM, David Hucklesby huckle...@gmail.com wrote:
IE 8 does not process media queries, but does process the at-rules that you
have in your examples. Your media queries are commented out.
Sorry, I probably should have totally remove my comments... If you
look directly below my comments, you'll see:
@media all { ... }
... or:
@media screen { ... }
The commented out MQs are from my original test code, which can be found here:
http://jsbin.com/alugiv/4
So - how did you test?
I tested using my subscription to http://www.browserstack.com.
On a screen, I'd expect both sets of CSS to apply.
When
printing, I'd only expect the @media all rules to apply. Did you find
something different on printing?
Correct. The screen styles worked on screen and not print, and the
all styles worked for both.
(Warning: The following contains CAP words for emphasis ... I'm not
yelling at my computer.) :)
What I want to know is WHY does IE 6-8 load all styles? Unless my test
page is fooling me (like I said above) what I'm seeing is proof that
older IEs don't mind argumentless media queries, no (see very bottom
of this e-mail for an exception in IE8)? AND, if this is the case, why
does this happen? Are there docs that could officially explain this
behavior for when it comes to old IEs?
It's just that I've just read EVERYWHERE that older IEs don't support
MQs (with few exceptions). Based on my first two example pages, old
IEs are ignoring the MQs yet the styles within are applying themselves
to the page.
Honestly, I don't mind if their aren't official docs that explain what
I'm seeing ... I'll take the collective opinions from CSS-d to be
equal to that of any sort of official documentation.
On printing your second test
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
@media { ... }
Just thinking out loud, but is the above, without any attributes (?)
like screen or all, valid?
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
On Wed, May 22, 2013 at 3:58 PM, Tom Livingston tom...@gmail.com wrote:
Just thinking out loud, but is the above, without any attributes (?)
like screen or all, valid?
Good question.
Based on this page:
http://www.w3.org/TR/css3-mediaqueries/
[[
If the media query list is empty (i.e. the declaration is the empty
string or consists solely of whitespace) it evaluates to true.
I.e. these are equivalent:
@media all { … }
@media { … }
]]
IE8 will load the styles within the first ... the ladder is a no go.
IE6-8 like the first (in that all the styles within said query appear
to get applied to the page).
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
On Wed, May 22, 2013 at 4:05 PM, Micky Hulse mickyhulse.li...@gmail.com wrote: IE8 will load the styles within the first ... the ladder is a no go. Doi! That should be latter not ladder. Me = stupid. :D Btw, Tom, you might find this repo/thread interesting: https://github.com/himedlooff/media-query-to-type/issues/1 ... as you've said before that you're working with SASS.0 Anyway, that repo/thread is what spawned me to ask for clarification here on this list. Maybe you, or others, will find it interesting to read the conversation above? Basically, I'm trying to determine if the technique will hold water in the real world. Cheers, Micky __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
On 5/22/13 3:51 PM, Micky Hulse wrote:
WITH ALL THAT SAID ...
I think it's important to note that, based on my tests, IE8 does not
load any styles within a media query block when the given media query
is:
@media { ... }
Demo page:
http://jsbin.com/alugiv/5
... but, from what I can tell, IE 6 and IE 7 DO load all CSS styles!
Isn't it interesting how adding screen or all makes old old IEs
behave the same way.
But why would you do that? (Use @media on its own, that is.)
Then again, @media screen, @media print, and @media all on their own are
not media queries. These are called at-rules and have been around for a long
time. Both @media screen and @media all apply to screen displays in all
browsers, not just IE (of any flavor).
For media queries and other CSS3 support questions, you may find this link
useful (despite its name :-) -
http://html5please.com
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
On Wed, May 22, 2013 at 4:12 PM, Micky Hulse mickyhulse.li...@gmail.com wrote: Btw, Tom, you might find this repo/thread interesting: https://github.com/himedlooff/media-query-to-type/issues/1 ... as you've said before that you're working with SASS. To clarify, the above issue is in reference to a LESS technique. SASS has a cool @content feature: http://jakearchibald.github.io/sass-ie/ Unfortunately, LESS doesn't. This repo (the one that spawned my question to CSS-d): https://github.com/himedlooff/media-query-to-type ... is trying to propose a workaround to LESS not having an @content feature. From what I can tell, the media-query-to-type solution should work pretty good! I'm just the type of person to want to know why it works. :D Cheers, Micky __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
Le 23 mai 2013 à 05:18, David Hucklesby huckle...@gmail.com a écrit :
IE 8 does not process media queries, but does process the at-rules that you
have in your examples. Your media queries are commented out.
Le 23 mai 2013 à 07:51, Micky Hulse mickyhulse.li...@gmail.com a écrit :
To summarize, and not to sound like a broken record, I'm just wanting
to know why IE 6 - 8 appear to ignore (maybe read is a better
term) argumentless @media all { ... } and @media screen { ... } and
load ALL styles.
….
What I want to know is WHY does IE 6-8 load all styles?
….
(later)
I.e. these are equivalent:
@media all { … }
@media { … }
]]
IE8 will load the styles within the first ... the ladder is a no go.
IE6-8 like the first (in that all the styles within said query appear
to get applied to the page).
Contrary to what has been said, IE 7 8 (and 6 I think, but it has been a
while since I checked thoroughly) really support basic media queries of the type
@media screen { ….. }
@media all { …. }
@media screen, print { …. }
That is, media queries as described in CSS 2.1:
http://www.w3.org/TR/CSS21/media.html
But this is not supported:
@media { …. }
for the obvious reason: it is invalid per CSS 2.1.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
On Wed, May 22, 2013 at 4:18 PM, David Hucklesby huckle...@gmail.com wrote:
But why would you do that? (Use @media on its own, that is.)
Another good question! :D
I left out a critical piece of info:
https://github.com/himedlooff/media-query-to-type
Long story short, that's a LESS concept/technique where one uses
variable overrides for the @media XXX part, thus allowing old IEs
to load desktop styles (by using an IE-specific stylesheet link in
head). If you read the README, it should be pretty self explanatory.
If you read through that issue I linked to, I talk about how my first
idea was to use an empty string for the override which would make all
media queries look like:
@media { .. }
That would the cleanest solution IMHO; unfortunately, based on my
cursory tests, IE8 won't load styles within that type of simple
at-rule (thanks for the clarification on the terminology).
Once I realized IE 8 was having issues, I tried both screen and
all; both of which appear to work (that is, old IEs load all styles
within said MQs).
Then again, @media screen, @media print, and @media all on their own
are
not media queries. These are called at-rules and have been around for a
long
time.
Again, thanks for the clarification on the terminology. :)
I had assumed @media was considered to be a media query. Shows what I know. :D
I guess it's because I don't use at-rules outside of the context of
a media query, so that's why I assumed the term media query would
apply.
So, technically speaking then, all media querys are also at-rules,
but not all at-rules are media queries. Got it! :)
Both @media screen and @media all apply to screen displays in all
browsers, not just IE (of any flavor).
Agreed. :)
For media queries and other CSS3 support questions, you may find this link
useful (despite its name :-) -
http://html5please.com
Thanks for link!
I could not find anything under @, @media or media query.
Checking here:
http://caniuse.com/#search=@media
Interestingly enough, the result that shows is labled media query!
FAIL! (Hehe, just kidding). :)
I suppose the caniuse site is just listing CSS3 stuff.
Searching Google for at-rule is yielding some good results though.
Again, thanks for the terminology clarification. :D
http://www.htmldog.com/guides/css/advanced/atrules/
So, based on the info on the above page, it looks like @media screen,
print, projection, handheld, and all (or a comma-separated list of
more than one) will work in old IEs. That's exactly the type of
confirmation that I'm looking for.
Another Google search of at-rules and old explorers led me to this page:
http://msdn.microsoft.com/en-us/library/hh781508%28v=vs.85%29.aspx
... which says @media is supported in IE 6-10. When going to the
@media detail page:
http://msdn.microsoft.com/library/ie/ms530813.aspx
... they list screen, print and all as supported media types
(sMediaType).
Awesome. I think that's pretty concrete evidence that this will work
in the real world (I just need to avoid @media, without a media type,
and IE 8).
Cheers,
M
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
On Wed, May 22, 2013 at 4:47 PM, Philippe Wittenbergh e...@l-c-n.com wrote:
Contrary to what has been said, IE 7 8 (and 6 I think, but it has been a
while since I checked thoroughly) really support basic media queries of the
type
Ah, so I was wrong about that HTMLDog article ... As you say below,
it's just the basic media types that are supported in old IEs (this
seems to be confirmed via the Microsoft links I sent in my previous
e-mail). In HTMLDog's defense, the author does not state what media
types are supported in which browsers ... I just assumed they were
all supported in all versions of IE (my bad).
@media screen { ….. }
@media all { …. }
@media screen, print { …. }
That is, media queries as described in CSS 2.1:
http://www.w3.org/TR/CSS21/media.html
But this is not supported:
@media { …. }
for the obvious reason: it is invalid per CSS 2.1.
Ah, ok, that's clear enough for my thick skull. Hehe.
Thanks Philippe (and everyone else) for the help!
I'm stoked to have finally found a solution that will work for my
CSS/media query workflow.
Crawling back into my hole now.
Bye.
M
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] @media all {} @media screen {}: Both ignored (or followed) by IE6-8
In Yahoo Groups the main page (5 message preview) will display the CSS within in body style/style tags unless it is commented out. Mike On 05/22/2013 04:18 PM, David Hucklesby wrote: P.S. You surround your CSS with HTML comments. That was only needed for the very first browsers. I don't think anyone now uses browsers so old they display the CSS on the screen. :-) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
