แปลง CSS เป็น inline ออนไลน์
แปลง CSS ในแท็ก style เป็น inline style อัตโนมัติ รองรับ HTML และ CSS เพิ่มเติม ทำงานในเบ…
เริ่มใช้งาน
คุณสมบัติและข้อจำกัด
เครื่องมือนี้ช่วยแก้ปัญหาเมื่อคุณต้องการส่งอีเมลหรือโค้ดที่ต้องใช้ inline style โดยไม่ต้องเขียน inline style ด้วยมือทุกครั้ง ตัวอย่างเช่น หากคุณมี HTML ต่อไปนี้:
<style>p{color:red}</style><p>Hello</p>หลังแปลง องค์ประกอบ <p> จะได้รับ inline style color: red และถ้าเลือกนำแท็ก style ออก แท็ก <style> จะถูกลบออก ผลลัพธ์จะถูกจัดรูปแบบเป็นเอกสาร HTML ที่สมบูรณ์โดยขึ้นต้นด้วย doctype
การทำงาน
เบราว์เซอร์จะแยกวิเคราะห์ HTML เป็นเอกสาร จากนั้นรวมข้อความจากแท็ก style ทั้งหมดเข้ากับ CSS เพิ่มเติม (ถ้ามี) จากนั้นค้นหาบล็อก selector แบบง่ายด้วยรูปแบบปีกกา และนำ declaration ที่ตรงกันไปใช้กับ inline style ของแต่ละองค์ประกอบ ตัวเลือก "นำแท็ก style ออก" จะลบแท็ก style ทั้งหมดหลังแปลง
ข้อจำกัด
- ไม่รองรับ CSS cascade เต็มรูปแบบ, specificity, media queries, keyframes, pseudo-elements, CSS แบบซ้อน, external stylesheet หรือ computed styles
- เบราว์เซอร์อาจปรับ HTML ให้เป็นมาตรฐานระหว่างการแยกวิเคราะห์
- selector ที่ไม่ถูกต้องจะถูกข้ามไป
- การแปลงทำงานในเครื่องและไม่โหลดทรัพยากรภายนอก
คำถามที่พบบ่อย
1. เครื่องมือนี้รองรับ media queries หรือ pseudo-elements หรือไม่?
ไม่รองรับ การแปลงเป็นแบบง่ายและไม่ครอบคลุมคุณสมบัติ CSS ขั้นสูงเหล่านี้
2. จะเกิดอะไรขึ้นถ้าใส่ HTML ที่มีแท็ก style หลายแท็ก?
ข้อความจากแท็ก style ทั้งหมดจะถูกนำมารวมกันก่อน แล้วจึงนำไปใช้กับองค์ประกอบ
3. ผลลัพธ์ที่ได้เป็นเอกสารที่สมบูรณ์หรือไม่?
ถ้าเลือกนำแท็ก style ออก ผลลัพธ์จะถูกจัดรูปแบบเป็นเอกสารที่สมบูรณ์โดยขึ้นต้นด้วย doctype
รายการตรวจสอบก่อนใช้งาน
- ตรวจสอบว่า HTML ของคุณมีแท็ก style หรือ CSS ที่ต้องการแปลง
- ตรวจสอบ selector ที่ใช้เป็นแบบง่าย (เช่น p, .class, #id)
- ตรวจสอบผลลัพธ์ในโปรแกรมรับอีเมลหรือเบราว์เซอร์เป้าหมาย เนื่องจากเครื่องมือนี้ไม่รับประกันว่าการแสดงผลจะเหมือนเดิมทุกประการ
การประมวลผลเกิดขึ้นภายในเบราว์เซอร์ของคุณ