LiveStyle.Selector.Prefixer (LiveStyle v0.13.0)

View Source

Expands CSS selectors to include vendor-prefixed variants for cross-browser compatibility.

This module handles selector prefixing for pseudo-elements and pseudo-classes that require vendor prefixes in different browsers. It mirrors the behavior of autoprefixer's selector hacks.

Supported Selectors

Pseudo-elements

  • ::thumb → ::-webkit-slider-thumb, ::-moz-range-thumb, ::-ms-thumb
  • ::placeholder → ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder
  • ::file-selector-button → ::-webkit-file-upload-button

Pseudo-classes

  • :fullscreen → :-webkit-full-screen, :-moz-full-screen
  • :autofill → :-webkit-autofill
  • :placeholder-shown → :-moz-placeholder-shown

Examples

iex> LiveStyle.Selector.Prefixer.prefix(".btn::placeholder")
".btn::-webkit-input-placeholder, .btn::-moz-placeholder, .btn:-ms-input-placeholder, .btn::placeholder"

iex> LiveStyle.Selector.Prefixer.prefix(".btn:fullscreen")
".btn:-webkit-full-screen, .btn:-moz-full-screen, .btn:fullscreen"

Configuration

Selector prefixing is always enabled. Unlike property prefixing which depends on browserslist configuration, selector prefixing provides maximum compatibility by default since the prefixed selectors don't add significant overhead.

Summary

Functions

prefix(selector)

Expands a CSS selector to include vendor-prefixed variants.

Functions

prefix(selector)

@spec prefix(String.t()) :: String.t()

Expands a CSS selector to include vendor-prefixed variants.

If the selector contains any of the handled pseudo-elements or pseudo-classes, it will be expanded to a comma-separated list of all variants.

Selectors that don't need prefixing are returned unchanged.

Examples

iex> LiveStyle.Selector.Prefixer.prefix(".x123::thumb")
".x123::-webkit-slider-thumb, .x123::-moz-range-thumb, .x123::-ms-thumb"

iex> LiveStyle.Selector.Prefixer.prefix(".x123::placeholder")
".x123::-webkit-input-placeholder, .x123::-moz-placeholder, .x123:-ms-input-placeholder, .x123::placeholder"

iex> LiveStyle.Selector.Prefixer.prefix(".x123:hover")
".x123:hover"

iex> LiveStyle.Selector.Prefixer.prefix(".x123:fullscreen")
".x123:-webkit-full-screen, .x123:-moz-full-screen, .x123:fullscreen"