ไทย

เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ · HTML บรรณาธิการ WYSIWYG

  ที่หลงทางและย่อหน้าว่าง: นิสัยการมาร์กอัปขนาดเล็กที่ทำลายเลย์เอาต์

· เหตุใดจึงสำคัญ

html การล้างข้อความ เป็นที่พอใจ

ช่องว่างที่ไม่ทำลายและบล็อกว่างถูกเน้นไว้ในคอลัมน์เคลื่อนที่แคบๆ
ภาพประกอบเวกเตอร์ต้นฉบับ ToolAcre

แสดงให้เห็นว่าการเว้นวรรคสองเท่า การป้อนสำหรับการเว้นวรรค และตัวแบ่งต่อท้ายกลายเป็นเอนทิตี   และบล็อกว่างที่ทำงานผิดปกติบนหน้าจอแคบ และวิธีสังเกตบล็อกเหล่านั้นในมาร์กอัป

บรรทัดที่ไม่ตัดบนมือถือ — เปิดขึ้นโดยมีส่วนหัวที่ยึดติดกันด้วยช่องว่างที่ไม่แยก

ส่วนหัวที่ต่อเข้ากับช่องว่างที่ไม่แตกหักอาจปฏิเสธที่จะห่อไว้ในการ์ดแคบๆ ดันคอนเทนเนอร์ให้กว้างขึ้น หรือทำให้เกิดการล้นอย่างอึดอัด อักขระดูเหมือนช่องว่างธรรมดาในโปรแกรมแก้ไขภาพ ดังนั้นการตรวจสอบแหล่งที่มาหรือเครื่องมือ Code-Point-Aware จึงอาจจำเป็นในการระบุสาเหตุ

ToolAcre ทำให้เอนทิตีเป็นมาตรฐานผ่านตัวถอดรหัสในเครื่องและเส้นทางการหลบหนี แต่ไม่มีคำสั่งสำหรับการค้นหาหรือลบช่องว่างที่ไม่แยก การฆ่าเชื้อแฟรกเมนต์ไม่ใช่การซ่อมแซมเลย์เอาต์แบบตอบสนอง ผู้เขียนต้องตรวจสอบลักษณะการทำงานของข้อความและปลายทาง แทนที่จะคาดหวังว่ารายการที่อนุญาตจะเปลี่ยนอักขระเว้นวรรคที่ถูกต้อง

ช่องว่างที่ไม่แยกอาจเข้าสู่เนื้อหาได้อย่างไร โปรแกรมแก้ไขนี้ไม่ได้กำหนดกฎการแทรกพิเศษ

ช่องว่างที่ไม่แยกสามารถมาจากเอกสารที่วาง เอนทิตีโดยเจตนา หรือแอปพลิเคชันที่รักษาระยะห่างของภาพต่อเนื่องกัน พื้นที่เก็บข้อมูลไม่ได้พิสูจน์ว่า ToolAcre แปลงช่องว่างที่พิมพ์สองช่องให้เป็นพื้นที่ไม่แยก ดังนั้นบทความนี้จึงไม่ได้กำหนดลักษณะการทำงานดังกล่าวให้กับโฮสต์ที่แก้ไขเนื้อหาได้

เมื่อตัวถอดรหัสเอนทิตีทราบการอ้างอิงที่มีชื่อที่วางแล้ว โปรแกรมฆ่าเชื้อจะแก้ไขก่อนที่จะส่งข้อความอีกครั้ง การสะกดอย่างเป็นทางการอาจเปลี่ยนแปลงในขณะที่อักขระที่อยู่ข้างใต้ยังคงอยู่ การอ้างอิงที่มีชื่อที่ไม่รู้จักใน URL จะถูกปฏิเสธเนื่องจากเบราว์เซอร์อาจเข้าใจเอนทิตีมากกว่าตารางที่เล็กกว่านี้

ย่อหน้าว่างเป็นการเว้นวรรค — อธิบาย <p>&nbsp;</p> และส่วนท้าย <br> ใช้เพื่อดันเนื้อหาลง

ย่อหน้าว่างและองค์ประกอบ br ต่อท้าย มักใช้เป็นตัวเว้นวรรค ยังคงเป็นโหนดเนื้อหาที่มีความสูงที่ชัดเจนขึ้นอยู่กับปลายทาง CSS ToolAcre ยอมรับ p และ br ดังนั้นบล็อกที่อนุญาตที่ว่างเปล่าหรือการแบ่งที่ไม่จำเป็นจะไม่ถูกปฏิเสธโดยอัตโนมัติว่าไม่ปลอดภัย

การกด Enter ซ้ำๆ จะสร้าง DOM ที่ขึ้นอยู่กับเบราว์เซอร์ ซึ่งจะจำกัดขอบเขตผ่านโปรแกรมฆ่าเชื้อในภายหลัง เนื่องจากแผงควบคุมไม่ได้กำหนดค่าตัวคั่นหรือลักษณะการทำงานของคีย์ที่สัญญาไว้ ให้ตรวจสอบเอาต์พุต ลบโครงสร้างเปล่าที่ไม่มีความหมาย จากนั้นใช้ระยะขอบของสไตล์ชีตและเค้าโครงดั้งเดิมในปลายทาง

เหตุใดรูปแบบที่ตอบสนองเหล่านี้จึงพัง — ครอบคลุมถึงพฤติกรรมที่ไม่ห่อหุ้ม ช่องว่างระหว่างอุปกรณ์ที่ไม่สอดคล้องกัน และระยะขอบที่ซ้อนกัน

ช่องว่างที่ไม่แยกจะป้องกันไม่ให้มีการแบ่งบรรทัดที่ตำแหน่ง คำหลายคำที่เชื่อมโยงกันสามารถเก็บวลีไว้ด้วยกันเกินความกว้างที่มีอยู่ บล็อกว่างจะเพิ่มระยะขอบหรือกล่องบรรทัดตามสไตล์ ดังนั้นช่องว่างที่ดูเหมือนถูกต้องในการดูตัวอย่างหนึ่งอาจเพิ่มเป็นสองเท่าหรือหายไปที่อื่นได้

เอฟเฟกต์เหล่านี้ขึ้นอยู่กับบริบท แซนด์บ็อกซ์ใช้เอกสาร light CSS ของตัวเอง และไม่สามารถสร้างการ์ด CMS หรือไคลเอนต์อีเมลบนมือถือได้ ทดสอบเงื่อนไขความกว้าง แบบอักษร และสไตล์ชีตตามจริง การตรวจสอบแหล่งที่มาระบุผู้ต้องสงสัย มันไม่ได้แทนที่การทดสอบการเรนเดอร์ในสภาพแวดล้อมเป้าหมาย

ตัวอย่างการทำงาน: ตรวจสอบตัวอย่างโดยไม่อ้างสิทธิ์สิ่งประดิษฐ์ที่สร้างขึ้นในจำนวนคงที่

สร้างส่วนหัวตัวอย่างโดยเว้นวรรคโดยไม่แยก ตามด้วย p ว่างและย่อหน้าที่ลงท้ายด้วยองค์ประกอบ br สองรายการ ดูที่ความกว้างแคบในปลายทางหรือเครื่องมือเบราว์เซอร์ จากนั้นตรวจสอบแหล่งที่มา ToolAcre เพื่อค้นหาอักขระและโหนดแต่ละตัว

ลบเฉพาะสิ่งประดิษฐ์ที่ไม่มีวัตถุประสงค์ทางความหมาย ที่อยู่อาจใช้ br อย่างถูกต้องตามกฎหมาย และช่องว่างที่ไม่แบ่งสามารถผูกตัวเลขเข้ากับหน่วยได้อย่างถูกต้องภายใต้แนวทางสไตล์ คำถามในการทบทวนคือบล็อกที่ไม่ต้องตัดคำหรือบล็อกว่างแสดงความหมายหรือเพียงชดเชยเลย์เอาต์ชั่วคราวเพียงเลย์เอาต์เดียวเท่านั้น

แก้ไขที่ต้นทาง ไม่ใช่ด้วยการแฮ็ก CSS — อธิบายการลบนิสัยแทนที่จะจัดสไตล์รอบๆ

แก้ไขเนื้อหาที่แหล่งที่มาแทนที่จะเพิ่มตัวเลือก CSS เฉพาะเจาะจงมากขึ้นสำหรับบล็อกว่าง ลบย่อหน้าที่ใช้ตัวเว้นวรรคโดยไม่ตั้งใจ แทนที่การเว้นวรรคซ้ำเพื่อตกแต่งด้วยข้อความปกติ และปล่อยให้องค์ประกอบของหน้าควบคุมจังหวะ สิ่งนี้จะสร้างพฤติกรรมที่สะอาดยิ่งขึ้นในความกว้างและธีม

อย่าใช้กฎสากลที่ซ่อนทุกย่อหน้าว่างโดยไม่ตรวจสอบระบบบรรณาธิการ เวิร์กโฟลว์บางอย่างอาจขึ้นอยู่กับสิ่งเหล่านี้ แม้ว่าควรย้ายการพึ่งพานั้นก็ตาม การแก้ไขเฉพาะที่บวกกับแผนการย้ายที่วัดได้จะปลอดภัยกว่าแพตช์ CSS ที่ปกปิดเนื้อหาที่เก็บไว้ที่ไม่รู้จัก

สิ่งนี้ไม่ครอบคลุม — CSS ระบบระยะห่างหรือการล้างข้อมูลจำนวนมากทั่วทั้งไซต์

บทความนี้ไม่ได้กำหนดระบบระยะห่างของไซต์ การล้างฐานข้อมูลจำนวนมาก หรือกฎการพิมพ์สากล ไม่ได้สัญญาว่าเอนทิตีใดที่ตัวถอดรหัสในเครื่องรับรู้นอกเหนือจากกรณีที่ทดสอบ และหลีกเลี่ยงการระบุว่าช่องว่างคู่ที่มองเห็นทั้งหมดมาจากแอปพลิเคชันเดียว

นอกจากนี้ยังไม่ถือเอาแหล่งที่มาที่สะอาดกับ HTML ที่เป็นศัตรูที่ปลอดภัย แซนด์บ็อกซ์แสดงตัวอย่างของ ToolAcre และรายการที่อนุญาตแบบแคบมีขอบเขตที่ชัดเจน การเผยแพร่เซิร์ฟเวอร์ยังคงต้องมีการสุขาภิบาลที่เหมาะสม ในขณะที่ความถูกต้องในการตอบสนองจำเป็นต้องมีการเรนเดอร์ปลายทางและการตรวจสอบการเข้าถึง

ประเด็นสำคัญ: อ่านมาร์กอัปหนึ่งครั้งต่อฉบับร่าง — สรุปรายการตรวจสอบและวิธีที่ตัวแก้ไข HTML WYSIWYG ของ ToolAcre ทำให้มองเห็นเอนทิตีและบล็อกว่างได้อย่างไร

อ่านมาร์กอัปหนึ่งครั้งต่อฉบับร่าง โดยเฉพาะหลังจาก Rich Paste และกด Enter ซ้ำๆ มองหาอักขระที่ไม่ตัดคำ บล็อกว่าง และตัวแบ่งต่อท้าย จากนั้นตัดสินใจว่าแต่ละรายการมีความหมายหรือไม่ อาร์ติแฟกต์ขนาดเล็กจะมีราคาแพงเมื่อคูณในไฟล์เก็บถาวรและหลายธีม

ToolAcre ทำให้มองเห็นโครงสร้างที่ยอมรับได้และสามารถเขียนสัมภาระที่ไม่รองรับใหม่ได้ แต่การเว้นวรรคที่ถูกต้องยังคงเป็นความรับผิดชอบของบรรณาธิการ จงลบออกโดยเจตนา รักษาการหยุดพักที่ถูกต้อง และทดสอบช่องสุดท้าย แหล่งที่มาที่สะอาดและความยืดหยุ่น CSS ทำงานร่วมกัน และไม่สามารถอนุมานสิ่งอื่นได้โดยอัตโนมัติ