เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ · HTML บรรณาธิการ WYSIWYG
สไตล์อินไลน์เทียบกับคลาส: การอ่าน HTML ที่ Visual Editor สร้างขึ้น
· มันทำงานอย่างไร
html ซีเอสเอส เป็นที่พอใจ
อธิบายว่าตัวเลือกการจัดรูปแบบภาพกลายเป็นแท็ก สไตล์อินไลน์หรือไม่มีอะไรเลย และวิธีการปรับผลลัพธ์นั้นให้เข้ากับไซต์ที่ขับเคลื่อนด้วยสไตล์ชีท
ข้อมูลโค้ดจะดูถูกต้องจนกว่าจะตรงตามสไตล์ชีตของคุณ — เปิดขึ้นพร้อมกับเอาต์พุตของตัวแก้ไขที่ขัดแย้งกับไซต์ CSS
แฟรกเมนต์สามารถดูถูกต้องในแอปพลิเคชันต้นทางเนื่องจากแอตทริบิวต์ style ของมันชนะในเครื่อง จากนั้นขัดแย้งกับธีมปลายทางหรือสูญเสียแอตทริบิวต์นั้นในระหว่างการเผยแพร่ ToolAcre เลือกที่จะไม่นำเสนอแบบอินไลน์ รายการที่อนุญาตจะลดสไตล์และคลาสลงทุกที่ โดยเหลือองค์ประกอบโครงสร้างและความหมายที่รองรับไว้สำหรับปลายทางที่ต้องการจัดสไตล์
นโยบายดังกล่าวทำให้การแสดงตัวอย่างมีเจตนาเรียบง่าย ส่วนหัว รายการ หรือวลีที่ชัดเจนยังคงสามารถจดจำได้ แต่สี แบบอักษร การเว้นวรรค และคลาสระบบการออกแบบที่คัดลอกไว้จะหายไป ตัวอย่างข้อมูลที่ล้างแล้วนั้นง่ายต่อการให้เหตุผล แม้ว่าจะไม่สามารถสร้างลักษณะหรือฟังก์ชันของแหล่งที่มาทั้งหมดเป็นองค์ประกอบที่มีสไตล์ในตัวเองได้ก็ตาม
Three representations exist generally; ตัวแก้ไขนี้เก็บแท็กความหมายและลบสไตล์และคลาส
HTML สามารถแสดงความหมายด้วยองค์ประกอบ การนำเสนอเฉพาะที่พร้อมแอตทริบิวต์สไตล์ หรือการนำเสนอที่นำมาใช้ซ้ำได้ด้วยชื่อคลาสที่ตีความโดยสไตล์ชีต These mechanisms are not interchangeable. องค์ประกอบที่แข็งแกร่งบ่งบอกถึงบางสิ่งเกี่ยวกับความสำคัญ a red style merely selects a color; คลาสหมายถึงเฉพาะสิ่งที่สไตล์ชีตกำหนดเท่านั้น
ตัวแก้ไขนี้จะเก็บชุดย่อยเชิงความหมายไว้และปฏิเสธช่องการนำเสนอทั้งสองช่อง แม้แต่คลาสที่ไม่เป็นอันตรายก็ยังไม่รู้จักในรายการที่อนุญาต เนื่องจากไซต์ที่รับ (ไม่ใช่ ToolAcre) เป็นเจ้าของคำจำกัดความของคลาส รายงานการลบจะตั้งชื่อแอตทริบิวต์ที่ถูกละทิ้ง เพื่อให้ผู้เขียนสามารถแยกแยะการล้างข้อมูลโดยเจตนาจากการเปลี่ยนแปลงภาพที่อธิบายไม่ได้
เหตุใดตัวแก้ไขนี้จึงปฏิเสธรูปแบบอินไลน์แทนที่จะคงการนำเสนอที่มีอยู่ในตัวเอง
ผู้แก้ไขจำนวนมากคงรูปแบบอินไลน์ไว้ เนื่องจากการประกาศเหล่านั้นเดินทางไปพร้อมกับส่วนที่ถูกวางโดยไม่ต้องใช้สไตล์ชีตภายนอก ToolAcre ทำการแลกเปลี่ยนที่ตรงกันข้าม: แอตทริบิวต์สไตล์กว้างพอที่จะสร้างการเรนเดอร์ที่คาดเดาไม่ได้และ URL มีพื้นผิว CSS ในขณะที่เครื่องมือร่างนี้ต้องการเพียงข้อความที่มีโครงสร้างเท่านั้น
การทดสอบรวมค่าสไตล์ที่มีรูปทรง JavaScript URL และพิสูจน์ว่าแอตทริบิวต์สไตล์ทั้งหมดหายไป นั่นเป็นหลักฐานสำหรับตัวกรองแบบแคบ ไม่ใช่การอ้างว่าทุกส่วนของข้อมูล CSS ที่เป็นไปได้ได้รับการจัดประเภทอย่างอิสระ การไม่แสดงรายการรูปแบบใดๆ เลยจะเป็นการหลีกเลี่ยงการบำรุงรักษาน้ำยาฆ่าเชื้อ CSS บางส่วนในโมดูลนี้
ตัวอย่างการทำงาน: รูปแบบที่แถบเครื่องมือนี้มีให้ใช้งานจริง
แถบเครื่องมือนำเสนอรายการตัวหนา ตัวเอียง สองประเภท การจัดรูปแบบที่ชัดเจน ตัวเลือกบล็อก ลิงก์ และการยกเลิกการเชื่อมโยง เอาต์พุตตัวหนาและตัวเอียงทำให้เป็นมาตรฐานไปทาง strong และ em ตัวเลือกบล็อกประกอบด้วยย่อหน้า h1 ถึง h4 blockquote และ pre ไม่มีตัวเลือกสี ตัวเลือกแบบอักษร การดำเนินการจัดตำแหน่ง หรือฟิลด์คลาส
ใช้การควบคุมเหล่านั้นกับย่อหน้าตัวอย่างและตรวจสอบแหล่งที่มา การเปรียบเทียบที่เป็นประโยชน์คือระหว่างความหมายที่ตั้งใจไว้และองค์ประกอบที่ปล่อยออกมา: เครื่องหมายคำพูดควรกลายเป็น blockquote การเว้นวรรคแบบโค้ดสามารถใช้คำนำหน้าได้ และส่วนหัวควรเป็นส่วนหัว อย่าอนุมานถึงการสนับสนุนขีดเส้นใต้ ตัวยก หรือแท็กอื่นๆ ที่อนุญาต เพียงเพราะโหมดแหล่งที่มาอาจยังรักษาแท็กเหล่านั้นไว้
การปรับเอาต์พุตหมายถึงการจัดสไตล์ที่ปลายทาง ไม่สามารถเขียนชั้นเรียนได้ที่นี่
การปรับเปลี่ยน CMS เริ่มต้นหลังจากการส่งออก เพิ่มคลาสปลายทางใน CMS ซึ่งเป็นเทมเพลตส่วนประกอบหรือการเปลี่ยนแปลงที่ได้รับการตรวจสอบแล้ว ซึ่งทราบคำจำกัดความ ToolAcre ไม่สามารถแปลการประกาศอินไลน์ที่ไม่รู้จักเป็นโทเค็นเฉพาะโครงการได้ และไม่สามารถตรวจสอบได้ว่ามีคลาสอยู่ในสไตล์ชีตการผลิตของคุณหรือไม่
เก็บแท็กความหมายไว้ในตำแหน่งที่ตรงกับเนื้อหา การลบโครงสร้างที่แข็งแกร่งหรือส่วนหัวออกเพียงเพื่อทำให้ทุกโหนดมีช่วงที่มีสไตล์จะทำให้ประโยชน์ของการล้างข้อมูลกลับคืน เลเยอร์ปลายทางควรตัดสินใจเกี่ยวกับลักษณะที่ปรากฏ ในขณะที่แบบร่างประกอบด้วยย่อหน้า ลำดับชั้น รายการ เครื่องหมายคำพูด รหัส และลิงก์ที่ยังคงมีความหมายโดยไม่มีธีม
สไตล์อินไลน์อาจเหมาะกับเวิร์กโฟลว์อื่นๆ แต่เครื่องมือนี้ไม่แสดงผลสไตล์อินไลน์
สไตล์อินไลน์อาจจำเป็นในระบบที่ไม่รักษาหรือโหลดสไตล์ชีทที่ใช้ร่วมกัน โดยเฉพาะอย่างยิ่งบางเส้นทางการผลิตอีเมล อย่างไรก็ตาม พื้นที่เก็บข้อมูลนี้ไม่มีตัวประมวลผลความเข้ากันได้กับอีเมล และไม่ปล่อยแอททริบิวต์สไตล์ ผู้เขียนจะต้องแปลฉบับร่างใหม่ผ่านเวิร์กโฟลว์ที่ทดสอบเฉพาะอีเมลในภายหลัง
การฝังแบบครั้งเดียวอาจมีข้อจำกัดที่คล้ายกัน แต่นั่นไม่ได้ขยายสัญญาของบรรณาธิการรายนี้ เอกสารที่ดาวน์โหลดประกอบด้วยสไตล์ชีทการแสดงตัวอย่างคงที่ซึ่งเขียนโดย ToolAcre เกี่ยวกับมาร์กอัปเนื้อหาที่ผ่านการฆ่าเชื้อ การคัดลอกแฟรกเมนต์ไม่ได้คัดลอก wrapper นั้นหรือ CSS ตรวจสอบสิ่งประดิษฐ์ที่แน่นอนที่ถูกส่งไปยังปลายทาง
สิ่งนี้ไม่ครอบคลุม — CSS การดีบักเฉพาะ โทเค็นการออกแบบ หรือเครื่องมือการแปลงอัตโนมัติ
บทความนี้ไม่ได้แก้ไขข้อบกพร่อง CSS ความจำเพาะ โทเค็นการออกแบบแผนที่ รูปแบบอินไลน์โดยอัตโนมัติ หรือรับประกันความเท่าเทียมกันของพิกเซล นอกจากนี้ยังหลีกเลี่ยงการบอกว่าแท็กความหมายบังคับให้มีการประกาศโปรแกรมอ่านหน้าจอหรือการจัดอันดับการค้นหา ความหมายปรับปรุงโครงสร้าง ในขณะที่การนำเสนอและการตีความที่แท้จริงยังคงขึ้นอยู่กับสภาพแวดล้อมที่ใช้งาน
การแสดงตัวอย่างแบบแซนด์บ็อกซ์เป็นพื้นผิวการตรวจสอบที่แสดงผล ไม่ใช่แบบจำลองของสไตล์ชีตที่ใช้งานอยู่ของคุณ มันถูกปักหมุดไว้กับธีมเอกสารแบบ light และไม่ให้สคริปต์ แบบฟอร์ม หรือการเข้าถึงจากแหล่งเดียวกัน การแสดงตัวอย่างที่ดูสะอาดตาไม่สามารถระบุได้ว่าส่วนย่อยเดียวกันนั้นปลอดภัยหรือมองเห็นได้ถูกต้องในทุกระบบสิ่งพิมพ์
ประเด็นสำคัญ: อ่านผลลัพธ์แล้วตัดสินใจ — สรุปตัวเลือกและวิธีแก้ไข HTML WYSIWYG ของ ToolAcre ให้คุณเห็นมาร์กอัปก่อนตัดสินใจว่าจะเก็บอะไรไว้
อ่านผลลัพธ์แล้วตัดสินใจที่ปลายทาง ToolAcre จงใจเปลี่ยนเนื้อหาที่จัดรูปแบบแล้วให้เป็นคำศัพท์เชิงความหมายที่มีขนาดเล็กลง บันทึกการลบออก และเปิดเผยแหล่งที่มาสำหรับการตรวจสอบ ขั้นตอนการทำงานดังกล่าวจะป้องกันไม่ให้การนำเสนอแบบอินไลน์โดยไม่ได้ตั้งใจกลายเป็นหนี้ทางเทคนิคที่มองไม่เห็น ในขณะเดียวกันก็ยอมรับว่าความถูกต้องของภาพอาจลดลง
ทดสอบด้วยเนื้อหาที่เป็นตัวแทน แทนที่จะทดสอบทั้งแคมเปญที่ไม่ได้เผยแพร่ ยืนยันหัวข้อ รายการ การเน้น และลิงก์ จากนั้นใช้คลาสที่ได้รับอนุมัติซึ่งเนื้อหาจะเผยแพร่ หากจำเป็นต้องมีการถ่ายโอนพิกเซลเหมือนกัน นโยบายการไม่มีสไตล์ของเครื่องมือนี้จะไม่ตรงกัน ไม่ใช่คุณลักษณะที่ซ่อนอยู่ที่รอการเปิดใช้งาน