moz-transition — свойство css :: руководство cssdot.ru
Свойство -moz-transition — универсальное свойство для задание эффекта анимированного перехода при изменении css-свойств элемента. Данное свойство представляет сокращенную запись для одновременного задания всех свойства перехода — свойство, к изменению которого будет применен плавный переход -moz-transition-property, длительность перехода -moz-transition-duration, способ расчета промежуточных значений -moz-transition-timing-function и задержку перед началом перехода -moz-transition-delay.
Анимированный переход будет совершаться при изменении тех свойств элемента, которые указанны в -moz-transition-property, например, при помощи javascript. Не для всех свойств возможно задание анимированного перерода при изменении значения (например, труда себе представить, как должен выглядить анимированный переход при изменении свойства display) Список CSS свойств, к которым возможно применять эффект анимированного перехода, представлен далее:
background-color | цвет |
background-image | только градиенты |
background-position | проценты, размер |
border-bottom-color | цвет |
border-bottom-width | расстояние |
border-color | цвет |
border-left-color | цвет |
border-left-width | расстояние |
border-right-color | цвет |
border-right-width | расстояние |
border-spacing | расстояние |
border-top-color | цвет |
border-top-width | расстояние |
border-width | расстояние |
bottom | расстояние, проценты |
color | цвет |
crop | rectangle |
font-size | расстояние, проценты |
font-weight | число |
| <grid-*> | various |
height | расстояние, проценты |
left | расстояние, проценты |
letter-spacing | |
line-height | число, расстояние, проценты |
margin-bottom | расстояние |
margin-left | расстояние |
margin-right | расстояние |
margin-top | расстояние |
max-height | расстояние, проценты |
max-width | расстояние, проценты |
min-height | расстояние, проценты |
min-width | расстояние, проценты |
opacity | число |
outline-color | цвет |
outline-offset | число |
outline-width | расстояние |
padding-bottom | расстояние |
padding-left | расстояние |
padding-right | расстояние |
padding-top | расстояние |
right | расстояние, проценты |
text-indent | расстояние, проценты |
text-shadow | shadow |
top | расстояние, проценты |
vertical-align | keywords, расстояние, проценты |
visibility | visibility |
width | расстояние, проценты |
word-spacing | расстояние, проценты |
z-index | число |
zoom | число |
Пример
Свойство -moz-transition относится к спецификации CSS, применяется к все элементы, и псевдоэлементы :before и :after, и действует на всех визуальный носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка Gecko (браузер Firefox), и не совместимо с другими браузерами.
Смотри также:
- transition — свойства анимационного перехода
- transition-property — имя css-свойства, к которому будет применен анимационный переход.
- transition-duration — длительность анимационного перехода
- transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- transition-delay — задержка перед выполнением анимационного перехода
- -moz-transition-property — имя css-свойства, к которому будет применен анимационный переход.
- -moz-transition-duration — длительность анимационного перехода
- -moz-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -moz-transition-delay — задержка перед выполнением анимационного перехода
- -webkit-transition — свойства анимационного перехода
- -webkit-transition-property — имя css-свойства, к которому будет применен анимационный переход.
- -webkit-transition-duration — длительность анимационного перехода
- -webkit-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -webkit-transition-delay — задержка перед выполнением анимационного перехода
- -o-transition — свойства анимационного перехода
- -o-transition-property — имя css-свойства, к которому будет применен анимационный переход.
- -o-transition-duration — длительность анимационного перехода
- -o-transition-timing-function — функция зависимости значения css-свойства от времени во течении анимационного перехода
- -o-transition-delay — задержка перед выполнением анимационного перехода
- Спецификация стандарта CSS 3
- Описание на Mozilla Developer Network
Краткое описание
свойства анимационного перехода
Синтаксис:
[<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’> [, [<‘transition-property’> || <‘transition-duration’> || <‘transition-timing-function’> || <‘transition-delay’>]]*
Применяется к:
все элементы, и псевдоэлементы :before и :after
Наследование:
не наследуется
Тип носителя:
визуальный
Объектная модель документа (DOM):
[элемент].
style[‘-moz-transition’]
Кроссбраузерная совместимость
Internet Explorer
не поддерживаетсяFirefox
Chrome
не поддерживаетсяSafari
не поддерживаетсяOpera
не поддерживаетсяВендорные префиксы в CSS
Применим вендорные префиксы, используемые браузерами для экспериментальных CSS-свойств.
Вендорные префиксы это приставки, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств.
Приведу список некоторых префиксов для наиболее распространенных браузеров.
- -o- — префикс для браузера Опера
- -moz- — префикс для браузеров из семейства Mozilla
- -ms — префикс для Интернет Експлорера 8 (да, даже Microsoft ввела свой префикс, в частности для того, чтобы изобретенные ею CSS-фильтры можно было использовать, не нарушая при этом веб-стандарты)
- -webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome
- -icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
- -khtml-. KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем. Был представлен в 2000 году, для использования в Konqueror
KHTML — компонент для просмотра HTML документов разработанный для среды KDE для UNIX-систем. Был представлен в 2000 году, для использования в KonquerorИспользовать префиксы очень просто. Для этого перед экспериментальным или нестандартным CSS-свойством написать соответствующий префикс, например, свойство
-o-text-overflow
А CSS-фильтры от Microsoft можно использовать в ИЕ8 следующим образом:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)
Рекомендую ознакомиться с подобным использованием дополнений к CSS от Microsoft в их родном блоге
А на сайте apple.com их применяют во всевозможных вариантах, например для закругления границ интересной таблицы цен:
/* tabular */
#main table { border-collapse: separate; *border-collapse: collapse; width: 100%; font-size: 12px; font-family: "Lucida Grande", Arial, Verdana, sans-serif; }
#main table th,
#main table td { border: 1px solid #ccc; border-width: 1px 0 0 1px; text-align: center; padding: 10px 10px 6px; }
#main table .
#main table .round_bl { border-radius: 0 4px 0 0; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -o-border-radius: 0 4px 0 0; -khtml-border-radius: 0 4px 0 0; }
#main table .round_br { border-radius: 0 0 4px 0; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -o-border-radius: 0 0 4px 0; -khtml-border-radius: 0 0 4px 0; }
#main table .round_ur { border-radius: 0 0 0 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; -o-border-radius: 0 0 0 4px; -khtml-border-radius: 0 0 0 4px; }
#main table .rt { border-right-width: 1px; }
#main table .btm { border-bottom-width: 1px; }
/cdn.vox-cdn.com/uploads/chorus_asset/file/13913095/Webkit.1419965085.png)
round_ul { border-radius: 4px 0 0 0; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; -o-border-radius: 4px 0 0 0; -khtml-border-radius: 4px 0 0 0; }Источник: starhack.ru
28.01.2010 07:37
Расширения WebKit CSS — CSS: Каскадные таблицы стилей
Приложения, основанные на WebKit или Blink, такие как Safari и Chrome, поддерживают ряд специальных расширений WebKit для CSS .
Эти расширения обычно имеют префикс -webkit-. Большинство свойств с префиксом -webkit- также работают с префиксом -apple- . Некоторые имеют префикс -epub-.
Примечание: Избегайте использования на веб-сайтах. Эти свойства будут работать только в приложениях WebKit.
A
-
-webkit-анимация-триггер -
-вебкит-приложение-регион -
-webkit-соотношение сторон
B
-
-webkit-фоновый фильтр -
-вебкит-граница-после** -
-webkit-border-after-color** -
-webkit-border-after-style** -
-webkit-border-after-width** -
-webkit-граница-до** -
-webkit-border-before-color** -
-webkit-border-before-style** -
-webkit-border-before-width** -
-вебкит-граница-конец** -
-webkit-border-end-color** -
-webkit-граница-конец стиля** -
-webkit-border-end-width** -
-webkit-border-horizontal-spacing -
-вебкит-граница-старт** -
-webkit-border-start-color** -
-webkit-border-start-style** -
-webkit-border-start-width** -
-webkit-border-vertical-spacing -
-вебкит-бокс-выравнивание** -
-вебкит-бокс-направление** -
-webkit-box-flex-group** -
-вебкит-бокс-флекс** -
-webkit-box-lines** -
-webkit-box-ordinal-group** -
-вебкит-бокс-ориентация** -
-webkit-box-pack** -
-вебкит-коробка-отражать**
C
-
-webkit-column-axis -
-webkit-column-break-after -
-webkit-column-break-before -
-webkit-column-break-inside -
-webkit-столбец-прогресс -
-вебкит-курсор-видимость
DI
-
-webkit-dashboard-region -
-webkit-размер шрифта-дельта -
-webkit-шрифт-сглаживание -
-вебкит-подсветка -
-webkit-дефис-символ -
-webkit-hyphenate-limit-после -
-webkit-hyphenate-limit-before -
-webkit-hyphenate-limit-lines -
-webkit-initial-letter
L
-
-webkit-line-align -
-webkit-line-box-contain -
-webkit-line-clamp -
-вебкит-линия-сетка -
-вебкит-линия-снап -
-вебкит-локаль -
-webkit-логическая высота -
-webkit-логическая ширина
M
-
-webkit-маржа-после -
-вебкит-маржа-до -
-webkit-margin-end** -
-вебкит-маржа-старт** -
-webkit-marquee-направление -
-webkit-marquee-increment -
-webkit-шапка-повторение -
-webkit-marquee-скорость -
-webkit-шаговый стиль -
-вебкит-шапка -
-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-y*** -
-webkit-mask-source-type -
-webkit-mask-position-x -
-webkit-mask-position-y -
-максимальная логическая высота вебкита -
-webkit-max-логическая-ширина -
-webkit-минимальная логическая высота -
-webkit-минимальная логическая ширина
N
-
-webkit-nbsp-режим
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 -
-вебкит-svg-тень
T
-
-webkit-tap-highlight-color -
-webkit-text-decoration-skip -
-webkit-text-decorations-in-effect -
-webkit-text-fill-color -
-вебкит-текст-безопасность -
-webkit-text-stroke-color -
-webkit-text-stroke-width -
-вебкит-текстовый ход -
-вебкит-текст-увеличение -
-webkit-transform-origin-x -
-webkit-transform-origin-y -
-webkit-transform-origin-z
U
-
-webkit-user-drag -
-webkit-user-modify
* Некоторые из них находятся на стандартной дорожке без префикса.
** Новый синтаксис стандартизирован. Ссылки свойств на новый синтаксис. В некоторых браузерах по-прежнему поддерживается старый синтаксис с префиксом.
*** WebKit поддерживает без - префикс webkit , но не стандартный или на стандартном треке
-
-вебкит-внешний вид -
-webkit-размер шрифта-дельта
Примечание: Чтобы максимизировать совместимость вашего CSS, вы должны использовать стандартные свойства без префикса вместо перечисленных ниже свойств с префиксом.
A
-
-webkit-align-content -
-webkit-align-items -
-вебкит-выравнивание-я -
-вебкит-анимация -
-вебкит-анимация-задержка -
-вебкит-анимация-направление -
-вебкит-анимация-длительность -
-webkit-animation-fill-mode -
-webkit-animation-iteration-count -
-webkit-имя-анимации -
-webkit-animation-play-state -
-webkit-animation-time-function -
-вебкит-внешний вид
B
-
-webkit-backface-visibility -
-вебкит-фоновый клип -
-вебкит-фон-происхождение -
-webkit-фоновый размер -
-webkit-border-bottom-left-radius -
-webkit-border-bottom-right-radius -
-вебкит-граница-изображение -
-вебкит-граница-радиус -
-webkit-border-top-left-radius -
-webkit-border-top-right-radius -
-webkit-box-decoration-break -
-вебкит-бокс-тень -
- размер коробки webkit
C
-
-webkit-клип-путь -
-webkit-column-count -
-вебкит-заполнение столбца -
-webkit-column-gap -
-вебкит-колонка-правило -
-webkit-column-rule-color -
-webkit-column-rule-style -
-webkit-column-rule-width -
-webkit-column-span -
-webkit-ширина столбца -
-вебкит-столбцы
F
-
-вебкит-фильтр -
-вебкит-флекс -
-вебкит-флекс-основа -
-webkit-flex-направление -
-вебкит-флекс-поток -
-webkit-flex-grow -
-webkit-flex-shrink -
-webkit-flex-wrap -
-webkit-настройки-шрифтов -
-вебкит-шрифт-кернинг -
-webkit-вариант шрифта-лигатуры
Г-Ж
-
-вебкит-сетка -
-webkit-grid-area -
-вебкит-сетка-автоколонки -
-вебкит-сетка-автопоток -
-вебкит-сетка-авто-строки -
-вебкит-сетка-столбец -
-webkit-grid-column-end -
-webkit-grid-column-gap -
-webkit-grid-column-start -
-вебкит-сетка-разрыв -
-вебкит-сетка-строка -
-вебкит-сетка-конец строки -
-вебкит-сетка-разрыв строки -
-webkit-grid-row-start -
-webkit-сетка-шаблон -
-webkit-grid-template-area -
-webkit-grid-template-columns -
-webkit-grid-template-rows
H-L
-
-вебкит-дефис -
-вебкит-выровнять-контент -
-вебкит-выравнивание-элементов -
-вебкит-оправдать себя -
-вебкит-разрыв строки
M
-
-вебкит-маска -
-вебкит-маска-зажим -
-вебкит-маска-композит -
-вебкит-маска-изображение -
-вебкит-маска-происхождение -
-вебкит-маска-позиция -
-вебкит-маска-повторить -
-размер маски webkit
O-R
-
-webkit-opacity -
-вебкит-заказ -
-webkit-перспектива -
-вебкит-перспектива-происхождение -
-webkit-print-color-adjust -
-webkit-ruby-позиция
S
-
-webkit-scroll-snap-type -
-webkit-shape-image-threshold -
-webkit-shape-margin -
-webkit-форма-снаружи
T
-
-webkit-text-объединение -
-украшение epub-текста -
-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-стиль -
-вебкит-текст-выравнивание -
-вебкит-текст-ориентация -
-webkit-text-size-adjust -
-webkit-text-underline-position -
-вебкит-преобразование -
-вебкит-преобразование-происхождение -
-webkit-преобразование в стиле -
-вебкит-переход -
-вебкит-переход-задержка -
-webkit-transition-duration -
-webkit-переход-свойство -
-webkit-функция синхронизации перехода
U-W
-
-webkit-user-select -
-epub-разрыв слова -
-режим записи epub
Следующие свойства поддерживаются по крайней мере в одном браузере без префикса, но не входят в список стандартов.
-
-webkit-mask-position-x* -
-webkit-mask-position-y*
* Поддерживается без префикса в Firefox, с префиксом в Safari.
Следующие свойства поддерживаются с префиксом -webkit- в Firefox. Многие из них также поддерживаются без префикса: см. Ранее проприетарные свойства, которые теперь являются стандартными, выше.
Примечание: Из-за устаревшего кода на множестве веб-сайтов, которые использовали свойства с префиксом -webkit-, Edge и Firefox перенаправляют многие свойства с префиксом -webkit- на -moz-, -ms- и их эквиваленты без префикса.
A
-
-webkit-align-content -
-webkit-align-items -
-вебкит-выравнивание-я -
-вебкит-анимация -
-вебкит-анимация-задержка -
-вебкит-анимация-направление -
-вебкит-анимация-длительность -
-webkit-animation-fill-mode -
-webkit-animation-iteration-count -
-webkit-имя-анимации -
-webkit-animation-play-state -
-webkit-функция синхронизации анимации -
-вебкит-внешний вид*
B
-
-webkit-backface-visibility -
-вебкит-фоновый клип -
-вебкит-фон-происхождение -
-webkit-фоновый размер -
-webkit-border-bottom-left-radius -
-webkit-border-bottom-right-radius -
-вебкит-граница-изображение -
-вебкит-граница-радиус -
-webkit-box-align**, *** -
-webkit-box-направление**, *** -
-вебкит-бокс-флекс**, *** -
-вебкит-бокс-ориентация**, *** -
-webkit-box-pack**, *** -
-вебкит-бокс-тень -
- размер коробки webkit -
-webkit-border-top-left-radius -
-webkit-border-top-right-radius
F
-
-вебкит-фильтр -
-вебкит-флекс -
-вебкит-флекс-основа -
-webkit-flex-направление -
-вебкит-флекс-поток -
-webkit-flex-grow -
-webkit-flex-shrink -
-вебкит-флекс-обертка
J
-
-webkit-выравнивание-контента
M
-
-вебкит-маска -
-вебкит-маска-зажим -
-вебкит-маска-композит* -
-вебкит-маска-изображение -
-вебкит-маска-происхождение -
-webkit-mask-position -
-webkit-mask-position-x** -
-webkit-mask-position-y** -
-вебкит-маска-повторить -
-размер маски webkit
O-P
-
-вебкит-заказ -
-webkit-перспектива -
-вебкит-перспектива-происхождение
T
-
-webkit-text-fill-color** -
-webkit-text-size-adjust -
-вебкит-текст-штрих** -
-webkit-text-stroke-color** -
-webkit-text-stroke-width** -
-вебкит-преобразование -
-вебкит-преобразование-происхождение -
-вебкит-переход -
-вебкит-переход-задержка -
-webkit-transition-duration -
-webkit-переход-свойство -
-webkit-функция синхронизации перехода
U
-
-webkit-user-select
* Поддерживается с префиксом -moz- и -webkit- в Firefox, но не поддерживается без префикса.
** Эти значения поддерживаются, несмотря на то, что они не являются стандартными и не скоро станут стандартными.
*** Вместо этого используйте свойства flex-box.
Следующие свойства когда-то поддерживались с префиксом -webkit-, но больше не поддерживаются в вечнозеленых браузерах с префиксом -webkit- или без него.
-
-вебкит-альт* -
-вебкит-фон-составной -
-webkit-border-fit -
-webkit-коррекция цвета -
-вебкит-поток-от -
-вебкит-поток-в -
-webkit-grid-columns(см.grid-columns) -
-webkit-grid-rows(см.grid-row) -
-вебкит-дефис-кодировка - `-webkit-image-set (см.
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-переполнение-прокрутка -
-webkit-region-break-after -
-webkit-region-break-before -
-webkit-region-break-inside -
-webkit-область-фрагмент -
-webkit-форма-внутри - -webkit-touch-callout (см.
сенсорное действие) -
background-origin-x(без префикса!) -
background-origin-y(без префикса!)
* По-прежнему поддерживается в Safari Technology Preview, но не в обычно выпускаемых браузерах.
-
:-вебкит-анимация-полноэкранный-переход -
:-вебкит-любой() -
:-вебкит-любая ссылка* -
:-вебкит-автозаполнение -
:-webkit-autofill-strong-password -
:-вебкит-перетащить -
:-webkit-full-page-media -
:-вебкит-полноэкранный* -
:-webkit-полноэкранный-предок -
:-webkit-полноэкранный-документ -
:-webkit-полноэкранное-управление-скрыто
* Теперь стандарт.
Примечание: Если в цепочке или группе селекторов есть недопустимый псевдокласс, весь список селекторов недействителен.
По соображениям веб-совместимости браузеры Blink, WebKit и Gecko обрабатывают все псевдоэлементы, начинающиеся с ::-webkit- как действительный.
-
::-webkit-file-upload-button* -
::-webkit-inner-spin-button -
::-вебкит-ввод-заполнитель -
::-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-метр-внутренний элемент -
::-webkit-meter-optimum-value -
::-webkit-метр-субоптимальное-значение -
-webkit-media-text-track-container -
::-webkit-outer-spin-button -
::-вебкит-прогресс-бар -
::-вебкит-прогресс-внутренний элемент -
::-webkit-прогресс-значение -
::-webkit-search-cancel-button -
::-webkit-search-results-button -
::-webkit-slider-runnable-track -
::-webkit-slider-thumb
* Теперь стандарт.
Примечание: Как правило, если в цепочке или группе селекторов есть недопустимый псевдоэлемент или псевдокласс, весь список селекторов недействителен. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, начиная с Firefox 63, браузеры Blink, WebKit и Gecko предполагают, что он действителен, а не делает недействительным список селекторов.
-
-вебкит-анимация -
-webkit-устройство-соотношение пикселей -
-вебкит-преобразование-2d -
-вебкит-преобразование-3d -
-вебкит-переход
- Стилизация элементов управления формы на WebKit Trac
- CSS-расширения Mozilla
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Посмотреть исходный код на GitHub.
Хотите принять участие?
Узнайте, как внести свой вклад.
Последний раз эта страница изменялась от участников MDN.
Вопрос читателя: Что такое -webkit- и -moz-?
Недавно мы получили вопрос от Джека, читателя Head First HTML5 Programming, о CSS, используемом в примере из главы 3. В этом примере мы создаем веб-приложение, которое создает список воспроизведения из песен, которые пользователь вводит в форму. поле на веб-странице, и, конечно же, мы используем JavaScript для динамического обновления страницы. Джеку любопытно, как работает CSS для примера:
Несмотря на то, что CSS выглядит нормально, моей IDE, похоже, не очень нравится. Я использую Intellij IDEA (Java IDE), который поддерживает HTML и JavaScript. Я также использую текущие версии Firefox и Safari (Mac OS/X, Lion 10.7.2). Конечно, я только в главе 3, поэтому понятия не имею, что такое -webkit или -moz. Нужно ли мне включать что-то еще в мой проект?
Здесь происходит то, что IDE Джека, Intellij, не распознает новое свойство CSS3 border-radius или версии этого свойства для конкретного браузера.
Вот пример CSS, который мы используем в этом примере:
ul#playlist {
граница: 1px сплошная #a9a9a9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
радиус границы: 5px;
поле сверху: 10px;
отступ: 0px;
тип стиля списка: нет;
}
На самом деле мы никогда не будем объяснять -webkit- и -moz- (и другие свойства CSS, специфичные для браузера) в Head First HTML5 Programming, поскольку мы почти полностью сосредоточены на API-интерфейсах JavaScript и вернемся, чтобы обновить наш Head Первая книга по HTML и CSS, посвященная обновлениям в CSS.
Некоторые из новых свойств CSS3 еще не доработаны (CSS3 все еще находится в стадии разработки), и многие браузеры реализовали ранние версии этих новых идей и используют префикс -name- (например, -webkit-, — moz-, -o- и -ms-) как способ сказать: «Это идея Mozilla или Webkit о том, каким должно быть свойство, но она еще не высечена на камне». Таким образом, чтобы ваш CSS работал в нескольких браузерах, вы должны предоставить все версии для конкретного браузера, плюс версию, которую мы думаю, что в конечном итоге станет тем, что будет доработано в стандарте!
Вот это да.
Таким образом, новое свойство, такое как border-radius , имеет версию Webkit, -webkit-border-radius и версию Mozilla, -moz-border-radius и так далее. Webkit — это движок браузера, используемый Chrome и Safari; Mozilla — это движок, используемый Firefox. -ms для IE и -o для Opera. Хитрость заключается в том, чтобы поместить версии для конкретного браузера выше (как мы думаем) фактического имени свойства (в порядке в правиле CSS), чтобы браузер использовал последнюю распознанную версию и, таким образом, переопределял более старый браузер. конкретная реализация с новой, окончательной реализацией, когда она будет завершена.
Еще не все свойства реализованы во всех браузерах, а некоторые «финальные» (или близкие к финальным) версии были реализованы в некоторых браузерах (например, для border-radius можно использовать border-radius вместо -webkit-border-radius , и он будет работать в самой последней версии Safari и в Chrome).
В любом случае, как вы видите, сейчас это немного запутанно, но со временем это должно проясниться. IDE Джека просто не знает об этих специфичных для браузера свойствах (или, возможно, вообще о новом свойстве CSS) и поэтому выделяет эти свойства как потенциальные проблемы. Ключевым моментом является тестирование в браузерах, а также проверка таких сайтов, как caniuse.com. Например, если вы выполните поиск «border-radius» на сайте caniuse.com, вы увидите, что текущие версии Safari, Firefox, Chrome и Opera поддерживают border-radius теперь, но несколько более старые версии IE и Safari либо вообще не поддерживают его, либо требуют имя свойства для конкретного браузера.
В общем, с CSS, если вы хотите использовать «новое» свойство CSS3, которое может не поддерживаться всеми браузерами (особенно если вы думаете, что ваши пользователи все еще используют старые версии браузеров), вы должны убедиться, вы либо проверяете, поддерживает ли его браузер этого пользователя (используя Modernizr), и предоставляете альтернативную таблицу стилей, если нет, либо проверяете, чтобы страница выглядела нормально без этой конкретной стилистической функции.