Moz css что это

Использование элементов, в качестве фоновых изображений при помощи -moz-element

Все мы знаем, что все браузерные вендоры по своему определяют многие CSS и JavaScript фичи, и я благодарен им за это. Mozilla и WebKit предлагают свои интересные проприетарные свойства, и хотя, как мы знаем, утверждение стандартов происходит годами, намного дольше чем стоило бы, мы все должны быть за это благодарны. Есть одно интересное CSS свойство о котором вы наверняка еще не слышали — -moz-element , это реализованное Mozill’ой CSS свойство, которое позволяет разработчикам использовать HTML элементы в качестве фонов для других элементов!

Смотреть демо

HTML и CSS

Предположим, что HTML элемент существует внутри текущей страницы и у него задан стиль. У элемента есть CSS градиент, текст и несколько CSS свойств:

 I'm in the background.

Я задал стили внутри атрибута элемента, но -moz-element работает и со стилями указанными в тегах style или внешних таблицах стилей. Теперь, имея элемент на нашей странице, мы можем использовать его как «background» для другого элемента:

#mySpecialElement < /* mozElementBack exists as an element within the page */ background: -moz-element(#mozElementBack) repeat; >

Присваивание ID элемента свойству -moz-element , теоретически, превращает элемент в фоновое изображение, позволяющее применять background-repeat и все остальное. Также, заметьте, что элемент обновляется при обновлении стиля и содержимого фонового элемента, так что вы работаете с «живим» фоном!

Смотреть демо

Потрясающее CSS свойство, не так ли? Возможность использования существующего HTML элемента, в качестве CSS фона, просто удивительна, но благодаря Mozilla, это полностью возможно. Вы думаете о реальном применении это свойства? Преимущество, которое я вижу в -moz-element это то, что вы сможете включать текст в фон, также вы сможете использовать элементы сгенерированные внешними скриптам (скрипты социальных закладок, например). Какая же это интересная реализация!

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

На первый взгляд кажется, что вендорные префиксы это что-то из разряда грамматики. Вендорные префиксы, вендорные суффиксы и вендорные окончания. Но какое отношение это имеет к верстке?

Оказывается, самое прямое! Вендорные префиксы — это приставки к названию CSS свойства, которые добавляют производители браузеров для нестандартизированных свойств.

Согласно спецификации CSS 2.1 CSS идентификаторы, которые начинаются с «-» или «_» зарезервированы для CSS расширений браузеров. Наличие этих знаков в начале свойства гарантирует то, что в будущем расширения браузеров никогда не пересекутся со стандартными CSS свойствами. Т.е. ни один браузер не начнет «случайно» понимать свойство, которое для него не предназначено.

Какие они бывают?

Вендорные префиксы самых распространенных браузеров приведены в таблице ниже:

Вендорный префикс	Производитель	Браузер	Браузерный движок
-o-, -op-, -xv-	Opera Software	Opera	Presto
-moz-	проект Mozilla	Firefox, SeaMonkey, Camino и др.	Gecko
-ms-	Microsoft	Internet Explorer 8	Trident
-khtml-	проект KDE	Safari до версии 3, Konqueror и др.	KHTML послужил основой для WebKit
-webkit-	Apple	Safari 3+, Google Chrome и др.	WebKit

Как это работает?

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

Например, CSS свойство opacity, отвечающее за прозрачность элемента, кроссбраузерно используется так:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/ -moz-opacity:0.5;/* Mozilla 1.6 */ -khtml-opacity:0.5;/* Konqueror 3.1, Safari 1.1 */ opacity:0.5/* Safari 2.0+ , Chrome, Firefox Opera, */

Для чего это нужно?

В своем блоге разработчики Internet Explorer называют три причины использования вендорного префикса -ms- для браузера IE8:

Если это свойство разработано только для Microsoft IE и не описано в спецификации или CSS модуле
Если CSS модуль, к которому относится это свойство находится в разработке W3C и еще не достиг статуса кандидата в рекомендацию (Candidate Recommendation)
Если свойство только частично реализует функции свойства, описанного в CSS модуле или спецификации

Остальные разработчики используют вендорные префиксы по схожим причинам. Например Mozilla имеет огромный перечень индивидуальных CSS свойств и их значений с вендорными префиксами -moz-, которые разработаны специально для Firefox, и не описаны ни в модуле CSS ни в спецификации.

Кроме того, разработчики Microsoft ухитрились с помощью вендорных префиксов скрывать от валидатора невалидные конструкции. Это касается, прежде всего, фильтров. Для IE 5.5-7 фильтр выглядел так:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5-7*/

Такая конструкция пройти валидацию в принципе не может! Но ее преспокойно проходит новая конструкция того же фильтра, но уже для IE 8:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";/* IE 8*/

Конечно, не очень хочется в коде писать несколько строчек кода с вендорными свойствами под каждый браузер вместо одной строчки кода со стандартными свойствами. Но не нужно забывать, что спецификация CSS3 пока еще находится в разработке. Возможно, что в описании свойства при стандартизации что-то поменяется, либо его совсем не будет в спецификации. Тогда безусловно разработчикам будет легче отказаться от вендорного свойства и поддерживать стандарты. Согласитесь, если в разных версиях браузера одно и то же свойство будет работать по-разному, ничего хорошего из этого не получится. Пускай лучше в старых версиях браузеров будут работать вендорные свойства, а новые версии будут поддерживать спецификацию в прямом виде, а свойства с вендорными префиксами будут игнорироваться.

Приятный бонус

Благодаря вендорным префиксам производители браузеров уже внедряют экспериментальные CSS3 свойства на свой страх и риск.

Верстальщик уже сейчас может реализовать большинство возможностей предоставляемых CSS3, в том числе разнообразные переходы и анимации без использования скриптов, но используя вендорные префиксы.

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

-webkit-transition:background-color 5s ease-in 3s;/* работает в Safari 3.1+, Chrome 1+ */ -o-transition:background-color 5s ease-in 3s;/* работает в Opera 10.5+ */ -moz-transition:background-color 5s ease-in 3s;/* планируется для Firefox 4.0+ */ transition:background-color 5s ease-in 3s;/* в прямом виде не поддерживает ни один браузер */

Живой пример можно посмотреть тут.

Кроме того, согласно заявлениям разработчиков, данный демо пример будет также работать в Firefox 4.0, первая бета версия которого вышла в июле года.

Подытожим

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

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

Заметка

Свойства по спецификации всегда пишем последними.

Материалы

CSS 2.1 Specification:: Vendor-specific extensions
MSDN:: Microsoft CSS Vendor Extensions
developer.mozilla:: Mozilla CSS Extensions
quirksmode:: CSS vendor prefixes considered harmful
alistapart:: Prefix or Posthack by Eric Meyer

Анатомия CSS
История развития CSS
Что такое CSS
CSS анимация
- Анимация в CSS3. Часть I
- Анимация в CSS3. Часть II
- Вендорные префиксы
- Box model — блочная модель
- Схлопывание margin
- Блочные элементы
- Введение
- Дерево документа HTML
- Каскад в CSS
- Наследование
- Наследование: общие сведения
- Специфичность
- Вложенные таблицы стилей
- Внешние таблицы стилей
- Встроенные стили
- Группируем CSS. Директива @import
- Cелектор идентификатора
- Селектор атрибутов
- Селектор дочернего элемента
- Селектор класса
- Селектор обобщенных родственных элементов
- Селектор потомка
- Селектор сестринского элемента
- Селектор типа
- Селекторы псевдоклассов
- Селекторы псевдоэлементов
- Селекторы: общие сведения
- Составные селекторы. Комбинаторы
- Универсальный селектор
- Эффективность CSS селекторов
Использование нестандартных и экспериментальных свойств CSS

Admin 16.09.2017 CSS, HTML

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

Современный браузер включает в себя помимо пользовательского интерфейса многочисленные компонетны обработки веб-страниц и вывод их содержимого (html, css, php, JavaScript и т.д). За каждый из них отвечают отдельные модули.

Например, от качества движка JavaScript или движка для отображения веб-страниц (webkit, Gecko, Trident) — зависит скорость отображения веб-содержимого. И каждый браузер (Safari, Chrome, Firefox, Opera, Internet Explorer, Яндекс браузер и т.д.) использует в своей программе разный набор движков.

Все эти webkit, moz, ms, o — относятся к движкам отображения содержимого HTML и CSS. Например, параметр webkit отвечает за то, что данное свойство CSS будет работать именно в браузерах, которые использует этот движок.

Движок webkit используют одновременно два популярных браузера Chrome и Safari. Поэтому указав в свойствах -webkit оно будет понятно сразу обоим этим браузерам.

Надо сделать небольшую ремарку, что Google со своим Chrome, с определенной версии перешел с движка Webkit на Blink, который является ответвлением от Webkit.

-moz — Mozilla Firefox (движок Gecko)

Параметр -o – относится к Opera (раньше работал на движке Presto, сейчас на Blink)

-ms — это Microsoft Internet Explorer (использует движок Trident).

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

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

box-sizing: border-box;

Указывают ещё и:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

Однако на самом деле все эти мозы и вебкиты – это всё не нужные элементы на сайте. Надо верстать сайт так, чтобы не приходилось их использовать. К тому же многие параметры уже перестали быть экспериментальными и давно работают в обычном режиме. А верстальщики всё равно, так на всякий случай, их добавляют к стилям CSS.

Читайте также

У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.

CSS — Префиксы браузеров

Веб-разработчик начинающий изучать теоретические основы CSS и использующий данные знания на практике может столкнуться с проблемами при рассмотрении реальных примеров. Это может вызвать у него непонимание происходящего и отбить дальнейшее желание изучать данную технологию.

Например, при рассмотрении стилей какого-нибудь сайта веб-разработчик может столкнуться со свойствами, содержащими впереди некоторые непонятные слова: -webkit- , -moz- , -ms- и др.
```
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
```
Что же это такое? На самом деле всё просто, эти непонятные слова являются префиксами следующих браузеров:
- -webkit- : браузеры Chrome, Safari, Opera;
- -moz- : браузер Mozilla Firefox;
- -ms- : браузер Internet Explorer.
Таким образом, если перед названием свойства стоит некоторый префикс, то это означает, что данное свойство реализовано и будет применяться исключительно в указанном браузере. Все остальные браузеры данное свойство будут игнорировать, т.к. для них данный префикс неизвестен.

Причины появления префиксов

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

Как использовать префиксы

Рассмотрим в качестве примере следующий код:
```
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
```
Данный код применяет свойства CSS, которые изменяют алгоритм расчёта ширины и высоты для всех элементов веб-страницы. Первое CSS свойство -webkit-box-sizing со значением border-box предназначено для браузеров, использующих движок webkit (Safari) или blink (Chrome, Opera, Яндекс.Браузер). Второе CSS свойство -moz-box-sizing со значением border-box предназначено для браузеров, использующих движок Gecko (Mozilla Firefox). Последнее CSS свойство предназначено для браузеров, в которых это свойство уже протестировано и внедрено в соответствии со стандартом.

При использовании префиксов для свойств CSS, необходимо помнить, что их следует располагать до свойства CSS без префикса. Почему это так важно? Это важно потому, что если когда-то в браузере будет реализовано оригинальное свойство (без префикса), то будет использоваться именно оно (т.к. оно располагается последним), а не его экспериментальная версия.

Например: применение свойства CSS ко всем элементам веб-страницы в браузере Google Chrome версии 40.

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

Как проверить поддержку определенного свойства в браузере

Сайт, на котором можно проверить реализовано ли данное свойство или нет в конкретном браузере можно по ссылке приведённой ниже. Кроме этого на сайте показывается количество пользователей в процентах, которые пользуется этой версией браузера.

Например: проверим, как реализовано свойство transform в браузерах.

На сайте «CanIUse» браузеры отмечаются различными цветами, в зависимости от того в каком состоянии находится поддержка определённых свойств или тегов:
- Красный прямоугольник — браузер, в котором данное свойство не реализовано;
- Зелёный прямоугольник с дефисом, расположенным в правом верхнем углу – браузер, в котором данное свойство используется через префикс;
- Светло-зелёный прямоугольник – браузер, в котором данное свойство реализовано частично;
- Зелёный прямоугольник – браузер, в котором данное свойство реализовано в соответствии со стандартом.
Похожие публикации: