Как подключить webkit css

Live Edit in HTML, CSS, and JavaScript

With the Live Edit functionality, the changes you make to your HTML, CSS, or JavaScript code are immediately shown in the browser without reloading the page.

Live Edit works for other file types that contain or generate HTML, CSS, or JavaScript. You can also use Live Edit when debugging a Node.js application. For more information, refer to Live Edit in Node.js application.

By default, Live Edit is enabled only for HTML and CSS files.

Before you start

Make sure the JavaScript Debugger bundled plugin is enabled in the settings. Press Control+Alt+S to open the IDE settings and then select Plugins . Click the Installed tab. In the search field, type JavaScript Debugger . For more information about plugins, refer to Managing plugins.
Make sure the Live Edit plugin is enabled in the settings. Press Control+Alt+S to open the IDE settings and then select Plugins . Click the Installed tab. In the search field, type Live Edit . For more information about plugins, refer to Managing plugins.
Configure the built-in debugger as described in Configuring JavaScript debugger. To have the changes you make to your HTML, CSS, or JavaScript code immediately shown in the browser without reloading the page, activate the Live Edit functionality. For more information about the live editing functionality, refer to Live Edit in HTML, CSS, and JavaScript .

Activate and configure Live Edit in JavaScript

In the Settings dialog ( Control+Alt+S ), go to Build, Execution, Deployment | Debugger | Live Edit .
On the Live Edit page that opens, select the Update application in Chrome on changes in checkbox.
By default, WebStorm shows on-the-fly preview only for HTML and CSS code. To enable Live Edit in JavaScript, select the JavaScript, HTML and CSS option.
Specify the time-delay between changing the code in the editor and showing this change in the browser: accept the default value 300 ms or specify a custom value using the spin box next to the corresponding field.
To enable reloading of JavaScript files that are executed by Node.js, select the Update Node.js application on change checkbox. Use the spin box to specify the elapsed time for upload, the default value is 300 .
To enable Live Edit in code that can be compiled into JavaScript, HTML, or CSS, for example, in TypeScript, Pug, or SCSS, select the Track changes in files compiled to JavaScript, HTML or CSS checkbox. All the changes made in such files are automatically saved to trigger compilation and then appear in the browser. Note that a changed file is saved shortly after the update, contrary to regular autosave triggered by closing a file, a project, or WebStorm, or by other events.
To configure highlighting, select the Highlight current element in browser on caret change checkbox. Otherwise, during a debugging session, you will have to hold Shift and hover over the element in the editor to highlight it in the browser.
Select the Restart if hotswap fails checkbox to allow WebStorm to reload the page automatically if the changes couldn’t be applied without that.

Use Live Edit

Start a debugging session.
Update your HTML, CSS, or JavaScript code as necessary. The changes are reflected in the browser immediately without reloading the page.

Как подключить CSS для Safari, Internet Explorer, Firefox, Safari, Google Chrome

При верстке шаблона, наткнулся на пару неприятных вещей. Не могу добиться кроссбраузерного отображения вида маркированного списка. Благо, интернет — великая вещь, который подарил ответ на данный вопрос.

Итак, как это делать — подключать стили CSS для каждого браузера?

Internet Explorer любой версии

Первое решение — это, конечно, Conditional Comments (Условные комментарии). Об этом хорошо написано на сайте wikipedia.org. Чтобы правило работало, прописываем в конце каждого определения !important.

Приведу пример для наглядности:

Второе решение — это хаки. Приведу пример. Оба варианта валидны. И удобнее всего использовать:

* html .box < height : 300px >/* Только IE6 */ *+ html .box < height : 300px >/* Только IE7 */

Opera >9

Тут тоже два решения. Первое с использованием javascript, второе — снова хаки. Предпочитаю как можно реже использовать javascript, поэтому сам выбираю второй пункт. Прописываешь прямо в CSS. Но, к сожалению, этот хак коснется и Safari.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) < .box < background: #F00 >>

Safari и Google Chrome

@media all and (-webkit-min-device-pixel-ratio:0) < .box < color: red; /* для Chrome и Safari */ >>

Firefox

Здесь нечего писать. Так как он для меня и других правильнее всех рендерит HTML, я просто беру его за основу. Делаю верстку для него. А потом уже отталкиваюсь и делаю поправки на другие браузеры.

Но все равно бывают затыки, против которых не попрешь. Например, в лисе проблемы с вертикальным выравниванием в полях ввода текста. Чтобы бороться с ними, прописываем так:

@-moz-document url-prefix() < .box < background: #F00 >>

Больше возможностей для подключения стилей для определенных браузеров можно найти на stackoverflow.com

WebKit для разработчиков

Для многих из нас, разработчиков, WebKit — черный ящик. Мы бросаем в него HTML, CSS, JS и кучу изображений, и WebKit, как-то… магически, выдает нам веб-страницу, которая выглядит и работает хорошо.
Но на самом деле, как говорит мой коллега Илья Григорик:

Веб-кит не является черным ящиком. Это — белый ящик. И не просто белый, но и открытый ящик.

Что такое WebKit?
Чем WebKit не является?
Как WebKit используется WebKit-браузерами?
Почему многие WebKit не одинаковые?

Стандартные компоненты веб-браузера

Давайте перечислим несколько компонентов современных браузеров:

Парсинг (Разбор HTML, XML, CSS, Javascript)
Макет (Layout)
Рендеринг текста и графики
Декодировка изображений
Взаимодействия с GPU
Доступ к сети
Аппаратное ускорение

Остальные компоненты каждый WebKit «порт» реализует по своему. Давайте разберемся что это значит.

WebKit порты

Существует множество WebKit «портов», и я предоставляю Ария Хидаят, WebKit хакер и тех. директор в Sencha право рассказать об этом:

Самым популярной ассоциацией к понятию WebKit, обычно является вид WebKit от Apple’s, который работает на Mac OS X (первая и оригинальная WebKit библиотека). Как вы можете догадаться, различные интерфейсы реализованы, используя различные нативные библиотеки Mac OS X, в основном сосредоточенные в компоненте CoreFoundation. Например, если вы определяете цветную плоскую кнопку, с особым радиусом контура, WebKit знает где и как рисовать эту кнопку. В тоже время, окончательный рендеринг кнопки (в виде пикселей на мониторе пользователя) ложится на плечи CoreGraphics.

Как я упоминал выше, используемый CoreGraphics, уникален для каждого WebKit порта. Chrome для Mac, к примеру, использует Skia.

В какой-то момент, WebKit был «портирован» под разные платформы, как десктопные, так и мобильные. Такая вариация обычно называется «WebKit порт». Для Safari Windows, Apple также самостоятельно «портировала WebKit» для запуска под Windows, используя Windows версию своей (с ограниченной реализацией) CoreFoundation библиотеки.

… не смотря на факт, что Safari под Windows теперь мертв.

Кроме этого, также было множество других «портов» (см. полный список). Google создал и продолжает поддерживать свой Chromium порт. Также существует WebKitGtk, основанный на Gtk+. Nokia (а теперь Trolltech, который перекупил его) поддерживает WebKit Qt порт, который стал популярен в качестве QtWebKit модуля.

Некоторые порты WebKit

Safari
— Safari под OS X и Safari под Windows два разных порта
— Ночная сборка WebKit это сборка исходного кода Mac «порта», который используется для Safari, только новее
Мобильный Safari
— Развивался в приватной ветке, но позднее былоткрыт.
— Chrome под iOS (использует Apple’s WebView; чуть позже о разнице)
Chrome (Chromium)
— Chrome под Android (использует непосредственно «порт» Chromium)
— Chromium также является основой для браузеров: Yandex, 360, Sogou, и скоро, Opera.
Android браузер
— Использует последний исходный код WebKit, доступный на момент релиза.
Еще большее количество портов: Amazon Silk, Dolphin, Blackberry, QtWebKit, WebKitGTK+, The EFL port (Tizen), wxWebKit, WebKitWinCE, etc

Что общее во всех WebKit браузерах

Для начала давайте рассмотрим общие функции, которые используются во всех WebKit-браузерах:

Знаете это смешно, я сделал несколько попыток, чтобы написать этот абзац. И каждый раз члены команды Chrome поправляли меня, как вы увидите…

И так, во первых, WebKit разбирает HTML одинаково. Ну, за исключением того, что Chromium единственный порт, на данный момент, где включена поддержка потоков для разбора HTML.
… Хорошо, но после разбора HTML, DOM дерево конструируется одинаково. Ну, на самом деле Shadow DOM включен только для Chromium порта, тоесть построение DOM варьируется. Тоже для пользовательских элементов (custom elements).
… Хорошо, WebKit создает window и document объекты для всех одинаково. Правда, хотя свойства и конструкции которые они предоставляют, могут зависит от использования переключателей функций (feature flags).
… Разбор CSS одинаков. Поедание вашего CSS и преобразование его в CSSOM довольно таки стандартно. Ага, хотя Chrome поддерживает только -webkit- префиксы, когда Apple и другие браузеры поддерживают устаревшие префиксы -khtml- и -apple-.
… Макет… позиционирование? Это же как хлеб с маслом. Везде одинаково, правильно? Ну уже! Субпиксельный макет и насыщенная макетная арифметика является частью WebKit, но отличается от порта к порту.
Супер.

Так что, это сложно.

Точно также как Flickr и Github прячут реализованные функции за специальными флагами, WebKit делает тоже самое. Это позволяет портам включать/выключать любую функциональность на стадии компиляции с помощью WebKit compile-time Feature Flags. Функции также могут быть включены в режиме работы, с помощью параметров в командной строке (для Chromium) или конфигураций, таких как about:flags.

Теперь, давайте попробуем подвести итог, что общего в мире WebKit…

Что общего для каждого WebKit порта.

DOM, window, document
более или менее
CSSOM
Разбор CSS, свойство/значение
различия в префиксах производителей
Разбор HTML и построение DOM
Одинаково, если мы забудем про Web Components.
Макет и позиционирование
Flexbox, Floats, block formating context… все общее
Инструменты пользовательского интерфейса, и инструменты разработчика, типа Chrome DevTools он же WebKit inspector.
Хотя с прошлого апреля, Safari использует свой собственный Safari инспектор, не-WebKit, с закрытыми исходниками.
Такие функции как contenteditable, pushState, File API, большинство SVG, математика CSS трансформаций, Web Audio API, localStorage
Хотя реализация может отличаться. Каждый порт может использовать свою собственную систему хранения для localStorage и может использовать разное audio API для Web Audio API.
Множество других функций.

Теперь, что не является общим для WebKit портов:

Все связанное с GPU
— 3D трансформации
— WebGL
— Декодирование видео
Отрисовка 2D на экран
— Технологии сглаживания
— Рендеринг SVG и CSS градиентов
Рендеринг текста и переносы
Сетевые технологии (SPDY, пре-рендеринг, WebSocket транспорт)
JavaScript движок
— Движок JavaScriptCore лежит в репозитории WebKit. Но существуют биндинги в WebKit и для него, и для V8.
Рендеринг элементов форм
Поведение тэгов video и audio и поддержка кодеков
Декодирование изображений
Навигация назад/вперед
— Часть pushState()
SSL функции, такие как Strict Transport Security и Public Key Pins

Читать:

Почему слышны звуки игры в discord

Или если вдаваться в подробности, недавно добавленная функция: CSS.supports() была включена для всех портов, за исключением win и wincairo, для которых не включены условные функции css3 (css3 conditional features).

Теперь, мы вдаемся в технические подробности… время стать педантичным. Даже сказанное выше не совсем корректно. На самом деле это WebCore, является общим компонентом. WebCore это макет, рендеринг, и DOM библиотека для HTML и SVG, и в основном то, что люди думают, когда они говорят WebKit. В самом деле «WebKit» технически — это слой биндингов между WebCore и «портами», хотя в обычной беседе это различие в основном не важно.

Диаграмма должна помочь:

Многие из компонентов WebKit переключаемые (показаны серыми).

Например, JavaScript движок WebKit, JavaScriptCore, является движком по-умолчанию в WebKit. Изначально он основан на KJS (от KDE) с дней, когда WebKit начинался как ответвление KHTML. В тоже время, Chromium порт, переключается на V8 движок и использует уникальные DOM биндинги.

Шрифты и рендеринг текста являются очень большой частью платформы. Существует 2 отдельных пути для текста в WebKit: Быстрый и Сложный. Оба требуют поддержку специфичную для платформы (реализованную на стороне порта), но Быстрый только должен знать как блитировать глифы (которые WebKit кэширует для платформы), когда Сложный полностью переносит рендеринг строк на уровень платформы и просто говорит «нарисуй это, пожалуйста».

«WebKit это как сэндвич. В прочем, в случае Chromium, это больше как тако. Вкусное тако из веб-технологий.
Dmitri Glazkov, Chrome WebKit hacker. Champion of Web Componets, and shadow dom.

Теперь, давайте расширим обзор, и посмотрим на несколько портов и несколько подсистем. Ниже представлены пять портов WebKit, обратите внимание, как различается набор инструментов для каждого из них, несмотря на общие компоненты:

Chrome (OS X)	Safari (OS X)	QtWebKit	Android Browser	Chrome for iOS
Rendering	Skia	CoreGraphics	QtGui	Android stack/Skia	CoreGraphics
Networking	Chromium network stack	CFNetwork	QtNetwork	Fork of Chromium’s network stack	Chromium stack
Fonts	CoreText via Skia	CoreText	Qt internals	Android stack	CoreText
JavaScript	V8	JavaScriptCore	JSC (V8 is used elsewhere in Qt)	V8	JavaScriptCore (without JITting) *

* Сноска про Chrome для IOS. Он использует UIWebView, как вы вероятно знаете. В соответствии с возможностями UIWebView, это означает что он может использовать только такой же рендеринг движок, как и Мобильный Safari, JavaScriptCore (а не V8) и однопоточную модель. Тем неменее, некоторый код заимствован из Chromium, такой как подсистема для работы с сетью, синхронизация инфраструктура закладок, omnibox, метрики и отчеты о сбоях (crash reporting). (Также, JavaScript настолько редко является узким местом на мобильных устройствах, что отсутствие JITting компилятора имеет минимальное влияние.)

Хорошо, так к чему же мы пришли?

И так, все WebKit полностью различные теперь. Я напуган.

Не стоит! Покрытие WebKit тестами «layoutTest» огромное. (28,000 тестов по последним подсчетам), и не только для существующих функций, но также для всех найденных регрессий. На самом деле, когда бы вы не изучали новые или «тайные» функции DOM/CSS/HTML-5, наборы тестов «layoutTest» обычно имеют отличную минимальную демонстрацию.

В дополнении, W3C предпринимает усилия для стандартизации набора тестов. Это означает, что мы можем ожидать что и WebKit порты, и все другие браузеры будут тестироваться одинаковыми наборами тестов, что приведет нас к уменьшению quirks and a more interoperable web. Для всех тех, кто приложил свои усилия, посетив событие Test The Web Forward… спасибо вам!

Опера только что переехала на WebKit. Что из этого получится?

Роберт Найман и Роб Хоукс уже коснулись этой темы, но я добавлю что, одной из важной частью анонса было то, что Opera переходит на Chromium. Это означает, что WebGL, Canvas, HTML5 формы, имплементация 2D graphics, все эти вещи будут одинаковыми на Chrome и Opera теперь. Одинаковое API, и низкоуровневая реализация. Так как Opera основана на Chromium, вы можете ощущать, что вы сокращаете свою работу, по проверке совместимости на Opera и Chrome.
Я также должны обратить внимание, что все Opera браузеры будут переведены на Chromium. То есть, Opera для Windows, Mac, Linux и Opera Mobile (полноценный мобильный браузер). Даже Opera Mini, тонкий клиент, будет переключена с текущей рендеринг-фермы основанной на Presto, на другую, основанную на Chromium.

… и ночная сборка WebKit. Что это?

Это mac порт WebKit, работающий на том же коде что и Safari (хотя некоторые внутренние библиотеки были изменены). В основном Apple руководит им, так что поведение и набор функций соответствует тому, что вы сможете найти в Safari. Во многих случаях Apple ведет себя консервативно, когда речь заходит о включении функций, которые другие порты реализуют или с которыми ведут эксперементы. В любом случае, если использовать аналогии, думайте что… ночная сборка WebKit для Safari, это как Chromium для Chrome.
Chrome Canary также использует последние исходные коды WebKit, однодневной давности или около того.

WebKit vendor-prefixed CSS extensions

Applications based on WebKit or Blink, such as Safari and Chrome, support a number of special WebKit extensions to CSS. These extensions are generally prefixed with -webkit- . Most -webkit- prefixed properties also work with an -apple- prefix. A few are prefixed with -epub- .

WebKit-only properties

Note: Avoid using on websites. These properties will only work in WebKit applications.

A

-webkit-animation-trigger
-webkit-app-region
-webkit-aspect-ratio

B

-webkit-backdrop-filter
-webkit-border-after **
-webkit-border-after-color **
-webkit-border-after-style **
-webkit-border-after-width **
-webkit-border-before **
-webkit-border-before-color **
-webkit-border-before-style **
-webkit-border-before-width **
-webkit-border-end **
-webkit-border-end-color **
-webkit-border-end-style **
-webkit-border-end-width **
-webkit-border-horizontal-spacing
-webkit-border-start **
-webkit-border-start-color **
-webkit-border-start-style **
-webkit-border-start-width **
-webkit-border-vertical-spacing
-webkit-box-align **
-webkit-box-direction **
-webkit-box-flex-group **
-webkit-box-flex **
-webkit-box-lines **
-webkit-box-ordinal-group **
-webkit-box-orient **
-webkit-box-pack **
-webkit-box-reflect **

C

-webkit-column-axis
-webkit-column-break-after
-webkit-column-break-before
-webkit-column-break-inside
-webkit-column-progression
-webkit-cursor-visibility

D-I

-webkit-dashboard-region
-webkit-font-size-delta
-webkit-font-smoothing
-webkit-hyphenate-character
-webkit-hyphenate-limit-after
-webkit-hyphenate-limit-before
-webkit-hyphenate-limit-lines
-webkit-initial-letter

L

-webkit-line-align
-webkit-line-box-contain
-webkit-line-clamp
-webkit-line-grid
-webkit-line-snap
-webkit-locale
-webkit-logical-height
-webkit-logical-width

M

-webkit-margin-after
-webkit-margin-before
-webkit-margin-end **
-webkit-margin-start **
-webkit-marquee-direction
-webkit-marquee-increment
-webkit-marquee-repetition
-webkit-marquee-speed
-webkit-marquee-style
-webkit-marquee
-webkit-mask-box-image-outset
-webkit-mask-box-image-repeat
-webkit-mask-box-image-slice
-webkit-mask-box-image-source
-webkit-mask-box-image-width
-webkit-mask-box-image
-webkit-mask-repeat-x ***
-webkit-mask-repeat-y ***
-webkit-mask-source-type
-webkit-mask-position-x
-webkit-mask-position-y
-webkit-max-logical-height
-webkit-max-logical-width
-webkit-min-logical-height
-webkit-min-logical-width

N

P

-webkit-padding-after **
-webkit-padding-before **
-webkit-padding-end **
-webkit-padding-start **
-webkit-perspective-origin-x
-webkit-perspective-origin-y

R-S

-webkit-rtl-ordering
-webkit-svg-shadow

T

-webkit-tap-highlight-color
-webkit-text-decoration-skip
-webkit-text-decorations-in-effect
-webkit-text-fill-color
-webkit-text-security
-webkit-text-stroke-color
-webkit-text-stroke-width
-webkit-text-stroke
-webkit-text-zoom
-webkit-transform-origin-x
-webkit-transform-origin-y
-webkit-transform-origin-z

U

-webkit-user-drag
-webkit-user-modify

* A few are on the standards, unprefixed track ** New syntax has been standardized. Property links to the new syntax. Old prefixed syntax is still supported in some browsers. *** WebKit supports without -webkit prefix, but not standard or on standards track

WebKit-prefixed properties on the standards track

-webkit-appearance
-webkit-font-size-delta

Formerly proprietary properties that are now standard

Note: To maximize the compatibility of your CSS, you should use the unprefixed standard properties instead of the prefixed ones listed below.

A

-webkit-align-content
-webkit-align-items
-webkit-align-self
-webkit-animation
-webkit-animation-delay
-webkit-animation-direction
-webkit-animation-duration
-webkit-animation-fill-mode
-webkit-animation-iteration-count
-webkit-animation-name
-webkit-animation-play-state
-webkit-animation-timing-function
-webkit-appearance

B

-webkit-backface-visibility
-webkit-background-clip
-webkit-background-origin
-webkit-background-size
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
-webkit-border-image
-webkit-border-radius
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-box-decoration-break
-webkit-box-shadow
-webkit-box-sizing

C

-webkit-clip-path
-webkit-column-count
-webkit-column-fill
-webkit-column-gap
-webkit-column-rule
-webkit-column-rule-color
-webkit-column-rule-style
-webkit-column-rule-width
-webkit-column-span
-webkit-column-width
-webkit-columns

F

-webkit-filter
-webkit-flex
-webkit-flex-basis
-webkit-flex-direction
-webkit-flex-flow
-webkit-flex-grow
-webkit-flex-shrink
-webkit-flex-wrap
-webkit-font-feature-settings
-webkit-font-kerning
-webkit-font-variant-ligatures

G-J

-webkit-grid
-webkit-grid-area
-webkit-grid-auto-columns
-webkit-grid-auto-flow
-webkit-grid-auto-rows
-webkit-grid-column
-webkit-grid-column-end
-webkit-grid-column-gap
-webkit-grid-column-start
-webkit-grid-gap
-webkit-grid-row
-webkit-grid-row-end
-webkit-grid-row-gap
-webkit-grid-row-start
-webkit-grid-template
-webkit-grid-template-areas
-webkit-grid-template-columns
-webkit-grid-template-rows

H-L

-webkit-hyphens
-webkit-justify-content
-webkit-justify-items
-webkit-justify-self
-webkit-line-break

M

-webkit-mask
-webkit-mask-clip
-webkit-mask-composite
-webkit-mask-image
-webkit-mask-origin
-webkit-mask-position
-webkit-mask-repeat
-webkit-mask-size

O-R

-webkit-opacity
-webkit-order
-webkit-perspective
-webkit-perspective-origin
-webkit-print-color-adjust
-webkit-ruby-position

S

-webkit-scroll-snap-type
-webkit-shape-image-threshold
-webkit-shape-margin
-webkit-shape-outside

T

-webkit-text-combine
-epub-text-decoration
-webkit-text-color-decoration
-webkit-text-decoration-line
-webkit-text-decoration-style
-epub-text-emphasis
-webkit-text-emphasis
-epub-text-emphasis-color
-webkit-text-emphasis-color
-webkit-text-emphasis-position
-epub-text-emphasis-style
-webkit-text-emphasis-style
-webkit-text-justify
-webkit-text-orientation
-webkit-text-size-adjust
-webkit-text-underline-position
-webkit-transform
-webkit-transform-origin
-webkit-transform-style
-webkit-transition
-webkit-transition-delay
-webkit-transition-duration
-webkit-transition-property
-webkit-transition-timing-function

U-W

-webkit-user-select
-epub-word-break
-epub-writing-mode

Supported in non-webkit browsers without a prefix, but not standard

The following properties are supported in at least one browser without a prefix, but are not on the standards track.

-webkit-mask-position-x *
-webkit-mask-position-y *

* Supported unprefixed in Firefox, with prefix in Safari.

Supported in Firefox with -webkit- prefix

The following properties are supported with the -webkit- prefix in Firefox. Many of these are supported with no prefix as well: see Formerly proprietary properties that are now standard above.

Note: Due to the legacy code in a multitude of websites that used -webkit- prefixed properties, Edge and Firefox redirect many -webkit- prefixed properties to -moz-, -ms-, and unprefixed equivalents.

A

-webkit-align-content
-webkit-align-items
-webkit-align-self
-webkit-animation
-webkit-animation-delay
-webkit-animation-direction
-webkit-animation-duration
-webkit-animation-fill-mode
-webkit-animation-iteration-count
-webkit-animation-name
-webkit-animation-play-state
-webkit-animation-timing-function
-webkit-appearance *

B

-webkit-backface-visibility
-webkit-background-clip
-webkit-background-origin
-webkit-background-size
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
-webkit-border-image
-webkit-border-radius
-webkit-box-align **, ***
-webkit-box-direction **, ***
-webkit-box-flex **, ***
-webkit-box-orient **, ***
-webkit-box-pack **, ***
-webkit-box-shadow
-webkit-box-sizing
-webkit-border-top-left-radius
-webkit-border-top-right-radius

F

-webkit-filter
-webkit-flex
-webkit-flex-basis
-webkit-flex-direction
-webkit-flex-flow
-webkit-flex-grow
-webkit-flex-shrink
-webkit-flex-wrap

J

M

-webkit-mask
-webkit-mask-clip
-webkit-mask-composite *
-webkit-mask-image
-webkit-mask-origin
-webkit-mask-position
-webkit-mask-position-x **
-webkit-mask-position-y **
-webkit-mask-repeat
-webkit-mask-size

O-P

-webkit-order
-webkit-perspective
-webkit-perspective-origin

T

-webkit-text-fill-color **
-webkit-text-size-adjust
-webkit-text-stroke **
-webkit-text-stroke-color **
-webkit-text-stroke-width **
-webkit-transform
-webkit-transform-origin
-webkit-transition
-webkit-transition-delay
-webkit-transition-duration
-webkit-transition-property
-webkit-transition-timing-function

U

* Supported with -moz- and -webkit- prefix in Firefox, but not supported without a prefix. ** These values are supported even though they are not standard and are not on track to becoming standard. *** Use flex-box properties instead.

Deprecated -webkit- properties

The following properties were once supported with the -webkit- prefix but are no longer supported in evergreen browsers, with or without the -webkit- prefix.

-webkit-alt*
-webkit-background-composite
-webkit-border-fit
-webkit-color-correction
-webkit-flow-from
-webkit-flow-into
-webkit-grid-columns (See grid-column )
-webkit-grid-rows (See grid-row )
-webkit-highlight
-webkit-hyphenate-charset
`-webkit-image-set (See image-set )
-webkit-mask-attachment
-webkit-match-nearest-mail-blockquote-color
-webkit-margin-collapse
-webkit-margin-after-collapse
-webkit-margin-before-collapse
-webkit-margin-bottom-collapse
-webkit-margin-top-collapse
-webkit-overflow-scrolling
-webkit-region-break-after
-webkit-region-break-before
-webkit-region-break-inside
-webkit-region-fragment
-webkit-shape-inside
-webkit-touch-callout (See touch-action)
background-origin-x (unprefixed!)
background-origin-y (unprefixed!)

* Still supported in the Safari Technology Preview, but not in a generally released browser.

Pseudo-classes

:-webkit-animating-full-screen-transition
:-webkit-any()
:-webkit-any-link *
:-webkit-autofill
:-webkit-autofill-strong-password
:-webkit-drag
:-webkit-full-page-media
:-webkit-full-screen *
:-webkit-full-screen-ancestor
:-webkit-full-screen-document
:-webkit-full-screen-controls-hidden

Note: If there is an invalid pseudo-class within in a chain or group of selectors, the whole selector list is invalid.

Pseudo-elements

For web-compatibility reasons, Blink, WebKit, and Gecko browsers treat all pseudo-elements starting with ::-webkit- as valid.

::-webkit-file-upload-button *
::-webkit-inner-spin-button
::-webkit-input-placeholder
::-webkit-media-controls
::-webkit-media-controls-current-time-display
::-webkit-media-controls-enclosure
::-webkit-media-controls-fullscreen-button
::-webkit-media-controls-mute-button
::-webkit-media-controls-overlay-enclosure
::-webkit-media-controls-panel
::-webkit-media-controls-play-button
::-webkit-media-controls-timeline
::-webkit-media-controls-time-remaining-display
::-webkit-media-controls-toggle-closed-captions-button
::-webkit-media-controls-volume-control-container
::-webkit-media-controls-volume-control-hover-background
::-webkit-media-controls-volume-slider
::-webkit-meter-bar
::-webkit-meter-even-less-good-value
::-webkit-meter-inner-element
::-webkit-meter-optimum-value
::-webkit-meter-suboptimum-value
-webkit-media-text-track-container
::-webkit-outer-spin-button
::-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

Note: Generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid. If a pseudo-element (but not pseudo-class) has a -webkit- prefix, As of Firefox 63, Blink, WebKit and Gecko browsers assume it is valid, not invalidating the selector list.

Media features

-webkit-animation
-webkit-device-pixel-ratio
-webkit-transform-2d
-webkit-transform-3d
-webkit-transition