เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ · HTML บรรณาธิการ WYSIWYG
เหตุใด 'สิ่งที่คุณเห็น' จึงไม่ใช่ 'สิ่งที่คุณได้รับ' ใน HTML
· พื้นหลัง
html ซีเอสเอส เป็นที่พอใจ
อธิบายเหตุผลเชิงโครงสร้างที่ WYSIWYG สามารถประมาณผลลัพธ์สุดท้ายบนเว็บเท่านั้น เนื่องจาก HTML อธิบายโครงสร้างในขณะที่ CSS อุปกรณ์และไคลเอนต์ตัดสินใจเกี่ยวกับรูปลักษณ์ และแนวคิด WYSIWYM ที่งอกออกมาจากโครงสร้างนั้น
สมบูรณ์แบบในตัวแก้ไข ผิดในหน้า — เปิดขึ้นด้วยความไม่ตรงกันที่คุ้นเคย
ข้อความแจ้งอาจดูสมดุลภายใน ToolAcre และหนาแน่นหลังจากเข้าสู่ไซต์ เนื่องจากองค์ประกอบเดียวกันนั้นตรงกับสไตล์ชีตที่แตกต่างกัน iframe ในเครื่องคือเอกสารที่มีแบบอักษร ความสูงของบรรทัด ระยะห่างจากขอบ และรูปแบบสีอ่อนของตัวเอง เป็นมุมมองการตรวจสอบ ไม่ใช่ภาพหน้าจอของทุกจุดหมายปลายทาง
WYSIWYG จึงมีความหมายที่มีขอบเขตบนเว็บ ตัวแก้ไขสามารถแสดงบริบทการเรนเดอร์ปัจจุบันได้อย่างถูกต้อง แต่ "สิ่งที่คุณได้รับ" ในภายหลังจะรวมโฮสต์ CSS ความกว้างของคอนเทนเนอร์ การตั้งค่าเบราว์เซอร์ และการแปลงเนื้อหาที่ไม่มีอยู่ในระหว่างการร่าง
HTML อธิบายโครงสร้าง ไม่ใช่รูปลักษณ์ — อธิบายว่ามาร์กอัปเดียวกันแสดงผลแตกต่างกันภายใต้สไตล์ชีตที่ต่างกัน
HTML บันทึกโครงสร้างและความสัมพันธ์เป็นหลัก: ส่วนหัว ย่อหน้า รายการ ใบเสนอราคา การเน้น รหัส และลิงก์ ลักษณะที่ปรากฏเกิดขึ้นเมื่อค่าเริ่มต้นของตัวแทนผู้ใช้และสไตล์ผู้เขียนตีความองค์ประกอบเหล่านั้น ToolAcre ลบสไตล์อินไลน์และแอตทริบิวต์คลาส เสริมการแยกส่วนนั้นในส่วนที่คัดลอก
h2 เดียวกันอาจมีขนาดใหญ่ในหน้าเริ่มต้น กะทัดรัดในการ์ดแอปพลิเคชัน และจัดรูปแบบใหม่ในการพิมพ์ บทบาทของมันยังคงเป็นหัวข้อแม้ว่ามิติจะเปลี่ยนไปก็ตาม ผู้เขียนควรตัดสินว่าโครงสร้างถูกต้องหรือไม่ ก่อนที่จะตัดสินใจว่าตัวอย่างหนึ่งมีตัวพิมพ์ที่ต้องการหรือไม่
สไตล์ชีทของ User Agent และ Cascade — ครอบคลุมสไตล์เบราว์เซอร์เริ่มต้นและวิธีที่ไซต์ CSS แทนที่สิ่งที่แสดงตัวอย่างในโปรแกรมแก้ไข
เบราว์เซอร์เริ่มต้นด้วยกฎตัวแทนผู้ใช้สำหรับองค์ประกอบ จากนั้นจึงใช้สไตล์ของหน้าและการตั้งค่าของผู้ใช้ผ่านการเรียงซ้อน เอกสารแสดงตัวอย่างของ ToolAcre เพิ่มสไตล์ชีตขนาดเล็กของตัวเอง จะไม่นำเข้าโทเค็นการออกแบบของไซต์โฮสต์หรือธีม CMS ในอนาคต
เมื่อมาร์กอัปที่คัดลอกเข้าสู่หน้าอื่น ระยะขอบ p การเยื้องรายการ สีลิงก์ และขนาดส่วนหัวสามารถเปลี่ยนแปลงได้ทั้งหมด วิธีแก้ไขคือไม่ต้องอบสไตล์การแสดงตัวอย่างชั่วคราวลงในแฟรกเมนต์ เนื่องจากตัวแก้ไขนี้จะดึงสไตล์เหล่านั้นออกอยู่ดี ใช้การนำเสนอที่ผ่านการตรวจสอบแล้วในปลายทางและทดสอบที่นั่น
อุปกรณ์ โหมดมืด และไคลเอนต์อีเมล — อธิบายบริบทการเรนเดอร์จำนวนมากที่ตัวอย่างข้อมูลจะพบ
อุปกรณ์ปรับเปลี่ยนความกว้าง การวัดแบบอักษร และการซูมของผู้ใช้ ธีมในโหมดมืดสามารถเปลี่ยนสีได้ ในขณะที่ ToolAcre จงใจปักหมุดภาพตัวอย่างไว้ที่เอกสารแบบสว่าง โปรแกรมรับส่งอีเมลกำหนดข้อจำกัด HTML และ CSS อีกชุดหนึ่ง ซึ่งหน้านี้ไม่ได้จำลองหรือตรวจสอบความถูกต้อง
ไม่มีแหล่งเก็บข้อมูลใดที่จัดเตรียมเมทริกซ์ความเข้ากันได้ของเบราว์เซอร์หรือไคลเอนต์เมล ดังนั้นบทความนี้จึงตั้งชื่อมิติในเชิงคุณภาพมากกว่าที่จะมีแนวโน้มการทำงานแบบสากล การอ้างสิทธิ์แบบตอบสนองและทางอีเมลจำเป็นต้องมีการทดสอบในสภาพแวดล้อมการสนับสนุนจริง iframe แบบแซนด์บ็อกซ์หนึ่งรายการไม่สามารถยืนหยัดเพื่อหลักฐานดังกล่าวได้
WYSIWYM: สิ่งที่คุณเห็นคือสิ่งที่คุณหมายถึง - แนะนำปรัชญาการแก้ไขโครงสร้างซึ่งเป็นที่นิยมโดยเครื่องมือเช่น LyX
กรอบความคิดในการแก้ไขโครงสร้างจะถามว่าเนื้อหาหมายถึงอะไร มากกว่าที่จะถามว่าพื้นผิวในการร่างนั้นคล้ายกับจุดสิ้นสุดทุกประการหรือไม่ ระดับหัวเรื่องแสดงลำดับชั้น รายการแสดงการจัดกลุ่ม ระดับชัดเจนแสดงความสำคัญ และลิงก์แสดงจุดหมายปลายทาง CSS จากนั้นจะสื่อสารความหมายเหล่านั้นด้วยภาพสำหรับบริบท
สมุดงานเรียกสิ่งนี้ว่า WYSIWYM และตั้งชื่อ LyX แต่ไม่มีแหล่งที่มาในอดีตอยู่ที่นี่ แนวคิดนี้สามารถอธิบายได้โดยไม่ต้องกำหนดที่มาหรือพฤติกรรมของผลิตภัณฑ์: เจตนาเชิงความหมายของผู้เขียนก่อน จากนั้นจึงแสดงตัวอย่างและปรับการนำเสนอในตำแหน่งที่เนื้อหาจะปรากฏจริง
ตัวอย่างการทำงาน: หนึ่งตัวอย่างในสามบริบท — แสดงมาร์กอัปเดียวกันภายใต้สไตล์ชีตเริ่มต้น ธีมของไซต์ และตัวอย่างอีเมล
สร้างหนึ่งส่วนด้วย h2, p, strong, ul และลิงก์สาธารณะ เปิดเอกสารที่ดาวน์โหลดเพื่อดู light wrapper ของ ToolAcre วางส่วนที่คัดลอกไว้ในหน้าทดสอบที่มีธีม และวางสำเนาที่ดัดแปลงแล้วในตัวอย่างอีเมลที่ได้รับอนุมัติ รักษาถ้อยคำให้เหมือนกัน
มุมมองทั้งสามมีแนวโน้มที่จะแตกต่างกันเนื่องจากสไตล์และกฎไคลเอนต์แตกต่างกัน ในขณะที่โครงสร้างต้นทางยังคงสามารถเปรียบเทียบกันได้ หากอีเมลต้องใช้ตารางหรือการนำเสนอแบบอินไลน์ นั่นเป็นการแปลแยกต่างหาก ToolAcre ลบทั้งตารางและสไตล์ แทนที่จะแสร้งทำเป็นว่าตัวอย่างเบราว์เซอร์ได้ตรวจสอบความถูกต้องของกล่องจดหมายแล้ว
สิ่งนี้ไม่ครอบคลุมถึง — CSS การดีบักหรือการกำหนดค่าตัวแก้ไขเพื่อโหลดสไตล์ของไซต์
บทความนี้ไม่ได้แก้ไขข้อบกพร่องเฉพาะของ CSS กำหนดค่าตัวแก้ไขด้วยสไตล์ของไซต์ หรือรับรองมาร์กอัปอีเมล นอกจากนี้ยังไม่ได้อ้างว่าเอาต์พุตที่คัดลอกนั้นปลอดภัยสำหรับสิ่งพิมพ์ที่ไม่น่าเชื่อถือตามอำเภอใจ โปรแกรมฆ่าเชื้อเป็นรายการที่อนุญาตของโปรแกรมแก้ไขแบบแคบซึ่งมีเอกสารระบุความเสี่ยงจากความแตกต่างของโปรแกรมแยกวิเคราะห์
แซนด์บ็อกซ์แสดงตัวอย่างจะหยุดสคริปต์ แบบฟอร์ม และการเข้าถึงจากแหล่งเดียวกันภายใน ToolAcre คัดลอก HTML ออกจากแซนด์บ็อกซ์นั้นแล้ว ใช้การสุขาภิบาลฝั่งปลายทาง CSP ตามความเหมาะสม การทดสอบแบบตอบสนองและการตรวจสอบการเข้าถึง ความไม่ตรงกันของภาพและความปลอดภัยเป็นปัญหาที่แยกจากกัน แม้ว่าทั้งสองอย่างจะมองเห็นได้หลังจากการตีพิมพ์ก็ตาม
ประเด็นสำคัญ: แก้ไขความหมาย ตรวจสอบมาร์กอัป — สรุปแนวทางและวิธีที่โปรแกรมแก้ไข HTML WYSIWYG ของ ToolAcre ช่วยให้คุณมุ่งเน้นไปที่มาร์กอัปที่คุณส่งมอบจริง ๆ ได้อย่างไร
แก้ไขความหมายและตรวจสอบมาร์กอัปก่อนที่จะไล่ตามความเท่าเทียมกันของภาพ ToolAcre ทำให้ส่วนความหมายและการเรนเดอร์เฉพาะที่พร้อมใช้งานเคียงข้างกัน ซึ่งช่วยระบุว่าความไม่ตรงกันนั้นมาจากโครงสร้างหรือจากการนำเสนอปลายทาง
จากนั้นย้ายส่วนที่ตรวจสอบแล้วไปยังบริบทที่เป็นตัวแทนและวัดผลลัพธ์ที่นั่น ขั้นตอนการทำงานที่ดีคาดหวังความแตกต่าง บันทึกการปรับเปลี่ยนโดยเจตนา และหลีกเลี่ยงการอ้างว่ามุมมองเอดิเตอร์เดียวคาดการณ์ทุกเบราว์เซอร์ อุปกรณ์ ธีม หรือกล่องจดหมาย