CSS Data Types. One of Those Things You Have To Know

Size: px

Start display at page:

Download "CSS Data Types. One of Those Things You Have To Know"

Allison Edwards
5 years ago
Views:

1 CSS Data Types One of Those Things You Have To Know R. Scott Granneman r Jans Carton R. Scott Granneman Last updated You are free to use this work, with certain restrictions. For full licensing information, please see the last slide/page.

2 Notes & URLs for this presentation can be found» underneath the link to this slide show on granneman.com» at files.granneman.com/presentations/webdev/css- Data-Types.txt

3 Defined

4 What s a data type? A way to classify various kinds of data that are allowed as values for CSS properties

5 <angle> <gradient> <shape-box> <basic-shape> <blend-mode> <image> <integer> <filterfunction> <flex> <frequency> <single- <color> <length> <string> <custom-ident> <number> <time> <percentage> <position> <ratio> <resolution> transition- timing-function> <transformfunction> <url> <user-ident>

6 Text

7 <string> <url> <custom-ident> <user-ident>

8 <string> Represents a quoted string of Unicode characters Covered earlier in CSS Selectors

9 <url> Represents a pointer to a web resource (e.g., image or font) Covered later in Styling Shapes Was <url>*, then <uri>**, but now back to <url>*** (to stay, hopefully!) *** CSS 1 *** CSS 2.1 *** CSS Values and Units Module 3

10 Used in many CSS properties, such as backgroundimage, cursor, & list-style

11 <custom-ident> An arbitrary, user-defined, case-sensitive string used as an identifier For example: counter-reset: <custom-ident>; counter-reset: chapter;

$Other ASCII characters if escaped with \; e.g.$ $, \+» Unicode characters with a \ followed by 1 6$

12 <custom-ident> may contain any» A Z or a z» 0 9» - &_» Other ASCII characters if escaped with \; e.g., \+» Unicode characters with a \ followed by 1 6 hexadecimal digits (0 F) representing the Unicode code point; e.g., \238B or \1F4A9

13 <custom-ident> no-no s» Cannot be placed inside " " or ' ' (or it would be a <string>)» Cannot start with 0 9, nor - followed by 0 9 (e.g.,-5), nor --» Cannot use CSS keywords (e.g., inherit, initial, unset, none, span, auto, default)

14 <user-ident>

15 Numeric

16 <integer> <number> <percentage>

17 <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

18 Valid Invalid Only 1 + or - -7 \37 Escaped Unicode 0 七 Non-Arabic Seven

19 <integer> Y Y

20 <number> Represents a number, either <integer> or fractional No units after <number>!

21 Valid Invalid Only 1 + or Only e+03 No e notation

22 <number> < Y Y

23 <percentage> Represents a percentage: a <number> immediately followed by %

24 <percentage> < Y Y

25 Distance

26 <length>

27 <length> Represents distance measurements: a <number> immediately followed by a unit Units» Absolute» Font-relative» Viewport-percentage

28 Pixel means picture element Pixels are not just for computers!

29 The basic unit of an electronic display is a pixel All length measurements eventually get counted in pixels

30 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

31 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

32 Absolute

33 px mm cm in pt pc

34 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)

35 Font-Relative

36 em ex ch rem

37 em Represents the calculated font-size of an element 1 em is the height of a font

39 rem Represents the font-size of the root element (<html>) Great for creating perfectly scalable layouts

41 em ex ch ? rem

42 Images

43 <color> <gradient> <image> <shape> <basic-shape> <filter-function> <blend-mode>

44 <color> Represents a color in the srgb color space

45 Ways to describe colors» keyword»#hex» rgb()» rgba()» hsl()» hsla() More info when we get to Fonts & Formatting

46 keywords #RRGGBB #RGB rgb() hsl() rgba() hsla() transparent ?? currentcolor ??

47 <gradient> Represents a CSS <image> made from a progressive transition between two or more colors Covered later in Styling Shapes

48 <image> Represents a 2D image, either static (<url>) or dynamically generated (<gradient>) Covered later in Styling Shapes

49 <shape> <basic-shape> Represents a rectangular region to which the clip property is applied Covered later in CSS Animation & Transformation

50 <blend-mode> Method for blending overlapping images or colors (as in Photoshop or Illustrator)

51 color hard-light overlay color-burn hue saturation color-dodge lighten screen darken luminosity soft-light difference multiply exclusion normal

52 <blend-mode> 7.1* * * Doesn t support hue, saturation, color, & luminosity blend modes

53 Media Queries

54 <ratio> <resolution>

55 <ratio> Represents aspect ratios (proportions) in media queries: a positive <integer>, followed by /, followed by a positive <integer> No units!

56 Examples 4/3: traditional TV 16/9: widescreen TV 185/100: traditional movies 239/100: widescreen movies

57 <ratio> 9 1 <4 3.5 Y Y

58 <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

59 <resolution> 9 * * * dppx? * * Requires the non-standard device-pixel-ratio query

60 Animation & Transformation

61 <time> <timing-function> <single-transition-timing-function> <transform-function> <angle>

62 <time> Represents time, which keeps on slipping into the future Covered later in CSS Animation & Transformation

63 <timing-function> <single-transition-timing-function> Represents speed of change over time during animations & transitions Covered later in CSS Animation & Transformation

64 <transform-function>

65 <angle> Represents angle values Covered later in CSS Animation & Transformation

66 Grid

67 <flex>

68 <flex> Specifies a flexible length (a fraction) within a grid container Given as a <number> followed by the unit fr; e.g., 3fr Covered later in CSS Layout

69 Frequency

70 <frequency>

71 <frequency> Represents a frequency dimension, like the pitch of a speaking voice <number> immediately followed by a unit Units» Hz: Hertz» khz: kilohertz

72 <frequency>

73 Thank you! websanity.com

74 CSS Data Types One of Those Things You Just Have To Know R. Scott Granneman r Jans Carton R. Scott Granneman Last updated You are free to use this work, with certain restrictions. For full licensing information, please see the last slide/page.

75 Changelog : Updated compatibility tables for <blend-mode>; updated theme to Granneman 1.4; fixed minor formatting issues; updated list of data types; reorganized everything; added more to <url>; added section on <custom-ident> : Added screenshots for em & rem : Added <integer> to list : Included browser support for <color>

76 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 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 scott@granneman.com 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? scott@granneman.com

CSS for Designers. Capabilities to Know & Pitfalls to Avoid. R. Scott Granneman. Jans Carton

CSS for Designers. Capabilities to Know & Pitfalls to Avoid. R. Scott Granneman. Jans Carton CSS for Designers Capabilities to Know & Pitfalls to Avoid R. Scott Granneman Jans Carton 1.1 2009 R. Scott Granneman Last updated 2015-01-16 You are free to use this work, with certain restrictions. For