Scribd
Upload
0 views

CSS Units WebKit

The document discusses the misconceptions surrounding CSS units, particularly the relationship between CSS pixels and device pixels. It explains that CSS pixels do not always equal device pixels, especially when zooming or printing, and highlights the confusion between absolute units like pt and px. The author emphasizes the importance of understanding these units for effective web design and the implications of using em and ex units for text scaling in browsers.

Uploaded by

480
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

CSS Units WebKit

The document discusses the misconceptions surrounding CSS units, particularly the relationship between CSS pixels and device pixels. It explains that CSS pixels do not always equal device pixels, especially when zooming or printing, and highlights the confusion between absolute units like pt and px. The author emphasizes the importance of understanding these units for effective web design and the implications of using em and ex units for text scaling in browsers.

Uploaded by

480
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

CSS Units | WebKit about:reader?url=https%3A%2F%2Fwebkit.org%2Fblog%2F57%2Fc...

webkit.org

CSS Units

Apr 23, 2006 by Dave Hyatt @hyatt_dave


3-4 minutos

I figured I’d take another stab at educating people about CSS units.
In the responses both on this blog (and on Slashdot), some people argued with
the high DPI proposal saying “A pixel is just a pixel! Making a CSS pixel !=
screen pixel is a bad idea!” Those of you who think this way have a fundamental
misunderstanding regarding how the Web works even today. It is already true
that a CSS pixel does not necessarily equal a device pixel, and there’s nothing
wrong with doing this. It doesn’t mess up your Web site. You don’t even have to
think about it if you don’t want to.
For example, whenever you zoom in a browser that supports it (like Opera), a
CSS pixel won’t equal a screen pixel. Nor should it, since otherwise the zooming
wouldn’t be possible. The zooming, done well, doesn’t hurt your Web site or
disrupt its layout in any way, since everything zooms together. The high DPI
proposal I outlined earlier is about defining how a Web site can intelligently
reveal higher levels of detail when zoomed rather than just scaling up the exact
same content.
Another example of where high DPI already comes into play is with printers.
Printers can have very high DPI, and if you made a CSS pixel = a device pixel,
your Web site when printed would be so tiny that you wouldn’t even be able to
read it. Pixel scaling is already done at the printing level.
In addition to being muddled about the px unit, some people were confused
about the so-called absolute units. These include units like pt or cm. These units
actually aren’t absolute. The absolute unit is a myth.
The sad truth is that designers never really understood the difference between
pt and px. Many Web sites even today mix those units in the same Web page.
Not only do they assume that pt and px are close to one another in size, they
actually mingle these units assuming that the ratio between these two units will
be constant across all browsers and devices. Any browser that truly attempted
to treat pt as 1/72nd of a physical inch would just end up mis-rendering Web
sites.
This is why browsers use the 96 dpi rule when deciding how all of the absolute
units relate to the CSS pixel. When evaluating the size of absolute units like pt
browsers simply assume that the device is running at 96 CSS pixels per inch.
This means that a pt ends up being 1.33 CSS pixels, since 96/72 = 1.33. You
can’t actually use the physical DPI of the device because it could make the Web
site look horribly wrong.
The other units worth discussing are em and ex. These units are interesting to
use primarily because of the text zoom feature of Web browsers. Because some
browsers (like Safari and Firefox) just zoom text without zooming other content,
expressing everything in these units can give you a way of having content other
than text also scale with the font size.

1 de 2 11/04/2024, 01:57
CSS Units | WebKit about:reader?url=https%3A%2F%2Fwebkit.org%2Fblog%2F57%2Fc...

2 de 2 11/04/2024, 01:57

You might also like