On 2009/10/08 16:39 (GMT-0400) David McGlone composed: > On Wed, 2009-10-07 at 00:49 -0400, Felix Miata wrote:
>> Even in Firefox it needs some work to take it towards resolution >> independence.[...] > Do you have any pointers on how I can accomplish this? I've only been > using CSS for about a year or a little more. I'm still learning. The goal is resolution independence. Web pages should look, and work, similarly, regardless of resolution. There should be no need to know the visitor's resolution (though it can be effectively used to serve up natively smaller or larger images). To maximize resolution independence, until (someday maybe) it is built into the average OS desktop: 1-Forget how designing and using anything works on paper or other immutable media. The web has many significant differences from other media. 2-Remember that users have ultimate authority over how your work looks in their web browsers and web viewing appliances. Resist any temptation to enforce your "controls". CSS is a language of suggestion, not demand. 3-Forget everything you know or ever heard about px for sizing anything in CSS. Replace that with this: px can be used in CSS to size various objects, but only objects expected to be less than 8px in any dimension, which means text can never be sized in px, ever. Px come in a wide range of physical sizes that neither you nor the average user can control. "Pixel perfect" for web documents is impossible, and should not be in your vocabulary. 4-You can "fix" or set sizes, but only by using an object the size of which is under users' control. That means you can control the size of objects with reference to each other only, never absolutely. The best user-controlled object is generally the em unit, but others are available too, such as %, ex and the font <absolute-size> keywords. http://www.w3.org/TR/CSS21/fonts.html#font-size-props 5-When sizing, think like a computer instead of a human. That means forgetting base 10 arithmetic, and using hex instead. 10 only divides evenly by 1, 2, 5 & itself. 16 divides evenly by 1, 2, 4, 8 & itself, so makes a better base unit. Hex more often remainders to a whole pixel than does 10 in a CSS sizing environment. Plus, 16 just happens to be the most common number of pixels in a document root's em. If you think you want something to be 11px in "size", you suggest 11/16 of an em (.6875); 13px, 13/16 of an em (.8125); 24px, 1 1/2 em (1.5). If you have an image that should be 600px wide in your own environment, divide 600 by your base sizing unit (1em, which is probably 16px), which comes out to 37.5 (if your em is 16px), and set {width: 37.5em}. With a little practice, this "new" math should become second nature. I have a few simple examples that demonstrate: http://fm.no-ip.com/indexx.html http://fm.no-ip.com/auth/Sites/dlviolin.html http://fm.no-ip.com/auth/Sites/ksc/ Some more elaborate examples can be found at: http://www.cssliquid.com/ -- " A patriot without religion . . . is as great a paradox, as an honest man without the fear of God. . . . 2nd U.S. President, John Adams Team OS/2 ** Reg. Linux User #211409 Felix Miata *** http://fm.no-ip.com/ ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
