Re: [css-d] is use of rem bad?

[John J]

​Holy Cow!  I went to the validator link below, threw in the same URL,
expanded the triangle (already was at CSS3) and got no ( 0 ) errors!

what makes this really amazing is that my chair time for coding has fallen
WAY off...get maybe couple hours/week...been a year or two since I did it
every day, diligently..

I wish I could remember what I did which produced 154 rem-based errors, but
they appear to be non-existent.

Thank you​



> The default configuration of the CSS validator should handle the `rem`
> unit without any problems (other wise, make sure “CSS Level 3” is selected
> under the “more options” disclosure triangle thingie).
> http://jigsaw.w3.org/css-validator/
> On Wed, Jul 20, 2016 at 7:01 PM, Philippe Wittenbergh 
> wrote:
> > On Jul 21, 2016, at 2:05 AM, John J  wrote:
> >
> > Working on my code, I decided to see what they CSS validator had to say
> > about it, and it threw out 154 errors, most of which were about rem as my
> > value of measure for things like padding, type, borders, margin.
> >
> > I am using rem on advice of a developer who said that a certain pinhead,
> > un-named browser needs it; other browsers can use/deal with it too.
> >
> > Yet the validator threw a hissy..Should I abandon all efforts to support
> > arcane versions of this browser, and stick only with em?
> The default configuration of the CSS validator should handle the `rem`
> unit without any problems (other wise, make sure “CSS Level 3” is selected
> under the “more options” disclosure triangle thingie).
> http://jigsaw.w3.org/css-validator/
> I use rem units all the time for everything and more without trouble. All
> modern browsers handle this unit correctly. If you need support for IE 8 –
> which doesn’t support the `rem` unit, then what Tom says…
> (and note to Karl: no, just blindly replacing `rem` with `em` is _not_ the
> way to go. The computed value of something specified with the rem unit is
> based on the computed value of the font-size as set on the root element.
> For the `em unit` it is based on the font-size of the element itself.)
>
> 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] is use of rem bad?

[Karl DeSaulniers]

Ok, gotcha!
In my experience, em plays the same part as percent with regards to height, 
width, margins and padding etc.
So I usually stick to percent on those. If I need a defined size, I just use px 
such as min-width or padding.

For my fonts, I use 100% body and em everywhere else with minor px settings for 
consistency on some input elements and such or on purpose. 
Makes for a good "responsive" setup I have found.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 21, 2016, at 2:01 AM, Philippe Wittenbergh  wrote:
> 
> 
> Oh, sure, that is inheritance at work. For any other property that accepts a 
> ``, if it is expressed using the `em` unit, it will depend on the 
> computed value of the element itself.
> 
> That means (to come back to the rem vs em topic) that the resulting value for 
> padding, border, margin, background-position, etc are depending on the 
> nesting inside the document tree if using `em` units. The `rem` unit avoids 
> that.
> 
> 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] is use of rem bad?

[Philippe Wittenbergh]

> On Jul 21, 2016, at 1:38 PM, Karl DeSaulniers  wrote:
> 
> Same link you gave had this below what your were referencing.
> 
> [quote]
> 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).
> [/quote]

Oh, sure, that is inheritance at work. For any other property that accepts a 
``, if it is expressed using the `em` unit, it will depend on the 
computed value of the element itself.

That means (to come back to the rem vs em topic) that the resulting value for 
padding, border, margin, background-position, etc are depending on the nesting 
inside the document tree if using `em` units. The `rem` unit avoids that.

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] is use of rem bad?

[Karl DeSaulniers]

Yes?
Same link you gave had this below what your were referencing.

[quote]
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).
[/quote]
 

For example:

http://www.w3.org/1999/xhtml;>

Untitled Document





em




em



em




em





Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 20, 2016, at 10:29 PM, Philippe Wittenbergh  wrote:
> 
> 
>> On Jul 21, 2016, at 12:17 PM, Karl DeSaulniers  wrote:
>> 
>> That is incorrect I believe. FWIU Em is based off of the first parent 
>> element to declare a 'px' based declaration of same type. 
> 
> no.
> 
> http://www.w3.org/TR/css-values/#font-relative-lengths
> 
> [quote]
> 
> em unit
> Equal to the computed value of the font-size property of the element on which 
> it is used.
> 
> [/unquote]
> 
> 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] is use of rem bad?

[Philippe Wittenbergh]

> On Jul 21, 2016, at 12:17 PM, Karl DeSaulniers  wrote:
> 
> That is incorrect I believe. FWIU Em is based off of the first parent element 
> to declare a 'px' based declaration of same type. 

no.

http://www.w3.org/TR/css-values/#font-relative-lengths

[quote]

em unit
Equal to the computed value of the font-size property of the element on which 
it is used.

[/unquote]

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] is use of rem bad?

[Karl DeSaulniers]

That is incorrect I believe. FWIU Em is based off of the first parent element 
to declare a 'px' based declaration of same type. 
font-size
width
padding
etc..

Otherwise it is set by the body and default browser px size. Same with percent. 

You are correct however, you can't just blindly convert rem to em.
My apologies. I was thinking of percent to em and back. 
You can convert those with no problems. 

I never use rem, so probably shouldn't have shared.. :(
sry..

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 20, 2016, at 9:01 PM, Philippe Wittenbergh  wrote:
> 
> For the `em unit` it is based on the font-size of the element itself.

__
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] is use of rem bad?

[Philippe Wittenbergh]

> On Jul 21, 2016, at 2:05 AM, John J  wrote:
> 
> Working on my code, I decided to see what they CSS validator had to say
> about it, and it threw out 154 errors, most of which were about rem as my
> value of measure for things like padding, type, borders, margin.
> 
> I am using rem on advice of a developer who said that a certain pinhead,
> un-named browser needs it; other browsers can use/deal with it too.
> 
> Yet the validator threw a hissy..Should I abandon all efforts to support
> arcane versions of this browser, and stick only with em?

The default configuration of the CSS validator should handle the `rem` unit 
without any problems (other wise, make sure “CSS Level 3” is selected under the 
“more options” disclosure triangle thingie).

http://jigsaw.w3.org/css-validator/

I use rem units all the time for everything and more without trouble. All 
modern browsers handle this unit correctly. If you need support for IE 8 – 
which doesn’t support the `rem` unit, then what Tom says…

(and note to Karl: no, just blindly replacing `rem` with `em` is _not_ the way 
to go. The computed value of something specified with the rem unit is based on 
the computed value of the font-size as set on the root element. For the `em 
unit` it is based on the font-size of the element itself.)


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] is use of rem bad?

[Karl DeSaulniers]

I would just convert to em and not rem and move on. Validator should be fine 
with em. If not, em can be converted to percent and do the same I believe. I 
usually use percent and em on fonts. 

Hth,
Best,
Karl

Sent from losPhone

> On Jul 20, 2016, at 12:05 PM, John J  wrote:
> 
> Working on my code, I decided to see what they CSS validator had to say
> about it, and it threw out 154 errors, most of which were about rem as my
> value of measure for things like padding, type, borders, margin.
> 
> I am using rem on advice of a developer who said that a certain pinhead,
> un-named browser needs it; other browsers can use/deal with it too.
> 
> Yet the validator threw a hissy..Should I abandon all efforts to support
> arcane versions of this browser, and stick only with em?
> 
> Thank you!
> 
> 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/
__
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] is use of rem bad?

[Tom Livingston]

On Wed, Jul 20, 2016 at 1:05 PM, John J  wrote:

> Working on my code, I decided to see what they CSS validator had to say
> about it, and it threw out 154 errors, most of which were about rem as my
> value of measure for things like padding, type, borders, margin.
>
> I am using rem on advice of a developer who said that a certain pinhead,
> un-named browser needs it; other browsers can use/deal with it too.
>
> Yet the validator threw a hissy..Should I abandon all efforts to support
> arcane versions of this browser, and stick only with em?
>
> Thank you!
>
> John



While I haven't used rem for padding or margin myself (as far as I can
remember), I usually use rem on all new projects going forward. I do
provide a fallback of px, however, for support of those browsers who need
it (though I may stop doing that as well soon). I use Sass (.scss) and have
a nice mixin for this:

@mixin font-size($size) {
font-size:$size;
font-size: ($size / 16px) * 1rem;
}

and in my scss file, I use it like this:

@include font-size(13px);

which compiles to this:

font-size: 13px;
font-size: .813rem;

The validator isn't always right for html5. I'd have to see the error and
evaluate it.

HTH


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


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