ვენდორული პრეფიქსები რა არის?

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

ძირითადი წინაპირობები:

• -webkit-: Chrome, Safari, Opera (რამდენიმე ვერსია), უმეტესობა მობილური ბრაუზერების (Android და iOS ჩათვლით).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (რამდენიმე ვერსია).
• -o-: Opera (ძველი ვერსიები).

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

.element {
  -webkit-border-radius: 10px; /* Safari ვერსიები 5 და უფრო ადრეული */
  -moz-border-radius: 10px; /* Firefox ვერსიები 4 და უფრო ადრეული */
  border-radius: 10px; /* სტანდარტული თვისება */
}

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

მომწოდებლის წინაპირობების მართვის ავტომატიზაციისთვის ხშირად გამოიყენება PostCSS და Autoprefixer პლაგინი.

// PostCSS-ის კონფიგურაციის მაგალითი Autoprefixer-თან
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['ბოლო 2 ვერსია', '> 1%'] // მხარდაჭერილი ბრაუზერები
    })
  ]
};

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