Moz webkit o: css — What are -moz- and -webkit-?

BCD tables only load in the browser

• Definition of appearance in CSS 3 Basic User Interface (Candidate Recommendation from 2004-05-11).
• Dropped CSS3 features from the UI spec.4

Last modified: 7 нояб. 2022 г., by MDN contributors

Вендорные префиксы в CSS

Применим вендорные префиксы, используемые браузерами для экспериментальных CSS-свойств.

Вендорные префиксы это приставки, используемые производителями (вендорами) браузеров для экспериментальных, еще не принятых в стандарт, CSS-свойств.

Приведу список некоторых префиксов для наиболее распространенных браузеров.

• -o- — префикс для браузера Опера
• -moz- — префикс для браузеров из семейства Mozilla
• -ms — префикс для Интернет Експлорера 8 (да, даже Microsoft ввела свой префикс, в частности для того, чтобы изобретенные ею CSS-фильтры можно было использовать, не нарушая при этом веб-стандарты)
• -webkit- — префикс для браузеров, построенных на движке Webkit, в частности Safari и Chrome
• -icab- — префикс для браузера iCab (альтернативного, как заявлено на родном сайте, браузера для Apple)
• -khtml-. 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 .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; }
#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; }

Источник:

28.01.2010 07:37

css — Что такое -moz- и -webkit-?

Что такое -moz- и -webkit-?

Свойства CSS, начинающиеся с -webkit- , -moz- , -ms- или -o- , называются префиксами поставщиков.

Почему разные браузеры добавляют разные префиксы для одного и того же эффекта?

Хорошее объяснение префиксов поставщиков дает Питер-Пол Кох из QuirksMode:

Изначально префиксы производителей предназначались для того, чтобы позволить производителям браузеров чтобы начать поддержку экспериментальных объявлений CSS.

Допустим, рабочая группа W3C обсуждает объявление сетки (которое, кстати, не такая уж плохая идея) Скажем еще, что некоторые люди создают черновик спецификации, а другие не согласны с некоторые детали.

Как мы знаем, этот процесс может занять целую вечность.

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

Префикс поставщика как бы говорит: «Это интерпретация Microsoft текущего предложения». Таким образом, если окончательное определение сетки отличается, Microsoft может добавить новую сетку свойств CSS, не нарушая страницы, которые зависят от -ms-grid.

ОБНОВЛЕНИЕ ЗА 2016 ГОД

Поскольку этому сообщению 3 года, важно отметить, что теперь большинство поставщиков понимают, что эти префиксы просто создают ненужный дублирующийся код и что ситуация, когда вам нужно указать три разных правила CSS для получения одного эффекта, работающего во всех браузерах, нежелательны.

Как упоминалось в этом глоссарии о взгляде Mozilla на Префикс поставщика на 3 мая 2016 г. ,

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

Например, всего несколько лет назад, чтобы установить закругленный угол на коробке, нужно было написать:

 -moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
радиус границы: 10px 5px;
 

Но теперь, когда браузеры полностью поддерживают эту функцию, вам действительно нужна только стандартная версия:

 border-radius: 10px 5px;
 

Поиск подходящих правил для всех браузеров

Поскольку до сих пор не существует стандарта для общих правил CSS, работающих во всех браузерах, вы можете использовать такие инструменты, как caniuse. com, чтобы проверить поддержку правила во всех основных браузерах.

Вы также можете использовать pleeease.iamvdo.me/play/. Пожалуйста, — это приложение Node.js, которое легко обрабатывает ваш CSS. Он упрощает использование препроцессоров и объединяет их с лучшими постпроцессорами. Он помогает создавать чистые таблицы стилей, поддерживает старые браузеры и обеспечивает лучшую ремонтопригодность.

Ввод:

 а {
  количество столбцов: 3;
  зазор между столбцами: 10 пикселей;
  заполнение столбца: авто;
}
 

Вывод:

 а {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          количество столбцов: 3;
  -webkit-столбец-разрыв: 10px;
     -moz-разрыв столбца: 10px;
          зазор между столбцами: 10 пикселей;
  -webkit-column-fill: авто;
     -moz-column-fill: авто;
          заполнение столбца: авто;
}
 

Вопрос читателя: Что такое -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 либо вообще не поддерживают его, либо требуют имя свойства для конкретного браузера.