Re: [css-d] Media queries and em's
Yes, you are right I expressed it the wrong way. So, do you have any particular suggestion? -- Kuzeko On 13 January 2013 21:37, Philip TAYLOR p.tay...@rhul.ac.uk wrote: Kuzeko Web Design - Matteo Lissandrini wrote: Yes, Christian is right, exactly from this observation come my question. How to handle this fact? Is 16px enough widespread to let us hope the design will be coherent through different systems and devices? Did you had some workaround or trick to enact? I think it is vital to accept that, no matter how ubiquitous the relationship between 16px and 1em, it is simply impossible to replace the first by the second (and pro-rata) and achieve your goal. If it /were/ possible, the em would not be the miracle unit that it is : rather, you need to re-think your design, reserving pixels for image dimensions (and, arguably, min- and max-dimensions) and expressing everything else in relative terms : ems, for relative to the current font, aned %, for relative to the parent element. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's
Kuzeko Web Design - Matteo Lissandrini wrote: Yes, you are right I expressed it the wrong way. So, do you have any particular suggestion? Well, no : not more than I have already said. You might like to look at David Laakso's web site, into which he has been putting considerable effort to make it responsive : http://ccstudi.com/ I have no idea how successful he has been, because I make no use of the web other than via the very old-fashioned technology of a Windows-based PC and twin 19 CRT monitors, but simple tests such as making the browser window as narrow as possible and playing with browser zoom and minumum font size suggest that he has certainly addressed these (admittedly relatively superficial) problems successfully ... Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's
I'm sorry Philip, but I may have missed something... Why recommending this particular website among the thousands available (e.g. http://MediaQueri.es )? Additionally that one does not use the technique I'm researching. On 14 January 2013 11:23, Philip TAYLOR p.tay...@rhul.ac.uk wrote: http://ccstudi.com/ -- Kuzeko __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's
Kuzeko Web Design - Matteo Lissandrini wrote: I'm sorry Philip, but I may have missed something... Why recommending this particular website among the thousands available (e.g. http://MediaQueri.es )? Simply because I had occasion to visit it recently and was pleased to see how well it handled the simple tests that I mentioned. I am just a human being, not an encyclopaedia -- I can tell you about the few sites of which I am aware, not the countless trillions of which I am not. I could have referred you to sites of own creation, but that would have been immodest : far better to refer you to a site created by someone with whom I have no connection whatsoever. Additionally that one does not use the technique I'm researching. OK, I stand corrected. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's
Apologize. I'm sorry if I sounded rude or pretentious, I though that I was missing something about that site. That's it. -- Kuzeko On 14 January 2013 11:56, Philip TAYLOR p.tay...@rhul.ac.uk wrote: Kuzeko Web Design - Matteo Lissandrini wrote: I'm sorry Philip, but I may have missed something... Why recommending this particular website among the thousands available (e.g. http://MediaQueri.es )? Simply because I had occasion to visit it recently and was pleased to see how well it handled the simple tests that I mentioned. I am just a human being, not an encyclopaedia -- I can tell you about the few sites of which I am aware, not the countless trillions of which I am not. I could have referred you to sites of own creation, but that would have been immodest : far better to refer you to a site created by someone with whom I have no connection whatsoever. Additionally that one does not use the technique I'm researching. OK, I stand corrected. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] The 'all' propert
Anyone have more info on this:
http://www.w3.org/TR/2013/WD-css3-cascade-20130103/#all
specifically the bit in Example 4 where it mentions setting 'all:default'
on an element.
This looks interesting but I can't find anything more about it. I might
just be misinterpreting what this is saying. A quick test of:
footer{all:default;}
did nothing in a page of mine. Is this just a browser support issue, or am
I just not understanding what they are talking about?
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The 'all' propert
2013-01-14 22:00, Tom Livingston wrote:
Anyone have more info on this:
http://www.w3.org/TR/2013/WD-css3-cascade-20130103/#all
specifically the bit in Example 4 where it mentions setting 'all:default'
on an element.
This looks interesting but I can't find anything more about it.
It's an addition to the Working Draft, which was recently changed after
a long dormant period (from year 2005!).
I might just be misinterpreting what this is saying.
The formulation looks rather clear to me. The idea is to make it
possible to create a styling island where an element is rendered
independently of any surrounding context. This is currently possible
only indirectly, by embedding a document in another with iframe (or
frame or object.
A quick test of:
footer{all:default;}
did nothing in a page of mine. Is this just a browser support issue
I would not expect any browser support at this stage.
Yucca
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The 'all' propert
Thanks Yucca,
Any idea how this would be used? For example, the widget example mentioned
on that page:
.widget{
all: default;
color: blue;
font-weight: bold;
}
So, over riding any inheritance, then setting the isolated styles for this
widget?
On Mon, Jan 14, 2013 at 3:22 PM, Jukka K. Korpela jkorp...@cs.tut.fiwrote:
2013-01-14 22:00, Tom Livingston wrote:
Anyone have more info on this:
http://www.w3.org/TR/2013/WD-**css3-cascade-20130103/#allhttp://www.w3.org/TR/2013/WD-css3-cascade-20130103/#all
specifically the bit in Example 4 where it mentions setting 'all:default'
on an element.
This looks interesting but I can't find anything more about it.
It's an addition to the Working Draft, which was recently changed after a
long dormant period (from year 2005!).
I might just be misinterpreting what this is saying.
The formulation looks rather clear to me. The idea is to make it possible
to create a styling island where an element is rendered independently of
any surrounding context. This is currently possible only indirectly, by
embedding a document in another with iframe (or frame or object.
A quick test of:
footer{all:default;}
did nothing in a page of mine. Is this just a browser support issue
I would not expect any browser support at this stage.
Yucca
__**__**__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/**mailman/listinfo/css-dhttp://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ --
http://css-discuss.incutio.**com/http://css-discuss.incutio.com/
List policies --
http://css-discuss.org/**policies.htmlhttp://css-discuss.org/policies.html
Supported by evolt.org --
http://www.evolt.org/help_**support_evolt/http://www.evolt.org/help_support_evolt/
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] The 'all' propert
2013-01-14 22:44, Tom Livingston wrote:
Any idea how this would be used? For example, the widget example
mentioned on that page:
.widget{
all: default;
color: blue;
font-weight: bold;
}
So, over riding any inheritance, then setting the isolated styles for
this widget?
That seems to be the general idea. The isolated styles might be set
simply by using selectors that limit their effect on the specific
element. If the proposed style scoped tag in document body will be
implemented, it could be used to set the isolated styles simply by
copying them from the other page's stylesheets.
Yucca
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's (Philip TAYLOR)
I doubt that. em is a unit relative to the current font size.
http://en.wikipedia.org/wiki/Em_%28typography%29
http://en.wikipedia.org/wiki/Em_%28typography%29 says: Thus, em
generally means the point size of the font in question. So if for one
particular font size 1em is 16 pixels, for a font twice as big 1em might
be rather about 32 pixels.
Best
Christian
Christian,
With all due respect you have it wrong in relation to CSS.
Thus, em generally means the point size of the font in question. is correct
for print but not for CSS.
Here's what the W3C spec
http://www.w3.org/TR/css3-values/#font-relative-lengths has to say about it -
Aside from ‘rem http://www.w3.org/TR/css3-values/#rem-unit ’ (which refers to
the font-size of the root element), the font-relative lengths refer to the
computed font metrics of the element on which they are used. The exception is
when they occur in the value of the ‘font-size’ property itself, in which case
they refer to the computed font metrics of the parent element (or the computed
font metrics corresponding to the initial values of the ‘font’ property, if the
element has no parent).
em unit
Equal to the computed value of the ‘font-size’ property of the element on which
it is used.
The rule:
h1 { line-height: 1.2em }
means that the line height of h1 elements will be 20% greater than the font size
of h1 element. On the other hand:
h1 { font-size: 1.2em }
means that the font size of h1 elements will be 20% greater than the computed
font size inherited by h1 elements.
The EM unit is relative to 1) the declared font-size of the element 2) the
font-size of the parent.
This is exactly why I use the REM unit. It is only relative to the font-size of
the root element and is not subject to any other unit.
html {font-size: 16px;}
Then all REMs on the page will be 16px no matter what eles.
When using EM's you can run into problems when the font-size or an element's
parent has a direct and not so nice effect on a child element's font-size.
Eric Miner
e...@minerbits.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] REM units
2013-01-14 23:18, Tom Livingston wrote:
I've been
looking into rem units and noticed that the only fallback i've seen written
about is px. Can you not fallback to em? The fallback is generally going to
be for IE 9, and they can't resize things set in px, if need be, so will
em work instead?
You can use any unit in a fallback for rem. The reason why you don't
often see em in that role is probably that if an author can figure out a
suitable em fallback, he might just as well use simply em.
For example, if you have bodydivp and div { font-size: 2em } and
you want to set the font size of p to 1.5 times the root em size, you
can start from
p { font-size: 2rem; }
and then add the fallback
p { font-size: 0.75em; font-size: 2rem; }
But if you have done the calculations, you could simply use
p { font-size: 0.75em; }
Yucca
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's
On 2013-01-14 15:55 (GMT-0500) Eric composed:
html {font-size: 16px;}
Then all REMs on the page will be 16px no matter what eles.
Not quite. Notwithstanding that styling text in px ignores the wide variation
in effective pixel density and rudely disregards the visitor's optimum text
size, as presumptively established via his UA's default size setting, astute
users with competent UAs can avoid the need to apply zoom to restore some
legibility, at least potentially, via a user stylesheet containing the following:
html,
body
{font-size: medium !important}
In my non-testing UAs this will usually result in a rem size of 20px or 24px.
That simplicity could easily be expanded to include much more:
html,
body,
#body,
p,
td,
pre,
code,
li,
dd,
#content,
#main
{font: medium/normal sans-serif !important}
The result though can be a big mess of overlapping and/or hidden content if
container sizing is also done in px. OTOH, with such styling done in em
and/or rem, much or even all of the adaptability of the natural web, and
rem/em-based styling, is preserved.
--
The wise are known for their understanding, and pleasant
words are persuasive. Proverbs 16:21 (New Living Translation)
Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!
Felix Miata *** http://fm.no-ip.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's
On Jan 13, 2013, at 2:50 PM, John Snippe j...@snippe.ca wrote: On 2013-01-13, at 2:09 PM, Tedd Sperling wrote: Additionally, here is something that helped me -- when converting from pixels to em simply divide by 16. For example, an image that is 16 pixels wide is also 1 em wide. If I recall, that would only work if the base fontsize is 16, right? -- John Snippe Well.. that's where you can get into trouble, namely mixing size/measurement types. I make certain that ALL measurements in my layouts are done in em's and nothing else. So, to answer your question, the base font size would be 1em and NOT 16px. As such, all standard measurements of images in pixels translate to ems by using a ratio of 16:1. Is that clear enough? Here's an example (if I didn't provide it before): http://sperling.com/examples/zoom/ Also, here's a complete site: http://sperling.com/clients/beckyscan/index.php Try changing your zoom levels in your Browser to see the effect. You can't do that with pixels. Cheers, tedd _ t...@sperling.com http://sperling.com . __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Zebra Stripes effect with CSS and jQuery
Le 14 janv. 2013 à 12:12, Anthony agav...@gmail.com a écrit : What am I missing? ::sigh:: Without a link, it is impossible to help you. Have you checked with the debugging tools provided by most browsers? Error consoles, WebKit inspector, Firebug, etc will provide you with lots of information. There could be a script error, or there could be some style rule that overrides the one you set through the script (you set the background on the TR, but you could also have a background set on the TD descendant of that TR). Or create a minimum testcase and start analysing what is going on, and upload that for someone to help you out. Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Zebra Stripes effect with CSS and jQuery
My main issue is that the javascript code is not appending an odd class for each tr. Maybe it's just my expectations of what should happen that are incorrect. I was expecting the code I've got to change my html as follows tr class=odd Is this what should happen? Or have I got it all wrong? On Tue, Jan 15, 2013 at 10:40 AM, Philippe Wittenbergh e...@l-c-n.com wrote: Le 14 janv. 2013 à 12:12, Anthony agav...@gmail.com a écrit : What am I missing? ::sigh:: Without a link, it is impossible to help you. Have you checked with the debugging tools provided by most browsers? Error consoles, WebKit inspector, Firebug, etc will provide you with lots of information. There could be a script error, or there could be some style rule that overrides the one you set through the script (you set the background on the TR, but you could also have a background set on the TD descendant of that TR). Or create a minimum testcase and start analysing what is going on, and upload that for someone to help you out. Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Zebra Stripes effect with CSS and jQuery
Le 15 janv. 2013 à 09:33, Anthony agav...@gmail.com a écrit : My main issue is that the javascript code is not appending an odd class for each tr. Maybe it's just my expectations of what should happen that are incorrect. I was expecting the code I've got to change my html as follows tr class=odd Is this what should happen? Or have I got it all wrong? That is probably what should happen if everything works correctly… But you can't see that by doing a 'view source'; you need to check the generated source (after the JS has run). With Firebug (Firefox) or WebKit Inspector (Chrome, Safari): right click on the element and choose 'Inspect…', then you'll be able to see the generated source. Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media queries and em's
On Sun, Jan 13, 2013 at 12:35 PM, Kuzeko Web Design - Matteo
Lissandrini w...@kuzeko.com wrote:
Hi all,
I would like to work on my new project building Responsive layouts making
use of flexible em-based media queries instead of pixel based.
Did you tried this approach, is there anything I should pay attention to?
Kuzeko*
Although I use a different approach, there is nothing wrong with using
em. And as with most any discipline there are many ways to achieve the
goal.
There are a couple of things to keep in mind, among them:
1/ You need a device width meta tag in the head of the document. I
used meta name=viewport content=width=device-width
2/ If you use em then you may want to declare default font-size in
percent on html and use em font-size on selectors
3/ Shoot for the ability to view the site at twice default font-size
[200%] at any device screen width [including on a mobile-device]
/without/ throwing a horizontal scroll bar.
4/ The media query may be px or em-based. I am used @media screen and
(min-width:30em) {#page{width:90%;min-width:90%;max-width:90%}}
Please see source of this simple fast and dirty test page
http://ccstudi.com/site/playpen/layouts/test_37.html
Best,
David Laakso
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] REM units
On 1/14/13 1:46 PM, Jukka K. Korpela wrote: 2013-01-14 23:18, Tom Livingston wrote: I've been looking into rem units and noticed that the only fallback i've seen written about is px. Can you not fallback to em? The fallback is generally going to be for IE 9, and they can't resize things set in px, if need be, so will em work instead? You can use any unit in a fallback for rem. The reason why you don't often see em in that role is probably that if an author can figure out a suitable em fallback, he might just as well use simply em. I have found a use case for rem units where the cascade that em gives me is not what I need all. In this case, I use keywords for font-size. Although not as precise as pixels, I find the variations between sizes quite usable, with the advantage of adapting to user text size adjustments. YMMV of course. -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
