Re: [css-d] Media query syntax when a separate style sheet is included
On Sat, Mar 16, 2013 at 7:09 PM, Tom Livingston tom...@gmail.com wrote: I'll add that I use a mobile-first approach and I don't repeat the base style sheet (which doesn't have an MQ) in the conditional comment and I have a separate link element for print styles, if I use one. Just out of curiosity, do you have a link to a site you've built using the techniques you mention? Specifically one with a print stylesheet? Like I said before, I'm considering re-factoring my code. It might help me to finalize my decision by seeing a real-world example built by someone on this list. :) Thanks again! 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 query syntax when a separate style sheet is included
On Mon, Mar 18, 2013 at 1:44 PM, Micky Hulse mickyhulse.li...@gmail.com wrote: Hindsight is 20/20, and a part of me is wondering if I should re-factor my CSS to take the approach you mention. Doing so would solve two problems that I'm having: 2. I'd like to feed IE 8 a static view. Because I'm using the module approach above, it's impossible to feed IEs a specific stylesheet without re-writing or duplicating a lot of my CSS. Related to #2, is: * No JS overhead to juggle. I could just give old IEs the desktop view and be done with it. I'm really starting to dislike all the hoop jumping I'm having to go through to get respond.js to work (one huge gripe I have, is that I can't use more than one asset server. The CDN/X-Domain setup only works from main domain to asset domain, and does not allow for others.) Ok, back to work. Sorry for my rambling. :D 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 query syntax when a separate style sheet is included
Le 16 mars 2013 à 14:08, Micky Hulse mickyhulse.li...@gmail.com a écrit :
On Fri, Mar 15, 2013 at 11:38 AM, Micky Hulse
mickyhulse.li...@gmail.com wrote:
Oh, that's good to know. I did not realize that this was the case. I
probably read some misinformation somewhere (or I did not fully
understand one of the articles I read) saying that @media print {} was
IE9+ thing.
Ah, I think this is the site where I read that @media print` was an IE9+
thing:
CSS Print Media Query
http://www.joshuawinn.com/css-print-media-query/
Hmm, I think that is not correct, based on experience. But it is entirely
possible that IE8 and older have problems when the @media print {} block
contains elements that it doesn't understand, such as the new HTML5 elements.
Make sure you use the html5shiv-printshiv (or Modernizr equivalent)
https://github.com/aFarkas/html5shiv/tree/master/dist
Also, it is possible that IE 8 also has problems when there are selectors it
doesn't understand inside the @media print {} block (e.g. ::before, or
:nth-child(), etc). I seem to remember some forum threads on Alsacecreations
about this. But memory is fuzzy atm.
-
Micky Hulse in an earlier message :
@media screen, all and (min-width: 300px) {
div {
background: blue;
}
}
Based on my tests, IE6 and IE7 actually read the contents of the
@media! Unfortunately, surprisingly, STRANGELY, IE8 doesn't fall in
line with it's predecessors. Unbelievable. Sad too.
FWIW, Firefox 3.0 / Camino 2.0 would also ignore the whole block. That is
perhaps a bit of an ambiguity in CSS 2.1 I think.
As far as I can see, IE 8, Firefox 3.0 will happily parse (and apply) this:
@media screen, foo {}
CSS 2.1 only talks about 'media types' (identifiers), and mentions as an
example '3D' (which should be ignored). There is no mention of constructs of
the type 'all and (something)' – the Fx3.0 console flags the whole @media
block as invalid. I tend to think IE 8 and Fx 3 are right as 'all and
(something)' isn't an identifier, or is considered a malformed identifier.
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 query syntax when a separate style sheet is included
FWIW, I use MQs on link elements to load sheets. Then, for IE less than 9, I
repeat the link elements without MQs inside a conditional comment to serve the
desktop only layout to those browsers. This may be a little low-tech and it is
a few more http requests, but I am not a fan of poly-filling everything under
the sun and I don't have to write additional whole sheets for ie9. It's been
working well for me. I'm sure some will not like this method though.
HTH
—
Sent from Mailbox for iPhone
On Sat, Mar 16, 2013 at 1:09 AM, Micky Hulse mickyhulse.li...@gmail.com
wrote:
On Fri, Mar 15, 2013 at 11:38 AM, Micky Hulse
mickyhulse.li...@gmail.com wrote:
Oh, that's good to know. I did not realize that this was the case. I
probably read some misinformation somewhere (or I did not fully
understand one of the articles I read) saying that @media print {} was
IE9+ thing.
Ah, I think this is the site where I read that @media print` was an IE9+
thing:
CSS Print Media Query
http://www.joshuawinn.com/css-print-media-query/
@media print is supported in the following browsers: FireFox 3.5,
Internet Explorer 9, Chrome 14, Safari 3.2, Opera 11
Also, based on some really rough tests, I think my thinking was flawed:
Is it just me, or wouldn't it seem more prudent to feed printers the
desktop look/feel (as a default, if you didn't have a print-specific
style sheet)? I like the desktop view because it eats up fewer paper
pages.
Looks like the print previews I'm seeing load whatever media query
fits based on the printed page size. In other words, I've been getting
the tablet view instead of the desktop view to print. I assumed
using @media only would make the print load the desktop styles.
Enough talk, here's a demo:
http://jsbin.com/izowol/1
When doing a print preview, only the tablet media query loads. I
assume it's because the printed page matches the dimensions of the
tablet MQ (and there's no media type restriction).
In this example:
http://jsbin.com/izowol/2
I've modified the last query to say:
@media print, (min-width: 1045px) { ... }
When doing a print preview, the H1 from the tablet MQ shows, and so
does the desktop H1 (both are colored orange).
This throws a wrench into my wanting to print the full desktop view.
Adding print, to the front of media queries will probably get me to
that goal, but it feels a little hackish.
Back to drawing board. :)
__
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/
__
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 query syntax when a separate style sheet is included
—
Sent from Mailbox for iPhone
On Sat, Mar 16, 2013 at 8:32 AM, Tom Livingston
tom...@gmail.com=mailto:tom...@gmail.com; wrote:
FWIW, I use MQs on link elements to load sheets. Then, for IE less than 9, I
repeat the link elements without MQs inside a conditional comment to serve the
desktop only layout to those browsers. This may be a little low-tech and it is
a few more http requests, but I am not a fan of poly-filling everything under
the sun and I don't have to write additional whole sheets for ie9. It's been
working well for me. I'm sure some will not like this method though.
HTH
I'll add that I use a mobile-first approach and I don't repeat the base style
sheet (which doesn't have an MQ) in the conditional comment and I have a
separate link element for print styles, if I use one.
On Sat, Mar 16, 2013 at 8:32 AM, Tom Livingston tom...@gmail.com wrote:
FWIW, I use MQs on link elements to load sheets. Then, for IE less than 9, I
repeat the link elements without MQs inside a conditional comment to serve
the desktop only layout to those browsers. This may be a little low-tech and
it is a few more http requests, but I am not a fan of poly-filling everything
under the sun and I don't have to write additional whole sheets for ie9.
It's been working well for me. I'm sure some will not like this method though.
HTH
—
Sent from Mailbox for iPhone
On Sat, Mar 16, 2013 at 1:09 AM, Micky Hulse mickyhulse.li...@gmail.com
wrote:
On Fri, Mar 15, 2013 at 11:38 AM, Micky Hulse
mickyhulse.li...@gmail.com wrote:
Oh, that's good to know. I did not realize that this was the case. I
probably read some misinformation somewhere (or I did not fully
understand one of the articles I read) saying that @media print {} was
IE9+ thing.
Ah, I think this is the site where I read that @media print` was an IE9+
thing:
CSS Print Media Query
http://www.joshuawinn.com/css-print-media-query/
@media print is supported in the following browsers: FireFox 3.5,
Internet Explorer 9, Chrome 14, Safari 3.2, Opera 11
Also, based on some really rough tests, I think my thinking was flawed:
Is it just me, or wouldn't it seem more prudent to feed printers the
desktop look/feel (as a default, if you didn't have a print-specific
style sheet)? I like the desktop view because it eats up fewer paper
pages.
Looks like the print previews I'm seeing load whatever media query
fits based on the printed page size. In other words, I've been getting
the tablet view instead of the desktop view to print. I assumed
using @media only would make the print load the desktop styles.
Enough talk, here's a demo:
http://jsbin.com/izowol/1
When doing a print preview, only the tablet media query loads. I
assume it's because the printed page matches the dimensions of the
tablet MQ (and there's no media type restriction).
In this example:
http://jsbin.com/izowol/2
I've modified the last query to say:
@media print, (min-width: 1045px) { ... }
When doing a print preview, the H1 from the tablet MQ shows, and so
does the desktop H1 (both are colored orange).
This throws a wrench into my wanting to print the full desktop view.
Adding print, to the front of media queries will probably get me to
that goal, but it feels a little hackish.
Back to drawing board. :)
__
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/
__
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 query syntax when a separate style sheet is included
Hi Philippe, many thanks again for the help!
On Thu, Mar 14, 2013 at 8:10 PM, Philippe Wittenbergh e...@l-c-n.com wrote:
Someone else should correct me, but IE 5.5+ supported the basic @media
screen {} or @media print {} correctly. IE 5 for Mac OS X didn't
though, but that browser is long since dead.
(and yes that is what I use routinely.)
Oh, that's good to know. I did not realize that this was the case. I
probably read some misinformation somewhere (or I did not fully
understand one of the articles I read) saying that @media print {} was
IE9+ thing.
I'm going to play around with @meda print, because I do like the
thought of having my print styles within my main styles all minified
into one http request.
I'm still scratching my head on how I can start with a clean slate if
I have @media print in the same sheet. My mobile-first approach styles
are not contained within any sort of @media screen {} block, so
wouldn't they then apply to the print styles as well? Is this even a
big deal (as long as I override said styles)?
It's amazing how much work it can be to craft a good print stylesheet.
It is a valid approach. For most of what I deal with, I have a generic
stylesheet that can be applied to any media with some reshuffle or
fine-tuning for (the limitations of) print media. Like I said, it
really depends on what type of documents you deal with, and the
(eventual) workflow.
Interesting. That's helpful to know. Thanks for the clarification and details.
For my latest project, I'm dealing with a content-heavy news site, so
there's a lot of articles coming and going and being able to print
them is a big deal for our user base.
It's kinda funny, because on top of having to contend with the options
of which technique do I end up using, I'm also wonder when a print
style sheet should take affect. For example, what does one do for
non-article pages? Is it best to let the screen styles do their magic
and let the user print the site as they see it on screen? In what
situations does one override what the user sees on the screen and let
them print a print optimized version of the content; obviously, for
articles, but what about non-article pages? How do you determine what
should be optimized when there is no obvious focal point?
Sorry for my rambling, I know that last bit is off-topic ...
Yeah, right that you can do; saves typing a couple of characters and
eventually makes the stylesheet ever so slightly smaller… (the byte
count really doesn't matter, mind).
Cool. Thanks for the clarification.
Just to clarify further, if I do use the @media print {} within the
same single stylesheet, then I should keep the and screen bit for my
other media queries?
@media screen and (...) {}
... if so, then, like I stated above, what does one do with their
mobile first styles that are not wrapped inside of an @media screen
block?
Thanks again for your pro help, I really appreciate it. Sorry if I'm
asking silly questions.
Have a nice 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/
Re: [css-d] Media query syntax when a separate style sheet is included
On Thu, Mar 14, 2013 at 2:18 PM, Micky Hulse mickyhulse.li...@gmail.com wrote:
For a while now, I've been writing 90% of my media query syntax like so:
@media screen and (min/max-width) { ... }
You know, it's strange ... It seems like everywhere I look people do:
@media only screen and (x) { ... }
But by default, when printing (and there's no print styles) the styles
not in media queries will print. When using the mobile-first
technique, that means that the printed page will be the mobile view.
Is it just me, or wouldn't it seem more prudent to feed printers the
desktop look/feel (as a default, if you didn't have a print-specific
style sheet)? I like the desktop view because it eats up fewer paper
pages.
I just wonder why I see so many people using @media only screen when
it seems like they could just be using @media by itself or @media all
and.
Is this intentional, or a case of one person doing it one way first,
and everyone copying from that one source until it becomes the norm
default/example syntax?
__
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 query syntax when a separate style sheet is included
Le 16 mars 2013 à 09:05, Micky Hulse mickyhulse.li...@gmail.com a écrit : Is this intentional, or a case of one person doing it one way first, and everyone copying from that one source until it becomes the norm default/example syntax? The copy/paste disease. 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 query syntax when a separate style sheet is included
This may shed some light: http://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries — Sent from Mailbox for iPhone On Fri, Mar 15, 2013 at 8:31 PM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 16 mars 2013 à 09:05, Micky Hulse mickyhulse.li...@gmail.com a écrit : Is this intentional, or a case of one person doing it one way first, and everyone copying from that one source until it becomes the norm default/example syntax? The copy/paste disease. 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/ __ 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 query syntax when a separate style sheet is included
Le 16 mars 2013 à 09:37, Tom Livingston tom...@gmail.com a écrit :
This may shed some light:
http://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries
That stack overflow page refers to this passage in the MQ level 3 spec:
The keyword ‘only’ can also be used to hide style sheets from older user
agents.
(above example 9)
I’ve always found that statement about the ‘only’ keyword in the CSS MQ spec
somewhat ambivalent. Inside a stylesheet, a User Agent that only implements
CSS2 will treat as invalid the following:
@media screen and (color) {}
@media (width:200px) {}
And ignore everything until the closing ‘}’.
See CSS2.1:4.1.7 and 4.2
The only reasonable use case for using the ‘only’ qualifier as a way to hide
something from older UA’s is this:
@media only screen {}
(and specify that the style rules should only be used for screen media)
On the other hand, the ‘only’ keyword can eventually be useful to hide a
complete stylesheet from an older UA that implements HTML 4 correctly. Linking
to a stylesheet along these lines _should_ be accepted by such an UA:
link rel=stylesheet href=style.css media=screen and (min-width: 100px)
(The UA will truncated after the ‘screen’ media type)
but this _should_ be ignored:
link rel=stylesheet href=style.css media=only screen and (min-width:
100px)
(the older UA will truncate after the ‘only’ keyword, and decide it is an
invalid media type)
see list item 2 under
http://www.w3.org/TR/1999/REC-html401-19991224/types.html#type-media-descriptors
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 query syntax when a separate style sheet is included
Hi Tom and Philippe, thanks for the replies!
Thanks for linkage Tom!
The copy/paste disease.
Ha! That's the term I was looking for! :D
On Fri, Mar 15, 2013 at 7:44 PM, Philippe Wittenbergh e...@l-c-n.com wrote:
I’ve always found that statement about the ‘only’ keyword in the CSS
MQ spec somewhat ambivalent. Inside a stylesheet, a User Agent that
only implements CSS2 will treat as invalid the following:
Thanks for all of the additional information. It's an interesting
topic and your feedback has been very helpful. Thanks again!
I'm going to let this information soak in over the weekend. I may be
back with more questions! :)
Slightly off-topic:
Tom, I had actually come across that Stack post when searching for
info on how to get IE to unconditionally load media queries.
I was trying out Technique #3 found on this page:
Technique 3: Circumvent Media Query Conditions
http://coding.smashingmagazine.com/2011/08/10/techniques-for-gracefully-degrading-media-queries/
Essentially, it's the opposite of getting a UA to skip a MQ; the goal
is to get old IEs (e.g., IE = 8) to the contents of a media query
thus allowing old IEs to load the desktop version of a mobile-first
setup:
@media screen, all and (min-width: 300px) {
div {
background: blue;
}
}
Based on my tests, IE6 and IE7 actually read the contents of the
@media! Unfortunately, surprisingly, STRANGELY, IE8 doesn't fall in
line with it's predecessors. Unbelievable. Sad too.
Thanks again Philippe and Tom! It's much appreciated!
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 query syntax when a separate style sheet is included
On Fri, Mar 15, 2013 at 11:38 AM, Micky Hulse
mickyhulse.li...@gmail.com wrote:
Oh, that's good to know. I did not realize that this was the case. I
probably read some misinformation somewhere (or I did not fully
understand one of the articles I read) saying that @media print {} was
IE9+ thing.
Ah, I think this is the site where I read that @media print` was an IE9+ thing:
CSS Print Media Query
http://www.joshuawinn.com/css-print-media-query/
@media print is supported in the following browsers: FireFox 3.5,
Internet Explorer 9, Chrome 14, Safari 3.2, Opera 11
Also, based on some really rough tests, I think my thinking was flawed:
Is it just me, or wouldn't it seem more prudent to feed printers the
desktop look/feel (as a default, if you didn't have a print-specific
style sheet)? I like the desktop view because it eats up fewer paper
pages.
Looks like the print previews I'm seeing load whatever media query
fits based on the printed page size. In other words, I've been getting
the tablet view instead of the desktop view to print. I assumed
using @media only would make the print load the desktop styles.
Enough talk, here's a demo:
http://jsbin.com/izowol/1
When doing a print preview, only the tablet media query loads. I
assume it's because the printed page matches the dimensions of the
tablet MQ (and there's no media type restriction).
In this example:
http://jsbin.com/izowol/2
I've modified the last query to say:
@media print, (min-width: 1045px) { ... }
When doing a print preview, the H1 from the tablet MQ shows, and so
does the desktop H1 (both are colored orange).
This throws a wrench into my wanting to print the full desktop view.
Adding print, to the front of media queries will probably get me to
that goal, but it feels a little hackish.
Back to drawing board. :)
__
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 query syntax when a separate style sheet is included
Sorry, my subject line should read: Media query syntax when a separate *print* style sheet is included __ 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 query syntax when a separate style sheet is included
Le 15 mars 2013 à 06:18, Micky Hulse mickyhulse.li...@gmail.com a écrit :
Heck, do I even need the all and bit at that point?
@media (min/max-width) { … }
I never use these 'screen', 'all', … media types ( OK, I'm lying… I only use
them when strictly necessary, e.g only when I want the MQ to be really limited
to a particular media type). I also rarely see the benefit of separating screen
and print types. But that has more to do with the type of documents I deal with
most of the time.
So yes, given that your stylesheets are already limited to a particular media
type, you don't need to repeat that in your MQ's _inside_ those stylesheets.
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 query syntax when a separate style sheet is included
Hi Philippe! Thank you so much for your CSS guru help, I greatly
appreciate it. :)
On Thu, Mar 14, 2013 at 7:00 PM, Philippe Wittenbergh e...@l-c-n.com wrote:
I never use these 'screen', 'all', … media types ( OK, I'm lying… I only use
them when strictly necessary, e.g only when I want the MQ to be really
limited to a particular media type). I also rarely see the benefit of
separating screen and print types. But that has more to do with the type of
documents I deal with most of the time.
Interesting! Thanks for sharing your thoughts on the topic.
Reasoning for my choice (on my this particular project) to have a
separate print style sheet (please correct me if my thinking is
flawed):
1. IIRC, I think I read somewhere that using a separate style sheet
will allow support in older IEs (would the alternative be @media print
{ ... }? Is that the technique you use to keep your print/screen
styles together?).
2. Having built a mobile-first theme, I have a lot of media queries
that use screen and ... , whereas the mobile styles (outside MQs)
are not set for any media type (they are out in the open). I wanted to
have a clean slate for when it came to my print styles and it seemed
like separating screen and print media would help me to do that (I
could be totally wrong though, I'm definitely no print stylesheet
guru).
So yes, given that your stylesheets are already limited to a particular media
type, you don't need to repeat that in your MQ's _inside_ those stylesheets.
Awesome! Thanks for the clarification.
So, you're saying I can convert:
@media only screen and (min-width:665px){ ... }
... to:
@media (min-width:665px) { ... }
... that's pretty cool.
Thanks again for the help I really appreciate it!
Have an awesome night.
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 query syntax when a separate style sheet is included
Le 15 mars 2013 à 11:19, Micky Hulse mickyhulse.li...@gmail.com a écrit :
1. IIRC, I think I read somewhere that using a separate style sheet
will allow support in older IEs (would the alternative be @media print
{ ... }? Is that the technique you use to keep your print/screen
styles together?).
Someone else should correct me, but IE 5.5+ supported the basic @media screen
{} or @media print {} correctly. IE 5 for Mac OS X didn't though, but that
browser is long since dead.
(and yes that is what I use routinely.)
2. Having built a mobile-first theme, I have a lot of media queries
that use screen and ... , whereas the mobile styles (outside MQs)
are not set for any media type (they are out in the open). I wanted to
have a clean slate for when it came to my print styles and it seemed
like separating screen and print media would help me to do that (I
could be totally wrong though, I'm definitely no print stylesheet
guru).
It is a valid approach. For most of what I deal with, I have a generic
stylesheet that can be applied to any media with some reshuffle or fine-tuning
for (the limitations of) print media. Like I said, it really depends on what
type of documents you deal with, and the (eventual) workflow.
So, you're saying I can convert:
@media only screen and (min-width:665px){ ... }
... to:
@media (min-width:665px) { … }
Yeah, right that you can do; saves typing a couple of characters and eventually
makes the stylesheet ever so slightly smaller… (the byte count really doesn't
matter, mind).
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/
