คุณอาจเคยเจอเรื่องนี้ คุณคัดลอกบล็อกที่จัดสไตล์สวย ๆ การ์ดหัวเรื่อง กล่องเน้นสีแล้ววางลงในโปรแกรมแก้ WeChat หรือ CMS บางครั้งมันมาถึงดูถูกต้องเป๊ะ บางครั้งมันลงมาเป็นข้อความเปล่า ๆ ที่ดีไซน์ถูกลอกออกหมด การกระทำเดียวกัน ผลลัพธ์ต่างกัน และมันรู้สึกเหมือนสุ่ม มันไม่ใช่ ความต่างคือคุณคัดลอก inline HTML หรือไม่
การเข้าใจแนวคิดเดียวนี้ทำให้การวางเนื้อหาที่จัดสไตล์คาดเดาได้แทนที่จะเป็นการเสี่ยงดวง
inline HTML คืออะไรจริง ๆ
การจัดสไตล์เว็บอยู่ได้สองที่ ในเว็บไซต์ปกติ การจัดสไตล์อยู่ในสไตล์ชีตแยกต่างหาก และ HTML แค่อ้างอิงมันด้วยชื่อคลาส: <div class="title-card"> div นั้นไร้ความหมายในตัวเองดีไซน์อยู่ในไฟล์ CSS ที่อื่น
inline HTML วางการจัดสไตล์ ภายใน ตัวองค์ประกอบเอง: <div style="background:#2b6cb0; color:#fff; padding:16px; border-radius:8px"> ทุกอย่างที่ต้องใช้เรนเดอร์บล็อกเดินทางไปกับบล็อก ไม่มีไฟล์ภายนอกให้พึ่งพา
ความแตกต่างนั้นคือเรื่องราวทั้งหมดว่าทำไมการวางบางครั้งคงดีไซน์และบางครั้งไม่คง เมื่อคุณวางลงในโปรแกรมแก้ โปรแกรมแก้ไม่ได้รับสไตล์ชีตของเว็บต้นทาง ถ้าดีไซน์อยู่ในสไตล์ชีตนั้น มันก็หายไปคุณได้โครงสร้างเปล่า ๆ คือข้อความที่ดูธรรมดา ถ้าดีไซน์เป็น inline มันก็มาด้วย และบล็อกก็เรนเดอร์ถูกต้อง
ทำไม WeChat และโปรแกรมแก้แบบ rich ต้องการมัน
โปรแกรมแก้ของ WeChat เข้มงวด มันลบสไตล์ชีตภายนอกและกรองการจัดสไตล์เยอะ บล็อกที่พึ่งคลาสที่นิยามไว้ที่อื่นไม่มีอะไรให้ถอยกลับไปเมื่ออยู่ใน WeChat โปรแกรมแก้ rich-text และช่องวางของ CMS หลายตัวทำงานแบบเดียวกันมันทำความสะอาดสิ่งที่คุณวางและเก็บเฉพาะแอตทริบิวต์ inline
ดังนั้นวิธีที่เชื่อถือได้ในการย้ายบล็อกที่จัดสไตล์เข้าโปรแกรมแก้เหล่านี้คือคัดลอกมันเป็น inline HTML ที่การจัดสไตล์อยู่ในตัวเอง แล้วแม้แต่โปรแกรมแก้ที่เข้มงวดก็มีทุกอย่างที่ต้องใช้เพื่อแสดงบล็อกตามที่ออกแบบ
การคัดลอกบล็อก "พร้อมการจัดรูปแบบ" ทำงานอย่างไร
เบราว์เซอร์สมัยใหม่มี Clipboard API ที่วางเนื้อหา richHTML พร้อมการจัดรูปแบบลงคลิปบอร์ดได้ ไม่ใช่แค่ข้อความธรรมดา เมื่อเครื่องมือคัดลอกบล็อก "เป็น inline HTML" มันใช้ API นั้นวางมาร์กอัปที่อยู่ในตัวเองของบล็อกลงคลิปบอร์ดของคุณ จากนั้นคุณวาง (Ctrl/Cmd+V) ลงในโปรแกรมแก้ และเพราะการจัดสไตล์เป็น inline และคลิปบอร์ดแบก HTML บล็อกจึงปรากฏพร้อมสไตล์
สองสิ่งต้องเป็นจริงเพื่อให้อันนี้ได้ผล:
- มาร์กอัปต้องจัดสไตล์แบบ inline จึงไม่ต้องมีไฟล์ภายนอก
- คลิปบอร์ดต้องแบกมันเป็น HTML ไม่ใช่การทิ้งเป็นข้อความธรรมดาของวงเล็บมุม
ทำถูกทั้งสองแล้วการวาง "ก็แค่ทำงาน" พลาดอย่างใดอย่างหนึ่งแล้วคุณได้ข้อความธรรมดาหรือกำแพงโค้ดที่มองเห็น
ทำมันโดยไม่ต้องแก้โค้ดด้วยมือ
ในหลักการ คุณสามารถเอาบล็อกที่จัดสไตล์แล้วทำทุกสไตล์ให้เป็น inline ด้วยมือย้ายกฎของแต่ละคลาสเข้าไปในแอตทริบิวต์ style="" บนแต่ละองค์ประกอบ สำหรับอะไรที่เกินบล็อกเล็ก ๆ นั่นน่าเบื่อและเกิดข้อผิดพลาดง่าย โดยเฉพาะกับการ์ด SVG ที่การจัดสไตล์กระจายไปหลายโหนด
เครื่องมือที่จัดการอันนี้ง่ายกว่า เครื่องมือแยกโมดูลเลย์เอาต์ ของ IMG.DIY แยกบล็อกที่จัดสไตล์จากเนื้อหา WeChat ที่วางเข้ามาและให้แต่ละอันมีปุ่มคัดลอกที่วางมันลงคลิปบอร์ดของคุณเป็น inline HTML ผ่าน Clipboard API คุณคลิกคัดลอก สลับไปโปรแกรมแก้ WeChat (หรือ CMS ของคุณ หรือช่อง rich-text) วาง แล้วบล็อกก็คงการจัดรูปแบบไว้ ไม่ต้องทำ inline ด้วยมือ ไม่ต้องแก้มาร์กอัปที่พัง
เช็กลิสต์การวางด่วน
เมื่อการวางที่จัดสไตล์ผิดพลาด ให้ไล่ตามนี้:
- คุณคัดลอก inline HTML หรือภาพหน้าจอ/ข้อความธรรมดา? เฉพาะ inline HTML เท่านั้นที่วางเป็นบล็อกที่จัดสไตล์และทำงานได้
- วางลงในเนื้อหาปกติของโปรแกรมแก้ ไม่ใช่โหมด "โค้ดต้นทาง" หรือ "ข้อความธรรมดา" ซึ่งอาจลอกหรือ escape มาร์กอัป
- ตรวจบล็อกในตัวอย่าง ตัวอย่างของ WeChat เองแสดงว่าบล็อกจะเรนเดอร์บนมือถือจริงอย่างไรยืนยันที่นั่นก่อนเผยแพร่
- ถ้าสีดูผิด ให้เปลี่ยนสีก่อนคัดลอก ในเครื่องมือแยก คุณคลิกสีและเปลี่ยนมันทั่วทั้งบล็อกได้ คุณจึงคัดลอกมันในสีแบรนด์ของคุณเรียบร้อยแล้ว
ขีดจำกัดที่ตรงไปตรงมาข้อหนึ่งที่ควรย้ำ: เครื่องมือแบบนี้คัดลอกและจัดระเบียบบล็อกมันคือตัวแยก ไม่ใช่ตัวออกแบบเทมเพลตตั้งแต่ต้น และมันดึงบทความด้วย URL ไม่ได้ (เบราว์เซอร์บล็อกการดึงข้ามไซต์ของหน้า WeChat คุณจึงวางเนื้อหาเข้าไป) ในขอบเขตนั้น inline HTML คือสิ่งที่ทำให้บล็อกที่จัดสไตล์อยู่รอดการเดินทางจากโปรแกรมแก้หนึ่งไปอีกอันโดยดีไซน์ยังครบ
เมื่อคุณเห็นบล็อกวางเข้ามาสมบูรณ์ไม่กี่ครั้ง ความสุ่มก่อนหน้านี้ก็เข้าใจได้: มันไม่เคยสุ่ม มันเป็นเรื่องว่าการจัดสไตล์เดินทางอยู่ภายในบล็อกหรือไม่เสมอ