Re: [css-d] what should go in html{ } ?
Le 27 juin 2013 à 14:42, Jukka K. Korpela jkorp...@cs.tut.fi a écrit :
You could set e.g. font properties here, and they would be inherited by
body unless font properties are set directly on it. But what would be the
point? It is simpler to set them directly on body. Setting background is a
little different, since it is not inherited, but it largely acts as if it
were: if background is not set for body, it is transparent (the initial
value), so the background for html shines thru. But again, it is simpler
to just set background on body.
Why ?
body{
font-size:16px;
color:rgb(0,0,0);
font-family:helvetica-neue, Verdana, Arial, sans-serif;
}
Technically, if you wish to have such settings as a global default for your
pages, setting them on body rather than html is the way to go.
Again, Why?
That is basically the question raised by the OP. 'Simpler' is not exactly a
good or well reasoned argument.
(I would nitpick on the use of 'px' for font-size, but that is another subject)
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] what should go in html{ } ?
2013-06-27 9:15, Philippe Wittenbergh wrote: Technically, if you wish to have such settings as a global default for your pages, setting them on body rather than html is the way to go. Again, Why? Because it sets the properties directly on the highest-level element where they might have some effect, rather than affecting indirectly via inheritance. Inheritance is the most widely misunderstood concept in CSS and causes surprises even to those who understand it in principle. And in practice, inheritance is prevented whenever there is *any* style sheet that sets a property on an element that would otherwise inherit it. That is basically the question raised by the OP. Is it? The question said just I have no idea what things ought to be inside the html selector. 'Simpler' is not exactly a good or well reasoned argument. Other things being equal, it is. And in the CSS context, simplicity is a strong argument, especially here, since it helps to avoid both conceptual and practical problems. (I would nitpick on the use of 'px' for font-size, but that is another subject) It's not nitpicking at all, but indeed another subject, as are other issues in the settings. The question was which properties should be set on the html element. 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] what should go in html{ } ?
Le 27 juin 2013 à 15:27, Jukka K. Korpela jkorp...@cs.tut.fi a écrit :
Technically, if you wish to have such settings as a global default for your
pages, setting them on body rather than html is the way to go.
Again, Why?
Because it sets the properties directly on the highest-level element where
they might have some effect, rather than affecting indirectly via inheritance.
Uh. HTML is the highest level where (some) properties will have an effect that
matter for inheritance.
Consider this snippet:
html { /* nothing set here, just the initial values set by the UA */}
body { font: .8em/1.5 sans-serif; }
article p { font-size: 1rem; }
vs
html { font: .8em/1.5 sans-serif; }
article p { font-size: 1rem; }
And the consequences of that snippet will go beyond just font-size, as you can
imagine.
Inheritance is the most widely misunderstood concept in CSS and causes
surprises even to those who understand it in principle.
No argument against that one… :-)
'Simpler' is not exactly a good or well reasoned argument.
Other things being equal, it is. And in the CSS context, simplicity is a
strong argument, especially here, since it helps to avoid both conceptual and
practical problems.
Oh, I'm a big fan of simplicity, thing is, in this particular context that
simplicity is not simply not clear cut, particularly when it comes to the
font(-size) property, and the cascading effects it has on other properties.
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] what should go in html{ } ?
2013-06-27 9:52, Philippe Wittenbergh wrote:
HTML is the highest level where (some) properties will have an effect that
matter for inheritance.
The html element is the root element, so it cannot inherit anything.
Its properties may be inherited by its children.
Consider this snippet:
html { /* nothing set here, just the initial values set by the UA */}
body { font: .8em/1.5 sans-serif; }
Whenever you use the em unit or the % unit on font-size, you need to
take into consideration that it is relative to the parent font size.
This has nothing to do with inheritance. Here you *prevent* body from
inheriting font size from its parent, html.
Anyway, I don’t see why this would imply any need for setting anything
on the html element.
article p { font-size: 1rem; }
Well, the rem unit is special, because it is defined as the root element
font size. I see no reason to use it (it still has limited browser
support, and you can use the em unit instead - with due consideration of
cumulative effects), but if you do, then it gives you the browser
default. If that’s not what you want, you can set font-size on html.
So this could be a case for setting something on html beyond margin
and padding – but only when you wish to use the rem unit *and* you want
to override the browser’s default font size.
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] what should go in html{ } ?
On Thu, Jun 27, 2013 at 8:23 AM, Jukka K. Korpela jkorp...@cs.tut.fi wrote:
2013-06-27 9:52, Philippe Wittenbergh wrote:
Consider this snippet:
html { /* nothing set here, just the initial values set by the UA */}
body { font: .8em/1.5 sans-serif; }
Whenever you use the em unit or the % unit on font-size, you need to take
into consideration that it is relative to the parent font size. This has
nothing to do with inheritance. Here you *prevent* body from inheriting
font size from its parent, html.
No snark here. Tell me what I am missing where 'preventing body from
inheriting font size from html' is a problem? What would the benefit
be? I see nothing to gain.
--
Tom Livingston | Senior Front-End 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/
[css-d] img height acting funky few bugs
hello everyone, i am building my web portfolio ( http://www.gjh.sk/~ambrus/emental http://www.gjh.sk/%7Eambrus/emental , SCSS - _http://www.gjh.sk/~ambrus/emental/assets/css/global.scss_ ) and i am having few issues with cross-browser compatibility. the idea of the webpage is to have a single page layout, with fixed header and footer and full screen height image presentations one after another, with an image 'carousel' as the gallery. (i will be adding functionality later on, but first i wanted to have this landing page sorted out). SO anyway, so far the design works well and as expected in Chrome (v27, screen res 1280x800), all other browsers have issues. one particular issue is the height of the images in the .carousel - where in Chrome they take the 100% height of the screen, all other browsers display the images in their 1:1 scale. the second major annoyance is that internet explorer adds funny blue borders around the .svg navigation images, and Opera does not display them at all. so, if you had any ideas on what to rethink or rewrite in the css, i'd be happy to listen to them. Best Regards, Adam __ 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] what should go in html{ } ?
2013-06-27 16:01, Tom Livingston wrote:
Whenever you use the em unit or the % unit on font-size, you need to take
into consideration that it is relative to the parent font size. This has
nothing to do with inheritance. Here you *prevent* body from inheriting
font size from its parent, html.
No snark here. Tell me what I am missing where 'preventing body from
inheriting font size from html' is a problem?
It could be a problem in some cases, but this wasn't the point here. The
point was that setting body { font: .8em/1.5 sans-serif; } prevents
inheritance, instead of being an example of inheritance.
What would the benefit
be? I see nothing to gain.
Benefit of what? You may wish to let the browser default font size apply
to body, or you may wish to set body font size relative to the
browser default font size, or you may wish to set it in physical units.
I don't see any reason to set anything for html in any of these cases.
Very theoretically, in the first two approaches, you might wish to set
html { font-size: 100% } to guard against other style sheets setting
font-size on html
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] what should go in html{ } ?
On 6/26/13 2:29 PM, COM wrote:
my css all begin like what's pasted below. I have no idea what things ought
to be inside the html selector. Any thoughts on what the best practices are?
[code snipped]
A couple of suggestions:
Some browsers will only add scroll bars on long pages, creating a visible jog
when transitioning between long and short pages. This adds a ghost scroll bar
on short pages. preventing the jog:
html { overflow-y: auto; }
If you use the sticky footer technique[1], add this to provide a reference
height for the rest of the page:
html { height: 100%; }
If, like me, you use body instead of an extra wrapper element for your
pages, you can use a different background for the html so that the edges of
the page are distinct.
I hope this answers your question.
[1] http://css-tricks.com/snippets/css/sticky-footer/
--
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/
Re: [css-d] what should go in html{ } ?
My latest project uses these styles (after having included normalize.css):
[snip]
html, body { background: #fff; }
html {
height: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font: 100.01%/1.5 Cambria, Georgia, serif;;
color: #000;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100%;
_height: 100%;
}
[/snip]
From there, I'll calculate relative font sizes, margins/padding/other
on the base line-height.
OT, but I gained a lot of insight on font sizing and vertical rhythm
by studying web-based
base line grid techniques.
__
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] what should go in html{ } ?
This is just wrong. It inherits the defaults from the browser. On 6/27/13 5:23 AM, Jukka K. Korpela jkorp...@cs.tut.fi wrote: The html element is the root element, so it cannot inherit anything. __ 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] what should go in html{ } ?
Chris Williams wrote: This is just wrong. It [the html element] inherits the defaults from the browser. From the W3C [1] : 6.2 Inheritance Some values are inherited by the children of an element in the document tree, as described above. Each property defines whether it is inherited or not. As the browser is not an element in the document tree, the html element cannot inherit any properties from it. It may well acquire them in some other way, but this is not inheritance /qua/ inheritance. Philip Taylor [1] http://www.w3.org/TR/CSS2/cascade.html#inheritance __ 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] what should go in html{ } ?
On Jun 27, 2013, at 10:54 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: As the browser is not an element in the document tree, the html element cannot inherit any properties from it. It may well acquire them in some other way, but this is not inheritance /qua/ inheritance. Isn't it the case that browser defaults show themselves in elements unless those elements are told differently by CSS? one example I can think of is that a defaults to blue with an underline. John __ 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] what should go in html{ } ?
John A. Johnson wrote: On Jun 27, 2013, at 10:54 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: As the browser is not an element in the document tree, the html element cannot inherit any properties from it. It may well acquire them in some other way, but this is not inheritance /qua/ inheritance. Isn't it the case that browser defaults show themselves in elements unless those elements are told differently by CSS? Yes, it is, but as I wrote above this is not inheritance /qua/ inheritance. We are discussing CSS, and within this particular universe of discourse, inheritance has a very specific meaning (just as to draw a distinction has a very specific meaning when discussing /The Laws of /Form/). Elements have certain default renderings which they acquire from the browser, but they do not /inherit/ those renderings from the browser in the CSS sense of inherit. 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] what should go in html{ } ?
On Jun 27, 2013, at 11:14 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Elements have certain default renderings which they acquire from the browser, but they do not /inherit/ those renderings from the browser in the CSS sense of inherit. OK..I get it. that is an important distinction... __ 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] what should go in html{ } ?
Pfffttt Semantics. On 6/27/13 11:14 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: John A. Johnson wrote: On Jun 27, 2013, at 10:54 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: As the browser is not an element in the document tree, the html element cannot inherit any properties from it. It may well acquire them in some other way, but this is not inheritance /qua/ inheritance. Isn't it the case that browser defaults show themselves in elements unless those elements are told differently by CSS? Yes, it is, but as I wrote above this is not inheritance /qua/ inheritance. We are discussing CSS, and within this particular universe of discourse, inheritance has a very specific meaning (just as to draw a distinction has a very specific meaning when discussing /The Laws of /Form/). Elements have certain default renderings which they acquire from the browser, but they do not /inherit/ those renderings from the browser in the CSS sense of inherit. 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] what should go in html{ } ?
2013-06-27 21:02, John A. Johnson wrote:
On Jun 27, 2013, at 10:54 AM, Philip Taylor p.tay...@rhul.ac.uk wrote:
As the browser is not an element in the document tree, the html
element cannot inherit any properties from it. It may well acquire
them in some other way, but this is not inheritance /qua/ inheritance.
Isn't it the case that browser defaults show themselves in elements unless
those elements are told differently by CSS?
Yes. (Well, to be exact, unless told differently in CSS, in
presentational HTML attributes, or in user commands in a browser.) But
this is not inheritance. Inheritance is a specific, well-defined concept
in CSS.
one example I can think of is that a defaults to blue with an underline.
Well, more exactly, a defaults to a blueish color with underline if
the element has the href attribute and the link has not been visited
recently. This is not inheritance; it *prevents* inheritance - normally,
an element would e.g. inherit color from its parent.
The browser defaults are in principle browser-specific, though rather
systematically across browsers, with some exceptions. The sample style
sheet in CSS 2.1 spec describes some common defaults, but a few of them
are unrealistic, not corresponding to browser behavior. There is a more
realistic (and more extensive) description of defaults in the Rendering
section of the HTML5 CR. The rules are not requirements, but they are
presented as expected rendering. They may actually become
requirements, if a browser vendor claims to support the expected
rendering. Thus, we can expect browser defaults to remain similar or
become even more similar.
In particular, HTML5 contains the expected rendering rules
:link { color: #EE; }
:visited { color: #551A8B; }
:link, :visited { text-decoration: underline; }
These differ somewhat from previously common defaults that have been
mentioned in many descriptions, namely blue = #FF for unvisited
links and purple = #800080 for visited links.
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/
[css-d] img height funky behaviour IE image border
hello everyone, i am building my web portfolio ( http://www.gjh.sk/~ambrus/emental, SCSS - http://www.gjh.sk/~ambrus/emental/assets/css/global.scss ) and i am having few issues with cross-browser compatibility. the idea of the webpage is to have a single page layout, with fixed header and footer and full screen height image presentations one after another, with an image 'carousel' as the gallery. (i will be adding functionality later on, but first i wanted to have this landing page sorted out). SO anyway, so far the design works well and as expected in Chrome (v27, screen res 1280x800), all other browsers have issues. one particular issue is the height of the images in the .carousel - where in Chrome they take the 100% height of the screen, all other browsers display the images in their 1:1 scale. the second major annoyance is that internet explorer adds funny blue borders around the .svg navigation images, and Opera does not display them at all. so, if you had any ideas on what to rethink or rewrite in the css, i'd be happy to listen to them. Best Regards, Adam __ 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] what should go in html{ } ?
On Wed, Jun 26, 2013 at 5:29 PM, COM j...@coffeeonmars.com wrote: my css all begin like what's pasted below. I have no idea what things ought to be inside the html selector. Any thoughts on what the best practices are? Thank you! John aside Hang in there, John.. Handling the html conundrum and making content readable and legible on landing is not a rocket-science and an advanced degree in physics is not needed to make it happen on the Web. Best, David Laakso -- Chelsea Creek Studio http://ccstudi.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] what should go in html{ } ?
At 14:28 -0400 6/27/13, Chris Williams wrote: Pfffttt Semantics. It's actually not just semantics, so the dismissive tone is misplaced. Inherited values have a different place in the cascade than do directly-assigned values, regardless of whether they come from the author, the reader, or the user agent (browser). Inherited values have no specificity-- not zero, none at all. Assigned values always have some level of specificity. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.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] what should go in html{ } ?
Show me, with an example, a concrete difference in the behavior. On 6/27/13 1:51 PM, Eric A. Meyer e...@meyerweb.com wrote: It's actually not just semantics, so the dismissive tone is misplaced. Inherited values have a different place in the cascade than do directly-assigned values, regardless of whether they come from the author, the reader, or the user agent (browser). Inherited values have no specificity-- not zero, none at all. Assigned values always have some level of specificity. __ 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/
