CSS3

 

 

1. Selector

• Substring matching attribute selectors, E[attribute^="value"], E[attribute$="value"], E[attribute*="value"] .
• New pseudo-classes: :target, :enabled and :disabled, :checked, :indeterminate, :root, :nth-child and :nth-last-child, :nth-of-type and :nth-last-of-type, :last-child, :first-of-type and :last-of-type, :only-child and :only-of-type,:empty, and :not.
• Pseudo-elements are now characterized by two colons rather than one: :after becomes ::after, :before becomes ::before, :first-letter becomes ::first-letter, and :first-line becomes ::first-line.
• The new general sibling combinator ( h1~pre ).

　　Details Below:

Selector	Example	Example description	CSS
element1~element2	p ~ ul	Selects every <ul> element that are preceded by a <p> element	3
[attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"	3
[attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"	3
[attribute*=value]	a[href*="w3schools"]	Selects every <a> element whose href attribute value contains the substring "w3schools"	3
:checked	input:checked	Selects every checked <input> element	3
:disabled	input:disabled	Selects every disabled <input> element	3
:empty	p:empty	Selects every <p> element that has no children (including text nodes)	3
:enabled	input:enabled	Selects every enabled <input> element	3
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent	3
:in-range	input:in-range	Selects input elements with a value within a specified range	3
:invalid	input:invalid	Selects all input elements with an invalid value	3
:last-child	p:last-child	Selects every <p> element that is the last child of its parent	3
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent	3
:not(selector)	:not(p)	Selects every element that is not a <p> element	3
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent	3
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child	3
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent	3
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent	3
:only-child	p:only-child	Selects every <p> element that is the only child of its parent	3
:optional	input:optional	Selects input elements with no "required" attribute	3
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range	3
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified	3
:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified	3
:required	input:required	Selects input elements with the "required" attribute specified	3
:root	:root	Selects the document's root element	3
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)	3
:valid	input:valid	Selects all input elements with a valid value	3

 

2. Fonts Module

　　Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.

• Support for downloadable fonts via the CSS @font-face at-rule.
• The control of the contextual inter-glyph spacing via the CSS font-kerning property.
• The choice of language-specific glyphs via the CSS font-language-override property.
• The choice of glyphs with specific OpenType features via the CSS font-feature-settings property.
• The control of the aspect ratio to use when fallback fonts are selected via the CSS font-size-adjust property.
• The choice of alternative font faces using the CSS font-stretch, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, and font-variant-position properties. It also extends the related CSS font-variant shorthand property and introduces the @font-feature-values at-rule.
• The control of the automatic generation of an oblique or bold face when none are found via the CSS font-synthesis property.

Example:

@font-face { 
font-family: BorderWeb; 
src:url(BORDERW0.eot); 
} 
@font-face { 
font-family: Runic; 
src:url(RUNICMT0.eot); 
} 
 
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

 

3.  Text Module　　

Extends:

• the CSS text-transform property with the value full-width.
• the CSS text-align property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text.
• the CSS text-align property with a <string> value to align on that character. This is useful to align number on the decimal point.
• the CSS word-spacing and letter-spacing properties with range constraints to control flexibility in justification.
• the CSS text-decoration property by making it a shorthand for the CSS text-decoration-line, text-decoration-color, and text-decoration-style properties. And adds the text-decoration-skip, and text-underline-position properties.

Adds:

• Control on how whitespaces are displayed using the CSS text-space-collapse and tab-size properties.
• Control on line breaks and word boundaries using the CSS line-break, word-break, hyphens, text-wrap, overflow-wrap, and text-align-last properties.
• Control on how justification is happening, in order to support more type of scripts, using the CSS text-justify property.
• Control on edge effect using the CSS text-indent and hanging-punctuation properties.
• Support for East-Asian-script emphasis marks with the CSS text-emphasis, text-emphasis-style, text-emphasis-color, and text-emphasis-position properties.
• Support for script shadows with the CSS text-shadow property.

Example:

<div style="width:300px; border:1px solid #999999; overflow: hidden"> 
wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
</div> 
 
 
<div style="width:300px; border:1px solid #999999; word-wrap:break-word;"> 
wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
</div>

No break word

have break-word

 

.clip{text-overflow:clip; overflow:hidden; white-space:nowrap; 
  width:200px;background:#ccc;} 
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 
  width:200px; background:#ccc;} 
 
<div class="clip"> 
 不顯示省略標記，而是簡單的裁切條
</div> 
 
<div class="ellipsis"> 
 當對象內文本溢出時顯示省略標記
</div>

 圖 3. Text-overflow 效果圖

.class1{ 
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
} 
 
.class2{ 
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 
}

.classReflect{ 
-webkit-box-reflect: below 10px 
-webkit-gradient(linear, left top, left bottom, from(transparent), 
     to(rgba(255, 255, 255, 0.51))); 
}

 

4. Multi-column Layout Module

　　Adds support for easy multi-column layouts using the CSS: 

　　　　columns, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, break-after, break-before, and break-inside.

5. Backgrounds and Borders Module

• Support, on backgrounds, for any type of <image>, and not only for uri() defined ones.
• Support for multiple background images.
• The background-repeat space and round values, and for the 2-value syntax of this CSS property.
• The background-attachment local value.
• The CSS background-origin, background-size, and background-clip properties.
• Support for curved border corners, with the CSS border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius properties.
• Support for the use of an <image> as the border with the CSS border-image, border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat properties.
• Support for shadows of the element with the CSS box-shadow property.

 

div{
  border: 1px solid;
  border-radius: 10px 15px 20px 30px / 20px 30px 10px 15px;
  border-top-left-radius: 10px 20px;
  border-top-right-radius: 15px 30px;
  border-bottom-right-radius: 20px 10px;
  border-bottom-left-radius: 30px 15px;
}

 

6. Color Module

　　Adds the opacity property, and the hsl(), hsla(), rgba() and rgb() functions to create <color> values. It also defines the currentColor keyword as a valid color.

The transparent color is now a real color (thanks to the support for the alpha channel) and is a now an alias for rgba(0,0,0,0.0) .

7. Namespace

　　@namespace is an at-rule that defines XML namespaces to be used in a CSS style sheet. The defined namespaces can be used to restrict the universal, type, and attributeselectors to only select elements within that namespace. The @namespace rule is generally only useful when dealing with documents containing multiple namespaces—such as HTML5 with inline SVG or MathML, or XML that mixes multiple vocabularies.

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace */
a {}

/* This matches all SVG <a> elements */
svg|a {}

/* This matches both XHTML and SVG <a> elements */
*|a {}

8. Media Query

　　Media queries are useful when you want to apply CSS styles depending on a device's general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport, or environment (such as ambient light conditions). With the huge variety of internet-connected devices available today, media queries are a vital tool for building websites and apps that are robust enough to work on whatever hardware your users have.

Media types describe the general category of a device. Unless you use the not or only logical operators, the media type is optional and the all type will be implied.

• all

Suitable for all devices.

• print

Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on  paged media, and the  media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.

• screen

Intended primarily for color computer screens.

• speech

Intended for speech synthesizers.

@media (min-width: 30em) and (orientation: landscape) { ... }

Rem,em,width -- design page layout

 

9. Values and Units Module

　　Makes initial and inherit keywords usable on any CSS property.

Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.

Adds:

• Definition for new font-relative length units: rem and ch .
• Definition for viewport-relative length units: vw, vh, vmax, and vmin .
• Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the reference pixel .
• Definition for <angle>, <time>, <frequency>, <resolution>.
• Normative value to the definition of <color>, <image>, and <position>.
• Definition for the calc(), attr(), and toggle() functional notations.
  At risk: due to insufficient browser support, standardization of the calc(), attr(), and toggle() functional notations may be postponed to the next iteration of this module.

 

10. Images Module

Defines the <image> data type.

Extends the url() syntax to support image slices using media fragments.

Adds:

• The dppx unit to the <resolution> data type.
• The image() function as a more flexible alternative to url() to define an image from an url.
  At risk : due to insufficient browser support, standardization of the image() function may be postponed to the next iteration of this module .
• Support for linear-gradient(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient().
• The ability to define how a replaced element should fit in its element, using the CSS object-fit property.
  At risk : due to insufficient browser support, standardization of the object-fit and property may be postponed to the next iteration of this module .
• The ability to override the resolution and orientation of an external image using the CSS image-resolution and image-orientation properties.
  At risk : due to insufficient browser support, standardization of the image-resolution and image-orientation properties may be postponed to the next iteration of this module .

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

backgroud: 
-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

 

11. Transitions, Transforms & Animation

11.1 Transitions:

　　

Property	Description
transition	A shorthand property for setting the four transition properties into a single property
transition-delay	Specifies a delay (in seconds) for the transition effect
transition-duration	Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property	Specifies the name of the CSS property the transition effect is for
transition-timing-function	Specifies the speed curve of the transition effect

　　The transition effect will start when the specified CSS property (width) changes value.

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}
div:hover {
    width: 300px;
}

11.2 Transforms

　　The following table lists all the 2D transform properties:

Property	Description
transform	Applies a 2D or 3D transformation to an element
transform-origin	Allows you to change the position on transformed elements

　　And Functions:

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

.skew { 
-webkit-transform: skew(50deg); 
} 
 
.scale { 
-webkit-transform: scale(2, 0.5); 
} 
 
.rotate { 
-webkit-transform: rotate(30deg); 
} 
 
.translate { 
-webkit-transform: translate(50px, 50px); 
} 
 
.all_in_one_transform { 
-webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px); 
}

The following table lists all the 3D transform properties:

Property	Description
transform	Applies a 2D or 3D transformation to an element
transform-origin	Allows you to change the position on transformed elements
transform-style	Specifies how nested elements are rendered in 3D space
perspective	Specifies the perspective on how 3D elements are viewed
perspective-origin	Specifies the bottom position of 3D elements
backface-visibility	Defines whether or not an element should be visible when not facing the screen

3D Transform Methods

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

 

11.3 Animation

　　 CSS3 animations allows animation of most HTML elements without using JavaScript or Flash! 

　　The @keyframes Rule:

　　When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

The following example binds the "example" animation to the <div> element. The animation will lasts for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow":

/* The animation code */

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

 

CSS3 Animation Properties:

The following table lists the @keyframes rule and all the animation properties:

Property	Description
@keyframes	Specifies the animation code
animation	A shorthand property for setting all the animation properties
animation-delay	Specifies a delay for the start of an animation
animation-direction	Specifies whether an animation should play in reverse direction or alternate cycles
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle
animation-fill-mode	Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)
animation-iteration-count	Specifies the number of times an animation should be played
animation-name	Specifies the name of the @keyframes animation
animation-play-state	Specifies whether the animation is running or paused
animation-timing-function	Specifies the speed curve of the animation

 

 

 

Refers:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3

https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/index.html

https://www.quanzhanketang.com/cssref/css_selectors.html