Мой вопрос касается префиксов поставщиков CSS: -webkit, -moz, -ms, — o и т. д. Как я узнаю, какие свойства я должен добавить к каким css?

Я пытаюсь найти альтернативу команде webkit: -webkit-text-fill-color Поскольку это еще не поддерживается в moz o и ms, кто-нибудь знает другую команду, которая может это сделать, или какой-то Хак…

Скажем, у меня есть такая страница: http:/ / www.webkit.org / blog-files/3d-transforms/morphing-cubes.html Я сохраняю страницу &, запускаю файл html в свой localhost. Он отлично работает в…

Я работаю на CSS английское сокращение Cups для PHP что сделано, кроме одного: Я бы хотел, чтобы он обнаружил браузер пользователя и определил, нужен ли ему border-radius, -webkit-border-radius,…

Есть ли плагин или что-то в этом роде, что позволит мне написать CSS вот так: transition:all 300ms; box-shadow:0 3px 2px #222; backface-visibility:hidden; и т.д.. а для версий браузеров, требующих…

Мы создаем WordPress темы, и я хочу знать, что необходимо использовать все свойства браузеров вместо ONE? Например, мы написали это для свойства transition: -moz-transition: all 350ms ease-in-out;…

в чем разница между -webkit-box-shadow , -khtml-box-shadow , -moz-box-shadow , -o-box-shadow в CSS? Мой CSS это такой: button:hover { -webkit-box-shadow: rgba(0,0,0,0.5) 0px 2px 5px;…

У меня есть круговые элементы, которые я заполняю четвертью круга, чтобы показать прогрессию. В Safari, IE и Хроме они выглядят великолепно и заполняют круг, как и положено: Однако, когда я открываю…

Когда я должен использовать префиксы -webkit , -moz , -o и т. д.?

Мне нужно установить свойство CSS с помощью функции angular. Вот мой код: <div ng-style={ ‘transform’: getRotation(i) }></div> Однако я хотел бы добавить совместимость с браузером,…

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

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

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

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

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

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

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

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

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

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

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

Как уже упоминалось в этом глоссарии о взгляде Mozilla на Vendor Prefix на May 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;
border-radius: 10px 5px;

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

border-radius: 10px 5px;

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

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

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

Входной сигнал:

a {
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
}

Выход:

a {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-column-fill: auto;
     -moz-column-fill: auto;
          column-fill: auto;
}

CSS — -moz-outline-radius — Начиная с Firefox 88, стандартное свойство outline будет следовать форме border-

Начиная с Firefox 88, стандартное свойство outline будет следовать форме border-radius , что сделает свойства -moz-outline-radius избыточными. Таким образом, это свойство будет удалено.

В приложениях Mozilla, таких как Firefox, сокращенное свойство CSS -moz-outline-radius может использоваться для придания скругленным углам outline элемента .

-moz-outline-radius: 25px;


-moz-outline-radius: 25px 1em;


-moz-outline-radius: 25px 1em 12%;


-moz-outline-radius: 25px 1em 12% 4mm;


-moz-outline-radius: inherit;
-moz-outline-radius: initial;
-moz-outline-radius: unset;

Constituent properties

Это свойство является сокращением для следующих свойств CSS:

Syntax

Values

Одно, два, три или четыре значения <outline-radius> представляют одно из:

<length>

Смотрите <length> для возможных значений.

<percentage>

<percentage> ; см. border-radius для деталей.

• Если установлено одно значение,то оно относится ко всем 4 углам.
• Если установлены два значения,то первое относится к левому верхнему и правому нижнему углам,а второе-к правому верхнему и левому нижнему углам.
• Если установлено три значения,то первое относится к верхнему левому углу,второе-к верхнему правому и нижнему левому углам,а третье-к нижнему правому углу.
• Если установлено четыре значения,то первое относится к левому верхнему углу,второе-к правому верхнему углу,третье-к правому нижнему углу и четвертое-к левому нижнему углу.

Formal definition

Формальный синтаксис

<outline-radius>{1,4} [ / <outline-radius>{1,4} ]?where <outline-radius> = <length> | <percentage>

Examples

Закругление контура

Примечание:Этот пример не покажет желаемого эффекта,если вы просматриваете его в браузере,отличном от Firefox.

HTML

<p>This element has a rounded outline!</p>

CSS

p {
  margin: 5px;
  border: 1px solid black;
  outline: dotted red;
  -moz-outline-radius: 12% 1em 25px;
}

Result

Notes

• dotted или dashed закругленные углы отображались как сплошные до Firefox 50, ошибка 382721
• В будущих версиях Gecko / Firefox это свойство может быть полностью удалено. Смотрите ошибку 593717 .

Specifications

Не является частью какого-либо стандарта.

Совместимость с браузерами

См.также

moz-margin-end — свойство css :: руководство cssdot.ru

Свойство -moz-margin-end определяет конечный отступ для элемента. Конечным отступом является правый или левый отступ элемента, в зависимости от направления письма, установленного для данного элемента. Если направление письма слева направо, то устанавливается правый отступ, что аналогично свойству margin-right, в случае направления письма справа налево, используется левый отступ, что аналогично установке свойства margin-left.

Толщина может задаваться любым доступным способом в соответствии со стандартом CSS 2.1 или CSS 3 для велечин типа length, а так же ключевыми словами auto, либо inherit.

Примеры использования

.styleLTR {
   direction: ltr;
   -moz-margin-end: 5%;
}

.styleRTL {
   direction: rtl;
   -moz-margin-end: 5%;
}

Свойство -moz-margin-end относится к спецификации CSS, применяется к всем элементам, кроме строк и ячеек таблиц, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка Gecko (браузер Firefox), и не совместимо с другими браузерами.

Смотри также:

• margin — размер отступов блока
• margin-left — размер левого отступа блока
• margin-right — размер правого отступа блока
• -webkit-margin-start — «Начальное» (левое или правое в зависимости от направления текста) поле перед содержанием элемента
• -webkit-margin-end — «Конечныйе» (правый или левый в зависимости от направления текста) поле перед содержанием элемента
• -moz-margin-start —

Краткое описание

Синтаксис:

&lt;length&gt; | auto | inherit

По умолчанию:

0

Применяется к:

всем элементам, кроме строк и ячеек таблиц

Наследование:

Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style[‘-moz-margin-end’]

Кроссбраузерная совместимость

Internet Explorer

Firefox

Chrome

Safari

Opera

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

-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;

Я новичок в css, и когда я смотрел какой-то код css на днях, я нашел эти строки. В учебниках, которые я использовал для изучения css, я никогда не видел ничего подобного этим строкам. Может ли кто-нибудь объяснить эти строки мне или дать мне источник, где я мог бы научиться реализовывать такие строки?

Спасибо заранее!

Ответ 1

Это свойства с префиксом поставщика, предлагаемые соответствующими механизмами рендеринга (-webkit для Chrome, Safari; -moz для Firefox, -o для Opera, -ms для Internet Explorer). Как правило, они используются для реализации новых или собственных функций CSS до окончательного уточнения/определения W3.

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

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

.elementClass {
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    -o-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
}

В частности, чтобы обратиться к CSS в вашем вопросе, строки, которые вы указываете:

-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;

Укажите свойства column-count, column-gap и column-fill для браузеров Webkit и Firefox.

Литература:

Ответ 2

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

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

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

Хорошее объяснение префиксов поставщиков происходит от Peter-Paul Koch от QuirksMode:

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

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

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

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

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

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

Как упоминалось в этом глоссарии о представлении Mozilla на Vendor Prefix на May 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;
border-radius: 10px 5px;

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

border-radius: 10px 5px;

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

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

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

Ввод:

a {
  column-count: 3;
  column-gap: 10px;
  column-fill: auto;
}

Вывод:

a {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  -webkit-column-fill: auto;
     -moz-column-fill: auto;
          column-fill: auto;
}

Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Итак, начнем с примера для тех, кто не знает, что такое placeholder.

html

<input type="text" placeholder="Оставьте сообщение здесь">

input placeholder demo

Стиль placeholder-a можно изменить с помощью такого набора css правил:

css

::-webkit-input-placeholder {color:#c0392b;}
::-moz-placeholder          {color:#c0392b;}/* Firefox 19+ */
:-moz-placeholder           {color:#c0392b;}/* Firefox 18- */
:-ms-input-placeholder      {color:#c0392b;}

Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.

В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.

Смотрим, что получилось:

input placeholder demo

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

• font (и сопутствующие свойства)
• background (и сопутствующие свойства)
• color
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• text-overflow
• opacity

А если placeholder не вмещается?

Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis. Такой синтаксис будет работать во всех новых браузерах.

css

input[placeholder]          {text-overflow:ellipsis;}
input::-moz-placeholder     {text-overflow:ellipsis;} 
input:-moz-placeholder      {text-overflow:ellipsis;} 
input:-ms-input-placeholder {text-overflow:ellipsis;}    

input placeholder demo

Как скрыть placeholder при фокусе?

Скрывание placeholder-а происходит по-разному.

1. в некоторых браузерах при получении фокуса инпутом
2. в других браузерах при наличии хотя бы одного введенного символа

Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:

css

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

input placeholder demo

Скрываем placeholder красиво

Можно также добавить transition для появления и скрытия placeholder-a:

input placeholder demo

Вот сss:

css

/* плавное изменение прозрачности  placeholder-а при фокусе */
.input1::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease;}
.input1::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease;}
.input1:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease;}
.input1:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease;}
.input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease;}

/* сдвиг placeholder-а вправо при фокусе*/

.input2::-webkit-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
.input2::-moz-placeholder                {text-indent: 0px;   transition: text-indent 0.3s ease;}
.input2:-moz-placeholder                 {text-indent: 0px;   transition: text-indent 0.3s ease;}
.input2:-ms-input-placeholder            {text-indent: 0px;   transition: text-indent 0.3s ease;}
.input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus::-moz-placeholder          {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-moz-placeholder           {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-ms-input-placeholder      {text-indent: 500px; transition: text-indent 0.3s ease;}

/* сдвиг placeholder-а вниз при фокусе*/

.input3::-webkit-input-placeholder       {line-height: 20px;  transition: line-height 0.5s ease;}
.input3::-moz-placeholder                {line-height: 20px;  transition: line-height 0.5s ease;}
.input3:-moz-placeholder                 {line-height: 20px;  transition: line-height 0.5s ease;}
.input3:-ms-input-placeholder            {line-height: 20px;  transition: line-height 0.5s ease;}
.input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus::-moz-placeholder          {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-moz-placeholder           {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-ms-input-placeholder      {line-height: 100px; transition: line-height 0.5s ease;}

Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  -moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10 пикселей;
-webkit-border-top-right-radius: 5 пикселей;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-нижний левый-радиус: 5 пикселей;
радиус границы: 10 пикселей 5 пикселей;
  

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

  радиус границы: 10px 5px;
  

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

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

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

Ввод:

  a {
  количество столбцов: 3;
  столбец-пробел: 10 пикселей;
  заполнение столбца: авто;
}
  

Выход:

  a {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          количество столбцов: 3;
  -webkit-столбец-пробел: 10 пикселей;
     -moz-column-gap: 10 пикселей;
          столбец-пробел: 10 пикселей;
  -webkit-column-fill: авто;
     -moz-column-fill: авто;
          заполнение столбца: авто;
}
  

— -moz и -webkit css больше не нужны?

Спросил 10 лет назад

Просмотрено 6к раз

Я уже некоторое время использую стили CSS -moz и -webkit для таких вещей, как тень окна, тень текста и т. Д.И недавно я заметил, что все FireFox, Chrome, Safari и IE ( 9 ) дают одинаковые результаты со стандартными box-shadow и text-shadow и аналогичными стилями CSS.

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

17.2k66 золотых знаков4848 серебряных знаков8080 бронзовых знаков

Создан 22 сен.

16.5k1919 золотых знаков101101 серебряный знак196196 бронзовых знаков

Последние браузеры поддерживают эти свойства css3 по умолчанию.Эти специальные параметры -moz и -webkit все же следует использовать для обратной совместимости со старыми браузерами. Старые браузеры реализовали их, чтобы разрешить использование этих свойств до того, как они стали стандартными.

  -moz-border-radius: 5px;
-webkit-border-radius: 5 пикселей;
радиус границы: 5 пикселей;
  

 
внешний вид: нет;
внешний вид: авто;
внешний вид: кнопка-менюлист;
внешний вид: текстовое поле;


внешний вид: кнопка;
внешний вид: поле поиска;
внешний вид: textarea;
внешний вид: кнопочный;
внешний вид: слайдер-горизонтальный;
внешний вид: чекбокс;
внешний вид: радио;
внешний вид: квадратная кнопка;
Внешний вид: менулист;
внешний вид: список;
внешний вид: метр;
внешний вид: прогресс-бар;


-moz-appearance: кнопка полосы прокрутки вверх;
-moz-внешний вид: кнопка-скос;


-webkit-appearance: media-mute-button;
-webkit-appearance: caret;


внешний вид: наследственный;
внешний вид: начальный;
внешний вид: вернуться;
внешний вид: не установлен;
  

 нет | авто | текстовое поле | кнопка-менюлист |  
, где 
   = searchfield | textarea | кнопка | слайдер-горизонтальный | флажок | радио | квадратная кнопка | менулист | список | метр | прогресс-бар | кнопка  
 

 .exampleone {
-вебкит-внешний вид: кнопка-менюлист;
   -моз-внешний вид: кнопка-менюлист;
        внешний вид: кнопка-менюлист;
}
  

  
   Согласен с чем-то  
  

  ввод {
  -webkit-appearance: нет;
  -моз-внешний вид: нет;
  внешний вид: нет;
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
}

input [type = "checkbox"] {
  граница: 2px solid # 555;
  ширина: 20 пикселей;
  высота: 20 пикселей;
  отступ: 4 пикселя;
}
input [type = "checkbox"]: проверено {
  фон: # 555;
  фон-клип: контент-поле;
}
метка {
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру;
  маржа: 0 0 -2px 8px;
}
  

 {
      дисплей : -moz-webkit-flex;
      дисплей : -webkit-flex;
      дисплей : гибкий;
    -moz-flex-  направление : ряд;
    -webkit-flex-  направление : ряд;
    flex-  направление : ряд;
    -moz-flex-wrap: обертывание;
    -webkit-flex-wrap: обертка;
    flex-wrap: обертка;
      ширина : 100%;
    размер коробки:  бордюр  - коробка;
      маржа : 0;
}
.коробка {
      граница : сплошной черный 1 пиксель;
      фон : #ccc;
      дисплей : блок;
    -ms-flex: 50%;
    -moz-flex: 50%;
    -webkit-flex: 50%;
    гибкость: 50%;
    размер коробки:  бордюр  - коробка;
      маржа : 0;
}
/ * Исправление гибкости IE10-11: * /
@media screen и (-ms-high-Contrast: active), (-ms-high-Contrast: none) {
    .коробка {
        гибкость: 0;
        min-  ширина : 50%;
    }
}
 

 
 <раздел>
  

   1
  
  

   2
  
  

   3
  
  

   4