Bagaimanakah Saya Boleh Menambah Awalan Vendor pada CSS Saya dengan Mudah?

CSS Awalan Vendor dengan Usaha Minimum

Sebagai pembangun, kami sering menghadapi tugas yang membosankan untuk menetapkan sifat CSS awalan vendor seperti 'transformasi ' untuk keserasian merentas pelayar. Pendekatan tradisional melibatkan penentuan secara manual setiap awalan vendor, menghasilkan kod bertele-tele dan berulang. Adakah terdapat penyelesaian yang lebih baik?

Alternatif yang mudah dan berkesan ialah mencipta fungsi tersuai yang mengendalikan awalan vendor secara automatik. Begini caranya:

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 parameter: elemen HTML untuk menggunakan gaya, nama sifat CSS dan nilai yang dikehendaki. Ia berulang melalui awalan vendor biasa dan menambahkannya pada setiap nama sifat sebelum menetapkan nilai.

Penggunaan:

Dengan fungsi ini, tetapkan CSS awalan vendor menjadi operasi satu baris:

setVendor(elem, "Transform", "translate3d(0,0,0)");

Ini akan menggunakan sifat 'transform' secara automatik dengan nilai yang ditentukan kepada semua awalan penyemak imbas yang disokong. Ucapkan selamat tinggal kepada kod berlebihan dan helo kepada aliran kerja pembangunan yang diperkemas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Awalan Vendor pada CSS Saya dengan Mudah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!