Re: [WSG] all media queries in one style sheet Vs individually served

[G.Sørtun]

 The way browsers treating @import isn't the same as @media correct?


As mentioned; I haven't tested actual browser-behavior for a long time, 
but @media and @import are, or should be, handled pretty much the same 
way by browsers. Either a particular browser supports the "media" and 
loads and/or acts on what's inside, or it doesn't support it and ignores 
the entire CSS file and/or style block. Still some confusing, incomplete 
and/or incorrect behavior in browsers, so no guarantee.



 If yes, it seems it's safe to bet that when a desktop browser sees a
 media queries like these it will ignore

  


Yes, BUT, don't trust browsers to treat "media" in link relations the 
same as they (should) do @import and @media. Slightly different 
"constructions" that serve pretty much the same purpose from different 
points - pagehead and CSS sheet/block respectively, but which some 
browsers certainly didn't treat the same only a few years ago. They'll 
all get there, but some more slowly than others.



 Or when a Mobile Browser sees this it ignores too (because I don't
 see a way to print command from any Mobile Browsers that I know of.

 


Don't know, but "print to file" may exist on some, to allow for 
transfers to and printout on another device. Who knows what some 
upcoming device will be capable of.



 In the case of @media print, I don't remember where I read it or it's
 simply just something came up from me due to my flawed understanding,
 that browser does not load print style sheet until a print request
 has been made.


Sounds logical, but someone else has to to confirm, deny, or correct, on 
this.
FWIW: can't remember having noticed any new fetches from the server when 
I initiated printing on a site I hadn't visited before, so maybe the 
browser had already loaded the print stylesheet it used for the printout.



  One thing I'd learned from this targeted audiences, is you can
 never give/advice/tell them anything more than the little money they
 paid, or you are asking for trouble because next thing they expect
 from you is solve every little issue they run into in their sites,
 including "why there are so much white space between each paragraph".
 And a question like this could be threw at you even a year later. A
 polite and well-manner customer can be abusive at the same time if
 you haven't deal with one!


Life would be so much easier if we didn't have to deal with clients' 
expectations...

For the time being at least, I don't. Lucky me   ;-)

regards
Georg


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] all media queries in one style sheet Vs individually served

[tee]

Thanks both.

>> A browser will load everything, as long as it supports, or pretends to
>> support, the link or @import media and queries used. It will put styles
>> to use as needed and supported.

Need a clarification: 

The way browsers treating @import isn't the same as @media correct? 

If yes, it seems it's safe to bet that when a desktop browser sees a media 
queries like  these it will ignore





Or when a Mobile Browser sees this it ignores too (because I don't see a way to 
print command from any Mobile Browsers that I know of.



In the case of @media print, I don't remember where I read it or it's simply 
just something came up from me due to my flawed understanding, that browser 
does not load print style sheet until a print request has been made.
>>  
> 
> In addition to Georg's (always) excellent advice, there are several
> ways of slimming down style sheets that might help you, Tee:
> 
> 1. Use a "set styles" instead of a "reset" to avoid duplication

Well, I am not a "if it's good for Meyer/ Zelman" it's good for me kind of web 
developer because I don't worship :-) the only reset I use is "* 
{margin:0;padding:0} ". 

> 
> 2. Minify your style sheets (can be done on the server)


> 
> 3. Gzip all text-based assets. (You do that anyway, right?)


> 
> 4. Combine those style sheets you can using server-side code.



Under the perfect condition, the #2, #3 and #4 are the solutions, but the 
reason for my question is because in most cases,  #2, #3 and #4 may not be 
available.


#2 The Minify script sometimes can break the stylesheet. In one instance, the 
WordPress Minify plugin ignores the display none in the @media print. CSSTidy 
doesn't seem to handle well either when a style sheet has browser prefixes - I 
found this out from my Coda Editor.


#3/#4
I think most shared hosting accounts do not allowed Gzip.

There is another reason I want to try as much the optimization directly in the 
template files is because part of my work is deal with people who haven't a 
clue of the above, so if I can solve part of the optimization directly in the 
template file, at the same time without incurring ridiculous and unrealistic 
expectation customer support coming from this targeted audiences it will be 
whole lot better.

 One thing I'd learned from this targeted audiences, is you can never 
give/advice/tell them anything more than the little money they paid, or you are 
asking for trouble because next thing they expect from you is solve every 
little issue they run into in their sites, including "why there are so much 
white space between each paragraph". And a question like this could be threw at 
you even a year later. A polite and well-manner customer can be abusive at the 
same time if you haven't deal with one!

tee



tee

***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] all media queries in one style sheet Vs individually served

[David Hucklesby]

On 11/11/10 4:57 AM, "G.Sørtun" wrote:

Years since I tested what browsers actually did, and much has changed
since then.

I do prefer to spread styles in logical groups over a few stylesheets,
to a certain degree. If nothing else it helps on maintenance and reuse.


1. Will the desktop browser stops loading the above 3 media unless
requested?


A browser will load everything, as long as it supports, or pretends to
support, the link or @import media and queries used. It will put styles
to use as needed and supported.


2. If I link each media type individually, does the desktop browser
actually load the above 3 style sheets?


Same answer.


[...]


So, it is my advice that you don't filter more than you have to at the
link and @import stages, even if that means slightly fatter stylesheets.



In addition to Georg's (always) excellent advice, there are several
ways of slimming down style sheets that might help you, Tee:

1. Use a "set styles" instead of a "reset" to avoid duplication

2. Minify your style sheets (can be done on the server)

3. Gzip all text-based assets. (You do that anyway, right?)

4. Combine those style sheets you can using server-side code.

(But I may be teaching my grandmother to suck eggs[1]...)

Cordially,
David
--
[1] 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

Re: [WSG] all media queries in one style sheet Vs individually served

[G.Sørtun]

Years since I tested what browsers actually did, and much has changed 
since then.


I do prefer to spread styles in logical groups over a few stylesheets, 
to a certain degree. If nothing else it helps on maintenance and reuse.



1.  Will the desktop browser stops loading the above 3 media unless 
requested?


A browser will load everything, as long as it supports, or pretends to 
support, the link or @import media and queries used. It will put styles 
to use as needed and supported.



2.  If I link each media type individually, does the desktop browser 
actually load the above 3 style sheets?


Same answer.


Similarly, will it not  better for targeted device not loading two of the media 
types? If a targeted device loads only the correct style sheets, it will be 2 
HTTP requests (one for main style and one for targeted media type) but the file 
size of each style sheet is significant reduce, and this seems to be beneficial 
especially for bandwidth concerned mobile devices. Yes?


Back in the days we used link and/or @import media and queries as 
filters to /hack/ browsers - to make them load or not load specific 
stylesheets. Today we at least try to be a bit more advanced, and use 
link and/or @import media and queries as filters to /target/ browsers 
and devices - to make them load or not load specific stylesheets. 
Reasons may have changed amongst conscious web designers , but browsers 
are evolving, so too much deliberate filtering at the link and @import 
stages may mean an existing or future browser/device that can, and 
should be given a chance to, handle specific styles, won't load them.


So, it is my advice that you don't filter more than you have to at the 
link and @import stages, even if that means slightly fatter stylesheets.



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***

[WSG] all media queries in one style sheet Vs individually served

[tee]

I fully understand the need to reducing extra HTTP requests, however as the 
main style sheet gets fatter and fatter with different media queries stuff in 
it I am starting to doubt the benefit of reducing HTTP requests in this manner.

Say, in the main style sheet I serve 

@media print

@media only screen and (max-width: 480px)

@media only screen and (orientation: portrait) and (device-width: 768px) 

By deleting the above 3 media types I can cut down some 30% fat.

2 questions:

1.  Will the desktop browser stops loading the above 3 media unless 
requested?

2.  If I link each media type individually, does the desktop browser 
actually load the above 3 style sheets? 

My thought is not but I haven't a clue. 

Similarly, will it not  better for targeted device not loading two of the media 
types? If a targeted device loads only the correct style sheets, it will be 2 
HTTP requests (one for main style and one for targeted media type) but the file 
size of each style sheet is significant reduce, and this seems to be beneficial 
especially for bandwidth concerned mobile devices. Yes?


Thanks!

tee




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***