If the value of the backdrop-filter property is none then there is no filter effect applied. Otherwise, the list of functions are applied in the order provided.

The first filter function or filter reference in the list takes the element’s BackgroundImage as the input image. Subsequent operations take the output from the previous filter function or filter reference as the input image. filter element reference functions can specify an alternate input, but still uses the previous output as its SourceGraphic.

Filter functions must operate in the sRGB color space.

A computed value of other than none results in the creation of a stacking context the same way that CSS does. All the elements descendants are rendered together as a group with the filter effect applied to the group as a whole.

The result of the backdrop-filter is rendered before the other painting operations for the element. That is, behind any background of the element.

If the filter functions would have produced a result that extended beyond the bounds of the input, it is clipped to the original bounds.

]]> Determines the background painting area, which determines the area within which the background is painted.

]]> For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages), specifies which boxes operates on to determine the background positioning area(s).

]]> Changes the appearance of buttons and other controls to resemble native controls.

]]> Overrides ordering defaults for right-to-left content.

]]> Defines the behavior of nonbreaking spaces within text.

]]> Specifies the shape to use in place of letters in a password input field.

]]> Sets a compositing style for background images and colors.

]]> Specifies a size adjustment for displaying text content in Safari on iPhone.

]]> Overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iPhone.

]]> Defines the spacing between the horizontal portion of an element’s border and the content within.

]]> Defines the spacing between the vertical portion of an element’s border and the content within.

]]> Specifies the alignment of nested elements within an outer flexible box element.

]]> Specifies the direction in which child elements of a flexible box element are laid out.

]]> Specifies an element’s flexibility.

Flexible elements can stretch or shrink to fit the size of the bounding box of their parent element. The amount of stretching or shrinkage of an element is determined by its flex value relative to the flex values of other elements within the same parent element.

]]> Specifies groups of dynamically resizing elements that are adjusted to be the same size.

During size adjustment of flex boxes, any boxes with the same group number are adjusted to be the same size.

]]> Specifies whether a flexible box should contain multiple lines of content.

]]> Specifies a rough ordering of elements in a flexible box.

Elements with lower ordinal group values are displayed first.

]]> Specifies the layout of elements nested within a flexible box element.

]]> Specifies alignment of child elements within the current element in the direction of orientation.

For elements whose children are aligned horizontally, a packing value of start indicates left alignment with extra space towards the right side, a value of end indicates right alignment with extra space to the left, a value of center indicates center alignment with extra space split evenly on either side, and a value of justify indicates that the outer elements should be aligned on the left and right, with space added evenly between the elements.

Similarly, for elements whose children are aligned vertically, a value of start indicates that the elements should be aligned to the top, a value of end indicates that the elements should be aligned to the bottom, and so on.

]]> Determines whether a column break can and should occur after an element in a multicolumn flow layout.

]]> Determines whether a column break can and should occur before an element in a multicolumn flow layout.

]]> Determines whether a column break can and should occur before an element in a multicolumn flow layout.

]]> Specifies the behavior of regions in a Dashboard widget.

]]> Specifies line-breaking rules for CJK (Chinese, Japanese, and Korean) text.

]]> Specifies the behavior of an element’s vertical margins if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

]]> Specifies the behavior of an element’s top margin if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

]]> Specifies the behavior of an element’s bottom margin if it is adjacent to an element with a margin. Elements can maintain their respective margins or share a single margin between them.

]]> Provides the width of the starting margin.

]]> Provides the width of the ending margin.

]]> Specifies the logical end padding for an element.

]]> Specifies the logical start padding for an element.

]]> Specifies the direction of motion for a marquee box.

]]> Defines the distance the marquee moves in each increment.

]]> Specifies the number of times a marquee box repeats (or infinite).

]]> Defines the scroll or slide speed of a marquee box.

This property can either take one speed parameter (slow, for example) or a measure of distance and a measure of time separated by a slash (/).

]]> Specifies the style of marquee motion.

The values scroll and slide both cause the content to start outside the box and move into the box, but if the value scroll is specified, the content stops moving once the last content is visible. The value alternate causes the content to shift back and forth within the box in the specified direction.

]]> Defines properties for showing content as though displayed on an electronic marquee sign.

]]> Specifies the width and color of the outline (stroke) of text.

]]> Specifies the width of the outline (stroke) of text.

]]> Specifies the color of the outline (stroke) of text.

]]> Disables the default callout shown when you touch and hold a touch target.

]]> Specifies that an entire element should be draggable instead of its contents.

]]> Determines whether a user can edit the content of an element.

]]> Specifies a fill color for text.

If not specified, the color specified by the color property is used. -webkit-fill-color is commonly used in combination with -webkit-text-stroke. Changes to this property can be animated.

]]> -webkit-mask-box-image sets the mask image for an element's border box.

]]> The -webkit-box-reflect CSS property lets you reflect the content of an element in one specific direction.

]]> The -webkit-print-color-adjust property is a non-standard CSS extension that can be used to force printing of background colors and images in browsers based on the WebKit engine.

]]> Sets the mask image for an element. A mask image clips the visible portion of an element according to the mask image's transparency.

]]> The -webkit-mask-repeat property specifies whether a mask image is repeated (tiled), and how.

]]> If a is specified, -webkit-mask-attachment determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.

]]> The -webkit-mask-position property sets the initial position of a mask image.

]]> Defines the x-coordinate of the position of a mask.

]]> Defines the y-coordinate of the position of a mask.

]]> The -webkit-mask-origin CSS property determines the origin of a mask image. The value of the is interpreted relative to the value of this property. This property does not apply when is fixed.

]]> The clipping path restricts the region to which paint can be applied, the so-called clipping region. Conceptually, any parts of the drawing that lie outside of this region are not drawn. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the clipping path is applied, and those of its descendants.

]]> Gives the number of device pixels per CSS pixel.

]]> Gives the number of device pixels per CSS pixel.

]]> Gives the number of device pixels per CSS pixel.

]]> Applies only to browsers that support animations specified with -webkit-animation.

]]> Applies only to browsers that support animations specified with -webkit-animation.

]]> Applies only to browsers that support 3D transformations specified with -webkit-transform.

]]> Applies only to browsers that support 3D transformations specified with transform.

]]> Applies only to browsers that support 2D transformations specified with -webkit-transform.

]]> Applies only to browsers that support 2D transformations specified with -webkit-transform.

]]> Applies only to browsers that support transitions specified with -webkit-transition.

]]> Applies only to browsers that support transitions specified with -webkit-transition.

]]> ::-webkit-input-placeholder pseudo-element represents any form element displaying placeholder text. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you've changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-element to change the placeholder text color.

See also : , :: , : ]]> The :-webkit-autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. The user-agent stylesheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to JavaScript hacks.

]]> The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation.

]]> The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation.

]]> The decrement pseudo-class applies to buttons and track pieces. It indicates whether or not the button or track piece will decrement the view’s position when used (e.g., up on a vertical scrollbar, left on a horizontal scrollbar).

]]> The increment pseudo-class applies to buttons and track pieces. It indicates whether or not a button or track piece will increment the view’s position when used (e.g., down on a vertical scrollbar, right on a horizontal scrollbar).

]]> The start pseudo-class applies to buttons and track pieces. It indicates whether the object is placed before the thumb.

]]> The end pseudo-class applies to buttons and track pieces. It indicates whether the object is placed after the thumb.

]]> The double-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar. For track pieces it indicates whether the track piece abuts a pair of buttons.

]]> The single-button pseudo-class applies to buttons and track pieces. It is used to detect whether a button is by itself at the end of a scrollbar. For track pieces it indicates whether the track piece abuts a singleton button.

]]> Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar, i.e., there is no button at that end of the track.

]]> Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present.

]]> Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active. (In recent nightlies, this pseudo-class now applies to ::selection as well. We plan to extend it to work with any content and to propose it as a new standard pseudo-class.)

]]> The :any() pseudo-class lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.

]]> The :fullscreen CSS pseudo-class applies to any element that's currently being displayed in full-screen mode.

]]>