Re: [css-d] what should go in html{ } ?

2013-06-26 Thread Philippe Wittenbergh 

Le 27 juin 2013 à 15:27, "Jukka K. Korpela"  a écrit :

>>> Technically, if you wish to have such settings as a global default for your 
>>> pages, setting them on  rather than  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-26 Thread Jukka K. Korpela 

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  rather than  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  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{ } ?

2013-06-26 Thread Philippe Wittenbergh 

Le 27 juin 2013 à 14:42, "Jukka K. Korpela"  a écrit :

> You could set e.g. font properties here, and they would be inherited by 
>  unless font properties are set directly on it. But what would be the 
> point? It is simpler to set them directly on . 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 , it is transparent (the initial 
> value), so the background for  "shines thru". But again, it is simpler 
> to just set background on .

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  rather than  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-26 Thread Jukka K. Korpela 

2013-06-27 0:29, COM wrote:


my css all begin like what's pasted below.


A somewhat odd piece of a stylesheet, but let's fovus on this pary:


I have no idea what things ought to be inside the html selector.


The  element consists of the  element and the  
element, and  normally does not cause any visible display (this 
can be changed with CSS to some extent, but there is hardly ever any 
reason to do so). However, it might have default margin or padding, so 
just to be sure, set them to zero so that they have no unexpected effect 
on the spacing you set for . Other than this, anything that you 
wish to set on the page as a whole can be set just on the  element 
directly.



*{
margin:0;
padding:0;
}


There are different opinions on "CSS resets" like the above. Removing 
_all_ margins and paddings means that you also remove default spacing 
between paragraphs, much of the default rendering of  and , 
default cell padding, etc., so there is a lot you *must* do to get a 
decent rendering. But as said, this is a hot topic. What matters here is 
that the rule sets margin and padding to zero for *all* elements.



html{
}


The only thing that you might find useful to set here is zeroing margin 
and padding, but the first rule already did this.


You could set e.g. font properties here, and they would be inherited by 
 unless font properties are set directly on it. But what would be 
the point? It is simpler to set them directly on . 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 , it is 
transparent (the initial value), so the background for  "shines 
thru". But again, it is simpler to just set background on .



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  rather than  is the way to go.


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{ } ?

2013-06-26 Thread Skye Estes 
John,

If you'd like to try a pre-made reset/template instead of starting from
scratch, there are several fantastic options to be found at
http://www.initializr.com

Aside from the CSS resets, they can include media queries, js snippets, and
other useful code to make your development easier.


///Skye

Behance  // Dribbble 
 // @SkyeX 


On Wed, Jun 26, 2013 at 2:57 PM, Ben Henick  wrote:

>
> On 6/26/13 4: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?
>>
>
> IIRC...
>
> html { padding: 0; }
>
> exclusively yields the same result in Presto (Opera, for now) that
>
> body { margin: 0; }
>
> does in other browsers.
>
> I engage in overkill and set
>
> html,body { margin: 0; padding 0; }
>
> when I need that result.
>
> I agree with the other posters that you should take a gander at the
> popular resets and decide if there's anything in them that works for you.
>
>
> --
> Ben Henick  lurker...@henick.net
> Sitebuilder At-Larget:@bhenick
> +1 785 856 1863
>
> __**__**__
> 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-26 Thread Ben Henick 


On 6/26/13 4: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?


IIRC...

html { padding: 0; }

exclusively yields the same result in Presto (Opera, for now) that

body { margin: 0; }

does in other browsers.

I engage in overkill and set

html,body { margin: 0; padding 0; }

when I need that result.

I agree with the other posters that you should take a gander at the 
popular resets and decide if there's anything in them that works for you.



--
Ben Henick  lurker...@henick.net
Sitebuilder At-Larget:@bhenick
+1 785 856 1863
__
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-26 Thread Chris Rockwell 
They resets mentioned are common but you don't have to include the
declaration if it doesn't help you.
On Jun 26, 2013 5: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?
>
> Thank you!
>
> John
>
>
>
> *{
> margin:0;
> padding:0;
> }
> html{
> }
> body{
> font-size:16px;
> color:rgb(0,0,0);
> font-family:helvetica-neue, Verdana, Arial, sans-serif;
> }
>
> __
> 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-26 Thread Tom Livingston 
On Wed, Jun 26, 2013 at 5: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?
>
> Thank you!
>
> John
>
>
>
> *{
> margin:0;
> padding:0;
> }
> html{
> }
> body{
> font-size:16px;
> color:rgb(0,0,0);
> font-family:helvetica-neue, Verdana, Arial, sans-serif;
> }
>


The Normalize reset includes the following:

html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}

Meyer Reset may be different.


http://necolas.github.io/normalize.css/

http://meyerweb.com/eric/tools/css/reset/


HTH





--

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] what should go in html{ } ?

2013-06-26 Thread COM 
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



*{
margin:0;
padding:0;
}
html{
}
body{
font-size:16px;
color:rgb(0,0,0);
font-family:helvetica-neue, Verdana, Arial, sans-serif;
}

__
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/