Какви са те и защо трябва да ги използвате
Представките на доставчиците на CSS, известно още като префикси на браузъра, са начин за производителите на браузъри да добавят поддръжка за нови функции на CSS, преди тези функции да се поддържат напълно във всички браузъри. Това може да се направи по време на период на тестване и експериментиране, при който производителят на браузъра определя точно как ще бъдат приложени тези нови функции на CSS. Тези префикси станаха много популярни с възхода на CSS3 преди няколко години.
Когато CCS3 се въведе за първи път, редица развълнувани свойства започнаха да удрят различни браузъри по различно време. Например, уеб браузърите (Safari и Chrome) бяха първите, които въведоха някои от атрактивните анимационни свойства като трансформация и преход. Използвайки предимства на продавачите, уеб дизайнерите успяха да използват тези нови функции в работата си и да ги видят в браузърите, които ги поддържаха веднага, вместо да чакат всеки друг производител на браузъра да навакса!
Така че, от гледна точка на уеб дизайнер от предния край, се използват префикси на браузъра, за да се добавят нови функции на CSS към даден сайт, като същевременно се улесни познанието, че браузърите ще поддържат тези стилове. Това може да бъде особено полезно, когато различни производители на браузъри прилагат свойства по малко различни начини или с различен синтаксис.
Браузерите на CSS, които можете да използвате (всеки от които е специфичен за различен браузър), са:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Опера: -о-
- Safari: -webkit-
В повечето случаи, за да използвате чисто нова собственост на Стил на CSS, можете да използвате стандартната собственост на CSS и да добавите префикса за всеки браузър. Предварително версиите винаги ще са на първо място (в който и да е ред, който предпочитате), докато нормалната собственост на CSS ще бъде последна. Ако например искате да добавите преход към CSS3 към документа си, ще използвате собствеността в прехода, както е показано по-долу:
-webkit- transition: всичко 4s лесно;
-moz- transition: всичко 4s леко;
-ms- преход: всичко 4s леко;
преход: всички 4s лекота;
преход: всичко 4s лесно;
Забележка: Не забравяйте, че някои браузъри имат различен синтаксис за определени свойства, отколкото други, така че не предполагайте, че версията с предварително зададена от браузъра собственост е точно същата като стандартната собственост. Например, за да създадете градиент на CSS , използвате свойството линеен градиент. Firefox, Opera и съвременните версии на Chrome и Safari използват тази собственост с подходящата префикс, докато ранните версии на Chrome и Safari използват префиксираната собственост -webkit-градиент. Също така, Firefox използва различни стойности от стандартните.
Причината, поради която винаги прекратявате декларацията си с нормалната, неподредена версия на собствеността на CSS, е, че когато браузър поддържа правилото, то ще използва тази. Помнете как се чете CSS. По-късните правила имат предимство пред по-ранните, ако спецификата е една и съща, така че браузърът да прочете версията на продавача на правило и да го използва, ако не поддържа нормалното, но след като го направи, ще преименува версията на доставчика действителното правило за CSS.
Представките на доставчиците не са хак
Когато се представят за първи път доставчици, много професионалисти в мрежата се чудеха дали не са хакер или се завръщат в тъмните дни на подражаването на кода на уебсайта, за да поддържат различни браузъри (не забравяйте тези съобщения " Този сайт е най-добре гледан в IE "). Представките на доставчиците на CSS обаче не са хакове, а вие не трябва да имате никакви резерви относно използването им в работата си.
CSS хак използва недостатъци при внедряването на друг елемент или собственост, за да получи друга собственост, за да работи правилно. Например, моделът на хакера използваше недостатъци при анализа на гласовата собственост на семейството или в начина, по който браузърите анализират обратните мигнали (\). Но тези хакове бяха използвани за отстраняване на проблема за разликата между начина, по който Internet Explorer 5.5 обработва модела на кутията и как Netscape я тълкува, и няма нищо общо с стила на гласовото семейство. За щастие тези два остарели браузъри са такива, с които не се притесняваме с тези дни.
Предположението на доставчик не е хакер, защото позволява на спецификацията да настрои правила за това как дадена собственост може да бъде внедрена, като в същото време позволява на производителите на браузъри да внедрят свойство по различен начин, без да разбиват всичко останало. Освен това тези префикси работят с CSS свойства, които в крайна сметка ще бъдат част от спецификацията . Ние просто добавяме някакъв код, за да получим по-рано достъп до имота. Това е още една причина да прекратите правилото за CSS с нормалната собственост, която не е префикс. По този начин можете да изпуснете префиксираните версии, след като се постигне пълна поддръжка на браузъра.
Искате ли да знаете какво поддържа браузърът за определена функция? Уеб сайтът CanIUse.com е чудесен ресурс за събиране на тази информация и ви позволява да знаете кои браузъри и кои версии на тези браузъри в момента поддържат функция.
Представките на доставчиците са досадни, но временни
Да, може да се почувства досадно и повтарящо се, че трябва да пише свойствата 2-5 пъти, за да може да работи във всички браузъри, но това е временна ситуация. Например, само преди няколко години, за да поставите заоблен ъгъл на кутията, трябваше да напишете:
-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;
радиус на границата: 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 и по-ниска не го поддържат с или без префикси).
Не забравяйте, че браузърите винаги ще се променят и ще се изискват творчески подходи за поддръжка на по-стари браузъри, освен ако не планирате да създавате уеб страници, които са години наред с най-модерните методи. В крайна сметка, написването на префикси на браузъра е много по-лесно от намирането и използването на грешки, които най-вероятно ще бъдат отстранени в бъдеща версия, изисквайки да откриете друга грешка, която да се използва и т.н.