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

ავტორისგან:-webkit- პრეფიქსი დღეს იმდენად გავრცელებულია CSS-ში, რომ ზოგიერთი საიტი უარს ამბობს მის გარეშე სწორად მუშაობაზე. მიუხედავად იმისა, რომ გამყიდველი css პრეფიქსები იყო დეველოპერებისთვის ნაკლებად სრულყოფილი თვისებების აშკარა ნიშანი ბოლო რამდენიმე წლის განმავლობაში, ამან აიძულა Mozilla გადაედგა სასოწარკვეთილი, მაგრამ აუცილებელი ნაბიჯი. Firefox 46-ში ან 47-ში (გამოშვებული 2016 წლის აპრილში ან მაისში), Mozilla გეგმავს არასტანდარტული -webkit- პრეფიქსების მხარდაჭერის დანერგვას, რათა გააუმჯობესოს ბრაუზერის თავსებადობა ამ პრეფიქსთან (თუნდაც მობილურ მოწყობილობებზე).

იდეა ახალი არ არის, Microsoft Edge ასევე მხარს უჭერს სხვადასხვა -webkit- პრეფიქსებს თავსებადობისთვის. Opera-მ დაიწყო -webkit- პრეფიქსების მხარდაჭერა 2012 წელს, შემდეგ კი გადავიდა Webkit Blink ძრავზე. W3C და ბრაუზერის დეველოპერები არ აპირებდნენ ამ პრეფიქსის გამოყენებას ვებსაიტების განვითარებაში:

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

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

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

ახალი პრეფიქსები

Mozilla აპირებს რამდენიმე –webkit- პრეფიქსების ჩართვას. რაც მე შევიკრიბე, როგორც ჩანს, Mozilla-ს არ აქვს განზრახული შეესაბამებოდეს სიას Edge თვისებებთან. ყველა თვისება არ უნდა იყოს თავსებადი Mozilla-ს ძრავთან. პრეფიქსებს შორის, რომელთა დამატებასაც Mozilla აპირებს, თავსებადობის/მობილური/არასტანდარტული თავსებადობის ვიკიგვერდის მიხედვით ვიმსჯელებთ, არის შემდეგი:

Webkit - გრადიენტებისთვის

Webkit- ტრანსფორმაციები

Webkit-გადასვლები

Webkit- გარეგნობა

Webkit-background-clip

Webkit-device-pixel- თანაფარდობა

ვებკიტი-ანიმაცია

ზოგიერთი სხვა თვისება შეიძლება იყოს @-webkit-keyframes-ში.

ბრაუზერის ჯვარედინი ტესტირება კრიტიკული იქნება

თუ თქვენ, ვებ დეველოპერმა, არ შეიყვანეთ -moz- პრეფიქსი, რათა არ გამოსცადოთ ახალი CSS თვისებები Firefox-ში და ვადა ახლოვდება და კლიენტი გაიძულებთ დაამატოთ ეს პრეფიქსი, მაშინ მოგიწევთ საიტის ხელახლა ტესტირება. Firefox 46-ში ან 47-ში. ეს ვერსიები გამოვა აპრილში ან მაისში, ასე რომ თქვენ ჯერ კიდევ გაქვთ გარკვეული დრო.

თქვენი ვებსაიტის შესამოწმებლად Firefox 46/47-ის მოლოდინის გარეშე, შეგიძლიათ ჩართოთ ეს ცვლილებები Firefox Nightly-ში layout.css.prefixes.webkit-ში დაყენებით about:config. თუ თქვენ გაქვთ დაინსტალირებული Nightly-ის უახლესი ვერსია, ნაგულისხმევი უნდა იყოს true. Firefox Nightly-ში ყველა -webkit- პრეფიქსის ცვლილება ჯერ არ მუშაობს, მაგრამ ის მაინც კარგი ადგილია შესამოწმებლად, როგორი იქნება თქვენი საიტი მალე. მარტამდე დაველოდები, სანამ სერიოზულად შევამოწმებდი საიტს Firefox Nightly-ში.

რაც უფრო მნიშვნელოვანია, Microsoft Edge უკვე განმარტავს და აჩვენებს -webkit- პრეფიქსებს ანალოგიურად. ეს ნიშნავს, რომ ნებისმიერი WebKit სტილი თქვენს საიტზე უკვე ნაჩვენებია ბრაუზერში, რომელიც სრულიად მოულოდნელი იყო. თუ ჯერ არ გიმუშავიათ ამ ბრაუზერთან, დააინსტალირეთ Windows 10 და მიიღეთ წვდომა მასზე სატესტო საიტებისთვის.

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

საბედნიეროდ, გამყიდველის პრეფიქსები თანდათან ქრება, რადგან განვითარების გუნდები ახალ გადაწყვეტილებებს პოულობენ. Chrome/Blink-ის გუნდმა ცოტა შეცვალა მიდგომა:

"მომავალში, იმის ნაცვლად, რომ ჩართოთ გამყიდველის პრეფიქსები ნაგულისხმევად, ჩვენ შევინარჩუნებთ რეგულარულ თვისებებს "ჩართეთ ექსპერიმენტული ვებ პლატფორმის თვისებების" დროშის მიღმა დაახლოებით: დროშებში, სანამ ეს თვისებები ნაგულისხმევად არ ჩართულია."— Chrome/Blink გუნდი

Firefox-ის გუნდი მსგავს გზას გაჰყვა: „ამჟამად Mozilla-ში მუშაობის ძირითადი მიმართულება არის გამყიდველის პრეფიქსებისგან თავის დაღწევა, მათი გამორთვა ან მათი რეგულარული თვისებების მდგომარეობაში გადაყვანა, თუ ისინი უკვე სტაბილურია. ეს მაინც ჩვენი ზოგადი პოლიტიკაა, ცალკეული შემთხვევები იმსახურებს გამონაკლისს. »- ბორისი Mozilla-დან

Microsoft Edge ასევე მიზნად ისახავს პრეფიქსის მხარდაჭერის მოხსნას: „Microsoft ასევე ცდილობს Edge-ში გამყიდველის პრეფიქსების მოშორებას. ეს ნიშნავს, რომ დეველოპერებს არ მოუწევთ სპეციალური პრეფიქსის დამატება Edge ბრაუზერისთვის სპეციალური HTML5 ტეგების ან CSS თვისებების გამოყენებისას. ამის ნაცვლად, დეველოპერები დაწერენ სტანდარტულ კოდს."- მაშირებადი

მოხდენილი დეგრადაცია პრეფიქსების გამოყენებით აღარ მუშაობს

გამყიდველის პრეფიქსებისგან დაშორება მხოლოდ ერთ რამეს ნიშნავს - პრეფიქსების მეშვეობით მოხდენილი დეგრადაციის ტექნიკა აღარ არის ვარიანტი. კონკრეტული ბრაუზერების იზოლირება გამყიდველის პრეფიქსების მეშვეობით (მაგალითად, Chrome-ისთვის) არ იყო ამ პრეფიქსების მიზანი; დეველოპერებს ყოველთვის მოუწოდებდნენ გამოიყენონ ყველა პრეფიქსი (–webkit– to –o–). თუ თქვენ იყენებთ რაიმე ფუნქციას, რომელიც მუშაობს საკუთრებებზე გამყიდველის პრეფიქსებით და ასევე იყენებთ მოხდენილი დეგრადაციის ტექნიკას თქვენს დიზაინში სხვა ბრაუზერებისთვის, მაშინ ეს აღარ მუშაობს.

დასკვნა

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

-webkit- პრეფიქსი იმდენად დომინანტურია CSS-ში, რომ ზოგიერთი საიტი მის გარეშე გამართულად არ მუშაობს. ეს მიუთითებს იმაზე, რომ დეველოპერები არ მიჰყვებოდნენ საუკეთესო პრაქტიკას ბოლო წლებში და ამან გამოიწვია სამწუხარო, მაგრამ თითქმის იძულებითი გადაწყვეტილება Mozilla-ს მხრიდან. Firefox-ის 46 ან 47 ვერსიაში (ეს არის 2016 წლის აპრილი ან მაისი), Mozilla გეგმავს განახორციელოს არასტანდარტული -webkit- პრეფიქსების მხარდაჭერა Firefox-ის თავსებადობის გასაუმჯობესებლად იმ საიტებთან, რომლებიც აქტიურად იყენებენ -webkit-ს (ჩვეულებრივ, მობილურის პირველი საიტები).

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

Mozilla-ს და Microsoft-ის მიდგომა უსაფრთხოა საიტების უმეტესობისთვის. ბევრი საიტი გამოიყენებს -moz- პრეფიქსს ან არ საჭიროებს რაიმე მოქმედებას Firefox-ის მომავალ განახლებასთან თავსებადობისთვის. მაგრამ, როგორც პროფესიონალი ვებ დეველოპერები, ყურადღებით უნდა განვიხილოთ და გავიგოთ, რა შედეგებს მოიტანს ეს. თქვენ ალბათ იცით, რომელ თქვენს საიტებზე შეიძლება გავლენა იქონიოს ამ განახლებამ.

ასე რომ, დროა გადახედოთ მიდგომას პრეფიქსებისა და მათთან სატესტო საიტების მიმართ.

მხარდაჭერილი პრეფიქსები

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

Firefox-ის დეველოპერები ასევე ახლოს არიან მსგავს მიდგომასთან:

Mozilla-ში ამჟამინდელი ტენდენციაა გამყიდველის პრეფიქსების თავიდან აცილება არაპრეფიქსის თვისებების გამორთვით და არაპრეფიქსირებული ვერსიის საკმარისი სტაბილურობით გამოყენებით. ეს არის ზოგადი პოლიტიკა: გამონაკლისები შეიძლება მოქმედებდეს ზოგიერთ შემთხვევაში - ბორისი Mozilla-დან

Microsoft Edge ასევე აპირებს უარი თქვას გამყიდველის პრეფიქსებზე:

„Microsoft ასევე აპირებს Edge-ში გამყიდველის პრეფიქსების აღმოფხვრას. ეს ნიშნავს, რომ დეველოპერები, რომლებსაც სურთ გამოიყენონ კონკრეტული HTML და CSS ფუნქციები, არ გამოიყენებენ Edge-ს სპეციფიკურ პრეფიქსს. სამაგიეროდ, ისინი უბრალოდ დაწერენ კოდს სტანდარტების მიხედვით“ - Mashable

აღარ იქნება თანდათანობითი დეგრადაცია პრეფიქსების საფუძველზე

გამყიდველის პრეფიქსებისგან დაშორება ნიშნავს ერთ რამეს - გამყიდველის პრეფიქსების გამოყენებით თანდათანობით დეგრადაციას არ აქვს პერსპექტივა.

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

დასკვნა

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

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

მოდით შევხედოთ სამ კითხვას:

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

მოდით მოვიყვანოთ მაგალითი, რომელიც აჩვენებს, რამდენად მარტივია ჩვენი გაკვეთილის შედეგის გამოყენება.

CSS ფაილი იყენებს ხაზგასმას პრეფიქსების ნაცვლად:

საზღვარი-რადიუსი: 10px;

სკრიპტის კოდი წარმოქმნის თვისებების სრულ ჩამონათვალს პრეფიქსებით:

O-საზღვარი-რადიუსი: 10px; -moz-საზღვარი-რადიუსი: 10px; -webkit-border-radius: 10px; საზღვარი-რადიუსი: 10px;

ერთი ბმული ტეგი იტვირთება სამი CSS ფაილი ერთდროულად. css.php სკრიპტი კითხულობს ჩამოთვლილ ფაილებს (css_file1.css, css_file2.css და css_file3.css), აერთიანებს მათ და აბრუნებს ერთ ფაილს.

ახლა ვნახოთ, როგორ მუშაობს სკრიპტი.

კოდის წერა

შექმენით css.php ფაილი შემდეგი კოდით:

სკრიპტი ჯერ იღებს CSS ფაილების ჩამონათვალს URL პარამეტრიდან სტრიქონად დასამუშავებლად (ხელმისაწვდომია PHP-ში $_GET["f"] სახით). თითოეული ფაილი გამოყოფილია ვერტიკალური ზოლით. explode() ფუნქცია ყოფს სტრიქონს მილის სიმბოლოზე და აბრუნებს ფაილის სახელების მასივს.

ფუნქცია file_get_contents() იღებს თითოეული ფაილის შიგთავსს სათითაოდ და ვამატებთ $contents ცვლადს.

CSS ფაილების შიგთავსის მოძიების შემდეგ იწყება თვისებების ძებნა, რომლებიც იწყება ქვედა ხაზით, რომელიც იცვლება ბრაუზერის პრეფიქსით. preg_match_all() ფუნქცია პოულობს ტექსტის ყველა ნაწილს, რომელიც ემთხვევა რეგულარულ გამონათქვამს და ათავსებს მასივის სახით $matches-ში.

ფიგურა აღწერს რეგულარული გამოხატვის ნიმუშს:

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

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

კიდევ ერთი რეგულარული გამოხატულება გამოიყენება არასაჭირო სივრცეების და ახალი ხაზების მოსაშორებლად.

თვისებები, რომლებიც ემთხვევა რეგულარულ გამოხატულებას, ძლიერ შეკუმშული იქნება:

$contents ცვლადის შედეგი არის CSS ფაილი, რომელიც მზად არის გასაგზავნად. პირველი ზარი header() ფუნქციაზე აცნობებს ბრაუზერს, რომ გადაცემული ინფორმაცია უნდა განიხილებოდეს როგორც CSS ფაილი. მეორე ზარი header()-ზე ეუბნება ბრაუზერს, რომ ფაილი მოქმედებს ერთი საათის განმავლობაში, ასე რომ ბრაუზერი განათავსებს ასლს თავის ქეშში და აღარ მოითხოვს ფაილს სერვერიდან.

სკრიპტის გამოყენება

მოდით მოვიყვანოთ ჩვენი სკრიპტის გამოყენების მარტივი მაგალითი. მოდით განვათავსოთ css.php ფაილი თქვენი პროექტის css დირექტორიაში სამ CSS ფაილთან ერთად.

პირველი header.css ფაილი:

#header ( სიგანე: 800px; სიმაღლე: 100px; padding: 20px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; ფონი: _linear-gradient(#D30000, #3D000);

მეორე ფაილი არის center.css:

#center ( სიგანე: 800px; სიმაღლე: 400px; padding: 20px; ზღვარი: 20px 0px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; ფონი: _linear-30px, #8 ED2);

მესამე ფაილი არის footer.css:

#footer ( სიგანე: 800px; სიმაღლე: 100px; padding: 20px; _border-radius: 10px; _box-shadow: 0px 0px 10px #000000; ფონი: _linear-gradient(#006ED3, #00203D);

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

ახლა ჩვენ ვქმნით ფაილს index.html, რომელიც იყენებს ამ სტილებს.

ყურადღება მიაქციეთ href ატრიბუტს ბმულის ტეგში. თითოეული CSS ფაილი გამოყოფილია ვერტიკალური ზოლით.

დასკვნა

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

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

რა არის პრეფიქსები?

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

მაგალითად, საიტის სტილის განხილვისას, ვებ დეველოპერს შეიძლება შეხვდეს თვისებები, რომლებიც შეიცავს რამდენიმე გაუგებარ სიტყვას წინ: -webkit-, -moz-, -ms- და ა.შ.

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

Რა არის ეს? სინამდვილეში, ყველაფერი მარტივია, ეს უცნაური სიტყვები შემდეგი ბრაუზერების პრეფიქსებია:

• -webkit- : Chrome, Safari, Opera ბრაუზერები;
• -moz- : Mozilla Firefox ბრაუზერი;
• -ms-: Internet Explorer ბრაუზერი.

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

პრეფიქსების გამოჩენის მიზეზები?

პრეფიქსების გამოჩენის რამდენიმე მიზეზი იყო:

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

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

როგორ გამოვიყენოთ პრეფიქსები?

განვიხილოთ შემდეგი კოდი, როგორც მაგალითი:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

ეს კოდი იყენებს CSS თვისებებს, რომლებიც ცვლის სიგანისა და სიმაღლის გამოთვლის ალგორითმს ვებ გვერდის ყველა ელემენტისთვის. პირველი CSS თვისება -webkit-box-sizing საზღვრის-box მნიშვნელობით განკუთვნილია ბრაუზერებისთვის, რომლებიც იყენებენ webkit (Safari) ან blink (Chrome, Opera, Yandex.Browser) ძრავას. მეორე CSS თვისება -moz-box-sizing მნიშვნელობით border-box განკუთვნილია ბრაუზერებისთვის Gecko ძრავის გამოყენებით (Mozilla Firefox). ბოლო CSS თვისება განკუთვნილია ბრაუზერებისთვის, სადაც ეს თვისება უკვე გამოცდილია და დანერგილია სტანდარტის მიხედვით.

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

მაგალითად: CSS თვისების გამოყენება ვებგვერდის ყველა ელემენტზე Google Chrome-ის 40-ე ვერსიაში.

ზემოთ მოცემულ სურათზე ხედავთ, რომ ორიგინალური box-sizing თვისება უკვე დანერგილია ამ ბრაუზერში და რადგან ის ბოლოა, ბრაუზერი იყენებს მას და არა ზემოთ მოცემულ -webkit-box-sizing თვისებას.

როგორ შევამოწმოთ ბრაუზერში კონკრეტული ქონების მხარდაჭერა?

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

მაგალითად: მოდით შევამოწმოთ როგორ ხდება ტრანსფორმაციის თვისება ბრაუზერებში დანერგილი.

CanIUse ვებსაიტზე ბრაუზერები მონიშნულია სხვადასხვა ფერებში, გარკვეული თვისებების ან ტეგების მხარდაჭერის მდგომარეობიდან გამომდინარე:

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