diff --git a/files/en-us/web/api/css_object_model/index.md b/files/en-us/web/api/css_object_model/index.md index 579c80310c1bcb4..d9330894f9339ad 100644 --- a/files/en-us/web/api/css_object_model/index.md +++ b/files/en-us/web/api/css_object_model/index.md @@ -64,6 +64,7 @@ Several other interfaces are also extended by the CSSOM-related specifications: - {{DOMxRef("CSSImageValue")}} - {{DOMxRef("CSSKeywordValue")}} +- {{DOMxRef("CSSMathClamp")}} - {{DOMxRef("CSSMathInvert")}} - {{DOMxRef("CSSMathMax")}} - {{DOMxRef("CSSMathMin")}} diff --git a/files/en-us/web/api/css_typed_om_api/index.md b/files/en-us/web/api/css_typed_om_api/index.md index 3ca73e8d51cfaa4..d8db9d8ba1da4c6 100644 --- a/files/en-us/web/api/css_typed_om_api/index.md +++ b/files/en-us/web/api/css_typed_om_api/index.md @@ -75,6 +75,7 @@ The {{domxref('CSSKeywordValue')}} interface of the CSS Typed Object Model API c - : A tree of subclasses representing numeric values that are more complicated than a single value and unit, including: - {{domxref('CSSMathMax')}} - represents the CSS {{cssxref("max","max()")}} function. - {{domxref('CSSMathMin')}} - represents the CSS {{cssxref("min","min()")}} function. + - {{domxref('CSSMathClamp')}} - represents the CSS {{cssxref("clamp","clamp()")}} function. - {{domxref('CSSMathNegate')}} - negates the value passed into it. - {{domxref('CSSMathInvert')}} - represents a CSS {{cssxref("calc","calc()")}} value used as `calc(1 / )`. This type is used internally by {{domxref('CSSNumericValue.div','div()')}}, to create an appropriate {{domxref('CSSMathProduct')}}. - {{domxref('CSSMathProduct')}} - represents the result obtained by calling {{domxref('CSSNumericValue.mul','mul()')}} or {{domxref('CSSNumericValue.div','div()')}} on {{domxref('CSSNumericValue')}}. diff --git a/files/en-us/web/api/csslayerstatementrule/namelist/index.md b/files/en-us/web/api/csslayerstatementrule/namelist/index.md index f8a639ed069729b..3b563a17666cde4 100644 --- a/files/en-us/web/api/csslayerstatementrule/namelist/index.md +++ b/files/en-us/web/api/csslayerstatementrule/namelist/index.md @@ -43,7 +43,7 @@ const rules = document.getElementById("css-output").sheet.cssRules; const layerStatementRule = rules[0]; // A CSSLayerStatementRule const layerBlockRule = rules[1]; // A CSSLayerBlockRule; no nameList property. -item.textContent = `@layer declares the following layers: ${layer.nameList.join( +item.textContent = `@layer declares the following layers: ${layerStatementRule.nameList.join( ", ", )}.`; ``` diff --git a/files/en-us/web/api/cssmathclamp/cssmathclamp/index.md b/files/en-us/web/api/cssmathclamp/cssmathclamp/index.md new file mode 100644 index 000000000000000..e31b522ccb85246 --- /dev/null +++ b/files/en-us/web/api/cssmathclamp/cssmathclamp/index.md @@ -0,0 +1,46 @@ +--- +title: "CSSMathClamp: CSSMathClamp() constructor" +short-title: CSSMathClamp() +slug: Web/API/CSSMathClamp/CSSMathClamp +page-type: web-api-constructor +status: + - experimental +browser-compat: api.CSSMathClamp.CSSMathClamp +--- + +{{SeeCompatTable}}{{APIRef("CSS Typed Object Model API")}} + +The **`CSSMathClamp()`** constructor creates a +new {{domxref("CSSMathClamp")}} object representing a CSS {{CSSXref("clamp", "clamp()")}} function. + +## Syntax + +```js-nolint +new CSSMathClamp(lower, value, upper) +``` + +### Parameters + +- `lower` + - : A {{domxref("CSSNumericValue")}} object – either a number or {{domxref("CSSUnitValue")}} – representing the minimum value. +- `value` + - : A {{domxref("CSSNumericValue")}} object – either a number or {{domxref("CSSUnitValue")}} – representing the preferred value. +- `upper` + - : A {{domxref("CSSNumericValue")}} object – either a number or {{domxref("CSSUnitValue")}} – representing the maximum value. + +### Exceptions + +- [`TypeError`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError) + - : Thrown if there is a _failure_ when adding the three arguments. + +## Examples + +To do + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/cssmathclamp/index.md b/files/en-us/web/api/cssmathclamp/index.md new file mode 100644 index 000000000000000..efcf816429e0914 --- /dev/null +++ b/files/en-us/web/api/cssmathclamp/index.md @@ -0,0 +1,51 @@ +--- +title: CSSMathClamp +slug: Web/API/CSSMathClamp +page-type: web-api-interface +browser-compat: api.CSSMathClamp +--- + +{{APIRef("CSS Typed Object Model API")}} + +The **`CSSMathClamp`** interface of the [CSS Typed Object Model API](/en-US/docs/Web/API/CSS_Object_Model) represents the CSS {{CSSXref("clamp","clamp()")}} function. It inherits properties and methods from its parent {{domxref("CSSNumericValue")}}. + +{{InheritanceDiagram}} + +## Constructor + +- {{domxref("CSSMathClamp.CSSMathClamp", "CSSMathClamp()")}} {{Experimental_Inline}} + - : Creates a new `CSSMathClamp` object. + +## Instance properties + +- {{domxref("CSSMathClamp.lower")}} + - : Returns a {{domxref("CSSNumericValue")}} object containing the minimum value. +- {{domxref("CSSMathClamp.value")}} + - : Returns a {{domxref("CSSNumericValue")}} object containing the preferred value. +- {{domxref("CSSMathClamp.upper")}} + - : Returns a {{domxref("CSSNumericValue")}} object containing the upper value. + +## Static methods + +_The interface also inherits methods from its parent interface, {{domxref("CSSMathValue")}}._ + +## Instance methods + +_The interface also inherits methods from its parent interface, {{domxref("CSSMathValue")}}._ + +## Examples + +To do + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("CSSMathMax")}} +- {{domxref("CSSMathMin")}} diff --git a/files/en-us/web/api/cssmathclamp/lower/index.md b/files/en-us/web/api/cssmathclamp/lower/index.md new file mode 100644 index 000000000000000..6b9532d904fd4d6 --- /dev/null +++ b/files/en-us/web/api/cssmathclamp/lower/index.md @@ -0,0 +1,33 @@ +--- +title: "CSSMathClamp: lower property" +short-title: lower +slug: Web/API/CSSMathClamp/lower +page-type: web-api-instance-property +browser-compat: api.CSSMathClamp.lower +--- + +{{APIRef("CSS Typed Object Model API")}} + +The **`lower`** read-only property of the +{{domxref("CSSMathClamp")}} interface returns a {{domxref("CSSNumericValue")}} object containing the minimum value of a {{domxref("CSSMathClamp")}} object. + +## Value + +A {{domxref("CSSNumericValue")}}. + +## Examples + +To do + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("CSSMathClamp.value")}} +- {{domxref("CSSMathClamp.upper")}} diff --git a/files/en-us/web/api/cssmathclamp/upper/index.md b/files/en-us/web/api/cssmathclamp/upper/index.md new file mode 100644 index 000000000000000..4afcc68bdd9a3e6 --- /dev/null +++ b/files/en-us/web/api/cssmathclamp/upper/index.md @@ -0,0 +1,33 @@ +--- +title: "CSSMathClamp: upper property" +short-title: upper +slug: Web/API/CSSMathClamp/upper +page-type: web-api-instance-property +browser-compat: api.CSSMathClamp.upper +--- + +{{APIRef("CSS Typed Object Model API")}} + +The **`upper`** read-only property of the +{{domxref("CSSMathClamp")}} interface returns a {{domxref("CSSNumericValue")}} object containing the maximum value of a {{domxref("CSSMathClamp")}} object. + +## Value + +A {{domxref("CSSNumericValue")}}. + +## Examples + +To do + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("CSSMathClamp.lower")}} +- {{domxref("CSSMathClamp.value")}} diff --git a/files/en-us/web/api/cssmathclamp/value/index.md b/files/en-us/web/api/cssmathclamp/value/index.md new file mode 100644 index 000000000000000..7cef0a5873c0423 --- /dev/null +++ b/files/en-us/web/api/cssmathclamp/value/index.md @@ -0,0 +1,34 @@ +--- +title: "CSSMathClamp: value property" +short-title: value +slug: Web/API/CSSMathClamp/value +page-type: web-api-instance-property +browser-compat: api.CSSMathClamp.value +--- + +{{APIRef("CSS Typed Object Model API")}} + +The **`value`** read-only property of the +{{domxref("CSSMathClamp")}} interface returns a {{domxref("CSSNumericValue")}} object containing the preferred value of a {{domxref("CSSMathClamp")}} object. + +## Value + +A {{domxref("CSSNumericValue")}}. + +## Examples + +To do + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("CSSMathClamp.lower")}} +- {{domxref("CSSMathClamp.value")}} +- {{domxref("CSSMathClamp.upper")}} diff --git a/files/en-us/web/api/cssmathvalue/index.md b/files/en-us/web/api/cssmathvalue/index.md index b5604753432dc46..e1d72ff1b4e07fd 100644 --- a/files/en-us/web/api/cssmathvalue/index.md +++ b/files/en-us/web/api/cssmathvalue/index.md @@ -15,6 +15,7 @@ The **`CSSMathValue`** interface of the [CSS Typed Object Model API](/en-US/docs Below is a list of interfaces based on the CSSMathValue interface. +- {{DOMxRef('CSSMathClamp')}} - {{domxref('CSSMathInvert')}} - {{domxref('CSSMathMax')}} - {{domxref('CSSMathMin')}} diff --git a/files/en-us/web/api/cssunitvalue/index.md b/files/en-us/web/api/cssunitvalue/index.md index 667f1455ca3d48d..98c7a691ffe4471 100644 --- a/files/en-us/web/api/cssunitvalue/index.md +++ b/files/en-us/web/api/cssunitvalue/index.md @@ -7,7 +7,9 @@ browser-compat: api.CSSUnitValue {{APIRef("CSS Typed Object Model API")}} -The **`CSSUnitValue`** interface of the [CSS Typed Object Model API](/en-US/docs/Web/API/CSS_Object_Model#css_typed_object_model) represents values that contain a single unit type. For example, "42px" would be represented by a `CSSNumericValue`. +The **`CSSUnitValue`** interface of the [CSS Typed Object Model API](/en-US/docs/Web/API/CSS_Object_Model#css_typed_object_model) represents values that contain a single [unit type](/en-US/docs/Web/CSS/Guides/Values_and_units#units). + +For example, the value `42px` (a {{cssxref("<dimension>")}}) would be represented by a `CSSNumericValue`. {{InheritanceDiagram}} @@ -19,9 +21,9 @@ The **`CSSUnitValue`** interface of the [CSS Typed Object Model API](/en-US/docs ## Instance properties - {{domxref('CSSUnitValue.value')}} - - : Returns a double indicating the number of units. + - : Returns a double indicating the number of units. For a `CSSNumericValue` representing `42px`, this would be `42`. - {{domxref('CSSUnitValue.unit')}} - - : Returns a string indicating the type of unit. + - : Returns a string indicating the type of unit. For a `CSSNumericValue` representing `42px`, this would be `"px"`. ## Static methods @@ -49,3 +51,8 @@ let pos = new CSSPositionValue( ## Browser compatibility {{Compat}} + +## See also + +- [CSS numeric data types](/en-US/docs/Web/CSS/Guides/Values_and_units/Numeric_data_types) +- [CSS values and units](/en-US/docs/Web/CSS/Guides/Values_and_units), a listing of all possible units and data types diff --git a/files/en-us/web/api/cssunitvalue/unit/index.md b/files/en-us/web/api/cssunitvalue/unit/index.md index b2a903a6d983856..8ce7531bb9dd9c4 100644 --- a/files/en-us/web/api/cssunitvalue/unit/index.md +++ b/files/en-us/web/api/cssunitvalue/unit/index.md @@ -10,11 +10,11 @@ browser-compat: api.CSSUnitValue.unit The **`CSSUnitValue.unit`** read-only property of the {{domxref("CSSUnitValue")}} interface returns a string -indicating the type of unit. +indicating the [unit type](/en-US/docs/Web/CSS/Guides/Values_and_units#units). ## Value -A string. +A string indicating the unit type, such as `"em"`, `"px"`, `"%"`, etc. ## Examples @@ -43,6 +43,7 @@ console.log(pos.y.unit); // "em" ## See also - {{domxref('CSSUnitValue.value')}} -- [Dimensions in CSS values and units](/en-US/docs/Web/CSS/Guides/Values_and_units/Numeric_data_types#dimensions) +- [CSS numeric data types](/en-US/docs/Web/CSS/Guides/Values_and_units/Numeric_data_types) +- [CSS values and units](/en-US/docs/Web/CSS/Guides/Values_and_units), a listing of all possible unit types - [Using the CSS Typed OM](/en-US/docs/Web/API/CSS_Typed_OM_API/Guide) - [CSS Typed Object Model API](/en-US/docs/Web/API/CSS_Typed_OM_API) diff --git a/files/en-us/web/api/htmltablecellelement/valign/index.md b/files/en-us/web/api/htmltablecellelement/valign/index.md index e74f84e0645daf5..189b1e7407b9783 100644 --- a/files/en-us/web/api/htmltablecellelement/valign/index.md +++ b/files/en-us/web/api/htmltablecellelement/valign/index.md @@ -13,7 +13,7 @@ browser-compat: api.HTMLTableCellElement.vAlign The **`vAlign`** property of the {{domxref("HTMLTableCellElement")}} interface is a string indicating how to vertically align text in a {{htmlelement("th")}} or {{htmlelement("td")}} table cell. > [!NOTE] -> This property is deprecated. Use the CSS {{cssxref("vertical-align")}} property to horizontally align text in a cell instead. +> This property is deprecated. Use the CSS {{cssxref("vertical-align")}} property to vertically align text in a cell instead. ## Value diff --git a/files/en-us/web/api/navigator/sendbeacon/index.md b/files/en-us/web/api/navigator/sendbeacon/index.md index 87ffaf72303007b..b5294e717f6676c 100644 --- a/files/en-us/web/api/navigator/sendbeacon/index.md +++ b/files/en-us/web/api/navigator/sendbeacon/index.md @@ -31,15 +31,11 @@ sendBeacon(url, data) - `url` - : The URL that will receive the _data_. Can be relative or absolute. - `data` {{Optional_inline}} - - : An {{jsxref("ArrayBuffer")}}, a {{jsxref("TypedArray")}}, a {{jsxref("DataView")}}, a {{domxref("Blob")}}, - a string literal or object, a {{domxref("FormData")}} or a {{domxref("URLSearchParams")}} - object containing the data to send. + - : An {{jsxref("ArrayBuffer")}}, a {{jsxref("TypedArray")}}, a {{jsxref("DataView")}}, a {{domxref("Blob")}}, a string literal or object, a {{domxref("FormData")}} or a {{domxref("URLSearchParams")}} object containing the data to send. The total size of queued data is limited to 64 KiB (65,536 bytes). ### Return value -Returns `true` if the -{{glossary("user agent")}} successfully queued the `data` for transfer. -Otherwise, it returns `false`. +Returns `true` if the {{glossary("user agent")}} successfully queued the `data` for transfer. Otherwise, it returns `false`. ## Description @@ -72,8 +68,7 @@ This means: The data is sent as an [HTTP POST](/en-US/docs/Web/HTTP/Reference/Methods/POST) request. -> [!NOTE] -> The `navigator.sendBeacon()` method has a [spec-defined](https://fetch.spec.whatwg.org/#:~:text=length.-,If%20the%20sum%20of%20contentLength%20and%20inflightKeepaliveBytes%20is%20greater%20than%2064%20kibibytes%2C%20then%20return%20a%20network%20error.,-The) payload size limit of about 64 KiB. If this limit is exceeded, the request will fail. For larger data transfers, consider using `fetch()` instead. +The limitation, however, is that the payload size is limited to about 64 KiB. For larger data transfers, consider using `fetch()` instead. ### Sending analytics at the end of a session diff --git a/files/en-us/web/api/rtcencodedvideoframe/index.md b/files/en-us/web/api/rtcencodedvideoframe/index.md index 82230b644651aac..794f35347029ffb 100644 --- a/files/en-us/web/api/rtcencodedvideoframe/index.md +++ b/files/en-us/web/api/rtcencodedvideoframe/index.md @@ -17,7 +17,7 @@ The **`RTCEncodedVideoFrame`** of the [WebRTC API](/en-US/docs/Web/API/WebRTC_AP ## Instance properties - {{domxref("RTCEncodedVideoFrame.type")}} {{ReadOnlyInline}} - - : Returns whether the current frame is a key frame, delta frame, or empty frame. + - : Returns whether the current frame is a key frame or a delta frame. - {{domxref("RTCEncodedVideoFrame.timestamp")}} {{ReadOnlyInline}} {{deprecated_inline}} {{non-standard_inline}} - : Returns the timestamp at which sampling of the frame started. - {{domxref("RTCEncodedVideoFrame.data")}} diff --git a/files/en-us/web/api/rtcencodedvideoframe/type/index.md b/files/en-us/web/api/rtcencodedvideoframe/type/index.md index d6bbe1f3f86d568..a96b3a6212970e7 100644 --- a/files/en-us/web/api/rtcencodedvideoframe/type/index.md +++ b/files/en-us/web/api/rtcencodedvideoframe/type/index.md @@ -8,7 +8,7 @@ browser-compat: api.RTCEncodedVideoFrame.type {{APIRef("WebRTC")}}{{AvailableInWorkers("window_and_dedicated")}} -The **`type`** read-only property of the {{domxref("RTCEncodedVideoFrame")}} interface indicates whether this frame is a key frame, delta frame, or empty frame. +The **`type`** read-only property of the {{domxref("RTCEncodedVideoFrame")}} interface indicates whether this frame is a key frame or a delta frame. ## Value @@ -20,9 +20,6 @@ The type can have one of the following values: - `delta` - : This is a "delta frame", which contains changes to an image relative to some previous frame. The frame cannot be decoded without access to the frame(s) that it references. -- `empty` - - : This frame contains no data. - This value is unexpected, and may indicate that the transform is holding a reference to frames after they have been transformed and piped to {{domxref("RTCRtpScriptTransformer.writable")}} (after transferring back to the main-thread WebRTC pipeline the worker side frame object will have no data). ## Examples @@ -33,11 +30,8 @@ const transformer = new TransformStream({ async transform(encodedFrame, controller) { if (encodedFrame.type === "key") { // Apply key frame transformation - } else if (encodedFrame.type === "delta") { - // Apply delta frame transformation } else { - // Empty - // Check transform is not holding reference to frames after processing! + // Apply delta frame transformation } controller.enqueue(encodedFrame); }, diff --git a/files/en-us/web/css/reference/properties/text-indent/index.md b/files/en-us/web/css/reference/properties/text-indent/index.md index 589b40877cb5c44..d8e4535d8414395 100644 --- a/files/en-us/web/css/reference/properties/text-indent/index.md +++ b/files/en-us/web/css/reference/properties/text-indent/index.md @@ -65,23 +65,18 @@ section { } ``` -Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block-level element's content box. - ## Syntax ```css -/* values */ +/* values */ text-indent: 3mm; text-indent: 40px; - -/* value - relative to the containing block width */ text-indent: 15%; -/* Keyword values */ +/* with keyword values */ text-indent: 5em each-line; -text-indent: 5em hanging; -text-indent: 5em hanging each-line; +text-indent: 5vb hanging; +text-indent: 5% hanging each-line; /* Global values */ text-indent: inherit; @@ -96,12 +91,22 @@ text-indent: unset; - {{cssxref("<length>")}} - : Indentation is specified as an absolute {{cssxref("<length>")}}. Negative values are allowed. See {{cssxref("<length>")}} values for possible units. - {{cssxref("<percentage>")}} - - : Indentation is a {{cssxref("<percentage>")}} of the containing block's width. + - : Indentation is a {{cssxref("<percentage>")}}. The percentage is relative to the containing block's width. - `each-line` - : Indentation affects the first line of the block container as well as each line after a _forced line break_, but does not affect lines after a _soft wrap break_. - `hanging` - : Inverts which lines are indented. All lines _except_ the first line will be indented. +## Description + +The `text-indent` [CSS](/en-US/docs/Web/CSS) property sets the length of empty space (indentation) that is put before lines of text in a block container. The indentation set by the property occurs at the inline-start edge of the content box. The value is a {{cssxref("length-percentage")}}, optionally with one or both of the keywords `each-line` and/or `hanging`. The initial value is `0`. + +Percent values are relative to the block container's inline-axis inner size, which is the dimension of the content-area only, excluding the container's padding and border. + +The `` can be a positive or negative value. A negative value creates an outdent equal to the absolute value of the `` equivalent positive value. A negative value effectively pushes the text the size of the value, but in the opposite direction. For example, `text-indent: 3%;` indents the first line of text, adding white space that is 3% of the container's inner-size before the text, pushing the first line of content toward the inline-end direction. Setting `text-indent: -3%` outdents the first line of text, pushing the start of the first line of text 3% of the container's inner-size past the inline-start of the content area, into the padding and border, possibly overflowing the container. + +A negative value is different from adding the `hanging` keyword to a positive value. Continuing with the same example, `text-indent: 3% hanging` doesn't outdent the first line of text. Rather, it indents all the lines of text _except_ the first line, by 3% of the container's inner-size. + ## Formal definition {{CSSInfo}} @@ -112,10 +117,14 @@ text-indent: unset; ## Examples -### Basic indent +### Basic usage + +This example demonstrates the basic usage of the `text-indent` property. #### HTML +We include two paragraphs of text. + ```html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy @@ -129,6 +138,8 @@ text-indent: unset; #### CSS +We use the `text-indent` property to indent the first line of each paragraph by `5em`. + ```css p { text-indent: 5em; @@ -138,7 +149,44 @@ p { #### Result -{{ EmbedLiveSample('Basic_indent','100%','100%') }} +{{ EmbedLiveSample('Basic_usage','100%','100%') }} + +### Percentage indent + +Using the same HTML as in the previous example, here we demonstrate using percentage values and how percentage values are relative to the element's content area in the inline direction. + +```html hidden +

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy + nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. +

+

+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy + nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. +

+``` + +#### CSS + +We set the `text-indent` to a percentage value. We also added padding and vertical stripes to better enable gauging the size of the indentation relative to the element's box model. + +```css +p { + text-indent: 30%; + + padding: 30px; + background-image: repeating-linear-gradient( + to right, + transparent 0 9.5%, + #dedede 9.5% 10% + ); + background-color: plum; +} +``` + +#### Result + +{{ EmbedLiveSample('Percentage_indent','100%','100%') }} ### Skipping indentation on the first paragraph @@ -207,34 +255,6 @@ p + p { {{ EmbedLiveSample('Skipping_indentation_on_the_first_paragraph','','500px') }} -### Percentage indent - -#### HTML - -```html -

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy - nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. -

-

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy - nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. -

-``` - -#### CSS - -```css -p { - text-indent: 30%; - background: plum; -} -``` - -#### Result - -{{ EmbedLiveSample('Percentage_indent','100%','100%') }} - ## Specifications {{Specifications}} @@ -245,14 +265,13 @@ p { ## See also -- [Learn to style HTML using CSS](/en-US/docs/Learn_web_development/Core/Styling_basics) - Related CSS properties: - {{cssxref("text-justify")}} - {{cssxref("text-orientation")}} - {{cssxref("text-overflow")}} - {{cssxref("text-rendering")}} - {{cssxref("text-transform")}} - - {{cssxref('hanging-punctuation')}} - -- [CSS Text Decoration](/en-US/docs/Web/CSS/Guides/Text_decoration) CSS module -- [CSS Text module](/en-US/docs/Web/CSS/Guides/Text) + - {{cssxref("hanging-punctuation")}} +- [CSS text decoration](/en-US/docs/Web/CSS/Guides/Text_decoration) module +- [CSS text](/en-US/docs/Web/CSS/Guides/Text) module +- [Learn to style HTML using CSS](/en-US/docs/Learn_web_development/Core/Styling_basics) diff --git a/files/en-us/web/html/reference/elements/select/index.md b/files/en-us/web/html/reference/elements/select/index.md index 0649243719fa38a..608f4768e794274 100644 --- a/files/en-us/web/html/reference/elements/select/index.md +++ b/files/en-us/web/html/reference/elements/select/index.md @@ -131,10 +131,9 @@ The `
` within a ` @@ -190,7 +189,12 @@ The following example creates a dropdown menu with grouping using {{HTMLElement( ### Advanced select with multiple features -The follow example is more complex, showing off more features you can use on a `` element: + +- The `multiple` attribute enables selecting more than one option. +- The `size` attribute is set to `4`, which means 4 lines are displayed at a time. Users can scroll to view all the options. +- Two {{htmlelement("optgroup")}} elements are included, creating two visual groupings, generally with the group name being bolded and nested options being indented. +- The `disabled` attribute is included on the "Hamster" option, making that option not selectable. ```html