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 ***
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
***
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
***
