Префиксите на доставчици на CSS, известни също като или CSS Префиксите на браузъра са начин за производителите на браузъри да добавят поддръжка нови функции на CSS преди тези функции да се поддържат изцяло във всички браузъри. Това може да се направи по време на нещо като период на тестване и експериментиране, където производителят на браузъра определя точно как ще бъдат внедрени тези нови CSS функции. Тези префикси станаха много популярни с възхода на CSS3 преди няколко години.
Произход на префиксите на доставчика
Когато CCS3 беше представен за първи път, редица развълнувани свойства започнаха да удрят различни браузъри по различно време. Например браузърите, задвижвани от Webkit (Safari и Chrome), бяха първите, които въведоха някои от свойствата в стил анимация като трансформация и преход. Чрез използване на префикс на доставчик Имоти, уеб дизайнерите успяха да използват тези нови функции в своята работа и да ги видят в браузърите които ги поддържаха веднага, вместо да се налага да чакат всеки друг производител на браузъра да хване нагоре!
Общи префикси
Така че от гледна точка на предния уеб разработчик, префиксите на браузъра се използват за добавяне на нови CSS функции към даден сайт, като същевременно се чувстват комфортно, знаейки, че браузърите ще поддържат тези стилове. Това може да бъде особено полезно, когато различни производители на браузъри внедряват свойства по малко по-различен начин или с различен синтаксис.
Префиксите на CSS браузъра, които можете да използвате (всеки от които е специфичен за различен браузър), са:
- Android:
-уебкит-
- Chrome:
-уебкит-
- Firefox:
-моз-
- Internet Explorer:
-Госпожица-
- iOS:
-уебкит-
- Опера:
-o-
- Сафари:
-уебкит-
Добавяне на префикс
В повечето случаи, за да използвате чисто ново свойство CSS стил, вземате стандартното свойство CSS и добавяте префикса за всеки браузър. Префиксираните версии винаги ще бъдат на първо място (във всеки ред, който предпочитате), докато нормалното свойство CSS ще бъде последно. Например, ако искате да добавите CSS3 преход към вашия документ, ще използвате свойството за преход, както е показано по-долу:
-webkit-преход: всички 4s лекота;
-moz-преход: всички 4s лекота;
-ms-преход: всички 4s лекота;
-o-преход: всички 4s лекота;
преход: всички 4s лекота;
Не забравяйте, че някои браузъри имат различен синтаксис за определени свойства, отколкото други, така че не предполагайте, че версията на свойството с префикс на браузър е точно същата като стандартното свойство. Например, за да създадете CSS градиент, използвате свойството линеен градиент. Firefox, Opera и съвременните версии на Chrome и Safari използват това свойство със съответния префикс, докато ранните версии на Chrome и Safari използват префиксираното свойство -webkit-gradient.
Освен това Firefox използва различни стойности от стандартните.
Причината винаги да приключвате декларацията си с нормалната, нефиксирана версия на CSS свойството е, така че когато браузър поддържа правилото, той ще използва тази. Спомнете си как се чете CSS. По-късните правила имат предимство пред по-ранните, ако специфичността е същата, така че браузърът ще прочете версията на доставчика на правило и използвайте, че ако не поддържа нормалното, но след като го поддържа, ще замени версията на доставчика с действителния CSS правило.
Префиксите на доставчиците не са хак
Когато префиксите на доставчиците бяха въведени за първи път, много уеб специалисти се чудеха дали са хак или a се върнете към тъмните дни на раздвояване на код на уебсайт, за да поддържате различни браузъри (не забравяйте това "Този сайт се гледа най-добре в IE"съобщение). Префиксите на доставчиците на CSS обаче не са хакове и не трябва да имате резерви относно използването им в работата си.
CSS хак използва недостатъци при изпълнението на друг елемент или свойство, за да накара друго свойство да работи правилно. Например, хак моделът на кутията използва недостатъци при синтактичния анализ на гласовото семейство или в начина, по който браузърите анализират обратните наклонени черти \. Но тези хакове бяха използвани, за да се реши проблемът с разликата между начина, по който Internet Explorer 5.5 обработва модела на кутията и как Netscape интерпретираха го и нямат нищо общо със семейния стил на гласа. За щастие тези два остарели браузъра са тези, с които не трябва да се занимаваме в наши дни.
Префиксът на доставчика не е хак, защото позволява на спецификацията да зададе правила за това как дадено свойство може да бъде внедрено, като същевременно позволява на производителите на браузъри да внедрят свойство по различен начин, без да нарушават всичко друго Освен това тези префикси работят с CSS свойства, които в крайна сметка ще бъде част от спецификацията. Просто добавяме някакъв код, за да получим достъп до имота по-рано. Това е друга причина, поради която приключвате правилото CSS с нормалното, нефиксирано свойство. По този начин можете да пуснете префиксираните версии, след като се постигне пълна поддръжка на браузъра.
Искате ли да знаете каква е поддръжката на браузъра за определена функция? Уебсайтът CanIUse.com е чудесен ресурс за събиране на тази информация и уведомяване кои браузъри и кои версии на тези браузъри в момента поддържат функция.
Префиксите на доставчика са досадни, но временни
Да, може да се почувствате досадно и повтарящо се, ако трябва да пишете свойствата 2-5 пъти, за да работи във всички браузъри, но това е временна ситуация. Например, само преди няколко години, за да зададете заоблен ъгъл върху кутия, трябваше да напишете:
-moz-граница-радиус: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-горе-вдясно-радиус: 5px;
-webkit-border-долу-вдясно-радиус: 10px;
-webkit-border-долу-вляво-радиус: 5px;
граница-радиус: 10px 5px;
Но сега, когато браузърите изцяло поддържат тази функция, наистина се нуждаете само от стандартизирана версия:
граница-радиус: 10px 5px;
Chrome поддържа свойството CSS3 от версия 5.0, Firefox го добави във версия 4.0, Safari го добави в 5.0, Opera през 10.5, iOS в 4.0 и Android в 2.1. Дори Internet Explorer 9 го поддържа без префикс (а IE 8 и по-ниски не го поддържаха със или без префикси).
Не забравяйте, че браузърите винаги ще се променят и ще са необходими креативни подходи за поддържане на по-стари браузъри, освен ако не планирате изграждане на уеб страници които изостават с години от най-модерните методи. В крайна сметка писането на префиксите на браузъра е много по-лесно от намирането и експлоатацията на грешки, които най-вероятно ще бъдат коригирани в бъдеща версия, което изисква да намерите друга грешка, която да използвате и т.н.