[css-d] Inline media queries?

2012-08-30 Thread Micky Hulse 
Throwing this one out there:

Is it possible to inline a media query in a style= attribute?

For example:

div style=background-image: url(foo.png); @media only screen and
(min-width: 1005px) { /* styles here */ }/div

Is that a crazy idea? Better yet, is that a valid idea?

Back story: I'm building a jsonp widget, and it would make life easier
if I could inline the MQ.

 ducks for cover 

Thanks!
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] Inline media queries?

2012-08-30 Thread Micky Hulse 
Correction:

 Better yet, is that a valid idea?

I meant to say valid code.

I've just tested:

div style=height: 20px; background-color: #000; @media only screen
and (min-width: 1005px) { background-color: #eee; }/div

It don't work none. :(

Back to the drawing board! :D

Thanks,
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] Inline media queries?

2012-08-30 Thread Alan Gresley 

On 31/08/2012 8:47 AM, Micky Hulse wrote:

Correction:

 Better yet, is that a valid idea?

I meant to say valid code.

I've just tested:

div style=height: 20px; background-color: #000; @media only screen
and (min-width: 1005px) { background-color: #eee; }/div

It don't work none. :(

Back to the drawing board! :D

Thanks,
M



Media queries usually contain selectors.

http://www.w3.org/TR/CSS21/media.html#at-media-rule

Could you use embedded style in the head element? Also since you have 
inline style, you need to use '!important' to override the inline style.



!doctype html

style type=text/css
@media only screen and (min-width: 1005px) {
div { background-color: #eee !important;  }
}
/style

div style=height: 20px; background-color: #000;v/div



--
Alan Gresley
http://css-3d.org/
http://css-class.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] Inline media queries?

2012-08-30 Thread Micky Hulse 
On Thu, Aug 30, 2012 at 5:01 PM, Alan Gresley a...@css-class.com wrote:
 Media queries usually contain selectors.

Ha! Good point! I totally missed that. I'm so used to writing inline
styles without selectors (for obvious reasons), I did not think to add
a selector to the inline MQ. :D

I assume that still would not work though.

 Could you use embedded style in the head element? Also since you have

Good call! Actually, that's what I'm doing now. :)

 inline style, you need to use '!important' to override the inline style.

Thanks for tips!

Thanks for help, I really appreciate the help!

Have a great day.

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/