CSS entries starting with “S”

Every CSS entry starting with S, grouped by kind. Pseudo-classes, pseudo-elements and types are filed by their first letter, ignoring the leading :, :: or <.

Name	Description
Color
`SelectedItem`	System colour: the background of a selected item.
`SelectedItemText`	System colour: text of a selected item.
`saddlebrown`	Named colour #8b4513.
`salmon`	Named colour #fa8072.
`sandybrown`	Named colour #f4a460.
`seagreen`	Named colour #2e8b57.
`seashell`	Named colour #fff5ee.
`sienna`	Named colour #a0522d.
`silver`	Named colour #c0c0c0.
`skyblue`	Named colour #87ceeb.
`slateblue`	Named colour #6a5acd.
`slategray`	Named colour #708090.
`slategrey`	Named colour #708090.
`snow`	Named colour #fffafa.
`springgreen`	Named colour #00ff7f.
`steelblue`	Named colour #4682b4.
Container feature
`scroll-state()`	A container query on scroll state: stuck, snapped, scrollable, scrolled.
`scrollable`	Whether the container can be scrolled further in a direction.
`scrolled`	The direction the container was most recently scrolled.
`snapped`	Whether the container is the current scroll snap target.
`stuck`	Whether a sticky container is stuck to an edge.
`style()`	A container query on the value of a custom property.
Descriptor
`size`	An @page descriptor: the size and orientation of the page box.
`size-adjust`	An @font-face descriptor that scales the font's glyphs and metrics.
`speak-as`	An @counter-style descriptor: how screen readers read the marker.
`src`	An @font-face descriptor listing the font files or local fonts to use.
`suffix`	An @counter-style descriptor: a symbol placed after the marker.
`symbols`	An @counter-style descriptor: the symbols the counter is built from.
`syntax`	An @property descriptor: the type a custom property accepts.
`system`	An @counter-style descriptor: the algorithm that turns numbers into symbols.
Environment variable
`safe-area-inset-bottom`	Distance from the bottom of the viewport to the unobscured safe area.
`safe-area-inset-left`	Distance from the left of the viewport to the unobscured safe area.
`safe-area-inset-right`	Distance from the right of the viewport to the unobscured safe area.
`safe-area-inset-top`	Distance from the top of the viewport to the unobscured safe area.
Function
`saturate()`	A filter that adjusts colour saturation.
`scale()`	Resizes a box in one or both axes from its transform origin.
`scale3d()`	Scales a box along the x, y and z axes.
`scaleX()`	Resizes a box along the x axis.
`scaleY()`	Resizes a box along the y axis.
`scaleZ()`	Scales a box along the z axis.
`scroll()`	An animation timeline driven by a scroll container's scroll position.
`selector()`	An @supports test for whether the browser supports a selector.
`sepia()`	A filter that converts colours towards a sepia tone.
`shape()`	A responsive path written as CSS drawing commands.
`sibling-count()`	The number of element children of the element's parent.
`sibling-index()`	The element's position among its siblings, starting at 1.
`sign()`	Returns -1, 0 or 1 for the sign of its argument.
`sin()`	The sine of an angle.
`skew()`	Slants a box along the x and optional y axis.
`skewX()`	Slants a box along the x axis.
`skewY()`	Slants a box along the y axis.
`sqrt()`	The square root of a number.
`steps()`	Easing in a number of equal jumps, for frame-by-frame animation.
`superellipse()`	A corner curve for corner-shape, from notch to square.
`symbols()`	An anonymous counter style defined inline.
Keyword
`sans-serif`	Generic font family: a font without serifs.
`serif`	Generic font family: a font with serifs.
`step-end`	Easing that holds the start value, then jumps at the end.
`step-start`	Easing that jumps to the end value immediately.
`system-ui`	Generic font family: the operating system's interface font.
Media feature
`scan`	Whether the display is interlaced or progressive.
`scripting`	Whether scripting such as JavaScript is available.
Property
`scale`	Scales a box along x, y and z.
`scroll-axis-lock`	Whether a scroll gesture may be locked to a single axis.
`scroll-behavior`	Makes navigation and scripted scrolls animate smoothly.
`scroll-initial-target`	Makes a scroll container start out scrolled to this element.
`scroll-margin`	Shorthand for the space kept around an element when it is scrolled into view.
`scroll-margin-block`	Shorthand for the block-start and block-end scroll margins.
`scroll-margin-block-end`	The scroll margin on the block-end side of an element.
`scroll-margin-block-start`	The scroll margin on the block-start side of an element.
`scroll-margin-bottom`	The scroll margin below an element.
`scroll-margin-inline`	Shorthand for the inline-start and inline-end scroll margins.
`scroll-margin-inline-end`	The scroll margin on the inline-end side of an element.
`scroll-margin-inline-start`	The scroll margin on the inline-start side of an element.
`scroll-margin-left`	The scroll margin to the left of an element.
`scroll-margin-right`	The scroll margin to the right of an element.
`scroll-margin-top`	The scroll margin above an element.
`scroll-marker-group`	Generates a group of scroll markers before or after a scroll container.
`scroll-padding`	Shorthand for the scroll container insets used when scrolling things into view.
`scroll-padding-block`	Shorthand for the block-start and block-end scroll paddings.
`scroll-padding-block-end`	The scroll padding on the block-end side of a scroll container.
`scroll-padding-block-start`	The scroll padding on the block-start side of a scroll container.
`scroll-padding-bottom`	The scroll padding at the bottom of a scroll container.
`scroll-padding-inline`	Shorthand for the inline-start and inline-end scroll paddings.
`scroll-padding-inline-end`	The scroll padding on the inline-end side of a scroll container.
`scroll-padding-inline-start`	The scroll padding on the inline-start side of a scroll container.
`scroll-padding-left`	The scroll padding on the left of a scroll container.
`scroll-padding-right`	The scroll padding on the right of a scroll container.
`scroll-padding-top`	The scroll padding at the top of a scroll container.
`scroll-snap-align`	Where an element aligns when its scroll container snaps to it.
`scroll-snap-stop`	Stops a fast scroll from skipping past this snap position.
`scroll-snap-type`	Makes a scroll container snap to its children, in which axis and how strictly.
`scroll-target-group`	Tracks a group of anchor links so the one in view matches :target-current.
`scroll-timeline`	Shorthand that names a scroll container's scroll timeline.
`scroll-timeline-axis`	Which scroll direction a scroll timeline tracks.
`scroll-timeline-name`	The name of the scroll timeline an element defines.
`scrollbar-color`	The thumb and track colours of scrollbars.
`scrollbar-gutter`	Reserves space for the scrollbar so content does not shift.
`scrollbar-width`	Default, thin or hidden scrollbars.
`shape-image-threshold`	The alpha level that counts as inside a shape taken from an image.
`shape-margin`	Extra space round a float shape.
`shape-outside`	A non-rectangular outline for text to wrap round a float.
`shape-rendering`	A hint to favour speed, crisp edges or precision when drawing shapes.
`speak`	Whether an element's text is spoken by a speech synthesiser.
`speak-as`	How text is read aloud: spelled out, digit by digit, with or without punctuation.
`stop-color`	The colour of an SVG gradient stop.
`stop-opacity`	The opacity of an SVG gradient stop.
`stroke`	Paints the outline of an SVG shape or text.
`stroke-color`	Sets the stroke to a colour. Safari only.
`stroke-dasharray`	Turns an SVG stroke into a pattern of dashes and gaps.
`stroke-dashoffset`	Where the dash pattern starts along an SVG stroke.
`stroke-linecap`	The shape at the open ends of an SVG stroke.
`stroke-linejoin`	The shape of an SVG stroke at corners.
`stroke-miterlimit`	How long a miter join may get before it becomes a bevel.
`stroke-opacity`	The opacity of an SVG stroke alone.
`stroke-width`	The thickness of an SVG stroke.
Pseudo-class
`:scope`	Matches the scoping root of an @scope block or a querySelector call.
`:seeking`	Matches a media element while it is seeking.
`:stalled`	Matches a media element that has received no data for some time.
`:state()`	Matches a custom element that has a given custom state.
Pseudo-element
`::scroll-button()`	A generated button that scrolls its container in one direction.
`::scroll-marker`	A generated marker that tracks and scrolls to an item, like a carousel dot.
`::scroll-marker-group`	The box that holds a scroll container's scroll markers.
`::search-text`	Text matched by the browser's find-in-page feature.
`::selection`	The text the user has selected.
`::slotted()`	Inside a shadow tree, styles light-DOM elements assigned to a slot.
`::spelling-error`	Text the browser has flagged as misspelled.
Selector
`selector list`	A comma-separated list that applies one rule to several selectors.
Type
`<self-position>`	Place one item within its own alignment area.
`<shadow>`	One shadow: offsets, blur, spread, colour and inset.
`<shape-box>`	The reference box for a float's wrap shape.
`<single-animation-composition>`	replace, add or accumulate: how an animation combines with other values.
`<single-animation-direction>`	normal, reverse, alternate or alternate-reverse.
`<single-animation-fill-mode>`	Whether keyframe styles apply before and after an animation runs.
`<single-animation-iteration-count>`	How many times an animation repeats, or infinite.
`<single-animation-play-state>`	running or paused.
`<single-transition>`	One transition in the transition shorthand.
`<string>`	Text in double or single quotes.
`<system-color>`	Keywords for the browser and system colours of pages and controls.
Unit
`s`	Seconds.
`svb`	1% of the small viewport in the block axis.
`svh`	1% of the small viewport height, with toolbars shown.
`svi`	1% of the small viewport in the inline axis.
`svmax`	1% of the small viewport's larger dimension.
`svmin`	1% of the small viewport's smaller dimension.
`svw`	1% of the small viewport width, with toolbars shown.