Олар неліктен және сіз оларды пайдалануыңыз керек
CSS провайдерінің префиксі, сондай-ақ кейде танымал немесе CSS браузерлерінің префиксі браузерлердің жаңа CSS мүмкіндіктеріне қолдау қосуына мүмкіндік береді , сол мүмкіндіктер барлық браузерлерде толығымен қолдауға ие болады. Мұны браузер өндірушісі осы жаңа CSS мүмкіндіктерінің қалай іске асырылатынын анықтайтын тестілеу және тәжірибе кезеңінде жасай алады. Бұл префикс бірнеше жыл бұрын CSS3- нің өсуімен танымал болды.
CCS3 алғаш рет енгізілгенде, бірнеше қозғаушы қасиеттер түрлі браузерлерді әр түрлі уақытта бастады. Мысалы, webkit-қуаты бар браузерлер (Safari және Chrome) алғаш рет түрлендіру және көшіру сияқты анимация стилінің сипаттарын енгізді. Сатушы префиксті қасиеттерді қолдана отырып, веб-дизайнерлер осы жаңа мүмкіндіктерді өздерінің жұмысында пайдалана алды және кез-келген басқа браузер өндірушісін қуып жетуді күтудің орнына оларды бірден қолдайтын браузерлерде көрді!
Мәселен, браузерлердің префикслері браузерлердің сол стильдерді қолдайтындығын біліп, сайтқа жаңа CSS мүмкіндіктерін қосу үшін пайдаланылады. Бұл әртүрлі браузерлер өндірушілері қасиеттерді әртүрлі жолдармен немесе басқа синтаксиспен іске асырғанда пайдалы болуы мүмкін.
Пайдалануға болатын CSS браузері префиксі (әрқайсысы басқа браузерге тән) мыналар:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Көптеген жағдайларда жаңа CSS мәнерінің сипатын пайдалану үшін стандартты CSS сипатын алып, әрбір шолғыш үшін префиксті қосыңыз. Префикстік нұсқалар әрдайым бірінші болып келеді (кез келген тәртіпте), қалыпты CSS сипаты соңғы болып келеді. Мысалы, құжатқа CSS3 көшіруді қосқыңыз келсе, өтпелі сипатты төменде көрсетілгендей пайдаланасыз:
-webkit- transition: барлық 4s оңай;
-мозға көшу: барлық 4s жеңілдік;
-ms- көшу: барлық 4s оңай;
-o- көшу: барлық 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;
border-radius: 10px 5px;
Бірақ қазір браузерлер бұл мүмкіндікті толығымен қолдауға келді, сіз шынымен стандартталған нұсқаны қажет етеді:
border-radius: 10px 5px;
Chrome 5.0 нұсқасынан бастап CSS3 сипатын қолдайды, Firefox оны 4.0 нұсқасына қосқан, Safari 5.0-де, Opera 10.5-де, 4.0-де iOS-де және Android-де 2.1-де қосқан. Тіпті Internet Explorer 9 оны префикссіз қолдайды (және IE 8 және одан төмен оны префикстермен немесе префикстерсіз қолдамайды).
Браузерлер әрдайым өзгеретінін және ескі браузерлерді қолдау үшін шығармашылық көзқарастарды ең заманауи әдістерден кейінгі жылдарға арналған веб-беттерді құруды жоспарлағанша ғана қажет болады. Соңында, браузерлердің префикстерін жазу болашақ қателерді табу және пайдаланудан әлдеқайда оңай, олар сізге болашақта басқа қателерді табуды талап етеді және т.с.с.