Re: [WSG] Media queries and roles
Hi Tom if you use display none then AT like JAWS will ignore the element. Regards Christos On Fri, May 25, 2012 at 10:44 PM, Tom Livingston tom...@gmail.com wrote: On Thu, May 24, 2012 at 5:14 PM, tee weblis...@gmail.com wrote: Don't know the answer for sure, but if you display none or make it invisible AT would ignore it no? My logic is, display:none invisible should precede ARIA elements. If a site speficically told the AT not to display a block of content, it shouldn't bother to annouce the role(s) within it to confuse user. When doing RWD instead of mobile adaptation, that navigation goes to the bottom of the page for the consideration of Mobile version, my approach is to use absolute position to target the desktop version's navigation instead of making duplication. tee On May 24, 2012, at 1:12 PM, Tom Livingston wrote: List, Thanks tee. My thoughts as well, but wasn't sure. Also, I thought of absolute pos., but I do not think the structure I need will work with that. Thanks again -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- Kind Regards Christos Petrou I personally measure success in terms of the contributions an individual makes to her or his fellow human beings. - Margaret Mead (1901-1978) Never doubt that a small group of thoughtful, committed citizens can change the world; indeed, it's the only thing that ever has. - Margaret Mead (1901-1978) PLEASE CONSIDER THE ENVIRONMENT BEFORE PRINTING THIS EMAIL. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Media queries and roles
On Thu, May 24, 2012 at 5:14 PM, tee weblis...@gmail.com wrote: Don't know the answer for sure, but if you display none or make it invisible AT would ignore it no? My logic is, display:none invisible should precede ARIA elements. If a site speficically told the AT not to display a block of content, it shouldn't bother to annouce the role(s) within it to confuse user. When doing RWD instead of mobile adaptation, that navigation goes to the bottom of the page for the consideration of Mobile version, my approach is to use absolute position to target the desktop version's navigation instead of making duplication. tee On May 24, 2012, at 1:12 PM, Tom Livingston wrote: List, Thanks tee. My thoughts as well, but wasn't sure. Also, I thought of absolute pos., but I do not think the structure I need will work with that. Thanks again -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Media queries and roles
List, We have a project being worked on that is being done using RWD. For mobile, we are repeating the nav at the bottom of the page and showing/hiding - with display: block/none; - the appropriate navbar based on min-width media queries. My question is if the desktop main nav has a role of 'navigation', should the mobile nav at the bottom have that same role? Will that mess up screen readers et al? TIA -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
Sorry, I missed the replies in this thread, I didn't intend to be unresponsive. Indeed it is only Safari as far as I can see that loads all the background images at once, but that seems to include also iOS, so quite a big group of mobile users. Maybe this will be improved in iOS 5. Bye, Frances www.waalweb.nl www.smartscripts.nl Zelfstudiehandboek Websites Ontwikkelen met HTML, CSS en Dreamweaver WaalWeb | Halfweg, Noord-Holland | KvK 34350833 Op 27 sep 2011, om 23:33 heeft Hassan Schroeder het volgende geschreven: On 9/27/11 1:42 PM, Frances de Waal wrote: As far as I know all the stylesheets ánd all the linked resources in them like background-images will be loaded with meadia-queries. So I am afraid that the large background image that you try to avoid for mobiles, will be loaded anyway as long as you try to solve this with media-queries. What are you basing this on? A quick test in Chrome and Firefox on OS X and Chrome on an old G1 Android phone, at least, shows that *not* to be true; a background image is only loaded for the rule that matches the applicable media- query. You can watch the logs (or developer console) and see other images fetched as you resize the browser. What browsers/platforms have you tested where this doesn't work? -- Hassan Schroeder - has...@webtuitive.com webtuitive design === (+1) 408-621-3445 === http://webtuitive.com http://about.me/hassanschroeder twitter: @hassan dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
My name is Ted Knoy and I have been receiving your company's e-mail for some time. I assume that this is confidential company information so I don't understand why I have been receiving your e-mail for nearly two months now. You should report this to Google or change your e-mail settings. On Thu, Sep 29, 2011 at 11:50 AM, tee weblis...@gmail.com wrote: Hi Hassan, Thank you for your patient. I did figure it after my post, from xcode's web inspector, a feature I never used before until today. From the this inspector I could see the difference from the one from Safari. Some people are kind and patience by nature (you), some never afraid to show his stupidity and ignorance publicly (I'm talking about myself), and some are snarky by nature, which is David :-) Luckily the world is big enough to for everyone. Tee On Sep 28, 2011, at 5:27 PM, Hassan Schroeder wrote: but I have never seen an article that tells how you can test what elements get loaded in the mobile Safari Maybe the third time's the charm -- Set up your test page and access it from your iOS device while *watching the server log*. Did the device request the image in question or not? Is there something confusing or ambiguous about that? -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
Unsubscribe link is in the footer. Sent from my iPhone On Sep 29, 2011, at 2:46 AM, Teddy Knoy tedk...@gmail.com wrote: My name is Ted Knoy and I have been receiving your company's e-mail for some time. I assume that this is confidential company information so I don't understand why I have been receiving your e-mail for nearly two months now. You should report this to Google or change your e-mail settings. On Thu, Sep 29, 2011 at 11:50 AM, tee weblis...@gmail.com wrote: Hi Hassan, Thank you for your patient. I did figure it after my post, from xcode's web inspector, a feature I never used before until today. From the this inspector I could see the difference from the one from Safari. Some people are kind and patience by nature (you), some never afraid to show his stupidity and ignorance publicly (I'm talking about myself), and some are snarky by nature, which is David :-) Luckily the world is big enough to for everyone. Tee On Sep 28, 2011, at 5:27 PM, Hassan Schroeder wrote: but I have never seen an article that tells how you can test what elements get loaded in the mobile Safari Maybe the third time's the charm -- Set up your test page and access it from your iOS device while *watching the server log*. Did the device request the image in question or not? Is there something confusing or ambiguous about that? -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
I did figure it after my post, from xcode's web inspector, a feature I never used before until today. Tee Care to share what you found out? Thanks. ~d -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
If you have SDKs, you can open Dashcode, create a page for Mobile Safari and check the resource log. There is also Browser simulator but this one for both desktop and mobile I think. Still exploring so not fully sure what I see is exactly correct. Trying to figure all these another question has arisen. Take iPad for example which supports portrait and landscape, so if I have two separate images target for the two, doesn't it load two images? Say, I first view a page from landscape and this loads the image from it media query, then I switch to portrait, it loads the image from its media query, when it does, the one from landscape has already been loaded so it won't just magically gone when I am still at the portrait right? If I'm driving anybody crazy, some comfort for you: I am alredy driving myself crazy, so you are just offloading the craziness from me. The craziness you thought from my question isn't from my question actually. tee On Sep 29, 2011, at 9:37 AM, David Laakso wrote: I did figure it after my post, from xcode's web inspector, a feature I never used before until today. Tee Care to share what you found out? Thanks. ~d *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
I would just add orientation to your queries and show/hide the right one with the orientation change. Sent from my iPhone On Sep 29, 2011, at 5:28 PM, tee weblis...@gmail.com wrote: If you have SDKs, you can open Dashcode, create a page for Mobile Safari and check the resource log. There is also Browser simulator but this one for both desktop and mobile I think. Still exploring so not fully sure what I see is exactly correct. Trying to figure all these another question has arisen. Take iPad for example which supports portrait and landscape, so if I have two separate images target for the two, doesn't it load two images? Say, I first view a page from landscape and this loads the image from it media query, then I switch to portrait, it loads the image from its media query, when it does, the one from landscape has already been loaded so it won't just magically gone when I am still at the portrait right? If I'm driving anybody crazy, some comfort for you: I am alredy driving myself crazy, so you are just offloading the craziness from me. The craziness you thought from my question isn't from my question actually. tee On Sep 29, 2011, at 9:37 AM, David Laakso wrote: I did figure it after my post, from xcode's web inspector, a feature I never used before until today. Tee Care to share what you found out? Thanks. ~d *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
On 9/29/11 5:28 PM, tee wrote: Trying to figure all these another question has arisen. Take iPad for example which supports portrait and landscape, so if I have two separate images target for the two, doesn't it load two images? Say, I first view a page from landscape and this loads the image from it media query, then I switch to portrait, it loads the image from its media query, when it does, the one from landscape has already been loaded so it won't just magically gone when I am still at the portrait right? tee Keep it simple. Granted, this is far easier said than done, and god knows I am not good at it, either. But when push comes to shove, any site that requires anything beyond basic readability and functionality for its success [such as a decorative background image] -- regardless of whether it is viewed on desktop, laptop, tablet, or mobile -- is in deep trouble. Best, ~d -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
By the way, the other day I stumble on this adaptive images script. It works better for CMS system. http://adaptive-images.com/ Tee On Sep 27, 2011, at 10:42 PM, Hassan Schroeder wrote: On 9/27/11 8:44 PM, Tom Livingston wrote: David, with nothing but mobile Safari, if I hit a page with multiple queries or an element specced as display:none but has a bg image, how to you *verify* that an unwanted image loads anyway or not? As I said in my original email: set up a test page on one of your servers and tail the appropriate log file; you can see when images are fetched. The original question was about media queries, not elements set to `display: none`, but the same method should work. -- Hassan Schroeder - has...@webtuitive.com webtuitive design === (+1) 408-621-3445 === http://webtuitive.com http://about.me/hassanschroeder twitter: @hassan dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
With Android/2.2.2 [low-end touch screen] there is a horizontal yellow
loading bar above the address bar-- it begins at the left rail and moves to
the right rail. Opera Mobile and OperaMini on Android both have a circular
whirling gizzmo loading button [same on a low-end SanyoMirro].
But it's iOS Safari that some people were talking that loads all images, not
Andriod, not Opera Mini.
So if I have
main style sheet
body {background : url(bg-img.png) }
then this
@media screen and (max-width:768px){ body { background:gray
url(bg-bodytop-768.jpg) no-repeat left center} }
iOS Safari does load two images this is how I always understood it, but if I
target images in the media queries than no extra bg image will be loaded and
this is what I learned later from Ethan Marcotte's book, but I have never seen
an article that tells how you can test what elements get loaded in the mobile
Safari (I don't think it's accurate seeing it from a simulator or Desktop
version of Safari). In his book, he didn't give a clear demostration either but
this:
First, we’re setting a background image on the .blog ele- ment. (Specifically,
the two-toned blog-bg.png graphic we used in Chapter 2 to create the illusion
of two columns.) Then for smaller displays, those narrower than 768px wide,
we’re instead placing a simple tiled GIF on the blog element, since we’ve
linearized the display of those narrower pages.
The problem with this approach is that some small screen browsers, most notably
Mobile Safari on the iPhone and the iPad, will actually download both graphics,
even if only one is ultimately applied to the page. While smaller screens don’t
always equate to lower bandwidth, we’re currently punishing users on smaller
screens with the download of a much heavier image than they’ll ever see.
Thankfully, these aren’t problems with responsive design in and of itself—we
just need to rethink the way we’ve imple- mented it.
In fact, I took this approach on my personal portfolio site
(http://ethanmarcotte.com). By default, the content is arranged in a very
linear manner, one friendly to mobile devices and narrow browser windows (Fig
5.12). But as the viewport wid- ens, the grid becomes more complex and more
asymmetrical (Fig 5.13). And at the highest end of the spectrum, the “full”
design finally reveals itself: the layout becomes even more complex, and some
heavier assets, like that big abstract back- ground image, are introduced (Fig
5.14).
And this is all I learned that images that are placed in media queries won't
get loaded twice, or all.
Using Safari's Web Inspector I see 4 bg images were loaded in my previouis
example.
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
but I have never seen an article that tells how you can test what elements get loaded in the mobile Safari Maybe the third time's the charm -- Set up your test page and access it from your iOS device while *watching the server log*. Did the device request the image in question or not? Is there something confusing or ambiguous about that? -- Hassan Schroeder - has...@webtuitive.com webtuitive design === (+1) 408-621-3445 === http://webtuitive.com http://about.me/hassanschroeder twitter: @hassan dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
On 9/28/11 8:27 PM, Hassan Schroeder wrote: Maybe the third time's the charm -- Oh, easy for Leonardo! -- Dylan Thomas -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
Hi Hassan, Thank you for your patient. I did figure it after my post, from xcode's web inspector, a feature I never used before until today. From the this inspector I could see the difference from the one from Safari. Some people are kind and patience by nature (you), some never afraid to show his stupidity and ignorance publicly (I'm talking about myself), and some are snarky by nature, which is David :-) Luckily the world is big enough to for everyone. Tee On Sep 28, 2011, at 5:27 PM, Hassan Schroeder wrote: but I have never seen an article that tells how you can test what elements get loaded in the mobile Safari Maybe the third time's the charm -- Set up your test page and access it from your iOS device while *watching the server log*. Did the device request the image in question or not? Is there something confusing or ambiguous about that? -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
Hi Tee,
As far as I know all the stylesheets ánd all the linked resources in them like
background-images will be loaded with meadia-queries. So I am afraid that the
large background image that you try to avoid for mobiles, will be loaded anyway
as long as you try to solve this with media-queries.
Bye,
Frances
www.waalweb.nl
www.smartscripts.nl
Zelfstudiehandboek Websites Ontwikkelen met HTML, CSS en Dreamweaver
WaalWeb | Halfweg, Noord-Holland | KvK 34350833
Op 20 sep 2011, om 00:02 heeft tee het volgende geschreven:
Please see this.
http://bit.ly/mWvfWC
The reason I want to target body tag in media queries is because I don't want
to panelize mobile user to load the large background image. I started first
with min-width but the result was more problematic, so I switched to
max-width. As to the reason why there is a min-width and max-width separately
for 1024px is because I want to use a background image (no repeat-x) that
fills up the width of the desktop's screen (e.g. 2500px), and there is no
reason to ask the 1024 screen resolutions' user loads this large image.
tee
On Sep 18, 2011, at 2:43 PM, Benjamin Hawkes-Lewis wrote:
On Sun, Sep 18, 2011 at 4:34 PM, tee weblis...@gmail.com wrote:
Hmmm, media queries can't understand body tag; a id or class for the tag is
needed. Spec on W3C site doesn't indicate though as I see example like so:
@media all { body { background:lime } }
A browser bug?
Works for me in Chrome:
http://pastehtml.com/view/b7qe04of6.html
Do you have a testcase you can point to that fails in a named browser?
--
Benjamin Hawkes-Lewis
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
On 9/27/11 1:42 PM, Frances de Waal wrote: As far as I know all the stylesheets ánd all the linked resources in them like background-images will be loaded with meadia-queries. So I am afraid that the large background image that you try to avoid for mobiles, will be loaded anyway as long as you try to solve this with media-queries. What are you basing this on? A quick test in Chrome and Firefox on OS X and Chrome on an old G1 Android phone, at least, shows that *not* to be true; a background image is only loaded for the rule that matches the applicable media- query. You can watch the logs (or developer console) and see other images fetched as you resize the browser. What browsers/platforms have you tested where this doesn't work? -- Hassan Schroeder - has...@webtuitive.com webtuitive design === (+1) 408-621-3445 === http://webtuitive.com http://about.me/hassanschroeder twitter: @hassan dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
I believe that Safari may be the browser with the 'loads anyway' problem. Sent from my iPhone On Sep 27, 2011, at 5:33 PM, Hassan Schroeder has...@webtuitive.com wrote: On 9/27/11 1:42 PM, Frances de Waal wrote: As far as I know all the stylesheets ánd all the linked resources in them like background-images will be loaded with meadia-queries. So I am afraid that the large background image that you try to avoid for mobiles, will be loaded anyway as long as you try to solve this with media-queries. What are you basing this on? A quick test in Chrome and Firefox on OS X and Chrome on an old G1 Android phone, at least, shows that *not* to be true; a background image is only loaded for the rule that matches the applicable media- query. You can watch the logs (or developer console) and see other images fetched as you resize the browser. What browsers/platforms have you tested where this doesn't work? -- Hassan Schroeder - has...@webtuitive.com webtuitive design === (+1) 408-621-3445 === http://webtuitive.com http://about.me/hassanschroeder twitter: @hassan dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
On 9/27/11 3:33 PM, Tom Livingston wrote: I believe that Safari may be the browser with the 'loads anyway' problem. Safari is a Webkit-based browser like Chrome, so I expect them to behave pretty identically, but, for the record: just tested Safari 5.1 (OS X) and it also does *not* load all the background images, only the media-query-specified one. -- Hassan Schroeder - has...@webtuitive.com webtuitive design === (+1) 408-621-3445 === http://webtuitive.com http://about.me/hassanschroeder twitter: @hassan dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
I believe it's the iOS Safari with the issue, where it would be most troublesome. Not sure how to test this. Sent from my iPhone On Sep 27, 2011, at 7:08 PM, Hassan Schroeder has...@webtuitive.com wrote: On 9/27/11 3:33 PM, Tom Livingston wrote: I believe that Safari may be the browser with the 'loads anyway' problem. Safari is a Webkit-based browser like Chrome, so I expect them to behave pretty identically, but, for the record: just tested Safari 5.1 (OS X) and it also does *not* load all the background images, only the media-query-specified one. -- Hassan Schroeder - has...@webtuitive.com webtuitive design === (+1) 408-621-3445 === http://webtuitive.com http://about.me/hassanschroeder twitter: @hassan dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
So iOS Safari loads 4 bg images in this case?
@media screen and (max-width:480px){ body { background:olive
url(bg-bodytop-480.jpg) no-repeat left -50px} }
@media screen and (max-width:768px){ body { background:gray
url(bg-bodytop-768.jpg) no-repeat left center} }
@media screen and (max-width:1024px){ body { background:blue
url(bg-bodytop-1205-and-bigger.jpg) no-repeat center center} }
@media screen and (max-width:1024px){ body { background:blue
url(bg-bodytop-1024.jpg) no-repeat left 20px} }
tee
On Sep 27, 2011, at 4:20 PM, Tom Livingston wrote:
I believe it's the iOS Safari with the issue, where it would be most
troublesome. Not sure how to test this.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
I'm not 100% sure, but I believe so, yes. I was just brow-beaten
offlist by someone because of my reply below. YES, I have an iPhone,
but what I don't know is how to test - with JUST iOS Safari - whether
of not a bg image is downloaded to Safari. I'd be glad to test it for
you, if you can tell me how to confirm it.
On Tue, Sep 27, 2011 at 9:51 PM, tee weblis...@gmail.com wrote:
So iOS Safari loads 4 bg images in this case?
@media screen and (max-width:480px){ body { background:olive
url(bg-bodytop-480.jpg) no-repeat left -50px} }
@media screen and (max-width:768px){ body { background:gray
url(bg-bodytop-768.jpg) no-repeat left center} }
@media screen and (max-width:1024px){ body { background:blue
url(bg-bodytop-1205-and-bigger.jpg) no-repeat center center} }
@media screen and (max-width:1024px){ body { background:blue
url(bg-bodytop-1024.jpg) no-repeat left 20px} }
tee
On Sep 27, 2011, at 4:20 PM, Tom Livingston wrote:
I believe it's the iOS Safari with the issue, where it would be most
troublesome. Not sure how to test this.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
Actually, the way you have this, I think it will work. If you had
something in your base styles, or in the first media query that was
set to display:none with a bg image, then that may get downloaded
anyway. Again, tell me how to check and i'll be glad to test it for
you.
On Tue, Sep 27, 2011 at 9:59 PM, Tom Livingston tom...@gmail.com wrote:
I'm not 100% sure, but I believe so, yes. I was just brow-beaten
offlist by someone because of my reply below. YES, I have an iPhone,
but what I don't know is how to test - with JUST iOS Safari - whether
of not a bg image is downloaded to Safari. I'd be glad to test it for
you, if you can tell me how to confirm it.
On Tue, Sep 27, 2011 at 9:51 PM, tee weblis...@gmail.com wrote:
So iOS Safari loads 4 bg images in this case?
@media screen and (max-width:480px){ body { background:olive
url(bg-bodytop-480.jpg) no-repeat left -50px} }
@media screen and (max-width:768px){ body { background:gray
url(bg-bodytop-768.jpg) no-repeat left center} }
@media screen and (max-width:1024px){ body { background:blue
url(bg-bodytop-1205-and-bigger.jpg) no-repeat center center} }
@media screen and (max-width:1024px){ body { background:blue
url(bg-bodytop-1024.jpg) no-repeat left 20px} }
tee
On Sep 27, 2011, at 4:20 PM, Tom Livingston wrote:
I believe it's the iOS Safari with the issue, where it would be most
troublesome. Not sure how to test this.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
Hi Tom,
Thank you. I don't know how to check it either, I have iPad and iPod, so would
like to learn how to check too.
Used to think browsers load all bg images even with display none declared, and
one of the reasons I wanted to try out the min/max width approach this time is
because I (thought) read it from Responsive Web Design ebook by Ethan Marcotte,
that by targeting the rules in the media queries it prevent browers from
loading unnecessary rules. But I can't find this important peice of info from
the book with a quick search just now.
tee
On Sep 27, 2011, at 7:02 PM, Tom Livingston wrote:
Actually, the way you have this, I think it will work. If you had
something in your base styles, or in the first media query that was
set to display:none with a bg image, then that may get downloaded
anyway. Again, tell me how to check and i'll be glad to test it for
you.
On Tue, Sep 27, 2011 at 9:59 PM, Tom Livingston tom...@gmail.com wrote:
I'm not 100% sure, but I believe so, yes. I was just brow-beaten
offlist by someone because of my reply below. YES, I have an iPhone,
but what I don't know is how to test - with JUST iOS Safari - whether
of not a bg image is downloaded to Safari. I'd be glad to test it for
you, if you can tell me how to confirm it.
On Tue, Sep 27, 2011 at 9:51 PM, tee weblis...@gmail.com wrote:
So iOS Safari loads 4 bg images in this case?
@media screen and (max-width:480px){ body { background:olive
url(bg-bodytop-480.jpg) no-repeat left -50px} }
@media screen and (max-width:768px){ body { background:gray
url(bg-bodytop-768.jpg) no-repeat left center} }
@media screen and (max-width:1024px){ body { background:blue
url(bg-bodytop-1205-and-bigger.jpg) no-repeat center center} }
@media screen and (max-width:1024px){ body { background:blue
url(bg-bodytop-1024.jpg) no-repeat left 20px} }
tee
On Sep 27, 2011, at 4:20 PM, Tom Livingston wrote:
I believe it's the iOS Safari with the issue, where it would be most
troublesome. Not sure how to test this.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
I have that as well. I believe with the approach you have - mobile
first, ala 320andup (http://stuffandnonsense.co.uk/projects/320andup/)
- you don't put anything on the page (or in the style) for mobile
unless you really want it there and loading. As opposed to using media
queries to go from desktop to mobile and turning off what you don't
want to show on mobile. Admittedly, I have done this a couple times,
but they were small overhead sites.
On Tue, Sep 27, 2011 at 10:29 PM, tee weblis...@gmail.com wrote:
Hi Tom,
Thank you. I don't know how to check it either, I have iPad and iPod, so
would like to learn how to check too.
Used to think browsers load all bg images even with display none declared,
and one of the reasons I wanted to try out the min/max width approach this
time is because I (thought) read it from Responsive Web Design ebook by Ethan
Marcotte, that by targeting the rules in the media queries it prevent browers
from loading unnecessary rules. But I can't find this important peice of info
from the book with a quick search just now.
tee
On Sep 27, 2011, at 7:02 PM, Tom Livingston wrote:
Actually, the way you have this, I think it will work. If you had
something in your base styles, or in the first media query that was
set to display:none with a bg image, then that may get downloaded
anyway. Again, tell me how to check and i'll be glad to test it for
you.
On Tue, Sep 27, 2011 at 9:59 PM, Tom Livingston tom...@gmail.com wrote:
I'm not 100% sure, but I believe so, yes. I was just brow-beaten
offlist by someone because of my reply below. YES, I have an iPhone,
but what I don't know is how to test - with JUST iOS Safari - whether
of not a bg image is downloaded to Safari. I'd be glad to test it for
you, if you can tell me how to confirm it.
On Tue, Sep 27, 2011 at 9:51 PM, tee weblis...@gmail.com wrote:
So iOS Safari loads 4 bg images in this case?
@media screen and (max-width:480px){ body { background:olive
url(bg-bodytop-480.jpg) no-repeat left -50px} }
@media screen and (max-width:768px){ body { background:gray
url(bg-bodytop-768.jpg) no-repeat left center} }
@media screen and (max-width:1024px){ body { background:blue
url(bg-bodytop-1205-and-bigger.jpg) no-repeat center center} }
@media screen and (max-width:1024px){ body { background:blue
url(bg-bodytop-1024.jpg) no-repeat left 20px} }
tee
On Sep 27, 2011, at 4:20 PM, Tom Livingston wrote:
I believe it's the iOS Safari with the issue, where it would be most
troublesome. Not sure how to test this.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
On 9/27/11 10:29 PM, tee wrote: Hi Tom, Thank you. I don't know how to check it either, I have iPad and iPod, so would like to learn how to check too. tee Not terribly scientific but simply clear the cache on the iPad and the iPhone and view the page. You'll know whether it is loading in either or both devices. ~d -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
David, with nothing but mobile Safari, if I hit a page with multiple queries or an element specced as display:none but has a bg image, how to you *verify* that an unwanted image loads anyway or not? There's no inspector that I'm aware of like desktop version. Sent from my iPhone On Sep 27, 2011, at 11:23 PM, David Laakso da...@chelseacreekstudio.com wrote: On 9/27/11 10:29 PM, tee wrote: Hi Tom, Thank you. I don't know how to check it either, I have iPad and iPod, so would like to learn how to check too. tee Not terribly scientific but simply clear the cache on the iPad and the iPhone and view the page. You'll know whether it is loading in either or both devices. ~d -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
On 9/27/11 11:44 PM, Tom Livingston wrote: David, with nothing but mobile Safari, if I hit a page with multiple queries or an element specced as display:none but has a bg image, how to you *verify* that an unwanted image loads anyway or not? There's no inspector that I'm aware of like desktop version. Sent from my iPhone With Android/2.2.2 [low-end touch screen] there is a horizontal yellow loading bar above the address bar-- it begins at the left rail and moves to the right rail. Opera Mobile and OperaMini on Android both have a circular whirling gizzmo loading button [same on a low-end SanyoMirro]. I had an iPhone several years ago but have forgotten what it used to display downloading. I am sure there is a more scientific method than watching[timing] the loading gizzmo-- just don't know what it is. And either way, I did not memorize Tee's page address, and don't have time to look it up, or I'd check that page on my handset... ~d -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
On 9/27/11 8:44 PM, Tom Livingston wrote: David, with nothing but mobile Safari, if I hit a page with multiple queries or an element specced as display:none but has a bg image, how to you *verify* that an unwanted image loads anyway or not? As I said in my original email: set up a test page on one of your servers and tail the appropriate log file; you can see when images are fetched. The original question was about media queries, not elements set to `display: none`, but the same method should work. -- Hassan Schroeder - has...@webtuitive.com webtuitive design === (+1) 408-621-3445 === http://webtuitive.com http://about.me/hassanschroeder twitter: @hassan dream. code. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] media queries: device-width vs max/min width
I would love to hear what other think about the approach for device-width vs max/min width. For myself, I have done a couple sites targeting device-width and really think this is better approach. The hype about responsive design got me to try out the max/min width approach, I find that I need to tackle more the the window resizes (and this means writing more CSS rules means penalizing touchscreen device user), and the experience can be quite awful seeing it from desktop browser. I'm sort of in a defeated mood right now, really feel that except the ego to show off, I'm unable to find a convincing reason that desktop user needs to be given a responsive website anything smaller than 800px. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries: device-width vs max/min width
Tee, I agree with your thinking regarding a desktop user getting the 320px wide layout. It can seem silly. At the same time, responsive design isn't supposed to be something visible but something invisible. I doubt desktop users are ever resizing their browser windows and gasping in astonishment when the layout conforms. Table and fluid layouts have been doing this always and no one has ever cared then either as a user. Responsive developers are the only ones scaling the browser in and out and checking the results. Yeah, there are a bunch of items that are frustrating with responsive design - especially if your fighting to get an element to change from one layout to another with out weirdness. I've only made one responsive site so far and I had to really dumb it down to get used to the work method itself, the order I should be doing things, trying to gear for mobile first. I'm in the midst of a ton of experimentation. Here's the site so far if my own code can help you at all: http://jacque.sitesbyjoe.com I wouldn't user this building method on a client site unless they specifically wanted it at this point or until I figure out some more tricks to working this way. Would I offer it? Heck yes. I want to master the style and I'm sure you do too. Keep at it. *Joseph R. B. Taylor* /Web Designer/Developer/ -- Sites by Joe /Clean, Simple and Elegant Web Design/ Web: http://sitesbyjoe.com Phone: (508) 840-9657 Email: j...@sitesbyjoe.com On 9/25/11 5:38 PM, tee wrote: I would love to hear what other think about the approach for device-width vs max/min width. For myself, I have done a couple sites targeting device-width and really think this is better approach. The hype about responsive design got me to try out the max/min width approach, I find that I need to tackle more the the window resizes (and this means writing more CSS rules means penalizing touchscreen device user), and the experience can be quite awful seeing it from desktop browser. I'm sort of in a defeated mood right now, really feel that except the ego to show off, I'm unable to find a convincing reason that desktop user needs to be given a responsive website anything smaller than 800px. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries: device-width vs max/min width
Did you know that only 50% of users actually have their browser windows at full maximum width. The other 50% don't actually have it at full width. So the idea of having max/min allows us developers to create custom widths with different window sizes even if someone like myself who is on a 1440 x 900 resolution but have my browser size at 1142 x 721. So I would actually see a smaller version of the design than a maximum screen resolution. This gives us a greater control over the layout. It can be daunting and difficult at first to develop in this environment. The screen resolution can be a headache with so many sizes to think about especially if you are building for mobiles in mind. The biggest problem is testing I find getting hold of devices to test on to be difficult, as we already have issues getting hold of older browsers. As Joseph mentioned users won't necessary be scaling their browsers up and down to see the results but more so when they aren't actually seeing things at full width they will evidently see a smaller slim down version if they were to increase their browser window they should see a change in layout if you have set the min/max width. So there is a small chance of users flexing their browser windows at times. One major draw back if any of you have noticed is when you *zoom in*. Have you noticed using media queries with min/max width when you zoom in the layout changes as the browser thinks your resolution has changed which alters the layout. I for one find this a limitation and annoying especially for users wanting to zoom into a specific section or want to enlarge font size this really hurts in terms of accessibility. This is another jumping stone for us web developers with new technology seems to come with more complexity and more constraints to think about. I am excited about this and it will take time to fully master this new feature. I have no doubt that within the next year or two majority of sites will conform to this new responsive approach. Steven Wu Freelance Web Developer +44 (0)7540599163 Skype: cyberpunkstudio www.designtodevelop.com On Sun, Sep 25, 2011 at 11:20 PM, Joseph Taylor j...@sitesbyjoe.com wrote: ** Tee, I agree with your thinking regarding a desktop user getting the 320px wide layout. It can seem silly. At the same time, responsive design isn't supposed to be something visible but something invisible. I doubt desktop users are ever resizing their browser windows and gasping in astonishment when the layout conforms. Table and fluid layouts have been doing this always and no one has ever cared then either as a user. Responsive developers are the only ones scaling the browser in and out and checking the results. Yeah, there are a bunch of items that are frustrating with responsive design - especially if your fighting to get an element to change from one layout to another with out weirdness. I've only made one responsive site so far and I had to really dumb it down to get used to the work method itself, the order I should be doing things, trying to gear for mobile first. I'm in the midst of a ton of experimentation. Here's the site so far if my own code can help you at all: http://jacque.sitesbyjoe.com I wouldn't user this building method on a client site unless they specifically wanted it at this point or until I figure out some more tricks to working this way. Would I offer it? Heck yes. I want to master the style and I'm sure you do too. Keep at it. *Joseph R. B. Taylor* *Web Designer/Developer* -- Sites by Joe *Clean, Simple and Elegant Web Design* Web: http://sitesbyjoe.com Phone: (508) 840-9657 Email: j...@sitesbyjoe.com On 9/25/11 5:38 PM, tee wrote: I would love to hear what other think about the approach for device-width vs max/min width. For myself, I have done a couple sites targeting device-width and really think this is better approach. The hype about responsive design got me to try out the max/min width approach, I find that I need to tackle more the the window resizes (and this means writing more CSS rules means penalizing touchscreen device user), and the experience can be quite awful seeing it from desktop browser. I'm sort of in a defeated mood right now, really feel that except the ego to show off, I'm unable to find a convincing reason that desktop user needs to be given a responsive website anything smaller than 800px. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help:
Re: [WSG] media queries: device-width vs max/min width
On 9/25/11 5:38 PM, tee wrote: I would love to hear what other think about the approach for device-width vs max/min width. tee The approach to responsive web design is not particularly difficult. Your castle in the air needs a simple and solid foundation. That's the key. The one-size fits all concept is an exercise in futility. What works for layout A will not necessarily work for layout B. And either way, putting up a page or test page will buy you a lot more than writing about it... Best, ~d -- Desktop. Laptop. Tablet. Mobile! http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
Please see this.
http://bit.ly/mWvfWC
The reason I want to target body tag in media queries is because I don't want
to panelize mobile user to load the large background image. I started first
with min-width but the result was more problematic, so I switched to max-width.
As to the reason why there is a min-width and max-width separately for 1024px
is because I want to use a background image (no repeat-x) that fills up the
width of the desktop's screen (e.g. 2500px), and there is no reason to ask the
1024 screen resolutions' user loads this large image.
tee
On Sep 18, 2011, at 2:43 PM, Benjamin Hawkes-Lewis wrote:
On Sun, Sep 18, 2011 at 4:34 PM, tee weblis...@gmail.com wrote:
Hmmm, media queries can't understand body tag; a id or class for the tag is
needed. Spec on W3C site doesn't indicate though as I see example like so:
@media all { body { background:lime } }
A browser bug?
Works for me in Chrome:
http://pastehtml.com/view/b7qe04of6.html
Do you have a testcase you can point to that fails in a named browser?
--
Benjamin Hawkes-Lewis
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
On 9/19/11 3:02 PM, tee wrote:
Please see this.
http://bit.ly/mWvfWC
It appears to work the way I *think* you want it to if you order the
css statements as:
@media screen and (max-width:1024px){ body { background:red} }
@media screen and (max-width:768px) { body { background-color: black; } }/*do
not delete*/
@media screen and (max-width:480px) { body { background-color:olive; } }/*do
not delete*/
@media screen and (min-width:1024px){ body { background: blue url(bg-bodytop.jpg) no-repeat left
top} }/*do not delete*/
But let me know if that's an incorrect assumption :-)
--
Hassan Schroeder - has...@webtuitive.com
webtuitive design === (+1) 408-621-3445 === http://webtuitive.com
http://about.me/hassanschroeder
twitter: @hassan
dream. code.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
On 20.09.2011 00:02, tee wrote: Please see this. http://bit.ly/mWvfWC The reason I want to target body tag in media queries is because I don't want to panelize mobile user to load the large background image. I started first with min-width but the result was more problematic, so I switched to max-width. Then you should also reverse the media query sequence. Tested your page locally with reversed mq-order - min-width followed by largest max-width first, and it works fine - switched between 4 distinct backgrounds. regards Georg *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] media queries can't understand body tag
Thank you very much! Yes, this works! I didn't realize order could be an issue.
I took a look at that boston global site that everybody was talking the other
day, it has this order:
@media screen and (min-width:480px)
@media screen and (min-width:620px)
@media screen and (min-width:810px)
@media screen and (min-width:1400px)
@media screen and (max-width:810px)
@media screen and (max-width: 810px), print
@media screen and (min-width: 380px)
@media screen and (min-width: 480px)
@media screen and (min-width: 480px) and (max-width: 620px), print
@media screen and (min-width: 480px) and (max-width: 639px), print
@media screen and (min-width: 620px), print
@media screen and (min-width: 810px)
@media screen and (min-width: 980px)
@media screen and (min-width: 1220px)
@media screen and (min-width: 480px)
@media screen and (min-width: 480px) and (max-width: 620px)
@media screen and (min-width: 620px)
@media screen and (max-width: 810px)
@media screen and (min-width: 900px)
@media screen and (min-width: 960px)
@media screen and (min-width: 1200px)
@media screen and (min-width:810px)
@media screen and (min-width: 1200px)
@media screen and (max-width: 620px)
@media screen and (max-width: 620px), print
@media screen and (min-width: 480px)
@media screen and (min-width: 480px) and (max-width: 620px), print
@media screen and (min-width: 620px), print
@media screen and (min-width: 800px), print
@media screen and (min-width: 900px), print
tee
On Sep 19, 2011, at 3:28 PM, Hassan Schroeder wrote:
On 9/19/11 3:02 PM, tee wrote:
Please see this.
http://bit.ly/mWvfWC
It appears to work the way I *think* you want it to if you order the
css statements as:
@media screen and (max-width:1024px){ body { background:red} }
@media screen and (max-width:768px) { body { background-color: black; } }/*do
not delete*/
@media screen and (max-width:480px) { body { background-color:olive; } }/*do
not delete*/
@media screen and (min-width:1024px){ body { background: blue
url(bg-bodytop.jpg) no-repeat left top} }/*do not delete*/
But let me know if that's an incorrect assumption :-)
--
Hassan Schroeder - has...@webtuitive.com
webtuitive design === (+1) 408-621-3445 === http://webtuitive.com
http://about.me/hassanschroeder
twitter: @hassan
dream. code.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
Resend. Please discard previous ones.
Thank you very much! Yes, this works! I didn't realize order could be an issue.
I took a look at that boston global site that everybody was talking the other
day, it has this order:
@media screen and (min-width:480px)
@media screen and (min-width:620px)
@media screen and (min-width:810px)
@media screen and (min-width:1400px)
@media screen and (max-width:810px)
@media screen and (max-width: 810px), print
@media screen and (min-width: 380px)
@media screen and (min-width: 480px)
@media screen and (min-width: 480px) and (max-width: 620px), print
@media screen and (min-width: 480px) and (max-width: 639px), print
@media screen and (min-width: 620px), print
@media screen and (min-width: 810px)
@media screen and (min-width: 980px)
@media screen and (min-width: 1220px)
@media screen and (min-width: 480px)
@media screen and (min-width: 480px) and (max-width: 620px)
@media screen and (min-width: 620px)
@media screen and (max-width: 810px)
@media screen and (min-width: 900px)
@media screen and (min-width: 960px)
@media screen and (min-width: 1200px)
@media screen and (min-width:810px)
@media screen and (min-width: 1200px)
@media screen and (max-width: 620px)
@media screen and (max-width: 620px), print
@media screen and (min-width: 480px)
@media screen and (min-width: 480px) and (max-width: 620px), print
@media screen and (min-width: 620px), print
@media screen and (min-width: 800px), print
@media screen and (min-width: 900px), print
In my site, this is what I have and apart from the body image not showing if no
id/class assigned, some of the rules (e.g. unfloat floated boxes) also couldn't
pick up correctly
@media screen and (max-device-width: 810px) {
* { -webkit-text-size-adjust: 100%; }
}
@media screen and (min-width:810px)
@media screen and (max-width:360px)
@media screen and (max-width:480px)
@media screen and (max-width:768px)
@media screen and (max-width:1024px)
@media screen and (min-width:1024px)
tee
On Sep 19, 2011, at 3:28 PM, Hassan Schroeder wrote:
On 9/19/11 3:02 PM, tee wrote:
Please see this.
http://bit.ly/mWvfWC
It appears to work the way I *think* you want it to if you order the
css statements as:
@media screen and (max-width:1024px){ body { background:red} }
@media screen and (max-width:768px) { body { background-color: black; } }/*do
not delete*/
@media screen and (max-width:480px) { body { background-color:olive; } }/*do
not delete*/
@media screen and (min-width:1024px){ body { background: blue
url(bg-bodytop.jpg) no-repeat left top} }/*do not delete*/
But let me know if that's an incorrect assumption :-)
--
Hassan Schroeder - has...@webtuitive.com
webtuitive design === (+1) 408-621-3445 === http://webtuitive.com
http://about.me/hassanschroeder
twitter: @hassan
dream. code.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] media queries can't understand body tag
Hmmm, media queries can't understand body tag; a id or class for the tag is
needed. Spec on W3C site doesn't indicate though as I see example like so:
@media all { body { background:lime } }
A browser bug?
Tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
Call the other media such as print from an external style sheet.
That should fix the issue.
On 9/19/2011 1:34 AM, tee wrote:
Hmmm, media queries can't understand body tag; a id or class for the tag is
needed. Spec on W3C site doesn't indicate though as I see example like so:
@media all { body { background:lime } }
A browser bug?
Tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
On Sun, Sep 18, 2011 at 4:34 PM, tee weblis...@gmail.com wrote:
Hmmm, media queries can't understand body tag; a id or class for the tag is
needed. Spec on W3C site doesn't indicate though as I see example like so:
@media all { body { background:lime } }
A browser bug?
Works for me in Chrome:
http://pastehtml.com/view/b7qe04of6.html
Do you have a testcase you can point to that fails in a named browser?
--
Benjamin Hawkes-Lewis
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] media queries can't understand body tag
On 9/18/11 5:43 PM, Benjamin Hawkes-Lewis wrote:
On Sun, Sep 18, 2011 at 4:34 PM, teeweblis...@gmail.com wrote:
Hmmm, media queries can't understand body tag; a id or class for the tag is
needed. Spec on W3C site doesn't indicate though as I see example like so:
@media all { body { background:lime } }
A browser bug?
Works for me in Chrome:
http://pastehtml.com/view/b7qe04of6.html
Do you have a testcase you can point to that fails in a named browser?
--
Benjamin Hawkes-Lewis
No issue [the background is lime] in
http://pastehtml.com/view/b7qe04of6.html in Mac OS X 10.4.11:
Safari/4.1.3
Opera/11.11
FF/3.6.22
WebKit/4.1.3 (4533.19.4, r63031)
Camino/2.1b1 (1.9.2.20pre 20110725195938)
~d
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] @media ordering in stylesheet
Hi all,
Does @media rule ordering in a stylesheet matter? For example, given the
following order:
@media print {
body {
#FF;
}
}
@media all {
body {
#99;
}
}
Will @media print override the @media all in this ordering?
Googling around, I've not found a clear answer to the question. So, any help is
appreciated.
Thanks in advance,
jody
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] @media ordering in stylesheet
No, the last one overrides the ones before it.
Kevin
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org]
On Behalf Of Jody Tate
Sent: Thursday, August 05, 2010 1:21 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] @media ordering in stylesheet
Hi all,
Does @media rule ordering in a stylesheet matter? For example, given the
following order:
@media print {
body {
#FF;
}
}
@media all {
body {
#99;
}
}
Will @media print override the @media all in this ordering?
Googling around, I've not found a clear answer to the question. So, any
help is appreciated.
Thanks in advance,
jody
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] @media ordering in stylesheet
On 5 Aug 2010, at 19:20, Jody Tate wrote:
Hi all,
Does @media rule ordering in a stylesheet matter? For example, given
the following order:
@media print {
body {
#FF;
}
}
@media all {
body {
#99;
}
}
Will @media print override the @media all in this ordering?
No. the @media all will apply (well if there were any valid rules in
the block). If the specificity is the same (as is the case in this
example) and the query conditions both apply then source order wins.
Googling around, I've not found a clear answer to the question. So,
any help is appreciated.
Thanks in advance,
jody
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
David Storey
Chief Web Opener / Product Manager, Opera Dragonfly
W3C WG: Mobile Web Best Practices / SVG Interest Group
Opera Software ASA, Oslo, Norway
Mobile: +47 94 22 02 32 / E-Mail/XMPP: dsto...@opera.com / Twitter:
dstorey
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] @media ordering in stylesheet
Hey Jody,
First of all, the rules are incorrectly written. you need to include a
property in front of the value:
@media print
{
body { color: #FF; }
}
@media all
{
body { color: #99; }
}
Secondly, the winner is the second rule. @media rules are just
containers for a bunch of rules. They have no control over the
cascade. The important thing here is the order they are written.
For printers you specify white text. Then for all devices (including
printers) you specify a dark red text. The second rule wins due the
the rules of the cascade:
both rules are from the same origin (author)
both rules have the same !important (none applied)
both rules have the same specificity (selector weight)
Therefore, the order that they are written in is the key and the last
rule specified will win.
Thanks
Russ
--
Russ Weakley
Max Design
Phone: (02) 9410 2521
Mobile: 0403 433 980
Email: r...@maxdesign.com.au
Skype: russ-maxdesign
MSN: r...@maxdesign.com.au
Website: http://www.maxdesign.com.au/
Twitter: http://twitter.com/russmaxdesign
Linkedin: http://www.linkedin.com/in/russweakley
Slideshare: http://www.slideshare.net/maxdesign/
--
On 06/08/2010, at 3:20 AM, Jody Tate wrote:
Hi all,
Does @media rule ordering in a stylesheet matter? For example, given
the following order:
@media print {
body {
#FF;
}
}
@media all {
body {
#99;
}
}
Will @media print override the @media all in this ordering?
Googling around, I've not found a clear answer to the question. So,
any help is appreciated.
Thanks in advance,
jody
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] @media ordering in stylesheet
Thanks for the responses. I needed the experts in the group to confirm my suspicions. Best, jody *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] @media ordering in stylesheet
wow - three answers for the price of one :) On 06/08/2010, at 3:45 AM, David Storey wrote: No. the @media all will apply (well if there were any valid rules in the block). If the specificity is the same (as is the case in this example) and the query conditions both apply then source order wins. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] @media
Hi all,
I have Googled @media but it is hard to get to what I want because Google
doesn't seem to recognise the '@'. So, please stick with me whilst I ask
some daft questions:
1. Is there a list showing browser support for @media?
2. I want to combine my ordinary CSS with my print style sheet by including
an @media print {} declaration - does it matter where this goes in the
stylesheet?
3. Do you know of any links which expand on @media, generally?
Before anyone shouts 'off-topic', may I point out that this came about
because of the bereastreet link in the latest LFLR from Russ ! :-)
Thanks,
Bob
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] @media
Try searching for css at'media - google'll ask if you meant css
@media and voila!
Regards,
Jon Warner
Tel: 07890 299 836
http://thepixelforge.net/
57 Arnold Road
Eastleigh
Hampshire
SO50 5AR
England
On Tue, Feb 23, 2010 at 12:52 PM, designer
desig...@gwelanmor-internet.co.uk wrote:
Hi all,
I have Googled @media but it is hard to get to what I want because Google
doesn't seem to recognise the '@'. So, please stick with me whilst I ask
some daft questions:
1. Is there a list showing browser support for @media?
2. I want to combine my ordinary CSS with my print style sheet by including
an @media print {} declaration - does it matter where this goes in the
stylesheet?
3. Do you know of any links which expand on @media, generally?
Before anyone shouts 'off-topic', may I point out that this came about
because of the bereastreet link in the latest LFLR from Russ ! :-)
Thanks,
Bob
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] @media
1. Is there a list showing browser support for @media?
Try the ever-helpful Site Point. The chart shows generally good
support (with some caveats):
http://reference.sitepoint.com/css/at-media
The chart mentions IE and Firefox are buggy - but be aware that they
are buggy in the opposite way to normal. The @media rules work well
across browsers. However, if no media type is specified, the entire
rule should be ignored as the W3C states: Invalid statements must be
ignored. Oddly enough, both IE and Firefox support the rule when no
media type is specified.
2. I want to combine my ordinary CSS with my print style sheet by
including an @media print {} declaration - does it matter where this
goes in the stylesheet?
Your @media rules can be placed anywhere in the CSS file - unlike
other @ rules. For example:
@charset must be the first line within your external CSS file
otherwise it is ignored (Safari ignores the entire CSS file)
http://www.w3.org/International/questions/qa-css-charset
@import rules must appear before any other rules in a CSS file (apart
from @charset).
http://www.w3.org/TR/CSS2/cascade.html#at-import
3. Do you know of any links which expand on @media, generally?
Definitive page on CSS2 @media:
http://www.w3.org/TR/CSS21/media.html#at-media-rule
A basic example page:
http://www.w3schools.com/CSS/css_mediatypes.asp
A good tip page: Do Not Specify Media Types in the Markup
http://meiert.com/en/blog/20090617/maintainability-guide/#toc-media-types
Worth reading up on more complex CSS3 media query options:
http://www.w3.org/TR/css3-mediaqueries/
HTH
Russ
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] @media
Hi Tom,
Sorry, I should have provided examples in my last email.
1. Below is a normal CSS rule (like the first rule in the
456bereastreet article) - which does not need a media type to be
defined:
body { background: #fff; }
2. Below is an @media rule, which DOES need a media defined (note that
an @media rule contains normal CSS rules - which are placed within
brackets):
@media screen
{
body { background: red; }
}
3. You can add as many normal rules as you want into an @media rule as
per below:
@media screen
{
body { background: red; }
p { background: yellow; }
h1 { background: lime; }
}
4. You can define an @media rule with a single media type or more than
one media type (separated by a comma) as per the two examples below:
@media screen
{
body { background: red; }
}
@media screen, print
{
body { background: red; }
}
5. You CANNOT specify an @media rule WITHOUT a media type as per the
example below. In most browsers, the @media rule above would be
(correctly) ignored as it is incomplete. In IE and Firefox, the rule
is not ignored, it is INCORRECTLY applied:
@media
{
body { background: red; }
}
Does this help?
Russ
On 24/02/2010, at 2:14 AM, Tom Livingston wrote:
So then in this article:
http://www.456bereastreet.com/archive/201002/css_efficiency_tip_use_a_single_stylesheet_file_for_multiple_media/
In his code sample in the middle of the article, the first body rule
would be ignored - or, according to the spec, SHOULD be ignored -
because there is no media type specified for it?
Just trying to follow you here...
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] @media 2006 , London, 15th-16th June
The @media conference returns in 2006 So, who's going, guys? ;) -- Jan Brasna :: www.alphanumeric.cz | www.janbrasna.com | www.wdnews.net ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] @media 2006 , London, 15th-16th June
The @media conference returns in 2006 So, who's going, guys? ;) I'd really like to be there!!! I'm italian, so I have to decide yet. I'm also not a professionist: i love web standards but I'm a geometrician and I work as it. Jeffrey, Joe, why aren't you there this year too?!? Crying. :D :D :D ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] @media 2006 , London, 15th-16th June
Apologies for cross-posting: @media 2006 Unveiled http://www.vivabit.com/atmedia2006/ The @media conference returns in 2006 after an incredibly successful conference in 2005. This time there are more presentations and panels, spread across two tracks, and more speakers, including Eric Meyer, Dan Cederholm, Dave Shea, Andy Clarke, Jon Hicks, Molly Holzschlag, Tantek Çelik, Jeremy Keith, Andy Budd, Roger Johansson, Veerle Pieters, Cameron Moll, Stuart Langridge, Simon Willison, Ian Lloyd, PPK, Patrick Griffiths, Gez Lemon, Patrick Lauke and Robin Christopherson. That’ll do for now, won’t it? More to be announced soon… To be held at the prestigious QEII conference centre in middle of Westminster, London, this time around @media promises to be an even more lavish affair. @media, Europe's foremost professional web design conference, brings together some of the world's most highly respected web experts to talk about the latest major happenings, best-practice thinking, and cutting-edge techniques in the world of web design. The presentations and panels will tackle a multitude of aspects of web design, covering topics such as user-interface design, web standards, CSS, DOM scripting, and accessibility. The multi-track, two day conference schedule is further built upon to provide plenty of valuable networking time and evening activities. -- Patrick H. Lauke __ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com __ Web Standards Project (WaSP) Accessibility Task Force http://webstandards.org/ __ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] @media conference
Hi All I hope this isn't off topic. I will be heading to London soon for the @media conference. http://www.atmedia2005.co.uk/ I'm wondering who else may be attending. Perhaps we can share information about lodging, transportation, goals, etc. If you would like to correspond, you could send me an email to [EMAIL PROTECTED] and I will set up a group list. Now, back to our regularly scheduled programming. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] @media question
While we are at the @ within style sheets, I have a question regarding @media within CSS. Taking a look at http://www.w3.org/TR/REC-CSS2/media.html , the Media Types of interest to me are: all - Suitable for all devices. print - Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media. projection - Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media for information about formatting issues that are specific to paged media. screen - Intended primarily for color computer screens. I am wondering whether anyone has had a go at projection. At work we have a projector that plugs into a standard VGA port on the back of a laptop/PC. Are these projectors part of the projection types? I am a bit confused as I am wondering how browsers etc know whether a screen in plugged in or whether it's a projector. Do I have the wrong type of projectors in mind? I'd surely like to test it, but sometimes gaining access to the projector to test can be a bit difficult. What I am trying to do is recommend some sort of content re-use through style-sheets, so that our Project Managers don't have to make separate copies of committee presentations, project progress reports, etc for what gets displayed on Intranets, committee meetings and what gets printed out to be filed. Anyone's advise would be greatly appreciated Ralph Mazzitelli * The discussion list for http://webstandardsgroup.org/ *
