CSS3 Animation
CSS3 Animation
Complex method of animating certain properties of an element
http://www.w3.org/TR/css3-animations/
CSS Appearance
CSS Appearance
The appearance
property defines how elements (particularly form controls) appear by default. By setting the value to none
the default appearance can be entirely redefined using other CSS properties.
http://wiki.csswg.org/spec/css4-ui#appearance
CSS background-attachment
CSS background-attachment
Method of defining how a background image is attached to a scrollable element. Values include scroll
(default), fixed
and local
.
http://www.w3.org/TR/css3-background/#the-background-attachment
CSS3 Background-image options
CSS3 Background-image options
New properties to affect background images, including background-clip, background-origin and background-size
http://www.w3.org/TR/css3-background/#backgrounds
CSS background-position edge offsets
CSS background-position edge offsets
Allows CSS background images to be positioned relative to the specified edge using the 3 to 4 value syntax. For example: background-position: right 5px bottom 5px;
for positioning 5px from the bottom-right corner.
http://www.w3.org/TR/css3-background/#background-position
CSS background-blend-mode
CSS background-blend-mode
Allows blending between CSS background images, gradients, and colors.
http://www.w3.org/TR/compositing-1/#background-blend-mode
CSS3 Border images
CSS3 Border images
Method of using images for borders
http://www.w3.org/TR/css3-background/#the-border-image
CSS3 Border-radius (rounded corners)
CSS3 Border-radius (rounded corners)
Method of making the border corners round
http://www.w3.org/TR/css3-background/#the-border-radius
CSS box-decoration-break
CSS box-decoration-break
Controls whether the box's margins, borders, padding, and other decorations wrap the broken edges of the box fragments (when the box is split by a break (page/column/region/line).
http://www.w3.org/TR/css3-break/#break-decoration
CSS3 Box-shadow
CSS3 Box-shadow
Method of displaying an inner or outer shadow effect to elements
http://www.w3.org/TR/css3-background/#box-shadow
calc() as CSS unit value
calc() as CSS unit value
Method of allowing calculated values for length units, i.e. width: calc(100% - 3em)
http://www.w3.org/TR/css3-values/#calc
CSS Canvas Drawings
CSS Canvas Drawings
Method of using HTML5 Canvas as a background image. Not currently part of any specification.
http://webkit.org/blog/176/css-canvas-drawing/
CSS clip-path property
CSS clip-path property
Method of defining the visible region of an element using SVG or a shape definition.
http://www.w3.org/TR/css-masking-1/#the-clip-path
CSS Counters
CSS Counters
Method of controlling number values in generated content, using the counter-reset and counter-increment properties.
http://www.w3.org/TR/CSS21/generate.html#counters
Crisp edges/pixelated images
Crisp edges/pixelated images
Forces images to be scaled with an algorithm that preserves contrast and edges in the image, without smoothing colors or introduce blur. This is intended for images such as pixel art. Official values that accomplish this for the image-rendering
property are crisp-edges
and pixelated
.
http://dev.w3.org/csswg/css-images-3/#valdef-image-rendering-crisp-edges
CSS3 Box-sizing
CSS3 Box-sizing
Method of specifying whether or not an element's borders and padding should be included in size units
http://www.w3.org/TR/css3-ui/#box-sizing
CSS3 Cursors (new values)
CSS3 Cursors (new values)
Support for zoom-in
and zoom-out
values for the CSS3 cursor
property.
http://www.w3.org/TR/css3-ui/#cursor
CSS3 tab-size
CSS3 tab-size
Method of customizing the width of the tab character. Only effective using 'white-space: pre' or 'white-space: pre-wrap'.
http://www.w3.org/TR/css3-text/#tab-size1
CSS Device Adaptation
CSS Device Adaptation
A standard way to override the size of viewport in web page, standardizing and replacing Apple's own popular <meta> viewport implementation.
http://www.w3.org/TR/css-device-adapt/
CSS Feature Queries
CSS Feature Queries
CSS Feature Queries allow authors to condition rules based on whether particular property declarations are supported in CSS using the @supports at rule.
http://www.w3.org/TR/css3-conditional/#at-supports
CSS Filter Effects
CSS Filter Effects
Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.
http://www.w3.org/TR/filter-effects/
CSS position:fixed
CSS position:fixed
Method of keeping an element in a fixed location regardless of scroll position
http://www.w3.org/TR/CSS21/visuren.html#fixed-positioning
Flexible Box Layout Module
Flexible Box Layout Module
Method of positioning elements in horizontal or vertical stacks. Support includes the support for the all properties prefixed with flex
as well as align-content
, align-items
, align-self
, and justify-content
.
http://www.w3.org/TR/css3-flexbox/
Font feature settings
Font feature settings
Method of applying advanced typographic and language-specific font features to supported OpenType fonts.
http://w3.org/TR/css3-fonts/#font-rend-props
CSS font-size-adjust
CSS font-size-adjust
Method of adjusting the font size in a matter that relates to the height of lowercase vs. uppercase letters. This makes it easier to set the size of fallback fonts.
http://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop
CSS font-stretch
CSS font-stretch
If a font has multiple types of variations based on the width of characters, the font-stretch
property allows the appropriate one to be selected. The property in itself does not cause the browser to stretch to a font.
http://www.w3.org/TR/css-fonts-3/#font-stretch-prop
CSS Generated content for pseudo-elements
CSS Generated content for pseudo-elements
Method of displaying text or images before or after the given element's contents using the ::before and ::after pseudo-elements. All browsers with support also support the attr()
notation in the content
property.
http://www.w3.org/TR/CSS21/generate.html
CSS Gradients
CSS Gradients
Method of defining a linear or radial color gradient as a CSS image.
http://www.w3.org/TR/css3-images/
CSS Grid Layout
CSS Grid Layout
Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for lay out into columns and rows using a set of predictable sizing behaviors
http://www.w3.org/TR/css3-grid-layout/
CSS Hyphenation
CSS Hyphenation
Method of controlling when words at the end of lines should be hyphenated using the "hyphens" property.
http://www.w3.org/TR/css3-text/#hyphenation
CSS3 image-orientation
CSS3 image-orientation
CSS property used generally to fix the intended orientation of an image. This can be done using 90 degree increments or based on the image's EXIF data using the "from-image" value.
http://www.w3.org/TR/css3-images/#image-orientation
CSS image-set
CSS image-set
Method of letting the browser pick the most appropriate CSS background image from a given set, primarily for high PPI screens.
http://dev.w3.org/csswg/css-images-3/#image-set-notation
Intrinsic & Extrinsic Sizing
Intrinsic & Extrinsic Sizing
Allows for the heights and widths to be specified in intrinsic values using the fill-available, max-content, min-content, and fit-content properties.
http://www.w3.org/TR/css3-sizing/
CSS Logical Properties
CSS Logical Properties
Use start/end properties that depend on LTR or RTL writing direction instead of left/right
http://dev.w3.org/csswg/css-logical-props/
CSS Masks
CSS Masks
Method of displaying part of an element, using a selected image as a mask
http://www.w3.org/TR/css-masking/
Media Queries: resolution feature
Media Queries: resolution feature
Allows a media query to be set based on the device pixels used per CSS unit. While the standard uses min
/max-resolution
for this, some browsers support the older non-standard device-pixel-ratio
media query.
http://www.w3.org/TR/css3-mediaqueries/#resolution
CSS3 Multiple column layout
CSS3 Multiple column layout
Method of flowing information in multiple columns
http://www.w3.org/TR/css3-multicol/
CSS3 object-fit/object-position
CSS3 object-fit/object-position
Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.
http://www.w3.org/TR/css3-images/
CSS3 Opacity
CSS3 Opacity
Method of setting the transparency level of an element
http://www.w3.org/TR/css3-color/
CSS outline
CSS outline
The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.
http://www.w3.org/TR/CSS2/ui.html#propdef-outline
:placeholder-shown CSS pseudo-class
:placeholder-shown CSS pseudo-class
The :placeholder-shown pseudo-class represents a form element with visible placeholder contents.
http://www.w3.org/TR/selectors4/#placeholder
CSS Reflections
CSS Reflections
Method of displaying a reflection of an element
http://webkit.org/blog/182/css-reflections/
CSS Regions
CSS Regions
Method of flowing content into multiple elements.
http://www.w3.org/TR/css3-regions/
CSS Repeating Gradients
CSS Repeating Gradients
Method of defining a repeating linear or radial color gradient as a CSS image.
http://www.w3.org/TR/css3-images/#repeating-gradients
CSS resize property
CSS resize property
Method of allowing an element to be resized by the user, with options to limit to a given direction.
http://www.w3.org/TR/css3-ui/#resize
CSS 2.1 selectors
CSS 2.1 selectors
Basic CSS selectors including: *
(universal selector), >
(child selector), :first-child
, :link
, :visited
, :active
, :hover
, :focus
, :lang()
, +
(adjacent sibling selector), [attr]
, [attr="val"]
, [attr~="val"]
, [attr|="bar"]
, .foo
(class selector), #foo
(id selector)
http://www.w3.org/TR/CSS21/selector.html
CSS3 selectors
CSS3 selectors
Advanced element selection using selectors including: [foo^="bar"]
,
[foo$="bar"],
[foo*="bar"],
:root,
:nth-child(),
:nth-last-child(),
nth-of-type,
nth-last-of-type(),
:last-child,
:first-of-type,
:last-of-type,
:only-child,
:only-of-type,
:empty,
:target,
:enabled,
:disabled,
:checked,
:not(),
~ (general sibling)
http://www.w3.org/TR/css3-selectors/
::selection CSS pseudo-element
::selection CSS pseudo-element
The ::selection CSS pseudo-element applies rules to the portion of a document that has been highlighted (e.g., selected with the mouse or another pointing device) by the user.
http://www.w3.org/TR/css-pseudo-4/#selectordef-selection
CSS Shapes Level 1
CSS Shapes Level 1
Allows geometric shapes to be set in CSS to define an area for text to flow around.
http://www.w3.org/TR/css-shapes/
CSS position:sticky
CSS position:sticky
Keeps elements positioned as "fixed" or "relative" depending on how it appears in the viewport. As a result the element is "stuck" when necessary while scrolling.
http://dev.w3.org/csswg/css-position/#sticky-positioning
CSS3 text-align-last
CSS3 text-align-last
CSS property to describe how the last line of a block or a line right before a forced line break when text-align
is justify
.
http://www.w3.org/TR/css3-text/#text-align-last-property
text-decoration styling
text-decoration styling
Method of defining the type, style and color of lines in the text-decoration property. These can be defined as shorthand (e.g. text-decoration: line-through dashed blue
) or as single properties (e.g. text-decoration-color: blue
)
http://www.w3.org/TR/css-text-decor-3/#line-decoration
text-emphasis styling
text-emphasis styling
Method of using small symbols next to each glyph to emphasize a run of text, commonly used in East Asian languages. The text-emphasis
shorthand, and its text-emphasis-style
and text-emphasis-color
longhands, can be used to apply marks to the text. The text-emphasis-position
property, which inherits separately, allows setting the emphasis marks' position with respect to the text.
http://www.w3.org/TR/css-text-decor-3/#text-emphasis
CSS3 Text-overflow
CSS3 Text-overflow
Append ellipsis when text overflows its containing element
http://www.w3.org/TR/css3-ui/#text-overflow0
CSS text-size-adjust
CSS text-size-adjust
On mobile devices, the text-size-adjust CSS property allows Web authors to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to.
http://dev.w3.org/csswg/css-size-adjust/
CSS text-stroke
CSS text-stroke
Method of declaring the outline (stroke) width and color for text.
http://developer.apple.com/library/safari/documentation/appleapplications/reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_text_stroke
CSS3 Text-shadow
CSS3 Text-shadow
Method of applying one or more shadow or blur effects to text
http://www.w3.org/TR/css-text-decor-3/#text-shadow-property
CSS touch-action property
CSS touch-action property
touch-action is a CSS property that controls filtering of gesture events, providing developers with a declarative mechanism to selectively disable touch scrolling (in one or both axes), pinch-zooming or double-tap-zooming.
http://www.w3.org/TR/pointerevents/#the-touch-action-css-property
Combination of transforms2d & transforms3d.
CSS3 Transforms
CSS3 Transforms
Method of transforming an element including rotating, scaling, etc.
http://www.w3.org/TR/css3-2d-transforms/
CSS3 3D Transforms
CSS3 3D Transforms
Method of transforming an element in the third dimension using the transform
property. Includes support for the perspective
property to set the perspective in z-space and the backface-visibility
property to toggle display of the reverse side of a 3D-transformed element.
http://www.w3.org/TR/css3-3d-transforms/
CSS3 Transitions
CSS3 Transitions
Simple method of animating certain properties of an element.
http://www.w3.org/TR/css3-transitions/
CSS user-select: none
CSS user-select: none
Method of preventing text/element selection using CSS.
https://developer.mozilla.org/en-US/docs/CSS/user-select
Viewport units: vw, vh, vmin, vmax
Viewport units: vw, vh, vmin, vmax
Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).
http://www.w3.org/TR/css3-values/#viewport-relative-lengths
CSS3 word-break
CSS3 word-break
Property to prevent or allow words to be broken over multiple lines between letters.
http://www.w3.org/TR/css3-text/#word-break
CSS3 Overflow-wrap
CSS3 Overflow-wrap
Allows lines to be broken within words if an otherwise unbreakable string is too long to fit. Currently mostly supported using the word-wrap
property.
http://www.w3.org/TR/css3-text/#overflow-wrap