6

How can browsers understand the em unit when used in a responsive image?

<img alt="A giraffe" src="giraffe.jpg"
     srcset="giraffe@1.5x.jpg 600w, giraffe@2x.jpg 800w, [etc.]"
     sizes="(max-width: 40em) 40em">

This validates, and I'm not seeing warnings in browser consoles. But if the whole point of the image preloader is to fetch images before the CSS is downloaded and parsed, what does the browser use for em?

Is it just its default font-size that it applies to <html>? Should I use rem for clarity? Is there a difference between the two when the user zooms?

This isn't theoretical; I'm using em in my media query breakpoints, and some images are constrained by a container sized for optimal line length (using em, of course).

I checked the spec, but it's remarkably terse on the new responsive image features.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Tigt
  • 1,330
  • 2
  • 19
  • 40

2 Answers2

6

I bent the ears of the guys inside the official W3C #respimg chatroom, and this is what they had to say:

<Tigt> Pardon me folks, I had a question about how em is interpreted when used inside sizes
<TabAtkins> Tigt: Same as in Media Queries - they're relative to the initial font size.
<TabAtkins> (Not the font size on <html>, the initial font size, as set by the user's personal settings.)

<Wilto> 16px almost everywhere, so long as you haven’t changed the font-size of html.
<TabAtkins> Tigt: rem is treated identical to em here.

So the speed-read is:

  • When used in sizes or media queries, em and rem are both specced to mean "the user's default font-size.
  • The actual em or rem that controls how the image is laid out on the page can end up different if your CSS changes it
  • This means one should not change the default size of em if they want to give the image preloader truthful information

W3C Media Queries:

This media query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.

 @media handheld and (min-width: 20em), screen and (min-width: 20em) { … }

The ‘em’ value is relative to the initial value of ‘font-size’.

Tigt
  • 1,330
  • 2
  • 19
  • 40
  • 1
    @humble.rumble: Well it seems you haven't understood the specific question. And the default fontsize on Mac and Windows for Safari/Chrome/Firefox and even IE is 16px if you don't change it in your configuration. – alexander farkas Jun 08 '15 at 17:38
  • 2
    that's rough for me as I'm setting the `font-size` of the `html` at larger window sizes in order to scale everything up :( – raglan Apr 29 '16 at 17:39
  • What do you mean by "one should not change the default size of `em`"? Do you mean in the browser's preferences, or by setting `html { font-size: ... }`? – Flimm May 10 '16 at 10:09
  • @Flimm Something like `html { font-size: 16px }`, yes (since [browsers do change their default to something other than 16](https://nicolas-hoizey.com/2016/03/people-don-t-change-the-default-16px-font-size-in-their-browser.html#default-font-size-in-browsers-is-always-16px)) – Tigt May 10 '16 at 14:40
-1

5.1.1. Font-relative lengths: the ‘em’, ‘ex’, ‘ch’, ‘rem’ units

Aside from ‘rem’ (which refers to the font-size of the root element), the font-relative lengths refer to the 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.
http://www.w3.org/TR/css3-values/#font-relative-lengths

em css units are equal to the font size of the current element. The font-size property is inherited. Therefore the element (img in this case) will be sized according to 40 times the font-size property. If the user zooms the page (which increases the font size) the em unit's update to that of the font-size property automatically.

The base font size will be determined by the browser, if the browser is running on windows on mac and the user has not changed the font size then base font size will be 16px (usually). On Linux, BSD or any other system the font size will be set by the desktop environment and can vary.

So while conservatively you could assume that the font size is 16px, in a lot of cases you would be wrong.

  • 2
    Right, but what does the browser preloader do without the CSS to inform what `em` turns out to be? – Tigt Jun 04 '15 at 20:19
  • Oh, absolutely, I understand how the image is eventually sized. But when the browser preloader has to guess at how big the image will be, given only the `sizes` attribute and none of the CSS that hasn't been processed into a render tree yet, is there a specced value for `em`? – Tigt Jun 04 '15 at 22:37
  • Do you have a test case somewhere to check the computed value with different browsers and root font size settings? – Nicolas Hoizey May 11 '16 at 09:52