https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
A Pen by Lavi Perchik on CodePen.
Created
March 14, 2020 15:09
-
-
Save vulcangz/5dba7225cc158bab62a44aa06fa6afe8 to your computer and use it in GitHub Desktop.
MDN CSS reference list
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav role='navigation' id="nav"> | |
| <ul> | |
| </ul> | |
| <div class="colors"> | |
| <!--<code class="value"><value></code> | |
| <code class="selector">:selector</code> | |
| <code class="at">@at rule</code>--> | |
| <input type="checkbox" id="hide" checked /> | |
| <label for="hide">hide description</label> | |
| </div> | |
| </nav> | |
| <div class="index hidden"> | |
| <ol> | |
| <li>A | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:active" data-title="The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those."><code>:active</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::after" data-title="The documentation about this has not yet been written; please consider contributing!"><code>::after (:after)</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content" data-title="The CSS align-content property aligns a flex container's lines within the flex container when there is extra space on the cross-axis. This property has no effect on single line flexible boxes."><code>align-content</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items" data-title="The CSS align-items property aligns flex items of the current flex line the same way as justify-content but in the perpendicular direction."><code>align-items</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self" data-title="The align-self CSS property aligns flex items of the current flex line overriding the align-items value. If any of the flex item's cross-axis margin is set to auto, then align-self is ignored."><code>align-self</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/all" data-title="The CSS all shorthand property resets all properties, but unicode-bidi and direction to their initial or inherited value."><code>all</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/angle" data-title="The documentation about this has not yet been written; please consider contributing!"><code><angle></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation" data-title="The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state."><code>animation</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" data-title="The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element."><code>animation-delay</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction" data-title="The animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles."><code>animation-direction</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration" data-title="The animation-duration CSS property specifies the length of time that an animation should take to complete one cycle."><code>animation-duration</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode" data-title="The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing."><code>animation-fill-mode</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count" data-title="The animation-iteration-count CSS property defines the number of times an animation cycle should be played before stopping."><code>animation-iteration-count</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name" data-title="The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence."><code>animation-name</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state" data-title="The animation-play-state CSS property determines whether an animation is running or paused. You can query this property's value to determine whether or not the animation is currently running; in addition, you can set its value to pause and resume playback of an animation."><code>animation-play-state</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function" data-title="The CSS animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several <timing-function>."><code>animation-timing-function</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values#@annotation"><code>@annotation</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#annotation()"><code>annotation()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/attr" data-title="The documentation about this has not yet been written; please consider contributing!"><code>attr()</code></a></li> | |
| </ol></li> | |
| <li>B | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop" data-title="Each element in the top layer's stack has a ::backdrop pseudo-element. This pseudo-element is a box rendered immediately below the element (and above the element below the element in the stack, if any), within the same top layer."><code>::backdrop</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility" data-title="The CSS backface-visibility property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed."><code>backface-visibility</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background" data-title="The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment."><code>background</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment" data-title="If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block."><code>background-attachment</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode" data-title="The background-blend-mode CSS property describes how the element's background images should blend with each other and the element's background color."><code>background-blend-mode</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip" data-title="The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border."><code>background-clip</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color" data-title="The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent."><i class="fa fa-eyedropper"></i> | |
| <code>background-color</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-image" data-title="The CSS background-image property sets one or several background images for an element. The images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them."><i class="fa fa-picture-o"></i> <code>background-image</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin" data-title="The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property."><code>background-origin</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position" data-title="The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image."><code>background-position</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat" data-title="The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all. When the repetition of the image tiles doesn't let them exactly cover the background, the way adjustments are done can be controlled by the author: by default, the last image is clipped, but the different tiles can instead be re-sized, or space can be inserted between the tiles."><code>background-repeat</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size" data-title="The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio."><code>background-size</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape" data-title="The documentation about this has not yet been written; please consider contributing!"><code><basic-shape></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::before" data-title="The documentation about this has not yet been written; please consider contributing!"><code>::before (:before)</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode" data-title="The documentation about this has not yet been written; please consider contributing!"><code><blend-mode></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#blur()"><code>blur()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border" data-title="The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color."><code>border</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom" data-title="The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements."><code>border-bottom</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color" data-title="The border-bottom-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-bottom are more convenient and preferable."><i class="fa fa-eyedropper"></i> | |
| <code>border-bottom-color</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius" data-title="The border-bottom-left-radius CSS property sets the rounding of the bottom-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square."><i class="fa fa-square-o"></i> <code>border-bottom-left-radius</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius" data-title="The border-bottom-right-radius CSS property sets the rounding of the bottom-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square."><i class="fa fa-square-o"></i> <code>border-bottom-right-radius</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style" data-title="The border-bottom-style CSS property sets the line style of the bottom border of a box."><code>border-bottom-style</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width" data-title="The border-bottom-width CSS property sets the width of the bottom border of a box."><code>border-bottom-width</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse" data-title="The border-collapse CSS property selects a table's border model. This has a big influence on the look and style of the table cells."> <i class="fa fa-table"></i> <code>border-collapse</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-color" data-title="The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color"><i class="fa fa-eyedropper"></i> | |
| <code>border-color</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image" data-title="The border-image CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases."><i class="fa fa-picture-o"></i> <code>border-image</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-outset" data-title="The border-image-outset property describes by which amount the border image area extends beyond the border box."><code>border-image-outset</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-repeat" data-title="The border-image-repeat CSS property defines how the middle part of a border image is handled so that it can match the size of the border. It has a one-value syntax that describes the behavior of all the sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior."><code>border-image-repeat</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice" data-title="The border-image-slice CSS property divides the image specified by border-image-source in nine regions: the four corners, the four edges and the middle. It does this by specifying 4 inwards offsets."><code>border-image-slice</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-source" data-title="The border-image-source CSS property defines the <image> to use instead of the style of the border. If this property is set to none, the style defined by border-style is used instead."><code>border-image-source</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width" data-title="The border-image-width CSS property defines the width of the border. If specified, it overrides the border-width property."><code>border-image-width</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left" data-title="The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements."><code>border-left</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color" data-title="The border-left-color CSS property sets the color of the bottom border of an element. Note that in many cases the shorthand CSS properties border-color or border-left are more convenient and preferable."><i class="fa fa-eyedropper"></i> | |
| <code>border-left-color</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style" data-title="The border-left-style CSS property sets the line style of the left border of a box."><code>border-left-style</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width" data-title="The border-left-width CSS property sets the width of the left border of a box."><code>border-left-width</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius" data-title="The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse."><i class="fa fa-square-o"></i> <code>border-radius</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right" data-title="The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements."><code>border-right</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color" data-title="The border-right-color CSS property sets the color of the right border of an element. Note that in many cases the shorthand CSS properties border-color or border-right are more convenient and preferable."><i class="fa fa-eyedropper"></i> | |
| <code>border-right-color</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style" data-title="The border-right-style CSS property sets the line style of the right border of a box."><code>border-right-style</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width" data-title="The border-right-width CSS property sets the width of the right border of a box."><code>border-right-width</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing" data-title="The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing."><code>border-spacing</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-style" data-title="Technical review completed."><code>border-style</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top" data-title="The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements."><code>border-top</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color" data-title="The border-top-color CSS property sets the color of the top border of an element. Note that in many cases the shorthand CSS properties border-color or border-top are more convenient and preferable."><i class="fa fa-eyedropper"></i> | |
| <code>border-top-color</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius" data-title="The border-top-left-radius CSS property sets the rounding of the top-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0,no rounding is done and the corner is square."><i class="fa fa-square-o"></i> <code>border-top-left-radius</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius" data-title="The border-top-right-radius CSS property sets the rounding of the top-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square."><i class="fa fa-square-o"></i> <code>border-top-right-radius</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style" data-title="The border-top-style CSS property sets the line style of the top border of a box."><code>border-top-style</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width" data-title="The border-top-width CSS property sets the width of the top border of a box."><code>border-top-width</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-width" data-title="The border-width CSS property sets the width of the border of a box. Using the shorthand property border is often more convenient."><code>border-width</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/bottom" data-title="The bottom CSS property participates in specifying the position of positioned elements."><code>bottom</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break" data-title="The box-decoration-break CSS property specifies how the background, padding, border, border-image, box-shadow, margin and clip of an element is applied when the box for the element is fragmented. Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a fragment."><code>box-decoration-break</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow" data-title="Technical review completed."><code>box-shadow</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing" data-title="The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification."><code>box-sizing</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-after" data-title="The break-after CSS property describes how the page, column or region break behavior after the generated box. If there is no generated box, the property is ignored."><code>break-after</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-before" data-title="The break-before CSS property describes how the page, column or region break behavior before the generated box. If there is no generated box, the property is ignored."><code>break-before</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside" data-title="The documentation about this has not yet been written; please consider contributing!"><code>break-inside</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#brightness()"><code>brightness()</code></a></li> | |
| </ol></li> | |
| <li>C | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc" data-title="The documentation about this has not yet been written; please consider contributing!"><code>calc()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side" data-title="The caption-side CSS property positions the content of a table's <caption> on the specified side."><i class="fa fa-table"></i> <code>caption-side</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#ch"><code>ch</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values#@character-variant"><code>@character-variant</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#character-variant()"><code>character-variant()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@charset" data-title="The @charset CSS at-rule specifies the character encoding used in the style sheet. It must be the first element in the style sheet and not be preceded by any character; as it is not a nested statement, it cannot be used inside conditional group at-rules. If several @charset at-rules are defined, only the first one is used, and it cannot be used inside a style attribute on an HTML element or inside the <style> element where the character set of the HTML page is relevant."><code>@charset</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:checked" data-title="The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option> in a <select>) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one."><code>:checked</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/<basic-shape>#circle"><code>circle()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clear" data-title="The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them."><code>clear</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip" data-title="The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute."><code>clip</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path" data-title="The clip-path property prevents a portion of an element from drawing by defining a clipping region."><code>clip-path</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#cm"><code>cm</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" data-title="The CSS color property sets the foreground color of an element's text content, and its decorations. It doesn't affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons and its appearance in CSS Level 1."><i class="fa fa-eyedropper"></i> | |
| <code>color</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" data-title="The documentation about this has not yet been written; please consider contributing!"><code><color></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/columns" data-title="The columns CSS property is a shorthand property allowing to set both the column-width and the column-count properties at the same time."><i class="fa fa-columns"></i> <code>columns</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-count" data-title="The column-count CSS property describes the number of columns of the element."><i class="fa fa-columns"></i> <code>column-count</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill" data-title="The column-fill CSS property controls how contents are partitioned into columns. Contents are either balanced, which means that contents in all columns will have the same height or, when using auto, just take up the room the content needs."><i class="fa fa-columns"></i> <code>column-fill</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap" data-title="The column-gap CSS property sets the size of the gap between columns for elements which are specified to display as a multi-column element."><i class="fa fa-columns"></i> <code>column-gap</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule" data-title="In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual column-rule-* properties separately : column-rule-width, column-rule-style and column-rule-color."><i class="fa fa-columns"></i> <code>column-rule</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-color" data-title="The column-rule-color CSS property lets you set the color of the rule drawn between columns in multi-column layouts."><i class="fa fa-columns"></i> <code>column-rule-color</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-style" data-title="The column-rule-style CSS property lets you set the style of the rule drawn between columns in multi-column layouts."><i class="fa fa-columns"></i> <code>column-rule-style</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule-width" data-title="The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts."><i class="fa fa-columns"></i> <code>column-rule-width</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-span" data-title="The column-span CSS property makes it possible for an element to span across all columns when its value is set to all. An element that spans more than one column is called a spanning element."><i class="fa fa-columns"></i> <code>column-span</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-width" data-title="The column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the column around that suggested value, allowing to achieve scalable designs that fit different screen size. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width."><i class="fa fa-columns"></i> <code>column-width</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content" data-title="The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements."><code>content</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#contrast()"><code>contrast()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter" data-title="The documentation about this has not yet been written; please consider contributing!"><i class="fa fa-sort-numeric-asc"></i> <code><counter></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment" data-title="The counter-increment CSS property is used to increase the value of CSS Counters by a given value. The counter's value can be reset using the counter-reset CSS property."><i class="fa fa-sort-numeric-asc"></i> <code>counter-increment</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset" data-title="The counter-reset CSS property is used to reset CSS Counters to a given value."><i class="fa fa-sort-numeric-asc"></i> <code>counter-reset</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style" data-title="The documentation about this has not yet been written; please consider contributing!"><i class="fa fa-sort-numeric-asc"></i> <code>@counter-style</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions"><code>cubic-bezier()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor" data-title="The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element."><code>cursor</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident" data-title="The documentation about this has not yet been written; please consider contributing!"><code><custom-ident></code></a></li> | |
| </ol></li> | |
| <li>D | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:default" data-title="The :default CSS pseudo-class represents any user interface element that is the default among a group of similar elements."><code>:default</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/angle#deg"><code>deg</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir" data-title="The documentation about this has not yet been written; please consider contributing!"><code>:dir()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/direction" data-title="Set the direction CSS property to match the direction of the text: rtl for languages written from right-to-left (like Hebrew or Arabic) text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS."><i class="fa fa-exchange"></i> <code>direction</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled" data-title="The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus."><code>:disabled</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" data-title="The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline."><code>display</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@document" data-title="The @document rule is an at-rule that restricts the style rules contained within it based on the URL of the document. It is designed primarily for user style sheets. A @document rule can specify one or more matching functions. If any of the functions apply to a URL, the rule will take effect on that URL."><code>@document</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resolution#dpcm"><code>dpcm</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resolution#dpi"><code>dpi</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resolution#dppx"><code>dppx</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#drop-shadow()"><code>drop-shadow()</code></a></li> | |
| </ol></li> | |
| <li>E | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/element" data-title="The documentation about this has not yet been written; please consider contributing!"><code>element()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/<basic-shape>#ellipse"><code>ellipse()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#em"><code>em</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:empty" data-title="The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not."><code>:empty</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells" data-title="The empty-cells CSS property specifies how user agents should render borders and backgrounds around cells that have no visible content."><code>empty-cells</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled" data-title="The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an disabled state, in which it can't be activated or accept focus."><code>:enabled</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#ex"><code>ex</code></a></li> | |
| </ol></li> | |
| <li>F | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter" data-title="The CSS filter property provides for effects like blurring or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border."><code>filter</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:first" data-title="The :first page CSS pseudo-class describes the styling of the first page when printing a document."><code>:first</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child" data-title="The :first-child CSS pseudo-class represents any element that is the first child element of its parent."><code>:first-child</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter" data-title="The documentation about this has not yet been written; please consider contributing!"><code>::first-letter (:first-letter)</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line" data-title="The documentation about this has not yet been written; please consider contributing!"><code>::first-line (:first-line)</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type" data-title="The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element."><code>:first-of-type</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex" data-title="The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow."><code>flex</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis" data-title="The CSS flex-basis property specifies the flex basis which is the initial main size of a flex item. The property determines the size of the content-box unless specified otherwise using box-sizing."><code>flex-basis</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" data-title="The CSS flex-direction property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed)."><code>flex-direction</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow" data-title="The CSS flex-flow property is a shorthand property for flex-direction and flex-wrap individual properties."><code>flex-flow</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow" data-title="The CSS flex-grow property specifies the flex grow factor of a flex item."><code>flex-grow</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink" data-title="The CSS flex-shrink property specifies the flex shrink factor of a flex item."><code>flex-shrink</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap" data-title="The CSS flex-wrap property specifies whether the children are forced into a single line or if the items can be flowed on multiple lines."><code>flex-wrap</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float" data-title="The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none."><code>float</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus" data-title="The :focus CSS pseudo-class is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input)."><code>:focus</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font" data-title="The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family, or a way to set the element's font to a system font, using specific keywords."><i class="fa fa-font"></i> <code>font</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" data-title="The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule."><i class="fa fa-font"></i> <code>@font-face</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" data-title="The font-family CSS property allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer, or that can be downloaded using the information provided by a @font-face at-rule."><i class="fa fa-font"></i> <code>font-family</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings" data-title="The font-feature-settings CSS property allows control over advanced typographic features in OpenType fonts."><i class="fa fa-font"></i> <code>font-feature-settings</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values" data-title="The @font-feature-values CSS at-rule allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType. It allows to simplify the CSS when using several fonts."><code>@font-feature-values</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning" data-title="The font-kerning CSS property controls the usage of the kerning information, that is how letters are spaced. The kerning information is stored in the font and if this one is well-kerned, this feature allows to have spacing between characters to be very similar, whatever the characters are."><code>font-kerning</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-language-override" data-title="The font-language-override CSS property controls the usage of language-specific glyphs in a typeface."><code>font-language-override</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" data-title="The font-size CSS property specifies the size of the font – specifically the desired height of glyphs from the font. Setting the font size may, in turn, change the size of other items, since it is used to compute the value of em and ex length units."><code>font-size</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size-adjust" data-title="Technical review completed."><code>font-size-adjust</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch" data-title="The font-stretch CSS property selects a normal, condensed, or expanded face from a font."><i class="fa fa-text-width"></i> <code>font-stretch</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style" data-title="The font-style CSS property allows italic or oblique faces to be selected within a font-family."><i class="fa fa-italic"></i> <code>font-style</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis" data-title="The font-synthesis CSS property controls which missing typefaces, bold or italic, may be synthesized by the browser."><code>font-synthesis</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant" data-title="The font-variant CSS property selects a normal, or small-caps face from a font family. Setting the CSS Level 2 (Revision 1) values of the font-variant property, that is normal or small-caps, is also possible by using the font shorthand."><code>font-variant</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates" data-title="The font-variant-alternates CSS property controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values."><code>font-variant-alternates</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps" data-title="The font-variant-caps CSS property controls the usage of alternate glyphs for capital letters. Scripts can have capital letter glyphs of different sizes, the normal uppercase glyphs, small capital glyphs, and petite capital glyphs. This property controls which alternate glyphs to use."><code>font-variant-caps</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian" data-title="The font-variant-east-asian CSS property controls the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese."><code>font-variant-east-asian</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures" data-title="The font-variant-ligatures CSS property controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text"><code>font-variant-ligatures</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric" data-title="The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers."><code>font-variant-numeric</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-position" data-title="The font-variant-position CSS property controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font, which is set unchanged. These glyphs are likely to be used in <sub> and <sup> elements."><code>font-variant-position</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" data-title="The font-weight CSS property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on normal and bold."><i class="fa fa-bold"></i> <code>font-weight</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/frequency" data-title="The documentation about this has not yet been written; please consider contributing!"><code><frequency></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen" data-title="The :fullscreen CSS pseudo-class applies to any element that's currently being displayed in full-screen mode. See Using full-screen mode for details."><code>:fullscreen</code></a></li> | |
| </ol></li> | |
| <li>G | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/angle#grad"><code>grad</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient" data-title="The documentation about this has not yet been written; please consider contributing!"><code><gradient></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#grayscale()"><code>grayscale()</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-area</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-auto-columns</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-auto-flow</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-position" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-auto-position</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-auto-rows</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-column</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-column-start</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-column-end</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-row</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-row-start</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-row-end</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-template</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-template-areas</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-template-rows</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns" data-title="The documentation about this has not yet been written; please consider contributing!"><code>grid-template-columns</code></a></li> | |
| </ol></li> | |
| <li>H | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height" data-title="The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element."><i class="fa fa-arrows-v"></i> <code>height</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:hover" data-title="The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active."><code>:hover</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl()"><code>hsl()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsla()"><code>hsla()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#hue-rotate()"><code>hue-rotate()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens" data-title="The hyphens CSS property tells the browser how to go about splitting words to improve the layout of text when line-wrapping. On HTML, the language is determined by the lang attribute: browsers will hyphenate only if this attribute is present and if an appropriate hyphenation dictionary is available. On XML, the xml:lang attribute must be used."><code>hyphens</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/frequency#Hz"><code>hz</code></a></li> | |
| </ol></li> | |
| <li>I | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image" data-title="The documentation about this has not yet been written; please consider contributing!"><i class="fa fa-picture-o"></i> <code><image></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image" data-title="The documentation about this has not yet been written; please consider contributing!"><i class="fa fa-picture-o"></i> <code>image()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering" data-title="The image-rendering CSS property provides a hint to the user agent about how to handle its image rendering. It applies to any images appearing on the element properties, but has no effect on non-scaled images.. For example, if the natural size of the image is 100×100px but the page author specifies the dimensions to 200×200px (or 50×50px), then the image will be upscaled (or downscaled) to the new dimensions using the specified algorithm. Scaling may also apply due to user interaction (zooming)."><i class="fa fa-picture-o"></i> <code>image-rendering</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/image-resolution" data-title="The documentation about this has not yet been written; please consider contributing!"><i class="fa fa-picture-o"></i> <code>image-resolution</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation" data-title="The image-orientation CSS property describes how to correct the default orientation of an image."><i class="fa fa-picture-o"></i> <code>image-orientation</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/ime-mode" data-title="The ime-mode CSS property controls the state of the input method editor for text fields."><code>ime-mode</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@import" data-title="The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules."><code>@import</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#in"><code>in</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate" data-title="The :indeterminate CSS pseudo-class represents any <input type="checkbox"> element whose indeterminate DOM property is set to true by JavaScript. In addition, in some browsers, it can be used to match to <progress> elements in an indeterminate state."><code>:indeterminate</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inherit" data-title="The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property."><code>inherit</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/initial" data-title="The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property."><code>initial</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:in-range" data-title="The :in-range CSS pseudo-class matches when an element has its value attribute inside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is inside the range limits."><code>:in-range</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/<basic-shape>#inset"><code>inset()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/integer" data-title="The documentation about this has not yet been written; please consider contributing!"><code><integer></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid" data-title="The :invalid CSS pseudo-class represents any <input> or <form> element whose content fails to validate according to the input's type setting. This allows you to easily have invalid fields adopt an appearance that helps the user identify and correct errors."><code>:invalid</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#invert()"><code>invert()</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/isolation" data-title="The documentation about this has not yet been written; please consider contributing!"><code>isolation</code></a></li> | |
| </ol></li> | |
| <li>J | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content" data-title="The CSS justify-content property defines how a browser distributes available space between and around elements when aligning flex items in the main-axis of the current line. The alignment is done after the lengths and auto margins are applied, meaning that, if there is at least one flexible element, with flex-grow different than 0, it will have no effect as there won't be any available space."><code>justify-content</code></a></li> | |
| </ol></li> | |
| <li>K | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes" data-title="The @keyframes CSS at-rule lets authors control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points during the animation. This gives you more specific control over the intermediate steps of the animation sequence than you get when letting the browser handle everything automatically."><code>@keyframes</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/frequency#kHz"><code>khz</code></a></li> | |
| </ol></li> | |
| <li>L | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang" data-title="The documentation about this has not yet been written; please consider contributing!"><code>:lang()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child" data-title="The :last-child CSS pseudo-class represents any element that is the last child element of its parent."><code>:last-child</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type" data-title="The :last-of-type CSS pseudo-class represents the last sibling with the given element name in the list of children of its parent element."><code>:last-of-type</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/left" data-title="The left CSS property specifies part of the position of positioned elements."><code>left</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:left" data-title="The :left CSS page pseudo-class matches any left page when printing a page. It allows to describe the styling of left-side pages."><code>:left</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length" data-title="The documentation about this has not yet been written; please consider contributing!"><code><length></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing" data-title="The letter-spacing CSS property specifies spacing behavior between text characters."><code>letter-spacing</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient" data-title="The documentation about this has not yet been written; please consider contributing!"><code>linear-gradient()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-break" data-title="The line-break CSS property is used to specify how (or if) to break lines."><code>line-break</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height" data-title="On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element."><i class="fa fa-text-height"></i> <code>line-height</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:link" data-title="The :link CSS pseudo-class lets you select links inside elements. This will select any link, even those already styled using selector with other link-related pseudo-classes like :hover, :active or :visited. In order to style only non-visited links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending of the expected effect."><code>:link</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style" data-title="The list-style CSS property is a shorthand property for setting list-style-type, list-style-image and list-style-position."><i class="fa fa-list-ul"></i> <code>list-style</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image" data-title="The list-style-image CSS property sets the image that will be used as the list item marker."><i class="fa fa-picture-o"></i> <code>list-style-image</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position" data-title="The list-style-position CSS property specifies the position of the marker box in the principal block box."><i class="fa fa-list-ul"></i> <code>list-style-position</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type" data-title="The list-style-type CSS property specifies appearance of a list item element. As it is the only one which defaults to display:list-item, this is usually a <li> element, but can be any element with this display value."><i class="fa fa-list-ul"></i> <code>list-style-type</code></a></li> | |
| </ol></li> | |
| <li>M | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin" data-title="The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left. | |
| Negative values are also allowed."><i class="fa fa-arrows"></i> <code>margin</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom" data-title="The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed."><i class="fa fa-arrow-down"></i> <code>margin-bottom</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left" data-title="The margin-left CSS property of an element sets the margin space required on the left side of a box associated with an element. A negative value is also allowed."><i class="fa fa-arrow-left"></i> <code>margin-left</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right" data-title="The margin-right CSS property of an element sets the margin space required on the right side of an element. A negative value is also allowed."><i class="fa fa-arrow-right"></i> <code>margin-right</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top" data-title="The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed."><i class="fa fa-arrow-up"></i> <code>margin-top</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/marks" data-title="The marks CSS property adds crop and/or cross marks to the presentation of the document. Crop marks indicate where the page should be cut. Cross marks are used to align sheets."><code>marks</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask" data-title="The documentation about this has not yet been written; please consider contributing!"><code>mask</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type" data-title="The CSS mask-type properties defines if a SVG <mask> element is a luminance or an alpha mask."><code>mask-type</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#matrix()"><code>matrix()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#matrix3d()"><code>matrix3d()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-height" data-title="The max-height CSS property is used to set the maximum height of a given element. It prevents the used value of the height property from becoming larger than the value specified for max-height."><code>max-height</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width" data-title="The max-width CSS property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width."><code>max-width</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media" data-title="The @media CSS at-rule associates a set of nested statements, in a CSS block that is delimited by curly braces, with a condition defined by a media query. The @media at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule."><code>@media</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height" data-title="The min-height CSS property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height."><code>min-height</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/minmax" data-title="The documentation about this has not yet been written; please consider contributing!"><code>minmax()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width" data-title="The min-width CSS property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width."><code>min-width</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode" data-title="The mix-blend-mode CSS property describes how an element content should blend with the content of the element that is below it and the element's background."><code>mix-blend-mode</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#mm"><code>mm</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/time#ms"><code>ms</code></a></li> | |
| </ol></li> | |
| <li>N | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace" data-title="The @namespace rule is an at-rule that defines the XML namespaces that will be used in the style sheet. The namespaces defined can be used to restrict the universal, type, and attribute selectors to only select elements under that namespace. The @namespace rule is generally only useful when dealing with an XML document containing multiple namespaces - for example, an XHTML document with SVG embedded."><code>@namespace</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" data-title="The documentation about this has not yet been written; please consider contributing!"><code>:not()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child" data-title="The documentation about this has not yet been written; please consider contributing!"><code>:nth-child()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child" data-title="The documentation about this has not yet been written; please consider contributing!"><code>:nth-last-child()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type" data-title="The documentation about this has not yet been written; please consider contributing!"><code>:nth-last-of-type()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type" data-title="The documentation about this has not yet been written; please consider contributing!"><code>:nth-of-type()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number" data-title="The documentation about this has not yet been written; please consider contributing!"><code><number></code></a></li> | |
| </ol></li> | |
| <li>O | |
| <ol> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit" data-title="The documentation about this has not yet been written; please consider contributing!"><code>object-fit</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position" data-title="The documentation about this has not yet been written; please consider contributing!"><code>object-position</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child" data-title="The :only-child CSS pseudo-class represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity."><code>:only-child</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type" data-title="The :only-of-type CSS pseudo-class represents any element that has no siblings of the given type."><code>:only-of-type</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/opacity" data-title="The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid."><code>opacity</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#opacity()"><code>opacity()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:optional" data-title="The :optional CSS pseudo-class represents any <input> element that does not have the required attribute set on it. This allows forms to easily indicate optional fields, and to style them accordingly."><code>:optional</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order" data-title="The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out by ascending order of the order value. Elements with the same order value are laid out in the order they appear in the source code."><code>order</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values#@ornaments"><code>@ornaments</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#ornaments()"><code>ornaments()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/orphans" data-title="The orphans CSS property refers to the minimum number of lines in a block container that must be left at the bottom of the page. This property is normally used to control how page breaks occur."><code>orphans</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/outline" data-title="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."><code>outline</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color" data-title="The outline-color CSS property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out."><i class="fa fa-eyedropper"></i> | |
| <code>outline-color</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset" data-title="The outline-offset CSS property is used to set space between an outline and the edge or border of an element. An outline is a line that is drawn around elements, outside the border edge."><code>outline-offset</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style" data-title="The outline-style CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out."><code>outline-style</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width" data-title="The outline-width CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out:"><code>outline-width</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range" data-title="The :out-of-range CSS pseudo-class matches when an element has its value attribute outside the specified range limitations for this element. It allows the page to give a feedback that the value currently defined using the element is outside the range limits. A value can be outside of a range if it is either smaller or larger than maximum and minimum set values."><code>:out-of-range</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow" data-title="The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element."><code>overflow</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" data-title="REDIRECT https://developer.mozilla.orghttps://developer.mozilla.org/en-US/docs/CSS/word-wrap"><code>overflow-wrap</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x" data-title="The overflow-x CSS property specifies whether to clip content, render a scroll bar or display overflow content of a block-level element, when it overflows at the left and right edges."><code>overflow-x</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y" data-title="The overflow-y CSS property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges."><code>overflow-y</code></a></li> | |
| </ol></li> | |
| <li>P | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding" data-title="The padding CSS property sets the required padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed."><i class="fa fa-arrows"></i> <code>padding</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom" data-title="The padding-bottom CSS property of an element sets the height of the padding area at the bottom of an element. The padding area is the space between the content of the element and it's border. Contrary to margin-bottom values, negative values of padding-bottom are invalid."><i class="fa fa-arrow-down"></i> <code>padding-bottom</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left" data-title="The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed."><i class="fa fa-arrow-left"></i> <code>padding-left</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right" data-title="The padding-right CSS property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed."><i class="fa fa-arrow-right"></i> <code>padding-right</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top" data-title="The padding-top CSS property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to margin-top values, negative values of padding-top are invalid."><i class="fa fa-arrow-up"></i> <code>padding-top</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@page" data-title="The @page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with @page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored."><code>@page</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after" data-title="The page-break-after CSS property adjusts page breaks after the current element."><code>page-break-after</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before" data-title="The page-break-before CSS property adjusts page breaks before the current element."><code>page-break-before</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside" data-title="The page-break-inside CSS property adjusts page breaks inside the current element."><code>page-break-inside</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#pc"><code>pc</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/percentage" data-title="The documentation about this has not yet been written; please consider contributing!"><code><percentage></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/perspective" data-title="The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property."><code>perspective</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#perspective()"><code>perspective()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin" data-title="The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property."><code>perspective-origin</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events" data-title="The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content."><code>pointer-events</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/<basic-shape>#polygon"><code>polygon()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position" data-title="The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects."><code>position</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position_value" data-title="The documentation about this has not yet been written; please consider contributing!"><code><position></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#pt"><code>pt</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#px"><code>px</code></a></li> | |
| </ol></li> | |
| <li>Q | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/quotes" data-title="The quotes CSS property indicates how user agents should render quotation marks."><i class="fa fa-quote-left"></i> <code>quotes</code></a></li> | |
| </ol></li> | |
| <li>R | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/angle#rad"><code>rad</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient" data-title="The documentation about this has not yet been written; please consider contributing!"><code>radial-gradient()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/ratio" data-title="The documentation about this has not yet been written; please consider contributing!"><code><ratio></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only" data-title="The :read-only CSS pseudo-class matches when an element is not writable by the user."><code>:read-only</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write" data-title="The :read-write CSS pseudo-class matches when an element is editable by user like text input element."><code>:read-write</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/shape#Syntax"><code>rect()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem"><code>rem</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/repeat" data-title="The documentation about this has not yet been written; please consider contributing!"><code>repeat()</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::repeat-index" data-title="The documentation about this has not yet been written; please consider contributing!"><code>::repeat-index</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::repeat-item" data-title="The documentation about this has not yet been written; please consider contributing!"><code>::repeat-item</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient" data-title="The documentation about this has not yet been written; please consider contributing!"><code>repeating-linear-gradient()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient" data-title="The documentation about this has not yet been written; please consider contributing!"><code>repeating-radial-gradient()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:required" data-title="The :required CSS pseudo-class represents any <input> element that has the required attribute set on it. This allows forms to easily indicate which fields must have valid data before the form can be submitted."><code>:required</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resize" data-title="The resize CSS property lets you control the resizability of an element."><code>resize</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resolution" data-title="The documentation about this has not yet been written; please consider contributing!"><code><resolution></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()"><code>rgb()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()"><code>rgba()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/right" data-title="The right CSS property specifies part of the position of positioned elements."><code>right</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:right" data-title="The :right CSS page pseudo-class matches any right page when printing a page. It allows to describe the styling of right-side page."><code>:right</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:root" data-title="The :root CSS pseudo-class matches the root element of a tree representing the document. Applied to HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher."><code>:root</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate()"><code>rotate()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateX()"><code>rotatex()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateY()"><code>rotatey()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateZ()"><code>rotatez()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate3d()"><code>rotate3d()</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-align" data-title="The documentation about this has not yet been written; please consider contributing!"><code>ruby-align</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-merge" data-title="The documentation about this has not yet been written; please consider contributing!"><code>ruby-merge</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-position" data-title="The documentation about this has not yet been written; please consider contributing!"><code>ruby-position</code></a></li> | |
| </ol></li> | |
| <li>S | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/time#s"><code>s</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#saturate()"><code>saturate()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale()"><code>scale()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleX()"><code>scalex()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleY()"><code>scaley()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleZ()"><code>scalez()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale3d()"><code>scale3d()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:scope" data-title="The :scope CSS pseudo-class matches the elements that are a reference point for selectors to match against. In HTML, a new reference point can be defined using the scoped attribute of the <style>. If no such attribute is used on an HTML page, the reference point is the <html> element."><code>:scope</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::selection" data-title="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."><code>::selection</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter#sepia()"><code>sepia()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/shape" data-title="The documentation about this has not yet been written; please consider contributing!"><code><shape></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/shape-image-threshold" data-title="The shape-image-threshold CSS property defines the alpha channel threshold used to extract the shape using an image as the value for shape-outside. A value of 0.5 means that the shape will enclose all hte pixels that are more than 50% opaque."><code>shape-image-threshold</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/shape-margin" data-title="The shape-margin CSS property adds a margin to shape-outside."><code>shape-margin</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside" data-title="The shape-outside CSS property uses shape values to define the float area for a float and will cause inline content to wrap around the shape instead of the float's bounding box."><code>shape-outside</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skew()"><code>skew()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skewX()"><code>skewx()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skewY()"><code>skewy()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#The_steps()_class_of_timing-functions"><code>steps()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/string" data-title="The documentation about this has not yet been written; please consider contributing!"><code><string></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values#@styleset"><code>@styleset</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#styleset()"><code>styleset()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values#@stylistic"><code>@stylistic</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#stylistic()"><code>stylistic()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports" data-title="The @supports CSS at-rule associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a supports condition."><code>@supports</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values#@swash"><code>@swash</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates#swash()"><code>swash()</code></a></li> | |
| </ol> | |
| <li>T | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout" data-title="The table-layout CSS property defines the algorithm to be used to layout the table cells, rows, and columns."><i class="fa fa-table"></i> <code>table-layout</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/tab-size" data-title="The tab-size CSS property is used to customize the width of a tab (U+0009) character."><code>tab-size</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:target" data-title="The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.."><code>:target</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align" data-title="The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content."><i class="fa fa-align-left"></i> <code>text-align</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last" data-title="The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned."><code>text-align-last</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-combine-upright" data-title="The documentation about this has not yet been written; please consider contributing!"><code>text-combine-upright</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" data-title="The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink."><i class="fa fa-underline"></i> <code>text-decoration</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color" data-title="The text-decoration-color CSS property sets the color used when drawing underlines, overlines, or strike-throughs specified by text-decoration-line. This is the preferred way to color these text decorations, rather than using combinations of other HTML elements."><i class="fa fa-eyedropper"></i> | |
| <code>text-decoration-color</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line" data-title="The text-decoration-line CSS property sets what kind of line decorations are added to an element."><i class="fa fa-underline"></i> <code>text-decoration-line</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style" data-title="The text-decoration-style CSS property defines the style of the lines specified by text-decoration-line. The style applies to all lines, there is no way to define different style for each of the line defined by text-decoration-line."><i class="fa fa-underline"></i> <code>text-decoration-style</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent" data-title="The text-indent CSS property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element. Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block element's box."><i class="fa fa-indent"></i> <code>text-indent</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation" data-title="The documentation about this has not yet been written; please consider contributing!"><code>text-orientation</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow" data-title="The text-overflow CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, or display an ellipsis ('…', U+2026 Horizontal Ellipsis) or a Web author-defined string."><code>text-overflow</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering" data-title="The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text. The browser makes trade-offs among speed, legibility, and geometric precision. The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, Mac OS X and Linux."><code>text-rendering</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow" data-title="The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and text-decorations of the element."><code>text-shadow</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform" data-title="The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized."><code>text-transform</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position" data-title="The CSS text-underline-position property specifies the position of the underline which is set using the text-decoration property underline value."><code>text-underline-position</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/time" data-title="The documentation about this has not yet been written; please consider contributing!"><code><time></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function" data-title="The documentation about this has not yet been written; please consider contributing!"><code><timing-function></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/top" data-title="The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements."><i class="fa fa-arrow-up"></i> <code>top</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action" data-title="The documentation about this has not yet been written; please consider contributing!"><code>touch-action</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform" data-title="The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set."><code>transform</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin" data-title="The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)"><code>transform-origin</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style" data-title="The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element."><code>transform-style</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition" data-title="The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript."><code>transition</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay" data-title="The transition-delay CSS property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect."><code>transition-delay</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration" data-title="The transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur."><code>transition-duration</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property" data-title="The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied."><code>transition-property</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function" data-title="The CSS transition-timing-function property is used to describe how the intermediate values of the CSS properties being affected by a transition effect are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration."><code>transition-timing-function</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translate()"><code>translate()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateX()"><code>translatex()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateY()"><code>translatey()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateZ()"><code>translatez()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translate3d()"><code>translate3d()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/angle#turn"><code>turn</code></a></li> | |
| </ol></li> | |
| <li>U | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi" data-title="The unicode-bidi CSS property together with the direction property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding."><code>unicode-bidi</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-range" data-title="The unicode-range CSS descriptor sets the specific range of characters to be downloaded from a font defined by @font-face and made available for use on the current page."><code>unicode-range</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/unset" data-title="The unset CSS keyword is the combination of the initial and inherit keywords. Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case."><code>unset</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/uri" data-title="The documentation about this has not yet been written; please consider contributing!"><code><uri></code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/uri#The_url()_functional_notation"><code>url()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-ident" data-title="The documentation about this has not yet been written; please consider contributing!"><code><user-ident></code></a></li> | |
| </ol></li> | |
| <li>V | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid" data-title="The :valid CSS pseudo-class represents any <input> element whose content validates correctly according to the input's type setting. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly."><code>:valid</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::value" data-title="The documentation about this has not yet been written; please consider contributing!"><code>::value</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/var" data-title="The documentation about this has not yet been written; please consider contributing!"><code>var()</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align" data-title="The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box."><code>vertical-align</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#vh"><code>vh</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport" data-title="The @viewport CSS at-rule contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices."><code>@viewport</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/visibility" data-title="The visibility CSS property has two purposes:"><code>visibility</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:visited" data-title="The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover — :active."><code>:visited</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#vmax"><code>vmax</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#vmin"><code>vmin</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#vw"><code>vw</code></a></li> | |
| </ol></li> | |
| <li>W | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space" data-title="The white-space CSS property is used to to describe how whitespace inside the element is handled."><code>white-space</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/widows" data-title="The widows CSS property defines how many minimum lines must be left on top of a new page, on a paged media. In typography, a widow is the last line of a paragraph appearing alone at the top of a page. Setting the widows property allows to prevent widows to be left."><code>widows</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" data-title="The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element."><i class="fa fa-arrows-h"></i> <code>width</code></a></li> | |
| <li><a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/will-change" data-title="The documentation about this has not yet been written; please consider contributing!"><code>will-change</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-break" data-title="The word-break CSS property is used to specify how (or if) to break lines within words."><code>word-break</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing" data-title="The word-spacing CSS property specifies spacing behavior between tags and words."><code>word-spacing</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap" data-title="The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow (in other words, force wrapping) when an otherwise unbreakable string is too long to fit in its containing box."><code>word-wrap</code></a></li> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode" data-title="CSS Writing Modes Level 3 defines CSS features to support various international script modes, such as left-to-right (e.g., Latin and Indic), right-to-left (e.g., Hebrew and Arabic), bidirectional (e.g., mixed Latin and Arabic) and vertical (e.g., Asian). This article is about the CSS writing-mode property."><code>writing-mode</code></a></li> | |
| </ol></li> | |
| <li>Z | |
| <ol> | |
| <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/z-index" data-title="The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one."><code>z-index</code></a></li> | |
| </ol></li></ol> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $( "code:contains(':')" ).addClass('selector'); | |
| $( "code:contains('<'), code:contains('()'), [href*='#'] code" ).addClass('value'); | |
| $( "code:contains('@')" ).addClass('at'); | |
| $("a[data-title*='flex']").attr('data-family','flex'); | |
| $("a[data-title*=' transform'],a[href*='transform-']").attr('data-family','transform'); | |
| $("a[href*='shape'],a[href*='-shape']").attr('data-family','shape'); | |
| $.fn.wrapStart = function (numWords) { | |
| var node = this.contents().filter(function () { return this.nodeType == 3 }).first(), | |
| text = node.text(), | |
| first = text.split(" ", numWords).join(" "); | |
| if (!node.length) | |
| return; | |
| node[0].nodeValue = text.slice(first.length); | |
| node.before('<span id="' + first + '">' + first + '</span>'); | |
| }; | |
| $(".index>ol>li").each(function(){ | |
| $(this).wrapStart(1); | |
| }); | |
| var nav = $('#nav ul'); | |
| $('span[id]').each(function(){ | |
| var me = $(this), | |
| text = me.text(); | |
| nav.append('<li><a href="#'+text+'">'+text+'</a></li>'); | |
| }); | |
| function htmlEntities(str) { | |
| return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"'); | |
| } | |
| $('a[data-title]').each(function(){ | |
| var me = $(this), | |
| data = htmlEntities(me.data("title")), | |
| parent = me.parent('li'); | |
| parent.append('<p class="after">'+data+'</p>'); | |
| me.attr('target', '_blank'); | |
| }); | |
| $('input[type=checkbox]').on('click', function () { | |
| var inputDisplay = this.checked ? $('.index').addClass( 'hidden' ) : $('.index').removeClass( 'hidden' ); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| line-height: 1.4; | |
| } | |
| ol { | |
| list-style-type: none; | |
| padding: 0; | |
| li { | |
| span { | |
| display: block; | |
| padding: 60px 30px 0; | |
| font-size: 1.4em; | |
| font-weight: bold; | |
| border-bottom: 1px solid #888; | |
| margin-bottom: .5em; | |
| } | |
| ol { | |
| column-count: 3; | |
| padding: 0 30px; | |
| } | |
| li { | |
| margin: 0 0 .5em; | |
| a { | |
| text-decoration: none; | |
| display: block; | |
| break-inside: avoid; | |
| color: #888; | |
| } | |
| .after { | |
| font-size: 14px; | |
| //color: #000; | |
| display: block; | |
| .hidden & { | |
| display: none; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| code { | |
| font-family: consolas, monaco, monospace; | |
| color: #444; | |
| font-weight: bold; | |
| } | |
| .value { | |
| color: #0dd; | |
| } | |
| .selector { | |
| color: hotpink; | |
| } | |
| .at { | |
| color: TOMATO; | |
| } | |
| nav { | |
| font-size: 14px; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| background: rgba(black, 0.8); | |
| color: #fff; | |
| ul { | |
| float: left; | |
| padding: 0; | |
| } | |
| li { | |
| display: inline-block; | |
| margin: 0 .5em; | |
| } | |
| a { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| .colors { | |
| float: right; | |
| margin: 1em 0; | |
| code, label { | |
| display: inline-block; | |
| margin: 0 .5em; | |
| } | |
| label { | |
| margin-left: 0; | |
| } | |
| } | |
| } | |
| a[data-family] { | |
| &:after { | |
| content: attr(data-family); | |
| //float: right; | |
| display: inline-block; | |
| font-size: 10px; | |
| font-family: consolas, monaco, monospace; | |
| color: #fff; | |
| background: #888; | |
| border-radius: 3px; | |
| padding: 2px 3px 0; | |
| line-height: 1; | |
| margin: 0 0 0 10px; | |
| vertical-align: middle; | |
| } | |
| } | |
| a[data-family="flex"]:after { | |
| background: #000; | |
| } | |
| a[data-family="shape"]:after { | |
| background: #99f; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment