ทำไม CSS ถึงทำงานกับองค์ประกอบปลอมได้?

438

ในชั้นเรียนของฉันฉันเล่นรอบและพบว่า CSS ทำงานร่วมกับองค์ประกอบที่ทำขึ้น

ตัวอย่าง:

imsocool {
    color:blue;
}

<imsocool>HELLO</imsocool>

ขยายตัวอย่างข้อมูล

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

ทำไมอาจารย์ของฉันไม่ต้องการให้ฉันใช้องค์ประกอบที่ทำขึ้น? พวกเขาทำงานอย่างมีประสิทธิภาพ

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

html css

— Jordan ChillMcgee Ludgate
แหล่งที่มา

62

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

— punkrockbuddyholly

59

@MrMisterMan จริง ๆ แล้วฉันคิดว่าพวกเขาทำ มีความหมายอะไรมากกว่านี้ - <p>555-212-2344</p>หรือ <supportPhone> 555-212-2344 </supportPhone>

— Yuriy Galanter

169

@YuriyGalanter <p class = "supportPhone">; P

— punkrockbuddyholly

30

@MrMisterMan เพียงจำไว้ว่ากฎและโครงสร้างการเขียนโปรแกรมเหล่านี้สร้างขึ้นโดยคนที่ฉลาดกว่าคุณและคุณสามารถเปลี่ยนแปลงได้คุณสามารถมีอิทธิพลต่อมันคุณสามารถสร้างสิ่งต่าง ๆ ที่คนอื่นสามารถใช้ได้

— L_7337

90

ฉันอาจชี้ให้เห็นว่าสิ่งที่คุณทำอยู่นั้นโดยพื้นฐานแล้วไม่ใช่ XML XML เป็นภาษามาร์กอัปที่เป็นนามธรรมซึ่งช่วยให้คุณสามารถแสดงข้อมูลในแบบ "มีประโยชน์" ตามที่คุณอธิบาย - เช่น แนบความหมายทางความหมาย จากนั้นคุณสามารถใช้แปลง XSLT เพื่อแสดงข้อมูลของคุณในรูปแบบ HTML

— เซ่

470

ทำไม CSS ถึงทำงานกับองค์ประกอบปลอมได้?

(ส่วนใหญ่) เบราว์เซอร์ได้รับการออกแบบให้รองรับการส่งต่อไปยัง HTML (ในระดับหนึ่ง) ในอนาคต องค์ประกอบที่ไม่รู้จักจะถูกแยกวิเคราะห์ใน DOM แต่ไม่มีความหมายหรือการแสดงผลเริ่มต้นพิเศษที่เกี่ยวข้องกับพวกเขา

เมื่อมีการเพิ่มองค์ประกอบใหม่ลงในข้อมูลจำเพาะบางครั้ง CSS, JavaScript และ ARIA สามารถนำมาใช้เพื่อมอบการทำงานที่เหมือนกันในเบราว์เซอร์รุ่นเก่า (และองค์ประกอบจะต้องปรากฏใน DOM สำหรับภาษาเหล่านั้นเพื่อให้สามารถใช้งานได้ )

(แม้ว่าควรสังเกตว่างานกำลังดำเนินการเพื่อกำหนดวิธีการขยาย HTML ด้วยองค์ประกอบที่กำหนดเองแต่งานนี้อยู่ในช่วงเริ่มต้นของการพัฒนาในปัจจุบันดังนั้นจึงควรหลีกเลี่ยงจนกว่าจะครบกำหนด)

ทำไมอาจารย์ของฉันไม่ต้องการให้ฉันใช้องค์ประกอบที่ทำขึ้น?

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

นอกจากนี้ยัง; ทำไมเขาไม่ทราบว่ามีองค์ประกอบที่ประกอบขึ้นและทำงานกับ CSS พวกเขาผิดปกติหรือไม่

ใช่. ผู้ใช้ไม่ได้ใช้เนื่องจากมีปัญหาข้างต้น

— เควนติน
แหล่งที่มา

30

"ข้อกำหนด HTML ไม่ได้รับอนุญาต" ไม่จำเป็นต้องเป็นจริง พวกเขาไม่สอดคล้องกับข้อมูลจำเพาะ HTML เนมสเปซ แต่สเป็ค HTML5 เป็นสิ่งที่กว้างกว่ามากที่ช่วยให้ข้อกำหนดที่กำหนดเองและระบุวิธีการจัดการสิ่งต่าง ๆ อย่างชัดเจนเกี่ยวกับการจัดการ CSS และ API (DOM)

— เบ็นเลช

4

มีไลบรารีอยู่แล้วโดยเฉพาะ Angular.js ที่ให้คุณขยาย HTML ด้วยองค์ประกอบที่กำหนดเอง อาจไม่ใช่ในแง่ที่คุณหมายถึงว่าองค์ประกอบถูกแยกวิเคราะห์โดย javascript และแปลเป็นของจริงโดยปกติ แต่ถ้าคุณต้องการขยาย html ด้วยแท็กที่กำหนดเองคุณสามารถทำได้ด้วย Angular

— Charlie Martin

11

+1 สำหรับ "พวกเขาอาจขัดแย้งกับมาตรฐานในอนาคต" โปรดจำไว้ว่ามันอาจใช้งานได้ในขณะนี้ แต่จะต้องทำงานเป็นเวลา 3-4 ปีหลังจากคุณเริ่มต้น

— tim.baker

70

ฉันชอบที่จะมีแท็ก <ninja> เพื่อซ่อนองค์ประกอบ dom แทนที่จะใช้การแสดงสไตล์: ไม่มีเช่น: <ninja> สิ่งที่ซ่อนอยู่ </ninja>

— kiranvj

18

อีกจุดที่สำคัญจริงๆ: เบราว์เซอร์พิเศษสำหรับคนตาบอดหรือคนที่มีความสามารถ จำกัด ใช้องค์ประกอบ HTML ที่เหมาะสมสำหรับสิ่งต่าง ๆ (ยกตัวอย่างการนำทางบนหน้าเว็บได้อย่างง่ายดายโดยใช้ส่วนหัวต่อไปนี้) ดังนั้นความหมายที่หายไป + การแสดงผลเริ่มต้นอาจไม่ส่งผลต่อเบราว์เซอร์ปกติมากเกินไป แต่เบราว์เซอร์พิเศษเหล่านี้อาจจะสับสนทำให้ลดการใช้งานเว็บไซต์ของคุณลงอย่างมาก

— Arve Systad

98

TL; DR

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

คำตอบยาว ๆ

มีข้อโต้แย้งบางอย่างที่รหัสที่มีแท็กที่กำหนดเองนั้นสามารถใช้งานได้มากกว่า

อย่างไรก็ตามมันนำไปสู่ HTML ที่ไม่ถูกต้อง สิ่งใดไม่ดีสำหรับเว็บไซต์ของคุณ

จุดที่ถูกต้องของ CSS / HTML | StackOverflow

Google ชอบมากดังนั้นจึงเป็นสิ่งที่ดีสำหรับ SEO

มันทำให้หน้าเว็บของคุณมีแนวโน้มที่จะทำงานในเบราว์เซอร์ที่คุณไม่ได้ทดสอบ

มันทำให้คุณดูเป็นมืออาชีพมากขึ้น (สำหรับนักพัฒนาบางคนอย่างน้อย)

เบราว์เซอร์ที่รองรับสามารถแสดง [HTML ที่ถูกต้องเร็วขึ้น]

มันชี้ให้เห็นข้อบกพร่องมากมายที่คุณอาจพลาดซึ่งส่งผลต่อสิ่งที่คุณอาจไม่ได้ทำการทดสอบเช่นเพจรหัสหรือชุดภาษาของหน้า

ทำไมต้องตรวจสอบ | W3C

การตรวจสอบความถูกต้องเป็นเครื่องมือแก้ไขข้อบกพร่อง

การตรวจสอบเป็นการตรวจสอบคุณภาพในอนาคต

การตรวจสอบทำให้การบำรุงรักษาง่ายขึ้น

การตรวจสอบช่วยสอนวิธีปฏิบัติที่ดี

การตรวจสอบเป็นสัญลักษณ์ของความเป็นมืออาชีพ

— แดนกราห์น
แหล่งที่มา

8

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

— Pat Dobson

9

AKA การพัฒนาในอนาคตและการบำรุงรักษาที่ผ่อนคลาย

— Dan Grahn

68

YADA (ยังมีคำตอบ (แตกต่างกัน)

แก้ไข: โปรดดูความคิดเห็นจาก BoltClock ด้านล่างเกี่ยวกับประเภท vs tag vs องค์ประกอบ ฉันมักจะไม่กังวลเกี่ยวกับความหมาย แต่ความเห็นของเขาเหมาะสมและให้ข้อมูล

แม้ว่าจะมีอยู่แล้วพวงของการตอบกลับที่ดีคุณได้ระบุว่าคุณอาจารย์ได้รับแจ้งให้คุณโพสต์คำถามนี้จึงดูเหมือนว่าคุณมี (อย่างเป็นทางการ) ในโรงเรียน ฉันคิดว่าฉันจะอธิบายเพิ่มเติมในเชิงลึกเล็กน้อยเกี่ยวกับ CSS ไม่เพียง แต่ยังกลไกของเว็บเบราว์เซอร์ ตามที่Wikipediaกล่าวว่า "CSS เป็นภาษาสไตล์ชีทที่ใช้สำหรับอธิบาย ... เอกสารที่เขียนด้วยภาษามาร์กอัป" (ฉันได้เพิ่มการเน้นที่ "a") โปรดสังเกตว่ามันไม่ได้พูดว่า "เขียนใน HTML" น้อยกว่า HTML ที่เฉพาะเจาะจงมาก CSS สามารถใช้กับ HTML, XHTML, XML, SGML, XAML และอื่น ๆ แน่นอนว่าคุณต้องมีสิ่งที่จะแสดงผลเอกสารแต่ละประเภทเหล่านี้ที่จะใช้สไตล์ ตามคำนิยาม CSS ไม่ทราบ / เข้าใจ / ใส่ใจเกี่ยวกับแท็กภาษามาร์กอัปที่เฉพาะเจาะจง ดังนั้นแท็กอาจ "ไม่ถูกต้อง" เท่าที่เกี่ยวข้องกับ HTML แต่ไม่มีแนวคิดของแท็ก / องค์ประกอบ / ประเภท / ประเภท "ถูกต้อง" ใน CSS

เบราว์เซอร์ภาพที่ทันสมัยไม่ใช่โปรแกรมแบบเสาหิน พวกเขาเป็นส่วนผสมของ "เครื่องมือ" ที่แตกต่างกันที่มีงานเฉพาะที่ต้องทำ ที่ขั้นต่ำเปลือยที่ฉันสามารถคิด 3 เครื่องยนต์เครื่องมือการแสดงผลของเครื่องมือ CSS และ JavaScript เครื่องยนต์ / VM ไม่แน่ใจว่า parser เป็นส่วนหนึ่งของเอ็นจิ้นการเรนเดอร์ (หรือในทางกลับกัน) หรือถ้ามันเป็นเอ็นจิ้นแยกต่างหาก แต่คุณเข้าใจแล้ว

เบราว์เซอร์แบบเห็นภาพหรือไม่( คนอื่น ๆ ได้ระบุความจริงแล้วว่าโปรแกรมอ่านหน้าจออาจมีความท้าทายอื่น ๆ เกี่ยวกับแท็กที่ไม่ถูกต้องหรือไม่ ) ใช้การจัดรูปแบบหรือไม่ขึ้นอยู่กับว่าโปรแกรมแยกวิเคราะห์ออกจากแท็ก ไปยังแท็กนั้น เนื่องจากมันจะทำให้ยากต่อการพัฒนา / ดูแลรักษาเอ็นจิน CSS ไม่ได้ถูกเขียนเพื่อให้เข้าใจว่า "นี่คือเอกสาร HTML ดังนั้นนี่คือรายการของแท็ก / องค์ประกอบ / ประเภทที่ถูกต้อง" เอ็นจิ้น CSS เพียงแค่ค้นหาแท็ก / องค์ประกอบ / ประเภทแล้วบอกเอนจิ้นการแสดงผล "นี่คือสไตล์ที่คุณควรใช้" ไม่ว่าเอ็นจิ้นการเรนเดอร์จะตัดสินใจใช้สไตล์จริงหรือไม่

นี่เป็นวิธีที่ง่ายในการคิดถึงการไหลพื้นฐานจากเอนจินสู่เอนจิ้น: parser -> CSS -> การเรนเดอร์ ในความเป็นจริงมันซับซ้อนกว่านี้มาก แต่ก็ดีพอสำหรับการเริ่ม

คำตอบนี้ยาวเกินไปแล้วดังนั้นฉันจะจบที่นั่น

— Andrew Steitz
แหล่งที่มา

10

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

— BoltClock

53

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

ในเบราว์เซอร์รุ่นเก่า (ฉันคิดว่า IE7-) คุณสามารถใช้ Javascript-trick หลังจากนั้นพวกเขาจะทำงานได้เช่นกัน

นี่คือคำถามที่เกี่ยวข้องที่ฉันพบเมื่อมองหาตัวอย่าง

นี่คือคำถามเกี่ยวกับการแก้ไข Javascript ปรากฎว่าเป็น IE7 แน่นอนที่ไม่สนับสนุนองค์ประกอบเหล่านี้ออกมาจากกล่อง

นอกจากนี้ยัง; เหตุใดเขาจึงไม่ทราบว่ามีแท็กที่สร้างขึ้นและทำงานกับ CSS พวกเขาผิดปกติหรือไม่

ใช่เลยทีเดียว แต่โดยเฉพาะ: พวกเขาไม่ได้ให้บริการเพิ่มเติม และพวกเขายังใหม่กับ html5 ใน HTML เวอร์ชันก่อนหน้าแท็กที่ไม่รู้จักนั้นไม่ถูกต้อง

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

— GolezTrol
แหล่งที่มา

3

@OnoSendai คุณทำให้ฉันสงสัย แต่ฉันคิดว่าพวกเขาจะกลายเป็น 'องค์ประกอบของบล็อกที่ไม่มีมาร์กอัปเพิ่มเติม' ดังนั้นโดยทั่วไปเหมือนกับ div

— GolezTrol

6

@OnoSendai องค์ประกอบบล็อกอาจมีคุณสมบัติการแสดงผลของบล็อกแต่ไม่จำเป็น ตัวอย่างเช่นแท็กจุดยึดได้รับการเลื่อนสถานะเป็นบล็อก (หมายถึงคุณได้รับอนุญาตให้ใส่องค์ประกอบบล็อกเช่น div ในตัว) แต่ยังคงมีคุณสมบัติการแสดงผลแบบอินไลน์

— cimmanon

8

ค่าเริ่มต้นของdisplayคือinlineดังนั้นความคิดเห็นของ @ OnoSendai ถูกต้อง

— BoltClock

2

@cimmanon: aองค์ประกอบมีรูปแบบเนื้อหาโปร่งใสในขณะนี้ดังนั้นไม่ว่าจะเป็นบล็อกหรืออินไลน์ขึ้นอยู่กับว่าบรรพบุรุษของพวกเขาเป็นบล็อกหรืออินไลน์ คำตอบนี้กำลังพูดถึงองค์ประกอบที่ไม่รู้จักซึ่ง HTML ไม่ได้กำหนดรูปแบบเนื้อหา เท่าที่เกี่ยวข้องกับ CSS หากไม่มีค่าเริ่มต้นเบราว์เซอร์displayจะใช้ค่าเริ่มต้น

— BoltClock

1

@ BoltClock'saUnicorn นั่นหมายความว่า <div> <a> foo </a> <a> แถบ </a> </div> จะแสดงแท็ก <a> ทั้งสองเป็นบล็อกหรือไม่ ที่ดูเหมือนว่าเป็นผู้ต้องสงสัยนิด ...

— ปุย

27

จริงๆแล้วคุณสามารถใช้องค์ประกอบที่กำหนดเอง นี่คือข้อมูลจำเพาะ W3C ในเรื่องนี้:

http://w3c.github.io/webcomponents/spec/custom/

และนี่คือบทแนะนำที่อธิบายถึงวิธีการใช้:

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

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

— Bas van Dijk
แหล่งที่มา

7

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

— Quentin

2

+1 ไม่ทราบว่า W3C ใช้githubแต่จริง ๆ แล้วพวกเขาใช้

— Vitor Canova

22

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

FALSE (ish): องค์ประกอบ HTML ที่ไม่ได้มาตรฐานคือ "ไม่อนุญาต", "ผิดกฎหมาย" หรือ "ไม่ถูกต้อง"

ไม่จำเป็น. พวกเขากำลัง"ไม่สอดคล้อง" ความแตกต่างคืออะไร? บางสิ่งอาจ "ไม่สอดคล้อง" และยังคงเป็น "อนุญาต" W3C จะไม่ส่งตำรวจ HTML ไปที่บ้านของคุณและดึงคุณออกไป

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

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

FALSE (ish): องค์ประกอบ HTML ที่ไม่ได้มาตรฐานจะส่งผลให้เกิดปัญหาการแสดงผล

อาจเป็นไปได้ แต่ไม่น่าเป็นไปได้ (แทนที่ "จะ" ด้วย "อาจ") วิธีเดียวที่ควรทำให้เกิดปัญหาการแสดงผลคือหากองค์ประกอบที่กำหนดเองของคุณขัดแย้งกับข้อกำหนดอื่นเช่นการเปลี่ยนแปลงข้อกำหนด HTML หรือข้อกำหนดอื่นที่ได้รับการยกย่องในระบบเดียวกัน (เช่น SVG, คณิตศาสตร์หรือสิ่งที่กำหนดเอง)

ในความเป็นจริงเหตุผล CSS สามารถสไตล์แท็กที่ไม่ได้มาตรฐานเป็นเพราะข้อกำหนด HTML ระบุอย่างชัดเจนว่า:

ตัวแทนผู้ใช้จะต้องปฏิบัติต่อองค์ประกอบและคุณสมบัติที่พวกเขาไม่เข้าใจว่าเป็นกลาง; ปล่อยให้พวกเขาอยู่ใน DOM (สำหรับโปรเซสเซอร์ DOM) และจัดแต่งทรงผมตาม CSS (สำหรับโปรเซสเซอร์ CSS) แต่ไม่ได้อนุมานความหมายใด ๆ จากพวกเขา

หมายเหตุ:หากคุณต้องการใช้แท็กที่กำหนดเองเพียงจำการเปลี่ยนแปลงข้อกำหนด HTML ในภายหลังอาจทำให้สไตล์ของคุณหมดไปดังนั้นควรเตรียมพร้อม เป็นไปได้ยากมากที่ W3C จะใช้งาน<imsocool>แท็ก

แท็กและ JavaScript ที่ไม่เป็นมาตรฐาน (ผ่าน DOM)

เหตุผลที่คุณสามารถเข้าถึงและแก้ไของค์ประกอบที่กำหนดเองโดยใช้ JavaScript เป็นเพราะสเปคยังพูดถึงวิธีที่พวกเขาควรจะจัดการใน DOMซึ่งเป็น API (น่ากลัวจริงๆ) API ที่ช่วยให้คุณสามารถจัดการองค์ประกอบในหน้าของคุณ

ต้องใช้อินเทอร์เฟซ HTMLUnknownElement สำหรับองค์ประกอบ HTML ที่ไม่ได้กำหนดโดยข้อกำหนดนี้ (หรือข้อกำหนดอื่น ๆ ที่เกี่ยวข้อง)

TL; DR: การทำตามข้อกำหนดนั้นทำขึ้นเพื่อวัตถุประสงค์ในการสื่อสารและความปลอดภัย ทุกอย่างยกเว้นการตรวจสอบซึ่งมีวัตถุประสงค์เพียงอย่างเดียวคือการบังคับใช้ความสอดคล้อง แต่มีการใช้เป็นตัวเลือก

ตัวอย่างเช่น:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

(ฉันแน่ใจว่านี่จะวาดเปลวไฟ แต่มี 2 เซนต์ของฉัน)

— เบ็นเลช
แหล่งที่มา

3

HTML ไม่เพียง แต่จะระบุว่าองค์ประกอบควรได้รับการปฏิบัติอย่างไรกับ wrt CSS ข้อมูลจำเพาะ CSS นั้นส่วนใหญ่เป็นผู้ไม่เชื่อเรื่องพระเจ้าภาษาเอกสารโดยการออกแบบเช่นกัน (นี่คือ kinda-sorta โดยนัยแล้วในคำตอบอื่น ๆ อำนวยความสะดวก) หากมีพฤติกรรมที่เฉพาะเจาะจงกับ HTML และ / หรือ XHTML มันจะถูกระบุเสมอแม้ในข้อความที่ให้ข้อมูล (เช่น "ID องค์ประกอบ HTML ถูกระบุโดยidแอตทริบิวต์") ไม่ใช่เฉพาะข้อความเชิงบรรทัด (ดูพื้นหลังและเส้นขอบ 3สำหรับ ตัวอย่าง).

— BoltClock

18

ตามข้อกำหนด:

CSS

ประเภทเลือกเป็นชื่อของประเภทของเอกสารองค์ประกอบภาษาที่เขียนโดยใช้ไวยากรณ์ของชื่อที่มีคุณสมบัติแบบ CSS

ฉันคิดว่านี่เรียกว่าตัวเลือกองค์ประกอบแต่จริงๆแล้วมันเป็นตัวเลือกประเภท สเป็คจะพูดคุยเกี่ยวกับCSS qualified namesที่ไม่มีข้อ จำกัด ในสิ่งที่ชื่อจริง กล่าวคือตราบใดที่ตัวเลือกประเภทที่ตรงกับไวยากรณ์ชื่อ CSS ที่ผ่านการรับรองจะถูกต้องทางเทคนิค CSS และจะตรงกับองค์ประกอบในเอกสาร ไม่มีข้อ จำกัด เฉพาะ CSS สำหรับองค์ประกอบที่ไม่มีอยู่ในข้อมูลจำเพาะเฉพาะ - HTML หรืออย่างอื่น

HTML

ไม่มีข้อ จำกัด อย่างเป็นทางการในการรวมแท็กใด ๆ ในเอกสารที่คุณต้องการ อย่างไรก็ตามเอกสารประกอบจะกล่าว

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

และต่อมาก็พูดว่า

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

ฉันไม่แน่ใจโดยเฉพาะเจาะจงว่าที่ไหนหรือถ้าข้อมูลจำเพาะระบุว่าอนุญาตองค์ประกอบที่ไม่รู้จักแต่พูดถึงส่วนติดต่อHTMLUnknownElementสำหรับองค์ประกอบที่ไม่รู้จัก เบราว์เซอร์บางตัวอาจไม่รู้จักองค์ประกอบที่อยู่ในข้อมูลจำเพาะปัจจุบัน (IE8 คำนึงถึง)

มีร่างสำหรับองค์ประกอบที่กำหนดเองแต่ฉันสงสัยว่ามันถูกนำไปใช้ที่ใดก็ได้

— ยาระเบิด
แหล่งที่มา

ฉันคิดว่าพวกเราส่วนใหญ่คิดว่าพวกเขาเป็นตัวเลือกองค์ประกอบแต่มันก็สมเหตุสมผลว่าพวกเขาเป็นตัวเลือกประเภท "เป็นทางการ"

— Andrew Steitz

@Andrew Steitz: คิดแบบนี้: element: type :: person: name คุณสามารถมีองค์ประกอบหลายประเภทที่แตกต่างกันโดยที่แต่ละองค์ประกอบเป็นประเภทเดียวและในลักษณะเดียวกับที่คุณสามารถมีคนจำนวนมากแต่ละคนมีชื่อ Selectors ทำงานบนแผนผังเอกสารและตัวเลือกทุกตัวสามารถจับคู่องค์ประกอบต้นไม้เอกสารได้บางส่วนซึ่งคุณสามารถ จำกัด ให้แคบลงได้ด้วยตัวเลือกคลาสตัวเลือก ID ตัวเลือกแอตทริบิวต์ ... หรือตัวเลือกประเภท สิ่งที่คุณใช้คุณยังคงเป็นองค์ประกอบที่ตรงกัน ดังนั้น "ตัวเลือกองค์ประกอบ" จะไม่สมเหตุสมผลในกรณีนี้ - สิ่งเหล่านี้ทั้งหมดจะเป็นตัวเลือกองค์ประกอบ

— BoltClock

@ BoltClock'saUnicorn: จริง แต่ class, ID และคุณสมบัติเป็น all, uh, attributes (LOL) ของ "องค์ประกอบ" คือ "สิ่งที่" ภายในวงเล็บเหลี่ยม พวกเขาอธิบาย "องค์ประกอบ" ที่มีแท็กเปิดซึ่งมีอยู่ใช่ <a> และ <div> เป็นองค์ประกอบ "ประเภท" เฉพาะ แต่ฉันสงสัยว่าจะมีใครเรียก class, ID และคุณลักษณะ "องค์ประกอบ" ฉันตกลงโดยสิ้นเชิงว่าตัวเลือกทั้งหมดเป็นตัวเลือก "องค์ประกอบ" จริงๆ แต่ในการใช้งานทั่วไปผู้คนมักจะอ้างถึงตัวเลือก "พิมพ์" เป็นตัวเลือก "องค์ประกอบ" นั่นคือประเด็นของความคิดเห็นก่อนหน้าของฉัน ขออภัยมันไม่ชัดเจน :-)

— Andrew Steitz

@ExplosionPills - ข้อกำหนดของ HTML ไม่ได้บอกว่าองค์ประกอบที่ไม่รู้จักนั้นไม่ได้รับอนุญาต แต่เนื่องจากทุกองค์ประกอบมีรายการชื่อองค์ประกอบที่แจกแจงซึ่งอนุญาตให้เป็นรายการย่อย (เช่นรูปแบบเนื้อหา) จึงไม่จำเป็นต้อง ไม่มีที่ไหนที่องค์ประกอบที่ไม่รู้จักได้รับอนุญาตในฐานะลูกขององค์ประกอบที่ได้รับอนุญาต การใช้ HTMLUnknownElement กับองค์ประกอบดังกล่าวเป็นส่วนหนึ่งของข้อกำหนด precessing - นั่นคือสิ่งที่ผู้บริโภค HTML ต้องทำกับเอกสารที่ถูกต้องหรือไม่ - และไม่ได้เป็นส่วนหนึ่งของสิ่งที่ผู้เขียนต้องทำเพื่อให้เอกสารของพวกเขาถูกต้อง

— Alohci

@Alhci ฉันหมายถึงไม่ได้รับอนุญาตในแง่ที่ว่าพวกเขาจะถูกทิ้งจาก DOM ซึ่งตรงข้ามกับความหมายที่ไม่ถูกต้อง

— Explosion Pills

13

เป็นไปได้กับ html5 แต่คุณต้องคำนึงถึงเบราว์เซอร์รุ่นเก่า

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

บางสิ่งเช่นนี้

<!-- Custom tags in use, refer to their CSS for aid -->

เมื่อคุณทำการแท็กของคุณเอง / องค์ประกอบบราวเซอร์รุ่นเก่าจะมีเงื่อนงำอะไรที่เป็นเช่นเดียวกับองค์ประกอบ HTML5 ที่ไม่เหมือนใคร/navsection

หากคุณมีความสนใจในแนวคิดนี้ฉันขอแนะนำให้ทำอย่างถูกวิธี

เริ่มต้นใช้งาน

องค์ประกอบที่กำหนดเองช่วยให้นักพัฒนาเว็บสามารถกำหนดองค์ประกอบ HTML ประเภทใหม่ได้ ข้อมูลจำเพาะเป็นหนึ่งในการเชื่อมโยงไปถึง API พื้นฐานใหม่ ๆ ภายใต้ Web Components แต่อาจเป็นสิ่งที่สำคัญที่สุด ไม่มีส่วนประกอบของเว็บหากไม่มีคุณสมบัติที่ปลดล็อคโดยองค์ประกอบที่กำหนดเอง:

กำหนดองค์ประกอบ HTML / DOM ใหม่สร้างองค์ประกอบที่ขยายจากองค์ประกอบอื่น ๆ รวมกลุ่มฟังก์ชั่นที่กำหนดเองด้วยเหตุผลในแท็กเดียวขยาย API ขององค์ประกอบ DOM ที่มีอยู่

มีหลายสิ่งที่คุณสามารถทำได้และมันทำให้สคริปต์ของคุณสวยงามตามที่บทความนี้นำมาใช้ องค์ประกอบที่กำหนดเองการกำหนดองค์ประกอบใหม่ใน HTML

ดังนั้นขอปะยางรถ

ข้อดี

หรูหรามากและอ่านง่าย
divsมันเป็นสิ่งที่ดีที่จะไม่ได้เห็นอีกหลาย ๆ : p
ให้ความรู้สึกที่เป็นเอกลักษณ์กับรหัส

จุดด้อย

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

ตัวเลือกขึ้นอยู่กับคุณทั้งหมดและคุณควรยึดตามสิ่งที่โครงการขอ

อัปเดต 1/2/2014

นี่คือบทความที่เป็นประโยชน์มากผมพบและคิดฉันจะแบ่งปันองค์ประกอบที่กำหนดเอง

เรียนรู้เทคโนโลยีทำไมองค์ประกอบที่กำหนดเอง? องค์ประกอบที่กำหนดเองให้ผู้เขียนกำหนดองค์ประกอบของตนเอง ผู้เขียนเชื่อมโยงรหัส JavaScript กับชื่อแท็กที่กำหนดเองแล้วใช้ชื่อแท็กที่กำหนดเองเหล่านั้นเช่นเดียวกับแท็กมาตรฐานใด ๆ

ตัวอย่างเช่นหลังจากลงทะเบียนปุ่มชนิดพิเศษที่เรียกว่าปุ่มพิเศษแล้วให้ใช้ปุ่มพิเศษเช่นนี้:

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

ดูเหมือนว่าจะเป็นห้องสมุดที่ใช้งานได้ดี แต่ฉันสังเกตว่ามันไม่ผ่านสถานะการสร้างของ Window นี่ก็เป็นพรี - อัลฟาฉันเชื่อว่าดังนั้นฉันจะจับตาดูสิ่งนี้ในขณะที่มันกำลังพัฒนา

— Josh Powell
แหล่งที่มา

3

" Other developers may have no clue what to do if they don't know about custom tags." ฉันเกลียดการโต้เถียง นักพัฒนาคนอื่น ๆ ก็ควรที่จะเรียนรู้สิ่งใหม่ ๆ ด้วยเช่นกันและหากพวกเขาไม่เข้าใจเทคนิคที่ใช้ในรหัสของคุณพวกเขาควรจะขอบคุณคุณที่ชี้ให้เห็นข้อบกพร่องในความรู้ของพวกเขา อาจเป็นเรื่องที่ค่อนข้างไม่ยุติธรรมในกรณีนี้เนื่องจากแท็กที่กำหนดเองมีอยู่เป็นร่างจดหมายเท่านั้น แต่ฉันได้ยินอาร์กิวเมนต์เดียวกันเมื่อใช้เทคนิคมาตรฐานที่เหมาะสม

— GolezTrol

1

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

— Josh Powell

1

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

— GolezTrol

1

@GolezTroi ไม่ใช่ว่าคุณไม่ควรทำสิ่งที่ท้าทายนักพัฒนารายอื่นมันเป็นคำถามของความคุ้มค่า หากการทำบางสิ่งในแบบที่ยากสำหรับนักพัฒนาคนต่อไปทำให้รหัสของคุณดีขึ้นและสะอาดขึ้นให้ทำมัน แต่อย่าทำสิ่งต่าง ๆ เพื่อความสนุกเท่านั้น

— BostonJohn

1

@JoshPowell ความคิดเห็นไม่ควรจะเกี่ยวกับสิ่งที่และวิธี (รหัสที่มีอยู่แล้วกล่าวว่าและถ้ามันจะไม่ชัดเจนพอเขียนโค้ดจนกว่าจะมี) แต่ควรบอกฉันทำไม มีบางสิ่งที่แย่ไปกว่าการโหลดความคิดเห็นที่บอกว่าsendmailฟังก์ชั่นส่งเมลหรืออะไรทำนองนั้น ฉันสนใจมากขึ้นว่าทำไมคุณถึงส่งเมล - และถ้าชื่อฟังก์ชั่นนั้นชัดเจนมากเยี่ยม! จากนั้นฉันไม่ต้องการความคิดเห็นซึ่งเป็นกรณีที่เหมาะ ฉันจะอ่านรหัสต่อไป

— Christopher Creutzig

4

ทำไมเขาไม่ต้องการให้คุณใช้มัน? พวกเขาจะไม่ธรรมดาหรือเป็นส่วนหนึ่งของมาตรฐาน HTML5 ในทางเทคนิคพวกเขาไม่ได้รับอนุญาต พวกเขาเป็นแฮ็ค

ฉันชอบพวกเขาด้วยตัวเอง คุณอาจจะสนใจ XHTML5 อนุญาตให้คุณกำหนดแท็กของคุณเองและใช้เป็นส่วนหนึ่งของมาตรฐาน

เช่นเดียวกับที่คนอื่น ๆ ระบุไว้พวกเขาไม่ถูกต้องและไม่พกพาได้

ทำไมเขาถึงไม่รู้ว่าพวกมันมีอยู่จริง? ฉันไม่รู้ยกเว้นพวกเขาจะไม่ธรรมดา อาจเป็นไปได้ว่าเขาไม่ได้ตระหนักว่าคุณทำได้

— tjons
แหล่งที่มา

2

ไม่มี XHTML5 - มีคณะทำงานที่พยายามนำ XHTML 2 มาใช้ แต่มันดิ้นรนเมื่อหลายปีก่อน

— สูงสุด

1

@papirtiger: XHTML5 เป็น HTML5 ที่ให้บริการเหมือน XML แต่คุณพูดถูกและไม่มีมาตรฐาน XHTML อิสระเกินกว่า XHTML 1.1

— BoltClock

1

ดังนั้นจึงมีเป็น XHTML5 แต่ดูเหมือนว่าแทบจะไม่แตกต่างไปจาก HTML5 เกี่ยวกับเรื่องของแท็กที่กำหนดเองนี้ ดังนั้นฉันคิดว่าคำสั่งเกี่ยวกับ XHTML5 ช่วยให้คุณสามารถกำหนดแท็กเพิ่มเติมในทางตรงกันข้ามกับ HTML5 ผิดซึ่งอาจอธิบาย downvote แม้ว่าฉันจะไม่แน่ใจเกี่ยวกับ XHTML5 เพียงพอที่จะตอบคำถามนี้

— GolezTrol

1

ตามร่าง HTML5 ของ W3C นั้น HTML และ XHTML คือ (ตอนนี้) "ไวยากรณ์ที่เป็นรูปธรรม" ซึ่งแสดงถึง "ภาษานามธรรม" เดียวกัน พวกมันมีคุณสมบัติพื้นฐานเหมือนกันยกเว้นคุณสมบัติที่เหมาะสมในไวยากรณ์เดียว (เนมสเปซ XML, สวิตช์ตัวแยกวิเคราะห์ HTML noscript): w3.org/TR/html5/introduction.html#html-vs-xhtml

— IMSoP

2

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

เบราว์เซอร์จะต้องวิเคราะห์โค้ด HTML เป็นองค์ประกอบที่รู้แท็กการแต่งหน้าจะถูกแปลงเป็นอย่างอื่นเพื่อให้พอดีกับโมเดลวัตถุเอกสาร (DOM) เนื่องจากมาตรฐานเว็บไม่ครอบคลุมถึงวิธีการจัดการทุก ๆ สิ่งที่อยู่นอกเหนือมาตรฐานเว็บเบราว์เซอร์มักจะจัดการกับรหัสที่ไม่ใช่มาตรฐานในรูปแบบต่างๆ

การพัฒนาเว็บนั้นค่อนข้างยุ่งยากพอ ๆ กับเบราว์เซอร์จำนวนมากที่มีลักษณะเฉพาะของตนเองโดยไม่ต้องเพิ่มองค์ประกอบความไม่แน่นอนอื่น ๆ ทางออกที่ดีที่สุดที่จะยึดติดกับสิ่งต่าง ๆ ที่เป็นจริงในมาตรฐานนั่นคือสิ่งที่ผู้ค้าเบราว์เซอร์พยายามที่จะปฏิบัติตามเพื่อให้มีโอกาสที่ดีที่สุดในการทำงานจริง

— Guffa
แหล่งที่มา

2

ฉันคิดว่าแท็กที่สร้างขึ้นอาจทำให้สับสนหรือไม่ชัดเจนมากกว่า p ที่มี ID (โดยทั่วไปบางกลุ่มของข้อความ) เราทุกคนรู้จัก ap ที่มี ID เป็นย่อหน้า แต่ใครจะรู้ว่าแท็กที่สร้างขึ้นมีไว้เพื่ออะไร อย่างน้อยนั่นก็เป็นความคิดของฉัน :) ดังนั้นนี่เป็นปัญหาเกี่ยวกับสไตล์ / ความคมชัดมากกว่าฟังก์ชันอย่างใดอย่างหนึ่ง

— runelynx
แหล่งที่มา

3

ขอขอบคุณคุณไวยากรณ์นางฟ้า :)

— runelynx

2

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

— drew_w
แหล่งที่มา

2

CSS เป็นภาษาสไตล์ชีทที่สามารถใช้เพื่อแสดงเอกสาร XML ไม่เพียง แต่เอกสาร HTML (X) ตัวอย่างของคุณที่มีแท็กที่สร้างขึ้นอาจเป็นส่วนหนึ่งของเอกสาร XML ที่ถูกกฎหมาย มันจะเป็นหนึ่งถ้าคุณใส่ไว้ในองค์ประกอบรากเดียว คุณอาจมี<html> ...</html>รอบแล้วหรือยัง เบราว์เซอร์ปัจจุบันสามารถแสดงเอกสาร XML ได้

แน่นอนว่ามันไม่ใช่เอกสาร XML ที่ดีมากมันขาดไวยากรณ์และการประกาศ XML หากคุณใช้หัวข้อการประกาศ HTML แทน (และอาจเป็นการกำหนดค่าเซิร์ฟเวอร์ที่ส่งประเภท mime ที่ถูกต้อง) แทนที่จะเป็น HTML ที่ผิดกฎหมาย

(X) HTML มีข้อดีเหนือกว่า XML ธรรมดาเนื่องจากองค์ประกอบมีความหมายทางความหมายซึ่งมีประโยชน์ในบริบทของการนำเสนอหน้าเว็บ เครื่องมือสามารถทำงานร่วมกับซีแมนทิกส์นี้ผู้พัฒนารายอื่นรู้ถึงความหมายมันมีข้อผิดพลาดน้อยและอ่านง่าย

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

คุณควรเพิ่มส่วนหัว (X) HTML ในเอกสารของคุณเพื่อให้เครื่องมือสามารถให้ข้อความผิดพลาดที่มีความหมายได้

— Hauke Ingmar Schmidt
แหล่งที่มา

2

ไม่มันไม่ถูกต้อง (มีรูปแบบที่ดี) XML มี<style>องค์ประกอบอยู่แล้ว ... <body>องค์ประกอบ เอกสาร XML ต้องมีองค์ประกอบรูทเดียวเท่านั้น ในกรณีนี้ทั้ง<style>องค์ประกอบคือองค์ประกอบราก แต่<body>เป็นการรบกวนหรือองค์ประกอบรากจะต้องมีการเพิ่มทำให้องค์ประกอบทั้งสองของเด็ก ๆ ถ้าคุณเปลี่ยน<style>องค์ประกอบมีการอ้างอิงสไตล์ชีต (แม้ข้อมูล URI เหมือน<?xml-stylesheet href="data:text/css,imsocool { color: blue; }"?>จะทำงานได้ดี) <body>เช่นว่าองค์ประกอบรากจะกลายเป็น

— BoltClock

2

... ฉันเปลี่ยนแท็กที่สร้างขึ้นทั้งหมดเป็นย่อหน้าด้วย ID

ฉันมีปัญหากับคำแนะนำของเขาว่าควรทำอย่างไร

<p>แท็กสำหรับย่อหน้า ฉันเห็นผู้คนใช้มันตลอดเวลาแทนที่จะเป็น div - เพียงเพื่อจุดประสงค์ในการเว้นวรรคหรือเพราะมันดูอ่อนโยนกว่า หากไม่ใช่ย่อหน้าอย่าใช้มัน
คุณไม่ต้องการหรือต้องการติด ID ในทุกสิ่งยกเว้นว่าคุณต้องการกำหนดเป้าหมายเฉพาะ (เช่นด้วย Javascript) ใช้คลาสหรือ div ที่ตั้งตรง

— dennisbest
แหล่งที่มา

2

ตั้งแต่วันแรกที่ CSS ถูกออกแบบมาให้เป็นผู้ไม่เชื่อเรื่องพระเจ้าดังนั้นจึงสามารถใช้กับภาษามาร์กอัปใด ๆ ที่สร้างแผนผังต้นไม้เหมือนกันกับโครงสร้าง DOM (SVG เป็นต้น) แท็กใด ๆ ที่สอดคล้องกับname tokenการผลิตจะใช้ได้อย่างสมบูรณ์ใน CSS ดังนั้นคำถามของคุณค่อนข้างเกี่ยวกับ HTML มากกว่า CSS

องค์ประกอบที่มีแท็กที่กำหนดเองได้รับการสนับสนุนตามข้อกำหนด HTML5 HTML5 สร้างมาตรฐานวิธีแยกวิเคราะห์องค์ประกอบที่ไม่รู้จักใน DOM ดังนั้น HTML5 เป็นข้อกำหนด HTML แรกที่ช่วยให้องค์ประกอบที่กำหนดเองพูดอย่างเคร่งครัด คุณเพียงแค่ต้องใช้ประเภทเอกสาร HTML5 <!DOCTYPE html>ในเอกสารของคุณ

ชื่อแท็กที่กำหนดเองนั้นเอง ...

เอกสารนี้http://www.w3.org/TR/custom-elements/แนะนำแท็กที่กำหนดเองที่คุณเลือกให้มีอย่างน้อยหนึ่งสัญลักษณ์ '-' (เส้นประ) วิธีนี้จะไม่ขัดแย้งกับองค์ประกอบ HTML ในอนาคต ดังนั้นคุณควรเปลี่ยนเอกสารเป็นแบบนี้ดีกว่า:

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body>

— C-รอยยิ้ม
แหล่งที่มา

2

^{เห็นได้ชัดว่าไม่มีใครพูดถึงมันดังนั้นฉันจะ}

นี่คือผลพลอยได้จากสงครามเบราว์เซอร์

ย้อนกลับไปในปี 1990 เมื่ออินเทอร์เน็ตเริ่มเข้าสู่กระแสหลักการแข่งขันเพิ่มขึ้นในตลาดเบราว์เซอร์ พักการแข่งขันและวาดผู้ใช้เบราว์เซอร์บางคน (ที่สะดุดตาที่สุด Internet Explorer) พยายามที่จะเป็นประโยชน์และ“ใช้ง่าย” โดยพยายามที่จะคิดออกสิ่งที่นักออกแบบหน้าหมายจึงได้รับอนุญาตให้มาร์กอัปที่ไม่ถูกต้อง (เช่น<b><i>foobar</b></i>อย่างถูกต้องจะทำให้เป็น bold- ตัวเอียง)

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

ในขณะที่หลายคนคิดว่าสงครามเบราว์เซอร์สิ้นสุดลงสงครามใหม่ระหว่างผู้ค้าเบราว์เซอร์ได้ครองราชย์ในช่วงไม่กี่ปีที่ผ่านมานับตั้งแต่เปิดตัว Chrome แต่ Apple ก็เริ่มเติบโตอีกครั้งและผลักดัน Safari และ IE ก็สูญเสียอำนาจ (คุณอาจเรียกว่า "สงครามเย็น" เนื่องจากการรับรู้ถึงความร่วมมือและการสนับสนุนมาตรฐานจากผู้จำหน่ายเบราว์เซอร์) ดังนั้นจึงไม่น่าแปลกใจเลยที่แม้แต่เบราว์เซอร์ร่วมสมัยที่ควรปฏิบัติตามมาตรฐานเว็บอย่างเคร่งครัดพยายามที่จะ "ฉลาด" และ อนุญาตให้มีพฤติกรรมทำลายมาตรฐานเช่นนี้เพื่อพยายามที่จะได้รับประโยชน์เหมือนเมื่อก่อน

น่าเสียดายที่พฤติกรรมที่อนุญาตนี้นำไปสู่การเติบโตที่มาก ( บางคนอาจบอกว่าเป็นมะเร็ง) จากเว็บเพจที่ทำเครื่องหมายไว้ไม่ดี เนื่องจาก IE เป็นเบราว์เซอร์ที่ผ่อนปรนและได้รับความนิยมมากที่สุดและเนื่องจากมาตรฐานของไมโครซอฟท์ยังคงมีอยู่อย่างต่อเนื่อง IE จึงกลายเป็นที่น่าอับอายสำหรับการส่งเสริมและส่งเสริมการออกแบบที่ไม่ดีและเผยแพร่และทำให้หน้าเว็บเสียหาย

คุณอาจไม่คุ้นเคยกับการใช้นิสัยและการหาประโยชน์เช่นนั้นในเบราว์เซอร์บางตัวในตอนนี้ แต่นอกเหนือจากเกมปริศนาหรือเกมเป็นครั้งคราวหรือบางสิ่งบางอย่างคุณควรยึดติดกับมาตรฐานเว็บเสมอเมื่อสร้างหน้าเว็บและเว็บไซต์ต่างๆ หลีกเลี่ยงการใช้งานไม่ได้ (อาจถูกละเว้นอย่างสมบูรณ์) ด้วยการอัปเดตเบราว์เซอร์

— Synetech
แหล่งที่มา

ฉันเถียงว่าการตำหนิการเล่นโวหารโดยเฉพาะบน IE นี้เป็นบิตนอกฐานเนื่องจากเมื่อมีการเพิ่มแท็กใหม่จำนวนมากอย่างเป็นทางการ (สำหรับ HTML5) IE เป็นเบราว์เซอร์หลักเดียวที่จำเป็นต้องใช้ "shim" ที่เฉพาะเจาะจง . นี่เป็นส่วนหนึ่งของระบบการอัพเดทที่ก้าวร้าวของเบราว์เซอร์อื่น ๆ (หมายถึงเวอร์ชันเก่าของ IE ติดอยู่นานกว่า Chrome เวอร์ชันเก่าของ Firefox) แต่ตรงกันข้ามกับ IE ที่ค่อนข้าง "ตรงไปตรงมาที่สุด"

— IMSoP

HTML5? ฮะ? <imsocool>ไม่ใช่แท็กใหม่ใน HTML5 นี้มีอะไรจะทำอย่างไรกับ HTML5 หรือ IE 8, 9, ฯลฯ การจัดเรียงของลักษณะการทำงานนี้ไม่ได้เป็นใหม่มุมแหลม; มันเป็นผลพลอยได้จากสงครามเบราว์เซอร์อายุหลายปี แม้ว่า IE จะไม่รับผิดชอบต่อความผิดปกติมาตรฐานในปัจจุบัน (แม้ว่าจะเป็นความเดือดดาลของนักพัฒนาเว็บ แต่พวกเขาก็ยังปฏิเสธที่จะปฏิบัติตามอย่างเหมาะสม) พวกเขามีชื่อเสียงในการส่งเสริมการเข้ารหัสที่ไม่ดีมานานหลายปี เบราว์เซอร์ที่ผ่อนปรนมากขึ้น (IE เป็นผู้กระทำผิดที่เลวร้ายที่สุด) มาในเวลาที่เลวร้ายที่สุดเมื่ออินเทอร์เน็ตเริ่มทำการถอดและผู้พัฒนาเว็บเริ่มเรียนรู้ HTML ... อย่างไม่ถูกต้อง

— Synetech

ฉันไม่ได้บอกว่าสิ่งนี้เกี่ยวข้องกับ HTML5 แต่มันเกี่ยวข้องกับแท็กที่ไม่ได้มาตรฐาน (อย่างเช่น<header>จนกระทั่ง HTML5 กลายเป็นมาตรฐานที่ถูกกำหนดเป้าหมาย) ซึ่งเวอร์ชันเก่าของ IE ส่วนใหญ่ไม่ได้ "อดทน" อย่างแน่นอน การผ่อนปรนก็ไม่เหมือนกับการไม่ปฏิบัติตาม - HTML5 เป็นมาตรฐานในทางปฏิบัติอย่างมากซึ่งยอมรับว่า HTML ที่มีรูปแบบไม่ดีจะมีอยู่ซึ่งแตกต่างจากอุดมคติของข้อกำหนด W3C รุ่นก่อนหน้านี้และ "การผ่อนปรน" นี้เป็นประโยชน์ต่อการเติบโตประชาธิปไตย

— IMSoP

อีกครั้งฉันไม่ได้พูดถึงเบราว์เซอร์หรือรุ่นใด ๆ ฉันอธิบายว่าการผ่อนปรนโดยทั่วไปเป็นผลข้างเคียงของสงครามเบราว์เซอร์ IE ยอมรับสิ่งที่ไม่ได้มาตรฐานมากและแม้กระทั่งพฤติกรรมที่ไม่สมบูรณ์เช่นแท็กที่ขาดหายไปแท็กและแอตทริบิวต์ที่ไม่ถูกต้องและแท็กที่จับคู่ผิด ( <b><i>foobar</b></i>) นี่ไม่ใช่ความลับและแม้กระทั่งปัญหาที่ได้รับการวิพากษ์วิจารณ์และเป็นอันตรายมาก เช่นฉันกล่าวว่า IE เป็นเบราว์เซอร์ไม่เพียง แต่จะช่วยให้มาร์กอัปยากจน แต่เพราะมันมีเช่นส่วนแบ่งการตลาดที่มีขนาดใหญ่และมาพร้อมเพียงขวา (หรือผิด) เวลาก็มีส่วนเป็นจำนวนมากที่จะมาร์กอัปยากจนในทั่วไป

— Synetech

1

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

ในทางเทคนิคไม่มีอะไรผิดปกติกับสิ่งนี้จากมุมมอง CSS อย่างไรก็ตามการใช้แท็กที่สร้างขึ้นเป็นสิ่งที่คุณไม่ควรทำใน HTML

HTML เป็นภาษามาร์กอัปซึ่งหมายความว่าแต่ละแท็กสอดคล้องกับประเภทข้อมูลเฉพาะ

แท็กที่สร้างขึ้นของคุณไม่สอดคล้องกับข้อมูลประเภทใด ๆ วิธีนี้จะสร้างปัญหาจากโปรแกรมรวบรวมข้อมูลเว็บเช่น Google

อ่านข้อมูลเพิ่มเติมเกี่ยวกับความสำคัญของการมาร์กอัปที่ถูกต้อง

แก้ไข

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

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

แท็กที่กำหนดเองไม่สัมพันธ์กับมาตรฐานใด ๆ ดังนั้นจึงควรใช้ span / div กับคุณสมบัติ class / ID แทน

มีมากยกเว้นเฉพาะเจาะจงในการนี้เช่นเชิงมุม JS

— Dan Green-Leipciger
แหล่งที่มา

3

"ไม่เคย" เป็นคำตอบที่ไม่ถูกต้อง - คุณดูเหมือนจะลืมเกี่ยวกับ XHTML;)

— Izkata

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

— GolezTrol

2

Divs อ้างถึงกลุ่มขององค์ประกอบหลายอย่างที่เกี่ยวข้องซึ่งหมายถึงการแสดงในรูปแบบบล็อกและได้รับการจัดการเช่นนี้ Spans หมายถึงองค์ประกอบที่มีสไตล์คล้ายกันและมีความหมายที่จะแสดงแบบอินไลน์ไม่ใช่บล็อก แท็กที่กำหนดเองไม่สัมพันธ์กับมาตรฐานใด ๆ ดังนั้นจึงควรใช้ span / div กับคุณสมบัติ class / ID แทน

— Dan Green-Leipciger

ฉันลบบิตตัวอ่านหน้าจอของคุณออกเนื่องจากไม่ถูกต้อง เทคโนโลยีอำนวยความสะดวกจะอ่านดีเพราะมันจะถูกตีความว่าเป็น<imsocool>some awesome text</imsocool> <>...</>สิ่งที่จะไม่เกิดขึ้นคือพวกเขาจะไม่สามารถที่จะข้ามไปยังก้อนของข้อความที่ independendly <p>เช่นถ้ามันเป็น แน่นอนถ้าคุณเขียน DOCTYPE ของคุณเองและแมปimsocoolกับpมันมันจะได้ผล

— Ryan B

0

แม้ว่า CSS จะมีสิ่งที่เรียกว่า "ตัวเลือกแท็ก" แต่ก็ไม่ทราบว่าแท็กคืออะไร ที่เหลือสำหรับภาษาของเอกสารที่จะกำหนด CSS ได้รับการออกแบบมาเพื่อใช้งานไม่เพียง แต่กับ HTML เท่านั้น แต่ยังรวมถึง XML ด้วยที่ (สมมติว่าคุณไม่ได้ใช้ DTD หรือรูปแบบการตรวจสอบความถูกต้องอื่น ๆ ) แท็กสามารถเป็นอะไรก็ได้ คุณสามารถใช้กับภาษาอื่น ๆ ได้เช่นกันแม้ว่าคุณจะต้องมีความหมายของคุณเองสำหรับสิ่งที่ต้องการเช่น "แท็ก" และ "แอตทริบิวต์" ตรงกับสิ่งที่

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

— The Spooniest
แหล่งที่มา

0

ทำไม CSS ถึงทำงานกับองค์ประกอบปลอมได้? เพราะมันไม่ได้ทำให้ใครเจ็บเพราะคุณไม่ควรใช้มันดี

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

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

— ADJenks
แหล่งที่มา