Bagaimana Saya Boleh Memudahkan CSS Berawalan Penjual Silang-Pelayar?

CSS Awalan Penjual Rentas Penyemak Imbas dengan Usaha Minimum

Jumlah sifat CSS awalan vendor yang banyak boleh menjadikannya satu tugas yang sukar untuk diambil kira untuk setiap pelayar yang disokong. Adakah terdapat penyelesaian yang lebih mudah dan lebih mudah daripada menetapkan setiap awalan secara manual untuk setiap sifat?

CSS Prefixed Vendor: A Pain Point Simplified

Pendekatan tradisional melibatkan penentuan secara eksplisit每個Sifat CSS dengan versi khusus vendornya. Seperti yang ditunjukkan dalam coretan kod yang diberikan:

var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;

Proses berulang ini bukan sahaja membosankan tetapi juga terdedah kepada ralat. Nasib baik, terdapat kaedah yang diperkemas.

Pendekatan Bersepadu melalui JavaScript

Satu penyelesaian terletak pada fungsi JavaScript tersuai yang mengendalikan awalan vendor:

function setVendor(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

Fungsi ini mengambil tiga argumen: elemen sasaran (elemen), nama sifat CSS (sifat) dan nilai yang sepadan (nilai). Dengan memanfaatkan fungsi ini, seseorang boleh mencapai CSS awalan vendor dengan kod minimum:

setVendor(element, 'Transform', 'translate3d(0,0,0)');

Pendekatan disatukan ini menghapuskan keperluan untuk awalan eksplisit, memudahkan kod dan meminimumkan ralat.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Memudahkan CSS Berawalan Penjual Silang-Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!