Scribd
Upload
2 views

CSS Data Types

The document provides an overview of CSS data types, categorizing various data classifications such as <angle>, <length>, <color>, and <percentage> that are used in CSS properties. It explains the significance of each type, including their valid and invalid representations, and discusses the evolution of pixel measurements in CSS for different display resolutions. Additionally, it covers licensing information and offers resources for further learning about CSS data types.

Uploaded by

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

CSS Data Types

The document provides an overview of CSS data types, categorizing various data classifications such as <angle>, <length>, <color>, and <percentage> that are used in CSS properties. It explains the significance of each type, including their valid and invalid representations, and discusses the evolution of pixel measurements in CSS for different display resolutions. Additionally, it covers licensing information and offers resources for further learning about CSS data types.

Uploaded by

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

CSS Data Types

One of Those Things You Have To Know

R. Scott Granneman

Jans Carton

© 2013 R. Scott Granneman


Last updated 2105-01-24
You are free to use this work, with certain restrictions.
1.3 For full licensing information, please see the last slide/page.
Notes & URLs for this presentation can be found…

» underneath the link to this slide on granneman.com


» at files.granneman.com/presentations/webdev/CSS-
Data-Types.txt
Basics
What’s a data type?

A way to classify various kinds of data that are allowed


as values for CSS properties
<angle> <length> <string>

<blend-mode> <number> <time>

<color> <percentage> <timing-function>

<frequency> <position> <uri>

<gradient> <ratio> <user-ident>

<image> <resolution>

<integer> <shape>
Images
<url>

<gradient>

<image>
<url>

Represents a pointer to a web resource

Covered later in Styling Shapes


<gradient>

Represents a CSS <image> made from a progressive


transition between two or more colors

Covered later in Styling Shapes


<image>

Represents a 2D image, either static (<url>) or


dynamically generated (<gradient>)

Covered later in Styling Shapes


Text
<string>

Represents a quoted string of Unicode characters

Covered earlier in CSS Selectors


Wide Usage
<integer>

<number>

<percentage>

<length>

<color>
<integer>

Represents a positive or negative integer number: 1 or


several decimal digits (0 to 9), optionally preceded by a
single + or −

No units after <integer>!

All <integer>s are <number>s, but not all <number>s


are <integer>s
Valid Invalid
7 7.0
+7 +-7 Only 1 + or -
-7 \37 Escaped Unicode
0 七 Non-Arabic
Seven
<integer> 3 1 1 1 Y Y
<number>

Represents a number, either <integer> or fractional

No units after <number>!


Valid Invalid
7 7.
7.7 +-7.7 Only 1 + or -
+7.7 7.7.7 Only 1 .
-7.7 7e+03 No e notation
0
0.77
<number> <5 1 1 1 Y Y
<percentage>

Represents a percentage: a <number> immediately


followed by %
<percentage> <5 1 1 1 Y Y
<length>

Represents distance measurements: a <number>


immediately followed by a unit

Units
» Absolute
» Font-relative
» Viewport-percentage
Pixel means
picture element

Pixels are not


just for computers!
The basic unit of an electronic display is a pixel

All length measurements eventually get counted in


pixels
For years, computer pixels were all 1/72 of an inch

Apple introduced the first high resolution devices that


have much smaller pixels (300+ in an inch!)

The size of pixels in modern high resolution devices


varies hugely

Thanks to these 2 changes, the size of a pixel in CSS had


to be redefined
For good old “standard resolution” displays, a pixel is
(still a device pixel, which is) 1/72 inch

For high resolution displays (& other high resolution


media like print) a CSS pixel is now about 1/96 inch

So now it may take several device pixels to equal 1 CSS


pixel
Absolute
px

mm

cm

in

pt

pc
in = 96px (about an inch)

cm = 37.8px (about a centimeter)

mm = 3.78px (about a millimeter)

pt = 1.33px (about a point, or 1/72 inch)

pc = 16px (about a pica, or 1/6 inch)


Font-Relative
em

ex

ch

rem
em

Represents the calculated font-size of an element

1 em is the height of a font


rem

Represents the font-size of the root element (<html>)

Great for creating perfectly scalable layouts


em 5.5 1 1 1 1 1

ex 5.5 1 1 1 1 1

ch 9 — 27 1 — ?

rem 9 4.1 4 3.6 2.1 4


<color>

Represents a color in the sRGB color space


Ways to describe colors

» keyword
» #hex
» rgb()
» rgba()
» hsl()
» hsla()

More info when we get to Fonts & Formatting


keywords 3 1 1 1 1 1
#RRGGBB
3 1 1 1 1 1
#RGB
rgb() 4 1 1 1 1 1
hsl() 9 3.1 1 1 2.3 5.1
rgba() 9 3.1 1 3 2.3 5.1
hsla() 9 3.1 1 3 2.3 5.1
transparent 9 3.1 1 3 ? ?
currentColor 9 4 1 1.5 ? ?
Media
Queries
<ratio>

<resolution>
<ratio>

Represents aspect ratios (proportions) in media


queries: a positive <integer>, followed by /, followed
by a positive <integer>

No units!
Examples

4/3: traditional TV

16/9: widescreen TV

185/100: traditional movies

239/100: widescreen movies


<ratio> 9 1 <4 3.5 Y Y
<resolution>

Represents the resolution of a device: its density of


pixels, expressed as a <number> immediately followed
by a unit of resolution

Units
» dpi: dots per inch
» dpcm: dots per centimeter
» dppx: dots per px unit
<resolution> 9 —* 29 3.5 —* —*

dppx ? — 29 16 — —*

* Requires the non-standard device-pixel-ratio query


Animation &
Transformation
<shape>

<time>

<timing-function>

<angle>
<shape>

Represents a rectangular region to which the clip


property is applied

Covered later in CSS Animation & Transformation


<time>

Represents time, which keeps on slipping into the


future

Covered later in CSS Animation & Transformation


<timing-function>

Represents speed of change over time during


animations & transitions

Covered later in CSS Animation & Transformation


<angle>

Represents angle values

Covered later in CSS Animation & Transformation


Future
<blend-mode>

<frequency>
<blend-mode>

Method for blending overlapping images or colors (as


in Photoshop or Illustrator)

Not yet supported


color hard-light overlay

color-burn hue saturation

color-dodge lighten screen

darken luminosity soft-light

difference multiply

exclusion normal
<blend-mode>
<frequency>

Represents a frequency dimension, like the pitch of a


speaking voice

<number> immediately followed by a unit

Units
» Hz: Hertz
» kHz: kilohertz
<frequency> — — — — — —
Thank you!

[email protected]
www.granneman.com
ChainsawOnATireSwing.com
@scottgranneman

[email protected]
websanity.com
CSS Data Types
One of Those Things You Just Have To Know

R. Scott Granneman

Jans Carton

© 2014 R. Scott Granneman


Last updated 2105-01-24
You are free to use this work, with certain restrictions.
1.3 For full licensing information, please see the last slide/page.
Changelog

2015-01-24 1.3: Added screenshots for em & rem


2014-10-20 1.2: Added <integer> to list
2014-08-06 1.1: Included browser support for
<color>
Licensing of this work
This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.

To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/.

You are free to:

» Share — copy and redistribute the material in any medium or format


» Adapt — remix, transform, and build upon the material for any purpose, even commercially

Under the following terms:

Attribution. You must give appropriate credit, provide a link to the license, and indicate if changes were
made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you
or your use. Give credit to:

Scott Granneman • www.granneman.com • [email protected]

Share Alike. If you remix, transform, or build upon the material, you must distribute your contributions
under the same license as the original.

No additional restrictions. You may not apply legal terms or technological measures that legally restrict
others from doing anything the license permits.

Questions? Email [email protected]

You might also like