CSS
http://blog.csdn.net/yourtommy/article/details/7562945
Basic
CSS表示Cascading Style Sheets，用于定制HTML的外观。
CSS的语法为：选择器 {属性1:属性值1;属性2:属性值2;}，例如：p {color:red;text-align:center;}。
除了把HTML元素作为选择器, CSS还允许定义"id"和"class"选择器。id选择器应用于单个元素，例如#myid {color:red;}，它会自动应用到id为myid的元素；而class选择器应用于一组元素，例如.myclass {color:red;}。应用class选择器时指定元素的class属性，比如：<p class="myclass">。id和class选择器都可以限定于一种元素，比如p#myid {color:red}和p.class {color:red}只能应用在<p>元素上。
插入CSS有三种方式：
外部CSS：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部CSS：
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联CSS：
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
当多种CSS应用到同一元素上时，优先级为内联CSS > 内部CSS > 外部CSS > 浏览器默认。
CSS3分为多个模块，一些重要的模块有：
-
Selectors
-
Box Model
-
Backgrounds and Borders
-
Text Effects
-
2D/3D Transformations
-
Animations
-
Multiple Column Layout
-
User Interface
CSS基础样式
Border
| Property | Description |
|---|---|
| border | Sets all the border properties in one declaration |
| border-bottom | Sets all the bottom border properties in one declaration |
| border-bottom-color | Sets the color of the bottom border |
| border-bottom-style | Sets the style of the bottom border |
| border-bottom-width | Sets the width of the bottom border |
| border-color | Sets the color of the four borders |
| border-left | Sets all the left border properties in one declaration |
| border-left-color | Sets the color of the left border |
| border-left-style | Sets the style of the left border |
| border-left-width | Sets the width of the left border |
| border-right | Sets all the right border properties in one declaration |
| border-right-color | Sets the color of the right border |
| border-right-style | Sets the style of the right border |
| border-right-width | Sets the width of the right border |
| border-style | Sets the style of the four borders |
| border-top | Sets all the top border properties in one declaration |
| border-top-color | Sets the color of the top border |
| border-top-style | Sets the style of the top border |
| border-top-width | Sets the width of the top border |
| border-width | Sets the width of the four borders |
| Property | Description | Values | CSS |
|---|---|---|---|
| outline | Sets all the outline properties in one declaration | outline-color outline-style outline-width inherit |
2 |
| outline-color | Sets the color of an outline | color_name hex_number rgb_number invert inherit |
2 |
| outline-style | Sets the style of an outline | none dotted dashed solid double groove ridge inset outset inherit |
2 |
| outline-width | Sets the width of an outline | thin medium thick length inherit |
2 |
| Property | Description |
|---|---|
| margin | A shorthand property for setting the margin properties in one declaration |
| margin-bottom | Sets the bottom margin of an element |
| margin-left | Sets the left margin of an element |
| margin-right | Sets the right margin of an element |
| margin-top | Sets the top margin of an element |
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |
Background
| Property | Description |
|---|---|
| background | Sets all the background properties in one declaration |
| background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page |
| background-color | Sets the background color of an element |
| background-image | Sets the background image for an element |
| background-position | Sets the starting position of a background image |
| background-repeat | Sets how a background image will be repeated |
文字效果
| Property | Description |
|---|---|
| color | Sets the color of text |
| direction | Specifies the text direction/writing direction |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-height | Sets the line height |
| text-align | Specifies the horizontal alignment of text |
| text-decoration | Specifies the decoration added to text |
| text-indent | Specifies the indentation of the first line in a text-block |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | Controls the capitalization of text |
| unicode-bidi | |
| vertical-align | Sets the vertical alignment of an element |
| white-space | Specifies how white-space inside an element is handled |
| word-spacing | Increases or decreases the space between words in a text |
字体
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |
Link
-
a:link - a normal, unvisited link
-
a:visited - a link the user has visited
-
a:hover - a link when the user mouses over it
-
a:active - a link the moment it is clicked
例：
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
List
| list-style | Sets all the properties for a list in one declaration |
| list-style-image | Specifies an image as the list-item marker |
| list-style-position | Specifies if the list-item markers should appear inside or outside the content flow |
| list-style-type | Specifies the type of list-item marker |
list-style-type有circle、square、upper-roman、lower-alpha等。
Table
table, th, td
{
border: 1px solid black;
}
{
border: 1px solid black;
}
table
{
width:100%;
}
th
{
height:50px;
}
高级样式
Grouping Selectors
h1,h2,p
{
color:green;
}
{
color:green;
}
Nesting Selectors
<head><style type="text/css">
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
</style>
</head>
<body>
<p>This is a blue, center-aligned paragraph.</p>
<div class="marked">
<p>This p element should not be blue.</p>
</div>
Dimension
| Property | Description | Values | CSS |
|---|---|---|---|
| height | Sets the height of an element | auto length % inherit |
1 |
| max-height | Sets the maximum height of an element | none length % inherit |
2 |
| max-width | Sets the maximum width of an element | none length % inherit |
2 |
| min-height | Sets the minimum height of an element | length % inherit |
2 |
| min-width | Sets the minimum width of an element | length % inherit |
2 |
| width | Sets the width of an element | auto length % inherit |
1 |
Display and Visibility
visibility:hidden;
display:none;
display:inline;
display:block;
Positioning
Static Positioning：默认位置
Fixed Positioning：相对于浏览器窗口的位置，当滚动条滚动时，它的位置保持不变
p.pos_fixed{
position:fixed;
top:30px;
right:5px;
}
Relative Positioning：相对于它平常的位置
h2.pos_right{
position:relative;
left:20px;
}
h2.pos_top
{
position:relative;
top:-50px;
}
{
position:relative;
top:-50px;
}
Absolute Positioning：文档中的绝对位置
h2
{
position:absolute;
left:100px;
top:150px;
}
{
position:absolute;
left:100px;
top:150px;
}
Overlapping Elements：当元素重叠时，可以使用z-index来设置它的z轴顺序，可以是正值也可以是负值
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
Float
{
float:right;
}
其它元素可以清除左侧或右侧的浮动属性，从而不再包围浮动元素。
.text_line
{
clear:both;
}
{
clear:both;
}
Horizontal Align
Margin的例子：
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
pseudo-classes
语法：
selector:pseudo-class {property:value;}
或
selector.class:pseudo-class {property:value;}
例如：
a:visited {color:#00FF00;} /* visited link */
a.red:visited {color:#FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
<a class="red" href="css_syntax.asp">CSS Syntax</a>
element:first-child把样式应用在子元素里找到的第一个element上
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
p > i:first-child把样式应用在每个p元素里的第一个i元素
<style type="text/css">
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
p:first-child i把样式应用在第一个p元素的所有i元素上。
pseudo-elements
语法
selector:pseudo-element {property:value;}
或
selector.class:pseudo-element {property:value;}
:first-letter应用在文本的第一个字符上。
:first-line应用在文本的第一行上。
:before和:after分别在元素之前或之后加上一些内容
h1:before
{
content:url(smiley.gif);
}
{
content:url(smiley.gif);
}
所有的Pseudo Classes/Elements
| Selector | Example | Example description |
|---|---|---|
| :link | a:link | Selects all unvisited links |
| :visited | a:visited | Selects all visited links |
| :active | a:active | Selects the active link |
| :hover | a:hover | Selects links on mouse over |
| :focus | input:focus | Selects the input element which has focus |
| :first-letter | p:first-letter | Selects the first letter of every <p> element |
| :first-line | p:first-line | Selects the first line of every <p> element |
| :first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
| :before | p:before | Insert content before every <p> element |
| :after | p:after | Insert content after every <p> element |
| ) | p:lang(it) | Selects every <p> element with a lang attribute value starting with "it" |
图片
动态地改变图片的透明度：
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
显示图片的一部分：
img.next
{
width:43px;
height:44px;
background:url(img_navsprites.gif) -91px 0;
}
@media
对于不同的媒体，使用不同的样式：
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
| Media Type | Description |
|---|---|
| all | Used for all media type devices |
| aural | Used for speech and sound synthesizers |
| braille | Used for braille tactile feedback devices |
| embossed | Used for paged braille printers |
| handheld | Used for small or handheld devices |
| Used for printers | |
| projection | Used for projected presentations, like slides |
| screen | Used for computer screens |
| tty | Used for media using a fixed-pitch character grid, like teletypes and terminals |
| tv | Used for television-type devices |
Attribute Selector
根据元素的属性值应用样式。例：
<style type="text/css">
[title]
{
color:blue;
}
</style>
<h1 title="Hello world">Hello world</h1>
<p>Hello!</p>
[key=value]只在key的值等于value时才应用样式。
[key~=value]只在key的值不等于value时才应用样式。
CSS3新特性
Border
| Property | Description | CSS |
|---|---|---|
| border-image | A shorthand property for setting all the border-image-* properties | 3 |
| border-radius | A shorthand property for setting all the four border-*-radius properties | 3 |
| box-shadow | Attaches one or more drop-shadows to the box | 3 |
Background
| Property | Description | CSS |
|---|---|---|
| background-clip | Specifies the painting area of the background images | 3 |
| background-origin | Specifies the positioning area of the background images | 3 |
| background-size | Specifies the size of the background images | 3 |
文字效果
| Property | Description | CSS |
|---|---|---|
| hanging-punctuation | Specifies whether a punctuation character may be placed outside the line box | 3 |
| punctuation-trim | Specifies whether a punctuation character should be trimmed | 3 |
| text-align-last | Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify" | 3 |
| text-emphasis | Applies emphasis marks, and the foreground color of the emphasis marks, to the element's text | 3 |
| text-justify | Specifies the justification method used when text-align is "justify" | 3 |
| text-outline | Specifies a text outline | 3 |
| text-overflow | Specifies what should happen when text overflows the containing element | 3 |
| text-shadow | Adds shadow to text | 3 |
| text-wrap | Specifies line breaking rules for text | 3 |
| word-break | Specifies line breaking rules for non-CJK scripts | 3 |
| word-wrap | Allows long, unbreakable words to be broken and wrap to the next line | 3 |
字体
CSS3之前网页只能使用安装在本地的字体，在CSS3通过@font-face可以使用任何字体。
<style type="text/css">
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
@font-face的属性有：
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |
2D Transforms
CSS3引入了新的Transforms属性，可以对图形进行变换。| Property | Description | CSS |
|---|---|---|
| transform | Applies a 2D or 3D transformation to an element | 3 |
| transform-origin | Allows you to change the position on transformed elements | 3 |
该属性需要浏览器的前缀：
IE 9: -ms-
Safari/Chrome: -webkit-
Opera: -o-
Firefox: -moz-
Safari/Chrome: -webkit-
Opera: -o-
Firefox: -moz-
例：
div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}
支持的函数有：
| Function | Description |
|---|---|
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values |
| translate(x,y) | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX(angle) | Defines a 2D skew transformation along the X-axis |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis |
3D Transforms
| Property | Description | CSS |
|---|---|---|
| transform | Applies a 2D or 3D transformation to an element | 3 |
| transform-origin | Allows you to change the position on transformed elements | 3 |
| transform-style | Specifies how nested elements are rendered in 3D space | 3 |
| perspective | Specifies the perspective on how 3D elements are viewed | 3 |
| perspective-origin | Specifies the bottom position of 3D elements | 3 |
| backface-visibility | Defines whether or not an element should be visible when not facing the screen | 3 |
| Function | Description |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a 3D translation, using only the value for the X-axis |
| translateY(y) | Defines a 3D translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a 3D scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a 3D scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |
Transitions
CSS3可以不使用Flash动画或JavaScripts就可以动态改变样式。
例如：
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
div:hover
{
width:200px;
}
{
width:200px;
}
| Property | Description | CSS |
|---|---|---|
| transition | A shorthand property for setting the four transition properties into a single property | 3 |
| transition-property | Specifies the name of the CSS property to which the transition is applied | 3 |
| transition-duration | Defines the length of time that a transition takes. Default 0 | 3 |
| transition-timing-function | Describes how the speed during a transition will be calculated. Default "ease" | 3 |
| transition-delay | Defines when the transition will start. Default 0 | 3 |
Animations
CSS3可以定义动画，例如：
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
| Property | Description | CSS |
|---|---|---|
| @keyframes | Specifies the animation | 3 |
| animation | A shorthand property for all the the animation properties, except the animation-play-state property | 3 |
| animation-name | Specifies the name of the @keyframes animation | 3 |
| animation-duration | Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0 | 3 |
| animation-timing-function | Describes how the animation will progress over one cycle of its duration. Default "ease" | 3 |
| animation-delay | Specifies when the animation will start. Default 0 | 3 |
| animation-iteration-count | Specifies the number of times an animation is played. Default 1 | 3 |
| animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal" | 3 |
| animation-play-state | Specifies whether the animation is running or paused. Default "running" | 3 |
Multiple Columns
CSS３可以把一个元素分成多列显示，例如：
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:4px outset #ff00ff;
}
| Property | Description | CSS |
|---|---|---|
| column-count | Specifies the number of columns an element should be divided into | 3 |
| column-fill | Specifies how to fill columns | 3 |
| column-gap | Specifies the gap between the columns | 3 |
| column-rule | A shorthand property for setting all the column-rule-* properties | 3 |
| column-rule-color | Specifies the color of the rule between columns | 3 |
| column-rule-style | Specifies the style of the rule between columns | 3 |
| column-rule-width | Specifies the width of the rule between columns | 3 |
| column-span | Specifies how many columns an element should span across | 3 |
| column-width | Specifies the width of the columns | 3 |
| columns | A shorthand property for setting column-width and column-count | 3 |
User Interface
CSS3支持新的UI属性，比如:
-
resize
-
box-sizing
-
outline-offset
| Property | Description | CSS |
|---|---|---|
| appearance | Allows you to make an element look like a standard user interface element | 3 |
| box-sizing | Allows you to define certain elements to fit an area in a certain way | 3 |
| icon | Provides the author the ability to style an element with an iconic equivalent | 3 |
| nav-down | Specifies where to navigate when using the arrow-down navigation key | 3 |
| nav-index | Specifies the tabbing order for an element | 3 |
| nav-left | Specifies where to navigate when using the arrow-left navigation key | 3 |
| nav-right | Specifies where to navigate when using the arrow-right navigation key | 3 |
| nav-up | Specifies where to navigate when using the arrow-up navigation key | 3 |
| outline-offset | Offsets an outline, and draws it beyond the border edge | 3 |
| resize | Specifies whether or not an element is resizable by the user | 3 |