Расширения CSS с вендорным префиксом WebKit (-webkit-)

Вендорный префикс указывает, что функция предназначена для определённого браузера. Пользовательские агенты на основе WebKit или Blink (например, Safari и Chrome) поддерживают несколько расширений CSS с префиксом -webkit-.

Свойства с префиксом -webkit- без стандартных эквивалентов

A-C

• -webkit-app-region Устарело: больше не поддерживается в Safari.
• -webkit-border-horizontal-spacing
• -webkit-border-vertical-spacing
• -webkit-box-reflect: поддерживается всеми браузерами с -webkit- для обеспечения совместимости.
• -webkit-column-axis: не поддерживается в Chrome.
• -webkit-column-progression: не поддерживается в Chrome.
• -webkit-cursor-visibility: не поддерживается в Chrome.

D-L

• -webkit-font-smoothing: см. font-smooth.
• -webkit-hyphenate-limit-after: не поддерживается в Chrome.
• -webkit-hyphenate-limit-before: не поддерживается в Chrome.
• -webkit-hyphenate-limit-lines: не поддерживается в Chrome.
• -webkit-line-align: не поддерживается в Chrome.
• -webkit-line-box-contain: не поддерживается в Chrome.
• -webkit-line-grid: не поддерживается в Chrome.
• -webkit-line-snap: не поддерживается в Chrome.
• -webkit-locale
• -webkit-logical-height
• -webkit-logical-width

M

• -webkit-mask-box-image: см. mask-border и border-image.
• -webkit-mask-box-image-outset: см. mask-border и border-image.
• -webkit-mask-box-image-repeat: см. mask-border и border-image.
• -webkit-mask-box-image-slice: см. mask-border и border-image.
• -webkit-mask-box-image-source: см. mask-border и border-image.
• -webkit-mask-box-image-width: см. mask-border и border-image.
• -webkit-mask-composite: см. mask-border и border-image.
• -webkit-mask-position-x: поддерживается всеми браузерами с -webkit- для обеспечения совместимости.
• -webkit-mask-position-y: поддерживается всеми браузерами с -webkit- для обеспечения совместимости.
• -webkit-mask-repeat-x Устарело: больше не поддерживается; см. mask-repeat.
• -webkit-mask-repeat-y Устарело: больше не поддерживается; см. mask-repeat.
• -webkit-mask-source-type: не поддерживается в Chrome.
• -webkit-max-logical-height
• -webkit-max-logical-width
• -webkit-min-logical-height
• -webkit-min-logical-width

N-Z

• -webkit-nbsp-mode: не поддерживается в Chrome.
• -webkit-perspective-origin-x
• -webkit-perspective-origin-y
• -webkit-rtl-ordering
• -webkit-tap-highlight-color: поддерживается только в Safari на iOS.
• -webkit-text-decoration-skip: не поддерживается в Chrome.
• -webkit-text-decorations-in-effect
• -webkit-text-fill-color
• -webkit-text-security
• -webkit-text-stroke
• -webkit-text-stroke-color
• -webkit-text-stroke-width
• -webkit-text-zoom: не поддерживается в Chrome.
• -webkit-touch-callout Устарело: поддерживается только в Safari на iOS.
• -webkit-transform-origin-x
• -webkit-transform-origin-y
• -webkit-transform-origin-z
• -webkit-user-drag
• -webkit-user-modify

Свойства с префиксом -webkit- со стандартными эквивалентами

Некоторые свойства с префиксом -webkit- имеют стандартные эквиваленты. Даже если названия и синтаксис могут различаться, их больше не следует использовать. Для каждого из перечисленных ниже свойств используйте стандартный эквивалент.

A-B

• -webkit-border-after: используйте border-block-end.
• -webkit-border-after-color: используйте border-block-end-color.
• -webkit-border-after-style: используйте border-block-end-style.
• -webkit-border-after-width: используйте border-block-end-width.
• -webkit-border-before: используйте border-block-start.
• -webkit-border-before-color: используйте border-block-start-color.
• -webkit-border-before-style: используйте border-block-start-style.
• -webkit-border-before-width: используйте border-block-start-width.
• -webkit-border-end: используйте border-inline-end.
• -webkit-border-end-color: используйте border-inline-end-color.
• -webkit-border-end-style: используйте border-inline-end-style.
• -webkit-border-end-width: используйте border-inline-end-width.
• -webkit-border-start: используйте border-inline-start.
• -webkit-border-start-color: используйте border-inline-start-color
• -webkit-border-start-style: используйте border-inline-start-style.
• -webkit-border-start-width: используйте border-inline-start-width.
• -webkit-box-align: используйте флексбокс CSS со свойством align-items.
• -webkit-box-direction: используйте флексбокс CSS со свойством flex-direction.
• -webkit-box-flex-group: используйте флексбокс CSS со свойствами flex-basis, flex-grow и flex-shrink.
• -webkit-box-flex: используйте флексбокс CSS со свойством flex-grow.
• -webkit-box-lines: используйте флексбокс CSS со свойством flex-flow.
• -webkit-box-ordinal-group: используйте флексбокс CSS со свойством order.
• -webkit-box-orient: используйте флексбокс CSS со свойством flex-direction.
• -webkit-box-pack: используйте флексбокс CSS со свойством justify-content.
• -webkit-box-reflect: используйте CSS-функцию element().

C-I

• -webkit-column-break-after: используйте многоколоночную раскладку CSS со свойством break-after.
• -webkit-column-break-before: используйте многоколоночную раскладку CSS со свойством break-before.
• -webkit-column-break-inside: используйте многоколоночную раскладку CSS со свойством break-inside.
• -webkit-font-feature-settings: используйте font-feature-settings (версия с префиксом не поддерживается в Safari).
• -webkit-hyphenate-character: используйте hyphenate-character.
• -webkit-initial-letter: используйте initial-letter.

J-Z

• -webkit-line-clamp: используйте line-clamp.
• -webkit-margin-after: используйте margin-block-end.
• -webkit-margin-before: используйте margin-block-start.
• -webkit-margin-end: используйте margin-inline-end.
• -webkit-margin-start: используйте margin-inline-start.
• -webkit-padding-after: используйте padding-block-end.
• -webkit-padding-before: используйте padding-block-start.
• -webkit-padding-end: используйте padding-inline-end.
• -webkit-padding-start: используйте padding-inline-start.

Значения свойств с префиксом -webkit-

-webkit-fill-available

Используется со свойствами размеров, такими как width и height, чтобы элементы занимали всё доступное пространство внутри родительского контейнера. Значение stretch является стандартной заменой, однако браузеры поддерживают -webkit-fill-available как псевдоним для обратной совместимости.

Псевдоклассы

• :-webkit-any(): используйте :is()
• :-webkit-any-link: используйте :any-link
• :-webkit-autofill: используйте :autofill
• :-webkit-autofill-strong-password: используйте :autofill
• :-webkit-drag
• :-webkit-full-page-media: используйте :fullscreen
• :-webkit-full-screen: используйте :fullscreen
• :-webkit-full-screen-ancestor: используйте :fullscreen
• :-webkit-full-screen-document: используйте :fullscreen
• :-webkit-full-screen-controls-hidden: используйте :fullscreen

Псевдоэлементы

Для обеспечения совместимости с вебом браузеры Blink, WebKit и Gecko считают допустимыми все псевдоэлементы, начинающиеся с ::-webkit-. Если цепочка или группа селекторов содержит недопустимый псевдоэлемент или псевдокласс, весь список селекторов считается недопустимым. Если у псевдоэлемента (но не псевдокласса) есть префикс -webkit-, браузеры Blink, WebKit и Gecko считают его допустимым, не признавая список селекторов недопустимым.

• ::-webkit-file-upload-button: используйте ::file-selector-button
• ::-webkit-inner-spin-button
• ::-webkit-input-placeholder: используйте ::placeholder
• ::-webkit-meter-bar Устарело
• ::-webkit-meter-even-less-good-value
• ::-webkit-meter-inner-element
• ::-webkit-meter-optimum-value
• ::-webkit-meter-suboptimum-value
• ::-webkit-progress-bar
• ::-webkit-progress-inner-element
• ::-webkit-progress-value
• ::-webkit-search-cancel-button
• ::-webkit-search-results-button
• ::-webkit-slider-runnable-track
• ::-webkit-slider-thumb

Медиавыражения

• -webkit-animation Устарело
• -webkit-device-pixel-ratio: поддерживается во всех браузерах
• -webkit-transform-2d Устарело
• -webkit-transform-3d: поддерживается во всех браузерах
• -webkit-transition Устарело

См. также

• Расширения CSS Mozilla (-moz-) с вендорным префиксом
• Вендорный префикс — статья в глоссарии