Префиксы

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

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

Браузер

Пример

-webkit-

Safari (Apple), Chrome (Google)

-webkit-column-count: 2;

-moz-

Firefox (Gecko)

-moz-column-gap: 10px;

-ms-

IE (Microsoft)

display: -ms-grid;

-o-

Opera (Presto)

-o-object-fit: fill;

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

article {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  
  -webkit-justify-content: space-between;
     -moz-justify-content: space-between;
          justify-content: space-between;
}

.transform {
-webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
}

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
}

:-webkit-full-screen > * {
  background-color: red;
}

:-moz-full-screen > * {
  background-color: red;
}

:-ms-fullscreen > * {
  background-color: red;
}

:fullscreen > * {
  background-color: red;
}

после применения префиксов CSS (Vendor Prefixes) для браузеров, убедитесь что на вашем сайте свойства CSS3 работают правильно во всех браузерах.

54321
(2 голоса, в среднем: 5 из 5)
автор CSS1356
htmlhook.ru | Скрипты для веб-приложений