| Date post: | 16-May-2018 |
| Category: |
Documents |
| Upload: | vuongnguyet |
| View: | 214 times |
| Download: | 1 times |
CSS Data TypesOne of Those Things You Have To Know
© 2013 R. Scott GrannemanLast updated 2105-01-24
You are free to use this work, with certain restrictions.For full licensing information, please see the last slide/page.
R. Scott Granneman
Jans Carton
1.3
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>
<blend-mode>
<color>
<frequency>
<gradient>
<image>
<integer>
<length>
<number>
<percentage>
<position>
<ratio>
<resolution>
<shape>
<string>
<time>
<timing-function>
<uri>
<user-ident>
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
-7 \37
0 七
Seven
Only 1 + or -
Escaped Unicode
Non-Arabic
<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
+7.7 7.7.7
-7.7 7e+03
0
0.77
Only 1 + or -
Only 1 .
No e notation
<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
#RGB3 1 1 1 1 1
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
color-burn
color-dodge
darken
difference
exclusion
hard-light
hue
lighten
luminosity
multiply
normal
overlay
saturation
screen
soft-light
<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 TypesOne of Those Things You Just Have To Know
© 2014 R. Scott GrannemanLast updated 2105-01-24
You are free to use this work, with certain restrictions.For full licensing information, please see the last slide/page.
R. Scott Granneman
Jans Carton
1.3
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]
