New Standards
Jump to navigation
Jump to search
Experimental page for developing and testing new standards and also to understand the capabilities of this site.
Don't Use Them: Until these standards are sufficiently refined and accepted by the community, don’t use them.
Website problems
- The tag <caption> has a dark text color that blends with the background. See Administrators' noticeboard
HTML Tags
There are a lot of HTML tags. For obvious reasons, many tags do not work on MediaWiki-based sites. Here is a list of tags, do they work on this site and some description
| Tag | It works? | Description |
|---|---|---|
<!-- … --> |
Yes | Defines a comment. |
<!DOCTYPE> |
No | Defines the document type. |
<a> |
No | Defines a hyperlink. Doesn’t work because MediaWiki-based sites use their own linking system using square brackets. |
<abbr> |
Yes | Defines an abbreviation or an acronym. Adds a dotted underline and changes the cursor to a question mark cursor on hover. |
<address> |
No | Defines contact information for the author/owner of a document. |
<area> |
No | Defines an area inside an image map. |
<article> |
No | Defines an article. |
<aside> |
No | Defines content aside from the page content. |
<audio> |
No | Defines embedded sound content. |
<b> |
Yes | Defines bold text. |
<base> |
No | Specifies the base URL/target for all relative URLs in a document. WARNING: If you use this tag and enter the href attribute into it OR somewhere on the page after this tag is specified (even as plain text, even with spaces and even if base tag is wrapped in a nowiki tag), this will lead to the site restricting your access. You will not be blocked, the site simply does not allow this part of the code to be on the page. |
<bdi> |
Yes | Isolates a part of text that might be formatted in a different direction from other text outside it. |
<bdo> |
Yes | Overrides the current text direction. |
<big> |
Yes | Not supported in HTML5. Defines big text. |
<blockquote> |
Yes | Defines a section that is quoted from another source. |
<body> |
No | Defines the document’s body. |
<br> |
Yes | Defines a single line break. |
<button> |
No | Defines a clickable button. |
<canvas> |
No | Used to draw graphics, on the fly, via scripting. |
<caption> |
Yes | Defines a table caption. |
<center> |
Yes | Not supported in HTML5. Defines centered text. |
<cite> |
Yes | Defines the title of a work. |
<code> |
Yes | Defines a piece of computer code. |
<col> |
No | Specifies column properties for each column within a <colgroup> element. |
<colgroup> |
No | Specifies a group of one or more columns in a table for formatting. |
<data> |
Yes | Adds a machine-readable translation of a given content. |
<datalist> |
No | Specifies a list of pre-defined options for input controls. |
<dd> |
Yes | Defines a description/value of a term in a description list. |
<del> |
Yes | Defines strikethrough text. |
<details> |
No | Defines additional details that the user can view or hide. |
<dfn> |
Yes | Specifies a term that is going to be defined within the content. |
<dialog> |
No | Defines a dialog box or window. |
<div> |
Yes | Defines a section in a document. |
<dl> |
Yes | Defines a description list. |
<dt> |
Yes | Defines a term/name in a description list. |
<em> |
Yes | Defines emphasized text. |
<embed> |
No | Defines a container for an external application. WARNING: If you use this tag and enter the src attribute into it OR somewhere on the page after this tag is specified (even as plain text, even with spaces and even if base tag is wrapped in a nowiki tag), this will lead to the site restricting your access. You will not be blocked, the site simply does not allow this part of the code to be on the page. |
<fieldset> |
No | Groups related elements in a form. |
<figcaption> |
No | Defines a caption for a <figure> element. |
<figure> |
No | Specifies self-contained content. |
<font> |
Yes | Not supported in HTML5. Defines font, color, and size for text. |
<footer> |
No | Defines a footer for a document or section. |
<form> |
No | Defines an HTML form for user input. |
<h1> to <h6> |
Yes | Defines HTML headings. |
<head> |
No | Contains metadata/information for the document. |
<header> |
No | Defines a header for a document or section. |
<hgroup> |
No | Defines a header and related content. |
<hr> |
Yes | Creates a horizontal line. |
<html> |
No | Defines the root of an HTML document. |
<i> |
Yes | Makes the content italic. |
<iframe> |
No | Defines an inline frame. |
<img> |
No | Defines an image. Doesn’t work because MediaWiki-based sites use their own image system using square brackets. |
<input> |
No | Defines an input control. |
<ins> |
Yes | Defines a text that has been inserted into a document. |
<kbd> |
Yes | Defines keyboard input. |
<label> |
No | Defines a label for an <input> element. |
<legend> |
No | Defines a caption for a <fieldset> element. |
<li> |
Yes | Defines a list item. |
<link> |
No | Defines the relationship between a document and an external resource. |
<main> |
No | Specifies the main content of a document. |
<map> |
No | Defines an image map. |
<mark> |
Yes | Defines marked/highlighted text. |
<menu> |
No | Defines an unordered list. |
<meta> |
No | Defines metadata about an HTML document. |
<meter> |
No | Defines a scalar measurement within a known range (a gauge). |
<nav> |
No | Defines navigation links. |
<noscript> |
No | Defines an alternate content for users that do not support client-side scripts. |
<object> |
No | Defines a container for an external application. |
<ol> |
Yes | Defines an ordered list. |
<optgroup> |
No | Defines a group of related options in a drop-down list. |
<option> |
No | Defines an option in a drop-down list. |
<output> |
No | Defines the result of a calculation. |
<p> |
Yes | Defines a paragraph. |
<param> |
No | Defines a parameter for an object. |
<picture> |
No | Defines a container for multiple image resources. |
<pre> |
Yes | Defines preformatted text. |
<progress> |
No | Represents the progress of a task. |
<q> |
Yes | Defines a short quotation. |
<rp> |
Yes | Defines what to show in browsers that do not support ruby annotations. |
<rt> |
Yes | Defines an explanation/pronunciation of characters (for East Asian typography). |
<ruby> |
Yes | Defines a ruby annotation (for East Asian typography). |
<s> |
Yes | Defines text that is no longer correct. |
<samp> |
Yes | Defines sample output from a computer program. |
<script> |
No | Defines a client-side script. |
<search> |
No | Defines a search section. |
<section> |
No | Defines a section in a document. |
<select> |
No | Defines a drop-down list. |
<small> |
Yes | Defines smaller text. |
<source> |
No | Defines multiple media resources for media elements (<video> and <audio>). |
<span> |
Yes | Defines a section in a document. |
<strike> |
Yes | Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text. |
<strong> |
Yes | Defines important text. |
<style> |
No | Defines style information for a document. |
<sub> |
Yes | Defines subscripted text. |
<summary> |
No | Defines a visible heading for a <details> element. |
<sup> |
Yes | Defines superscripted text. |
<svg> |
No | Defines a container for SVG graphics. |
<table> |
Yes | Defines a table. |
<tbody> |
No | Groups the body content in a table. |
<td> |
Yes | Defines a cell in a table. |
<template> |
No | Defines a container for content that should be hidden when the page loads. |
<textarea> |
No | Defines a multiline input control (text area). |
<tfoot> |
No | Groups the footer content in a table. |
<th> |
Yes | Defines a header cell in a table. |
<thead> |
No | Groups the header content in a table. |
<time> |
Yes | Defines a specific time (or datetime). |
<title> |
No | Defines a title for the document. |
<tr> |
Yes | Defines a row in a table. |
<track> |
No | Defines text tracks for media elements (<video> and <audio>). |
<tt> |
Yes | Not supported in HTML5. Defines teletype text. |
<u> |
Yes | Emphasizes text. |
<ul> |
Yes | Defines an unordered list. |
<var> |
Yes | Defines a variable. |
<video> |
No | Defines embedded video content. |
<wbr> |
Yes | Defines a possible line-break. Can be used instead of ­. |
Inline CSS
Functions
| Functions | It works? | Description | Browser support | ||
|---|---|---|---|---|---|
abs() |
N/A | Returns the absolute value of the argument, as the same type as the input. | Chrome | Firefox | Safari |
acos() |
Yes | Trigonometric function that returns the inverse cosine of a number between -1 and 1. The function contains a single calculation that returns the number of radians representing an <angle> between 0deg and 180deg. | Chrome | Firefox | Safari |
anchor-size() |
Yes | Enables setting anchor-positioned element’s size, position, and margins relative to the dimensions of anchor elements. It returns the <length> of a specified side of the target anchor element. anchor-size() is only valid when used within the value of anchor-positioned elements’ sizing, inset, and margin properties. | Chrome | Firefox | Safari |
anchor() |
Yes | Can be used within an anchor-positioned element's inset property values, returning a length value relative to the position of the edges of its associated anchor element. | Chrome | Firefox | Safari |
asin() |
Yes | Trigonometric function that returns the inverse sine of a number between -1 and 1. The function contains a single calculation that returns the number of radians representing an <angle> between -90deg and 90deg. | Chrome | Firefox | Safari |
atan() |
Yes | Trigonometric function that returns the inverse tangent of a number between -∞ and +∞. The function contains a single calculation that returns the number of radians representing an <angle> between -90deg and 90deg. | Chrome | Firefox | Safari |
atan2() |
Yes | Trigonometric function that returns the inverse tangent of two values between -∞ and +∞. The function accepts two arguments and returns the number of radians representing an <angle> between -180deg and 180deg. | Chrome | Firefox | Safari |
attr() |
N/A | Used to retrieve the value of an attribute of the selected element and use it in a property value, similar to how the var() function substitutes a custom property value. It can also be used with pseudo-elements, in which case the attribute's value on the pseudo-element's originating element is returned. | Chrome | Firefox | Safari |
blur() |
No | insecure input Applies a Gaussian blur to the input image. |
Chrome | Firefox | Safari |
brightness() |
No | insecure input Applies a linear multiplier value on an element or an input image, making the image appear brighter or darker. |
Chrome | Firefox | Safari |
calc-size() |
Yes | Allows you to perform calculations on intrinsic size values such as auto, fit-content, and max-content; this is not supported by the regular calc() function. | Chrome | Firefox | Safari |
calc() |
Yes | Lets you perform calculations when specifying CSS property values. It can be used with <length>, <frequency>, <angle>, <time>, <percentage>, <number>, <integer>, and <color-function> values. | Chrome | Firefox | Safari |
circle() |
Yes | Defines a circle using a radius and a position. It is one of the <basic-shape> data types. | Chrome | Firefox | Safari |
clamp() |
Yes | Clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value. | Chrome | Firefox | Safari |
color-mix() |
Yes | The color-mix() functional notation takes two <color> values and returns the result of mixing them in a given colorspace by a given amount. | Chrome | Firefox | Safari |
color() |
Yes | The color() functional notation allows a color to be specified in a particular, specified color space rather than the implicit sRGB color space that most of the other color functions operate in. | Chrome | Firefox | Safari |
conic-gradient() |
Yes | Creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the <gradient> data type, which is a special kind of <image>. | Chrome | Firefox | Safari |
contrast() |
No | insecure input Adjusts the contrast of the input image. |
Chrome | Firefox | Safari |
cos() |
Yes | Trigonometric function that returns the cosine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a <number> or an <angle> by interpreting the result of the argument as radians. That is, cos(45deg), cos(0.125turn), and cos(3.14159 / 4) all represent the same value, approximately 0.707. | Chrome | Firefox | Safari |
counter() |
N/A | Returns a string representing the current value of the named counter, if there is one. | Chrome | Firefox | Safari |
counters() |
N/A | Enables combining markers when nesting counters. The function returns a string that concatenates the current values of the named and nested counters, if any are present, with the string provided. The third, optional parameter enables defining the list style. | Chrome | Firefox | Safari |
cross-fade() |
N/A | Can be used to blend two or more images at a defined transparency. It can be used for many basic image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient. | Chrome | Firefox | Safari |
cubic-bezier() |
Yes | Creates a smooth transition using a cubic Bézier curve. As an <easing-function>, it can be used to smooth out the start and end of the interpolation. | Chrome | Firefox | Safari |
device-cmyk() |
N/A | The device-cmyk() functional notation is used to express CMYK colors in a device dependent way, specifying the cyan, magenta, yellow, and black components. | Chrome | Firefox | Safari |
drop-shadow() |
No | insecure input Applies a drop shadow effect to the input image. |
Chrome | Firefox | Safari |
element() |
N/A | Defines an <image> value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated. | Chrome | Firefox | Safari |
ellipse() |
Yes | The ellipse() CSS function is one of the <basic-shape> data types. | Chrome | Firefox | Safari |
env() |
Yes | Can be used to insert the value of a user-agent defined environment variable into your CSS, in a similar fashion to the var() function and custom properties. The difference is that, as well as being user-agent defined rather than author-defined, environment variables are globally scoped to a document, whereas custom properties are scoped to the element(s) on which they are declared. | Chrome | Firefox | Safari |
exp() |
Yes | Exponential function that takes a number as an argument and returns the mathematical constant e raised to the power of the given number. | Chrome | Firefox | Safari |
fit-content() |
Yes | Clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)). | Chrome | Firefox | Safari |
grayscale() |
No | insecure input Converts the input image to grayscale. |
Chrome | Firefox | Safari |
hsl() |
Yes | The hsl() functional notation expresses a color in the sRGB color space according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency. | Chrome | Firefox | Safari |
hue-rotate() |
No | insecure input Rotates the hue of an element and its contents. |
Chrome | Firefox | Safari |
hwb() |
Yes | The hwb() functional notation expresses a color in the sRGB color space according to its hue, whiteness, and blackness. An optional alpha component represents the color's transparency. | Chrome | Firefox | Safari |
hypot() |
Yes | Exponential function that returns the square root of the sum of squares of its parameters. If a single parameter is provided, the result is the absolute value of its input. hypot(2em) and hypot(-2em) both resolve to 2em. |
Chrome | Firefox | Safari |
image-set() |
No | The image-set() CSS functional notation is a method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens. | Chrome | Firefox | Safari |
image() |
No | The image() CSS function defines an <image> in a similar fashion to the url() function, but with added functionality including specifying the image's directionality, displaying just a part of that image defined by a media fragment, and specifying a solid color as a fallback in case none of the specified images are able to be rendered. | Chrome | Firefox | Safari |
inset() |
Yes | Defines a rectangle at the specified inset distances from each side of the reference box. | Chrome | Firefox | Safari |
invert() |
No | Inverts the color samples in the input image. | Chrome | Firefox | Safari |
lab() |
Yes | The lab() functional notation expresses a given color in the CIE L*a*b* color space. | Chrome | Firefox | Safari |
layer() |
No | Used along with the @import at-rule to put the imported resource in a separate named cascade layer.. | Chrome | Firefox | Safari |
lch() |
Yes | The lch() functional notation expresses a given color using the LCH color space, which represents lightness, chroma, and hue. It uses the same L axis as the lab() color function of the CIELab color space, but it uses the polar coordinates C (Chroma) and H (Hue). | Chrome | Firefox | Safari |
light-dark() |
Yes | The light-dark() CSS <color> function enables setting two colors for a property – returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme – without needing to encase the theme colors within a prefers-color-scheme media feature query. Users are able to indicate their color-scheme preference through their operating system settings (e.g., light or dark mode) or their user agent settings. The light-dark() function enables providing two color values where any <color> value is accepted. The light-dark() CSS color function returns the first value if the user's preference is set to light or if no preference is set and the second value if the user's preference is set to dark. | Chrome | Firefox | Safari |
linear-gradient() |
Yes | Creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>. | Chrome | Firefox | Safari |
linear() |
Yes | Creates a transition curve that progresses uniformly between points. As an <easing-function>, it creates transitions where the interpolation occurs at a constant rate from beginning to end. | Chrome | Firefox | Safari |
log() |
Yes | Returns the logarithm of a number. | Chrome | Firefox | Safari |
matrix() |
Yes | Defines a homogeneous 2D transformation matrix. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
matrix3d() |
Yes | Defines a 3D transformation as a 4x4 homogeneous matrix. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
max() |
Yes | Lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The max() function can be used anywhere a <length>, <frequency>, <angle>, | Chrome | Firefox | Safari |
min() |
Yes | Lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min() function can be used anywhere a <length>, <frequency>, <angle>, | Chrome | Firefox | Safari |
minmax() |
Yes | Defines a size range greater than or equal to min and less than or equal to max. It is used with CSS grids. | Chrome | Firefox | Safari |
mod() |
Yes | Returns a modulus left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%). The modulus is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the divisor. | Chrome | Firefox | Safari |
oklab() |
Yes | The oklab() functional notation expresses a given color in the Oklab color space, which attempts to mimic how color is perceived by the human eye. | Chrome | Firefox | Safari |
oklch() |
Yes | The oklch() functional notation expresses a given color in the Oklab color space. oklch() is the cylindrical form of oklab(), using the same L axis, but with polar Chroma (C) and Hue (h) coordinates. | Chrome | Firefox | Safari |
opacity() |
No | insecure input Applies transparency to the samples in the input image. |
Chrome | Firefox | Safari |
paint() |
No | Defines an <image> value generated with a PaintWorklet. | Chrome | Firefox | Safari |
palette-mix() |
N/A | Can be used to create a new font-palette value by blending together two font-palette values by specified percentages and color interpolation methods. | Chrome | Firefox | Safari |
path() |
Yes | Accepts an SVG path string, and is used in the CSS shapes and CSS motion path modules to enable a shape to be drawn. The path() function is a <basic-shape> data type value. It can be used in the CSS offset-path and clip-path properties and in the SVG d attribute. | Chrome | Firefox | Safari |
perspective() |
Yes | Defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
polygon() |
Yes | One of the <basic-shape> data types. It's used to draw a polygon by providing one or more pairs of coordinates, each of which represents a vertex of the shape. | Chrome | Firefox | Safari |
pow() |
Yes | Exponential function that returns the value of a base raised to the power of a number. | Chrome | Firefox | Safari |
radial-gradient() |
Yes | Creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse. The function's result is an object of the <gradient> data type, which is a special kind of <image>. | Chrome | Firefox | Safari |
ray() |
Yes | Defines the offset-path line segment that an animated element can follow. The line segment is referred to as "ray". The ray begins from an offset-position and extends in the direction of the specified angle. The length of a ray can be constrained by specifying a size and using the contain keyword. | Chrome | Firefox | Safari |
rect() |
Yes | Creates a rectangle at the specified distance from the top and left edges of the containing block. It is a basic shape function of the <basic-shape> data type. You can use the rect() function in CSS properties such as offset-path to create the rectangular path along which an element moves and in clip-path to define the shape of the clipping region. | Chrome | Firefox | Safari |
rem() |
Yes | Returns a remainder left over when the first parameter is divided by the second parameter, similar to the JavaScript remainder operator (%). The remainder is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the dividend. | Chrome | Firefox | Safari |
repeat() |
Yes | Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form. | Chrome | Firefox | Safari |
repeating-conic-gradient() |
Yes | Creates an image consisting of a repeating gradient (rather than a single gradient) with color transitions rotated around a center point (rather than radiating from the center). | Chrome | Firefox | Safari |
repeating-linear-gradient() |
Yes | Creates an image consisting of repeating linear gradients. It is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. The function's result is an object of the <gradient> data type, which is a special kind of <image>. | Chrome | Firefox | Safari |
repeating-radial-gradient() |
Yes | Creates an image consisting of repeating gradients that radiate from an origin. It is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient(). The function's result is an object of the <gradient> data type, which is a special kind of <image>. | Chrome | Firefox | Safari |
rgb() |
Yes | The rgb() functional notation expresses a color in the sRGB color space according to its red, green, and blue components. An optional alpha component represents the color's transparency. Note: The rgba() functional notation is an alias for rgb(). They are exactly equivalent. It is recommended to use rgb(). |
Chrome | Firefox | Safari |
rotate() |
Yes | Defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
rotate3d() |
Yes | Defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
rotateX() |
Yes | Defines a transformation that rotates an element around the x-axis (horizontal) without deforming it. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
rotateY() |
Yes | Defines a transformation that rotates an element around the y-axis (vertical) without deforming it. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
rotateZ() |
Yes | Defines a transformation that rotates an element around the z-axis without deforming it. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
round() |
Yes | Returns a rounded number based on a selected rounding strategy. | Chrome | Firefox | Safari |
saturate() |
No | insecure input Super-saturates or desaturates the input image. Its result is a <filter-function>. |
Chrome | Firefox | Safari |
scale() |
Yes | Defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector [sx, sy], it can resize the horizontal and vertical dimensions at different scales. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
scale3d() |
Yes | Defines a transformation that resizes an element in 3D space. Because the amount of scaling is defined by a vector [sx, sy, sz], it can resize different dimensions at different scales. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
scaleX() |
Yes | Defines a transformation that resizes an element along the x-axis (horizontally). Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
scaleY() |
Yes | Defines a transformation that resizes an element along the y-axis (vertically). Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
scaleZ() |
Yes | Defines a transformation that resizes an element along the z-axis. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
scroll() |
N/A | The scroll() CSS function can be used with animation-timeline to indicate a scrollable element (scroller) and scrollbar axis that will provide an anonymous scroll progress timeline for animating the current element. The scroll progress timeline is progressed through by scrolling the scroller between top and bottom (or left and right). The position in the scroll range is converted into a percentage of progress — 0% at the start and 100% at the end. | Chrome | Firefox | Safari |
sepia() |
No | insecure input Converts the input image to sepia, giving it a warmer, more yellow/brown appearance. Its result is a <filter-function>. |
Chrome | Firefox | Safari |
shape() |
N/A | The shape() CSS function is used to define a shape for the clip-path and offset-path properties. It combines an initial starting point with a series of shape commands that define the path of the shape. The shape() function is a member of the <basic-shape> data type. | Chrome | Firefox | Safari |
sign() |
N/A | Contains one calculation, and returns -1 if the numeric value of the argument is negative, +1 if the numeric value of the argument is positive, 0⁺ if the numeric value of the argument is 0⁺, and 0⁻ if the numeric value of the argument is 0⁻. | Chrome | Firefox | Safari |
sin() |
Yes | Trigonometric function that returns the sine of a number, which is a value between -1 and 1. The function contains a single calculation that must resolve to either a <number> or an <angle> by interpreting the result of the argument as radians. That is, sin(45deg), sin(0.125turn), and sin(3.14159 / 4) all represent the same value, approximately 0.707. | Chrome | Firefox | Safari |
skew() |
Yes | Defines a transformation that skews an element on the 2D plane. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
skewX() |
Yes | Defines a transformation that skews an element in the horizontal direction on the 2D plane. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
skewY() |
Yes | Defines a transformation that skews an element in the vertical direction on the 2D plane. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
sqrt() |
Yes | Exponential function that returns the square root of a number. | Chrome | Firefox | Safari |
steps() |
Yes | Defines a transition that divides the input time into a specified number of intervals that are equal in length. This subclass of step functions are sometimes also called staircase functions. | Chrome | Firefox | Safari |
symbols() |
N/A | Enables defining counter styles inline, directly as a value of properties such as list-style, providing a less powerful but simpler alternative to the @counter-style method of defining a counter style. | Chrome | Firefox | Safari |
tan() |
Yes | Trigonometric function that returns the tangent of a number, which is a value between −infinity and infinity. The function contains a single calculation that must resolve to either a <number> or an <angle> by interpreting the result of the argument as radians. | Chrome | Firefox | Safari |
translate() |
Yes | Repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
translate3d() |
Yes | Repositions an element in 3D space. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
translateX() |
Yes | Repositions an element horizontally on the 2D plane. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
translateY() |
Yes | Repositions an element vertically on the 2D plane. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
translateZ() |
Yes | Repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer. Its result is a <transform-function> data type. | Chrome | Firefox | Safari |
url() |
No | insecure input Used to include a file. The parameter is an absolute URL, a relative URL, a blob URL, or a data URL. The url() function can be passed as a parameter of another CSS function, like the attr() function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the <url> data type. |
Chrome | Firefox | Safari |
var() |
Yes | The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property. | Chrome | Firefox | Safari |
view() |
N/A | The view() CSS function can be used with animation-timeline to indicate a subject element that will provide an anonymous view progress timeline to animate. The view progress timeline is progressed through by a change in visibility of the subject element inside the nearest ancestor scroller. The visibility of the subject inside the scroller is tracked — by default, the timeline is at 0% when the subject is first visible at one edge of the scroller, and 100% when it reaches the opposite edge. | Chrome | Firefox | Safari |
xywh() |
Yes | Creates a rectangle using the specified distances from the left (x) and top (y) edges of the containing block and the specified width (w) and height (h) of the rectangle. It is a basic shape function of the <basic-shape> data type. You can use the xywh() function in CSS properties such as offset-path to create the rectangular path along which an element moves and in clip-path to define the shape of the clipping region. | Chrome | Firefox | Safari |
Headers
HTML has <h1> to <h6> tags, they can be used to add headings to a page. However, the MediaWiki engine standards use = symbols around the heading text. The number of characters determines the heading level.
List of rules to follow when using headings:
- All headings in the article should be from level 2 to 6. Do not use level 1, as it is used in the main heading of the article.
- Headings should not contain any unnecessary elements: pictures, icons, links, keyboard shortcuts, etc.
- Avoid cases where sections with a heading contain 1-2 lines of text.
- The main title of the article about, for example, the shader parameter should use a monospace font.