Css - префикси браузъри, ИТ директор

В тази статия ще разгледаме какви префиксите на браузъра, причините и как да ги използвате в CSS.

Какви са представки?

Уеб разработчиците започват да се учат на теоретичната основа на CSS и с помощта на тези знания на практика може да се сблъскате с проблеми при разглеждането на примери от реалния свят. Това може да го доведе до неразбиране на това какво се случва и да се пребори с желанието да продължат да проучват тази технология.

Например, когато се има предвид стила на всеки уеб сайт, който може да се сблъска със свойствата съдържа напред някои неразбираеми думи: -webkit-. -moz-. -ms- и сътр.

Какво е това? Всъщност, всичко е просто, тези неразбираеми думи са представки от следните браузъри:

  • -webkit-. Браузърът, Safari, Opera;
  • -moz-. браузър Mozilla Firefox;
  • -MS-. браузър Internet Explorer.

Така че, ако преди името на имот е на стойност определен префикс, това означава, че имотът се продава и ще се прилага само за този браузър. Всички други браузъри ще игнорират този имот, защото за тях това префикс е неизвестен.

Причини за възникване на представки?

Причините за появата на представки са много:

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

Когато експериментална функция в одобрения стандарт и е бил тестван в браузъра, обикновено е премахната префикс.

Как да използвате представки?

Помислете за пример следния код:

Този код използва CSS свойства, които се променят алгоритъма за изчисляване на ширината и височината на всички елементи на уеб страници. Първият CSS собственост -webkit кутия оразмеряване на граничния кутия стойност е за браузъри, които използват WebKit (Safari) двигател или премигване (Chrome, Opera, Yandex Browser). Вторият CSS собственост -moz кутия оразмеряване на граничния кутия стойност е за браузъри, които използват Gecko двигателя (Mozilla Firefox). Последно CSS свойство е за браузъри, в която този имот вече е тествано и изпълняват в съответствие със стандарта.

При използване на префикси за CSS свойства, трябва да се помни, че те трябва да бъдат разположени на CSS свойства без префикс. Защо това е толкова важно? Това е важно, защото ако веднъж в браузъра е (защото това е най-късно), а не експериментална версия на оригиналния имот (без префикс) ще се реализира, ще се използва.

Например: използването на CSS свойства на всички елементи на една уеб страница в браузъра Google Chrome версия 40.

Фигурата по-горе показва, че оригиналната кутия оразмеряване Имотът е вече вграден в браузъра, както и поради факта, че той е последният, браузърът използва името му, а не на по-горе имот -webkit кутия оразмеряване.

Как да проверите поддръжката на някои имоти в браузъра?

Сайт, където може да се провери дали имотът е продаден или не в определен браузър може да бъде връзката по-долу. В допълнение, броят на потребителите на сайта се показва като процент, който използва тази версия на браузъра.

Например: Проверете както са въведени в браузърите трансформира собственост.

браузъри "CanIUse" в сайта, са белязани от различни цветове, в зависимост от състоянието на подкрепата на някои свойства или тагове:

  • Червената кутия - браузъра, в който имотът не е продаден;
  • Green правоъгълник с тире, в горния десен ъгъл - браузъра, в който имотът се използва от представката;
  • Светло зелен правоъгълник - браузър, в който имотът се реализира в част;
  • Green правоъгълник - браузъра, в който имотът се осъществява в съответствие със стандарта.