Anda mungkin pernah mengalami ini. Anda menyalin blok bergaya yang bagus — kartu judul, callout berwarna — dan menempelnya ke editor WeChat atau sebuah CMS. Kadang ia tiba tampak persis benar. Di lain waktu ia mendarat sebagai teks telanjang dengan semua desain terkelupas. Tindakan sama, hasil berbeda, dan rasanya acak. Bukan. Bedanya adalah apakah Anda menyalin HTML inline.
Memahami satu gagasan ini membuat penempelan konten bergaya jadi bisa diprediksi alih-alih untung-untungan.
Apa itu HTML inline sebenarnya
Penataan web bisa tinggal di dua tempat. Pada situs web normal, penataan berada di stylesheet terpisah, dan HTML hanya merujuknya lewat nama kelas: <div class="title-card">. Div itu tak bermakna dengan sendirinya — desainnya tinggal di file CSS di tempat lain.
HTML inline menaruh penataan di dalam elemen itu sendiri: <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px">. Segala yang dibutuhkan untuk merender blok ikut bersama blok. Tak ada file eksternal yang perlu diandalkan.
Perbedaan itu adalah keseluruhan cerita mengapa beberapa tempelan mempertahankan desainnya dan yang lain tidak. Ketika Anda menempel ke editor, editor tak mendapat stylesheet situs sumber. Jika desainnya tinggal di stylesheet itu, ia hilang — Anda mendapat struktur telanjang, yaitu teks yang tampak polos. Jika desainnya inline, ia ikut serta, dan blok merender dengan benar.
Mengapa WeChat dan editor kaya membutuhkannya
Editor WeChat itu ketat. Ia menghapus stylesheet eksternal dan menyaring banyak penataan. Blok yang mengandalkan kelas yang didefinisikan di tempat lain tak punya apa pun untuk diandalkan begitu ia berada di dalam WeChat. Banyak editor rich-text dan bidang tempel CMS berperilaku sama — mereka membersihkan apa yang Anda tempel dan menyimpan hanya atribut inline.
Jadi cara andal memindahkan blok bergaya ke editor-editor ini adalah menyalinnya sebagai HTML inline, di mana penataannya berdiri sendiri. Lalu bahkan editor yang ketat pun punya semua yang dibutuhkan untuk menampilkan blok sebagaimana dirancang.
Bagaimana menyalin blok "dengan formatnya" bekerja
Browser modern punya Clipboard API yang bisa menaruh konten kaya — HTML dengan format — ke clipboard, bukan sekadar teks polos. Ketika sebuah alat menyalin blok "sebagai HTML inline," ia memakai API itu untuk menaruh markup blok yang berdiri sendiri ke clipboard Anda. Anda lalu menempel (Ctrl/Cmd+V) ke editor, dan karena penataannya inline dan clipboard membawa HTML-nya, blok muncul bergaya.
Dua hal harus benar agar ini bekerja:
- Markup harus bergaya inline, agar tak ada file eksternal yang dibutuhkan.
- Clipboard harus membawanya sebagai HTML, bukan sebagai tumpukan teks-polos dari tanda kurung sudut.
Buat keduanya benar dan tempelan "langsung berfungsi." Meleset salah satu dan Anda mendapat teks polos atau dinding kode yang terlihat.
Melakukannya tanpa mengedit kode secara manual
Anda bisa, secara prinsip, mengambil blok bergaya dan meng-inline setiap gaya secara manual — memindahkan aturan setiap kelas ke atribut style="" pada setiap elemen. Untuk apa pun di luar blok sepele, itu membosankan dan rawan kesalahan, terutama dengan kartu SVG yang penataannya tersebar di banyak node.
Alat yang menangani ini lebih mudah. Ekstraktor Modul Tata Letak milik IMG.DIY mengekstrak blok bergaya dari konten WeChat yang ditempel dan memberi masing-masing tombol salin yang menaruhnya ke clipboard Anda sebagai HTML inline melalui Clipboard API. Anda mengeklik salin, beralih ke editor WeChat (atau CMS Anda, atau bidang rich-text), menempel, dan blok mempertahankan formatnya. Tanpa inline manual, tanpa memperbaiki markup yang rusak.
Daftar periksa tempel cepat
Ketika tempelan bergaya keliru, telusuri ini:
- Apakah Anda menyalin HTML inline, atau tangkapan layar/teks polos? Hanya HTML inline yang tertempel sebagai blok bergaya yang berfungsi.
- Tempel ke badan normal editor, bukan mode "kode sumber" atau "teks polos", yang bisa membersihkan atau meng-escape markup.
- Periksa blok di pratinjau. Pratinjau WeChat sendiri menunjukkan bagaimana blok akan benar-benar merender di ponsel — pastikan di sana sebelum menerbitkan.
- Jika warna tampak keliru, warnai ulang sebelum menyalin. Di ekstraktor Anda bisa mengeklik sebuah warna dan mengubahnya di mana-mana dalam blok, jadi Anda menyalinnya sudah dalam warna merek Anda.
Satu batasan jujur yang layak diulang: alat seperti ini menyalin dan mengorganisasi blok — ia ekstraktor, bukan perancang template dari nol, dan ia tak bisa mengambil artikel lewat URL (browser memblokir pengambilan lintas-situs halaman WeChat, jadi Anda menempel kontennya). Dalam batas itu, HTML inline adalah yang memungkinkan blok bergaya bertahan dalam perjalanan dari satu editor ke editor lain dengan desainnya utuh.
Setelah Anda melihat sebuah blok tertempel sempurna beberapa kali, keacakan sebelumnya jadi masuk akal: ia tak pernah acak. Ia selalu tentang apakah penataan bepergian di dalam blok.