CSS Animation
CSS 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.
https://drafts.csswg.org/css-ui-4/#appearance-switching
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/#propdef-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. Covers support for the shorthand border-radius
as well as the long-hand properties (e.g. border-top-left-radius
)
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/
ch (character) unit
ch (character) unit
Unit representing the width of the character "0" in the current font, of particular use in combination with monospace fonts.
https://www.w3.org/TR/css3-values/#ch
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
Scales images with an algorithm that preserves edges and contrast, without smoothing colors or introducing 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: zoom-in & zoom-out
CSS3 Cursors: zoom-in & zoom-out
Support for zoom-in
, 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-size
CSS Device Adaptation
CSS Device Adaptation
A standard way to override the size of viewport in web page using the @viewport
rule, 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-1/
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 display: flex
, display: inline-flex
, align-content
, align-items
, align-self
, justify-content
and order
.
http://www.w3.org/TR/css3-flexbox/
CSS font-feature-settings
CSS 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
CSS3 font-kerning
CSS3 font-kerning
Controls the usage of the kerning information (spacing between letters) stored in the font. Note that this only affects OpenType fonts with kerning information, it has no effect on other fonts.
http://www.w3.org/TR/css3-fonts/#font-kerning-prop
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
, max-content
, min-content
, and fit-content
properties.
http://www.w3.org/TR/css3-sizing/
letter-spacing CSS property
letter-spacing CSS property
Controls spacing between characters of text (i.e. "tracking" in typographical terms). Not to be confused with kerning.
http://www.w3.org/TR/CSS2/text.html#propdef-letter-spacing
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-1/
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
CSS page-break properties
CSS page-break properties
Properties to control the way elements are broken across (printed) pages.
http://www.w3.org/TR/CSS2/page.html#page-breaks
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
CSSOM Scroll-behavior
CSSOM Scroll-behavior
Method of specifying the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs.
https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior
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.
https://drafts.csswg.org/css-position/#sticky-pos
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.
https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property
CSS text-justify
CSS text-justify
CSS property to define how text should be justified when text-align: justify
is set.
https://drafts.csswg.org/css-text-3/#text-justify-property
CSS3 Text-overflow
CSS3 Text-overflow
Append ellipsis when text overflows its containing element
http://www.w3.org/TR/css3-ui/#text-overflow
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.
https://compat.spec.whatwg.org/#text-fill-and-stroking
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 2D Transforms
CSS3 2D Transforms
Method of transforming an element including rotating, scaling, etc. Includes support for transform
as well as transform-origin
properties.
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, with ability to define property, duration, delay and timing function.
http://www.w3.org/TR/css3-transitions/
CSS user-select: none
CSS user-select: none
Method of preventing text/element selection using CSS.
https://drafts.csswg.org/css-ui-4/#valdef-user-select-none
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
CSS widows & orphans
CSS widows & orphans
CSS properties to control when lines break across pages or columns by defining the amount of lines that must be left before or after the break.
https://drafts.csswg.org/css-break-3/#widows-orphans
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
CSS writing-mode property
CSS writing-mode property
Property to define whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.
https://drafts.csswg.org/css-writing-modes-3/#block-flow