CSS მომწოდებლის პრეფიქსი

რა არიან ისინი და რატომ უნდა იყენებ მათ?

CSS მომწოდებლის პრეფიქსები, ასევე შუალედში ცნობილი ან CSS ბრაუზერის პრეფიქსები, არის გზა ბრაუზერის შემქმნელები, რომ დაამატოთ მხარდაჭერა ახალი CSS მახასიათებლები ადრე იმ თვისებები სრულად არის მხარდაჭერილი ყველა ბრაუზერები. ეს შეიძლება გაკეთდეს ერთგვარი ტესტირებისა და ექსპერიმენტული პერიოდის განმავლობაში, სადაც ბრაუზერის მწარმოებელი ზუსტად განსაზღვრავს, თუ როგორ განხორციელდება ეს ახალი CSS ფუნქციები. ეს პრეპიქსები ძალიან პოპულარული გახდა რამდენიმე წლის წინ, CSS3- ის ზრდით.

როდესაც CCS3 პირველად შემოღებულ იქნა, რიგი აღფრთოვანებული თვისებები დაიწყო სხვადასხვა ბრაუზერები სხვადასხვა დროს. მაგალითად, ვებკით-იკვებებული ბრაუზერები (Safari და Chrome) პირველი იყო დანერგვა ზოგიერთი ანიმაციური სტილის თვისებები, როგორიცაა ტრანსფორმაცია და გარდამავალი. ვებ-დიზაინერებს შეეძლოთ იყენებდნენ იმ ახალ ფუნქციებს, რომლებიც მუშაობდნენ და მათ ბრაუზერებზე დაინახეს, რომ მათ დაუჭირეს მხარი დაუჭირეს, იმის ნაცვლად, რომ დაელოდებინათ ყველა სხვა ბრაუზერის მწარმოებელი.

ასე რომ პერსპექტივა ფრონტის ბოლოს ვებ დეველოპერი, ბრაუზერის პრეფიქსები გამოიყენება დაამატოთ ახალი CSS თვისებები საიტზე გადაადგილება ხოლო კომფორტს იცის, რომ ბრაუზერები ხელს შეუწყობს იმ სტილის. ეს განსაკუთრებით სასარგებლოა, როდესაც სხვადასხვა ბრაუზერის მწარმოებლები ახორციელებენ თვისებებს ოდნავ განსხვავებულ გზებში ან სხვა სინტაქსით.

CSS ბრაუზერის პრეფიქსები, რომ თქვენ შეგიძლიათ გამოიყენოთ (რომელთაგან თითოეული კონკრეტული ბრაუზერია):

• Android: -webkit-
• Chrome: -webkit-
• Firefox: -moz-
• Internet Explorer: -ms-
• iOS: -webkit-
• ოპერა: -o-
• Safari: -webkit-

უმეტეს შემთხვევაში, გამოიყენოთ ახალი CSS სტილის თვისებები, მიიღებთ სტანდარტულ CSS ქონებას და დაამატეთ თითოეული ბრაუზერის პრეფიქსი. პრეფიქსირებული ვერსიები ყოველთვის მოდის პირველ რიგში (ნებისმიერ შემთხვევაში თქვენ გირჩევნიათ), ხოლო ნორმალური CSS ქონება მოვა ბოლომდე. მაგალითად, თუ გსურთ დაამატოთ CSS3 დოკუმენტი თქვენს დოკუმენტში, თქვენ გამოიყენებთ გარდამავალ ქონებას, როგორც ეს ნაჩვენებია ქვემოთ:

-webkit- გარდამავალი: ყველა 4 მარტი ;
-moz- გარდამავალი: ყველა 4s მარტივია;
-mms- გარდამავალი: ყველა 4s მარტივია;
-ეორგანიზაცია : ყველა 4- იანი მარტივია;
გარდამავალი: ყველა 4 მარტი;

შენიშვნა: გახსოვდეთ, ზოგიერთი ბრაუზერს აქვს გარკვეული სინტაქსი გარკვეული თვისებების გამო, ვიდრე სხვები, ასე რომ არ ვივარაუდოთ, რომ ბრაუზერი prefixed ვერსია ქონება ზუსტად იგივე, რაც სტანდარტული ქონება. მაგალითად, შექმნათ CSS gradient , გამოიყენოთ ხაზოვანი გრადიენტი ქონება. Firefox, Opera და Chrome- ისა და Safari- ის თანამედროვე ვერსიები იყენებენ იმას, რომ საკუთრების შესაბამისი პრეფიქსის საშუალებით, Chrome- ისა და Safari- ის ადრეული ვერსიები იყენებენ prefix- ის ვარიანტს --webkit-gradient. ასევე, Firefox იყენებს სხვადასხვა ღირებულებებს, ვიდრე სტანდარტული პირობა.

მიზეზი, რომ თქვენ ყოველთვის დასრულდება თქვენი დეკლარაცია ნორმალური, არასამთავრობო prefix მობილური CSS ქონება ისე, რომ როდესაც ბრაუზერი მხარს უჭერს წესს, ის გამოიყენებს, რომ ერთი. გახსოვდეთ, თუ როგორ იკითხება CSS. მოგვიანებით წესები უპირატესობას ანიჭებს ადრინდელ პიროვნებებს, თუ სპეციფიურობა ერთნაირია, ამიტომ ბრაუზერი წაიკითხავს წესის მომწოდებლის ვერსიას და გამოიყენებს, რომ თუ იგი არ იძლევა ნორმალურ დახმარებას, მაგრამ კიდევ ერთხელ, იგი ხელს უშლის გამყიდველი ვერსიას ფაქტობრივი CSS წესი.

Vendor Prefixes არ არის Hack

როდესაც გამყიდველი პირველად იქნა შემოღებული, ბევრი ვებ პროფესიონალები აინტერესებდათ, თუ ისინი იყვნენ hack ან shift უკან მუქი დღეებში forking ნახვა კოდი მხარდაჭერის სხვადასხვა ბრაუზერები (გახსოვდეთ, რომ " ეს საიტი საუკეთესო დაათვალიერა IE " შეტყობინებები). CSS მოვაჭრეების პრეფიქსი არ არის hacks, თუმცა, და თქვენ არ უნდა დათქმები გამოყენების შესახებ მათ თქვენი მუშაობა.

CSS hack იყენებს შეცდომებს განხორციელების სხვა ელემენტის ან ქონების, რათა კიდევ ერთი ქონება მუშაობა სწორად. მაგალითად, ყუთი მოდელი hack ექსპლოიტი ხარვეზები in parsing ხმა-საოჯახო საკუთრების ან როგორ ბრაუზერები parse backslashes (\). მაგრამ ეს hacks იქნა გამოყენებული, რათა შეასწოროს პრობლემა განსხვავება, თუ როგორ Internet Explorer 5.5 სიფრთხილით ყუთი მოდელი და როგორ Netscape ინტერპრეტირებული, და არაფერი აქვს საერთო ხმის საოჯახო სტილი. საბედნიეროდ, ეს ორი მოძველებული ბრაუზერები არიან ისეთები, რომელთაც ჩვენ არ გვაქვს ამ დღეებში.

გამყიდველი პრეფიქსი არ არის hack, რადგან ის საშუალებას აძლევს სპეციფიკაციას შექმნას წესები, თუ როგორ შეიძლება განხორციელდეს ქონება, ხოლო ამავე დროს საშუალებას ბრაუზერის შემქმნელებს განახორციელონ ქონება სხვაგვარად არღვევს ყველაფერი. გარდა ამისა, ეს პრეფიქსები მუშაობენ CSS- ის თვისებებით, რომლებიც საბოლოოდ შეადგენენ სპეციფიკაციის ნაწილს . ჩვენ უბრალოდ დაამატებთ რამდენიმე კოდს, რათა თავიდან იქნას აცილებული ქონება ადრეულ პერიოდში. ეს არის კიდევ ერთი მიზეზი, რის გამოც თქვენ დასრულდება CSS წესი ნორმალური, არასამთავრობო prefix ქონების. ამგვარად, შეგიძლიათ ისარგებლოთ პრეფიქსირებული ვერსიით ერთხელ ბრაუზერის მხარდაჭერის მისაღწევად.

გვინდა ვიცოდეთ, რა არის ბრაუზერის მხარდაჭერა გარკვეული ფუნქციისთვის? ნახვა CanIUse.com არის შესანიშნავი რესურსი შეგროვება ამ ინფორმაციას და გაქირავების თქვენ იცით, რომელი ბრაუზერები, და რომელი ვერსიები იმ ბრაუზერები, გაკეთებული მხარდასაჭერად ფუნქცია.

გამყიდველი პრეფიქსები შემაშფოთებელია, მაგრამ დროებითია

დიახ, ეს შეიძლება გაღიზიანებული და განმეორებითი იყოს, რომ ყველა ბრაუზერი მუშაობისთვის 2-5 ჯერ დაწერა, მაგრამ ეს დროებითი სიტუაციაა. მაგალითად, რამდენიმე წლის წინათ, მრგვალ კუთხეში ყუთზე უნდა დაწერო:

-ზონ-სასაზღვრო-რადიუსი: 10px 5px;
-ვებრი-საზღვრის ზედა მარცხენა რადიუსი: 10px;
-ვებრი-საზღვრის ზედა მარჯვენა რადიუსი: 5px;
-ვებრი-საზღვრის ქვედა მარჯვენა რადიუსი: 10px;
-ვებრი-საზღვრის ქვედა მარცხენა რადიუსი: 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 და ქვედა მხარს არ უჭერს მას პრეფიქსის ან მის გარეშე).

გახსოვდეთ, რომ ბრაუზერები ყოველთვის იცვლება და ძველი ბრაუზერების მხარდასაჭერად შემოქმედებითი მიდგომა იქნება საჭირო, თუ თქვენ გეგმავთ ვებ გვერდების მშენებლობას , რომლებიც ყველაზე თანამედროვე მეთოდების უკან წლებია. საბოლოო ჯამში, ბრაუზერის პრეფიქსების წერა ბევრად უფრო ადვილია, ვიდრე შეცდომების მოძიებასა და ექსპლუატაციას, რაც, სავარაუდოდ, ფიქსირდება მომავალ ვერსიაში, რაც მოითხოვს სხვა შეცდომების გამოყენებას და ა.შ.