การรีเซ็ตการเยื้องใน css การรีเซ็ตสไตล์ CSS ตัวอย่างวิธีแก้ปัญหาการทำงาน CSS รีเซ็ตหรือรีเซ็ตเป็นการตั้งค่าเริ่มต้น

ในบทความนี้เราจะพูดถึงการรีเซ็ตสไตล์และดูตัวอย่างการสร้างไฟล์ reset.css

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

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

เนื่องจากแนวคิดนี้มีมานานแล้ว จึงไม่น่าแปลกใจที่จะมีไฟล์รีเซ็ตสำเร็จรูป ซึ่งมักเรียกว่า Reset.css และเชื่อมต่อกับทุกโปรเจ็กต์

เข้ามาทำไม. แยกไฟล์- ใช่ เพียงเพราะสะดวกกว่าในการถ่ายโอนระหว่างโปรเจ็กต์หนึ่งไปอีกโปรเจ็กต์

นี่คือตัวอย่างการรีเซ็ต.css จากปี 2550:

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 ใบอนุญาต: ไม่มี (โดเมนสาธารณะ) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ตัวย่อ, ที่อยู่, ใหญ่, อ้างอิง, รหัส, del, dfn, em, img, ins, kbd, q, s, samp, เล็ก, โจมตี, แข็งแกร่ง, ย่อย, sup, tt, var, b, u, i, ศูนย์กลาง, dl, dt, dd, ol, ul, li, fieldset, แบบฟอร์ม, ป้ายกำกับ, ตำนาน, ตาราง, คำบรรยาย, tbody, tfoot, thead, tr, th, td, บทความ, กัน, ผืนผ้าใบ, รายละเอียด, ฝัง, รูป, figcaption, ส่วนท้าย, ส่วนหัว, hgroup, เมนู, nav, เอาท์พุต, ทับทิม, ส่วน, สรุป, เวลา, เครื่องหมาย, เสียง, วีดีโอ ( ระยะขอบ: 0; การขยาย: 0; เส้นขอบ: 0; ขนาดตัวอักษร: 100%; แบบอักษร: สืบทอด; จัดแนวตั้ง: เส้นฐาน ; ) /* รีเซ็ตบทบาทการแสดงผล HTML5 สำหรับเบราว์เซอร์รุ่นเก่า */ บทความ, นอกเหนือ, รายละเอียด, รูป, รูป, ส่วนท้าย, ส่วนหัว, hgroup, เมนู, nav, ส่วน ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( เครื่องหมายคำพูด: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- ล่มสลาย: ล่มสลาย;

ระยะห่างขอบ: 0; -

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

อินพุต, textarea,a , ปุ่ม, เลือก(โครงร่าง:none) img (border:none;) hr ( clear:both; border:none; พื้นหลัง:none; ) * ( background-repeat:no-repeat; ) /* HTML5 รีเซ็ตบทบาทการแสดงผลสำหรับเบราว์เซอร์รุ่นเก่า */ article, กัน, รายละเอียด, figcaption, รูป, ส่วนท้าย, ส่วนหัว, hgroup, เมนู, nav, ส่วน ( display: block; ) body ( line-height: 1; ) ol, ul ( list -style: none; padding:0; ) blockquote, q ( เครื่องหมายคำพูด: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border-collapse : ยุบ; ระยะห่างขอบ: 0;

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

CSS เริ่มต้น CSS สำหรับองค์ประกอบ HTML (2)

มันแตกต่างกันไปในแต่ละเบราว์เซอร์ ดังนั้น:

• ไฟร์ฟอกซ์ (ตุ๊กแก):- หรือไปที่ resources://gre-resources/ และดูที่ html.css
• Chrome/ซาฟารี (WebKit):
  • Chrome (กะพริบ):
• อินเทอร์เน็ตเอ็กซ์พลอเรอร์(ตรีศูล), มากกว่า รุ่นแรกๆ: http://web.archive.org/web/20170122223926/http://www.iecss.com/

ฉันจะหา CSS สำหรับ CSS เริ่มต้นของเบราว์เซอร์ได้ที่ไหน

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

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

ดังนั้น, มีเว็บไซต์ที่สามารถให้ข้อมูลทั้งหมดนี้แก่ฉัน (หรืออาจจะมากที่สุด) หรือไม่?

พื้นที่เก็บข้อมูล GitHub สำหรับข้อกำหนด W3C HTML ทั้งหมดและสไตล์ชีต CSS เริ่มต้นสำหรับนักพัฒนาสามารถพบได้

1.

2. รูปแบบมาตรฐานสำหรับ Internet Explorer

3.

4. รูปแบบมาตรฐานสำหรับ Opera

5. รูปแบบมาตรฐานสำหรับ HTML4 (ข้อกำหนด W3C)

6. รูปแบบมาตรฐานสำหรับ HTML5 (ข้อกำหนด W3C)

ตัวอย่าง ตามข้อกำหนด W3C HTML4 เริ่มต้น:

Html, ที่อยู่, blockquote, เนื้อความ, dd, div, dl, dt, fieldset, แบบฟอร์ม, กรอบ, เฟรมเซต, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, เมนู ก่อน ( จอแสดงผล: บล็อก; unicode-bidi: ฝัง ) li ( จอแสดงผล: รายการรายการ ) หัว ( จอแสดงผล: ไม่มี ) ตาราง ( จอแสดงผล: ตาราง ) tr ( จอแสดงผล: ตารางแถว ) thead ( จอแสดงผล: ตารางส่วนหัว- กลุ่ม ) tbody ( จอแสดงผล: ตารางแถวกลุ่ม ) tfoot ( จอแสดงผล: ตารางส่วนท้ายกลุ่ม ) col ( จอแสดงผล: ตารางคอลัมน์ ) colgroup ( จอแสดงผล: ตารางคอลัมน์กลุ่ม ) td, th ( จอแสดงผล: ตารางเซลล์ ) คำบรรยายภาพ (แสดง: คำบรรยายภาพตาราง) th (น้ำหนักแบบอักษร: ตัวหนา; การจัดตำแหน่งข้อความ: กึ่งกลาง) คำบรรยาย (การจัดตำแหน่งข้อความ: กึ่งกลาง) เนื้อหา (ระยะขอบ: 8px) h1 (ขนาดตัวอักษร: 2em; ระยะขอบ: .67em 0) h2 ( ขนาดตัวอักษร: 1.5em; ระยะขอบ: .75em 0 ) h3 ( ขนาดตัวอักษร: 1.17em; ระยะขอบ: .83em 0 ) h4, p, blockquote, ul, fieldset, แบบฟอร์ม, ol, dl, dir, เมนู ( อัตรากำไรขั้นต้น: 1.12em 0 ) h5 ( ขนาดตัวอักษร: .83em; อัตรากำไรขั้นต้น: 1.5em 0 ) h6 ( ขนาดตัวอักษร: .75em; อัตรากำไรขั้นต้น: 1.67em 0 ) h1, h2, h3, h4, h5, h6, b, บล็อกคำพูดที่แข็งแกร่ง (น้ำหนักแบบอักษร: โดดเด่นยิ่งขึ้น) (ระยะขอบซ้าย: 40px; ขอบขวา: 40px ) i, อ้างอิง, em, var, ที่อยู่ ( แบบอักษร: ตัวเอียง ) pre, tt, รหัส, kbd, samp ( ตระกูลแบบอักษร: monospace ) ปุ่ม pre ( white-space: pre ) พื้นที่ข้อความ อินพุต เลือก ( display: inline-block ) ใหญ่ ( ขนาดตัวอักษร: 1.17em ) เล็ก ย่อย sup ( ขนาดตัวอักษร: .83em ) ย่อย ( จัดแนวตั้ง: sub ) sup ( จัดแนวตั้ง: super ) ตาราง ( ระยะห่างขอบ: 2px; ) thead, tbody, tfoot ( แนวตั้ง: กลาง ) td, th, tr ( แนวตั้ง: สืบทอด ) s, ตี, เดล ( ตกแต่งข้อความ: เส้นผ่าน ) ชั่วโมง ( เส้นขอบ: 1px สิ่งที่ใส่เข้าไป ) ol, ul, dir, เมนู, dd ( margin-left: 40px ) ol ( list-style-type: decimal ) ol ul, ul ol, ul ul, ol ol ( margin-top: 0; margin-bottom: 0 ) u, ins ( การตกแต่งข้อความ: ขีดเส้นใต้ ) br:before ( content: "\A"; white-space: pre-line ) center ( text-align: center ) :link, :visited ( การตกแต่งข้อความ: ขีดเส้นใต้ ) :focus ( เค้าร่าง: กลับจุดบาง ๆ ) /* เริ่มต้นการตั้งค่าแบบสองทิศทาง (ไม่เปลี่ยนแปลง) */ BDO ( ทิศทาง: ltr; unicode-bidi: bidi-override ) BDO ( ทิศทาง: rtl; unicode-bidi: bidi-override ) * ( ทิศทาง: ltr; unicode-bidi: ฝัง ) * ( ทิศทาง: rtl; unicode-bidi: ฝัง ) @media print ( h1 ( ตัวแบ่งหน้าก่อน: เสมอ ) h1, h2, h3, h4, h5, h6 ( ตัวแบ่งหน้าหลัง: หลีกเลี่ยง ) ul, ol, dl ( ตัวแบ่งหน้าก่อน: หลีกเลี่ยง ) )

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

รีเซ็ตการตั้งค่า

สมมติว่าคุณตั้งค่ารูปภาพให้ลอยไปทางซ้าย:

Img ( ลอย : ซ้าย ; )

หลังจากนั้น รูปภาพในกรณีพิเศษ เช่น รูปภาพที่มีคลาส .recall จะต้องตั้งค่าไม่ให้เป็นฟอง แต่คุณจำไม่ได้ว่าคุณสมบัตินี้เขียนว่าอย่างไร

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

Img.recall ( ลอย : เริ่มต้น; )

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

ในกรณีส่วนใหญ่ ค่าเริ่มต้นจะเหมือนกันหรือคล้ายกันสำหรับเบราว์เซอร์ทั้งหมด ค่านี้มีประโยชน์อย่างยิ่งในสถานการณ์ต่อไปนี้:

ตัวอย่างการใช้งาน

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

ตัว ( color : hsl(333 , 50 % , 25 % - ) h1, h2, h3 ( สี : เริ่มต้น; )

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

นอกเหนือ ( ตระกูลแบบอักษร : เริ่มต้น; )

จะให้ผลลัพธ์ที่แตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน และแบบอักษรเอาต์พุตไม่จำเป็นต้องเป็น Times New Roman เนื่องจาก เบราว์เซอร์ที่แตกต่างกันอาจมีแบบอักษรเริ่มต้นที่แตกต่างกัน

มีการใช้งานอื่นๆ หลายประการสำหรับค่าเริ่มต้น:

การรีเซ็ตค่าดัชนี z ขององค์ประกอบให้เป็นค่าเริ่มต้น

รีเซ็ตช่องว่างภายในและแปลงค่าเป็นค่าเริ่มต้น

ข้อจำกัดในการใช้งาน

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

การแปล – ห้องปฏิบัติหน้าที่

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

ตัวอย่างหนึ่งคือสไตล์รายการเริ่มต้น โดยที่สไตล์ชีตเริ่มต้นของเบราว์เซอร์ของ Internet Explorer และ Opera มีรายการ padding ซ้ายขอบ: 30pt; ในขณะที่ Firefox และ KHTML มาพร้อมกับ padding-left: 40px; หากคุณต้องการเปลี่ยนช่องว่างภายในเริ่มต้นโดยการกำหนด ul (padding-left: 0;) สิ่งนี้จะทำให้ได้ผลลัพธ์ที่แตกต่างกันมากในเบราว์เซอร์

รีเซ็ตการตั้งค่า CSS

เพื่อให้เกิดความเสถียรเล็กน้อย นักพัฒนาบางคนรีเซ็ตระยะขอบและช่องว่างภายในทั้งหมดโดยใช้ตัวเลือกสากล:

* (ระยะขอบ: 0; การขยาย: 0;)

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

จุดประสงค์ของการรีเซ็ตคือการรีเซ็ตทุกสิ่งที่คุณทำได้... [และ] ทำหน้าที่เป็นจุดเริ่มต้นสำหรับสไตล์พื้นฐานของคุณเอง- เอริค เมเยอร์

html, เนื้อความ, div, span, แอพเพล็ต, วัตถุ, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ตัวย่อ, ที่อยู่, ใหญ่, อ้างอิง, รหัส, del, dfn, em, img, ins, kbd, q, s, samp, เล็ก, โจมตี, แข็งแกร่ง, ย่อย, sup, tt, var, b, u, i, ศูนย์กลาง, dl, dt, dd, ol, ul, li, fieldset, แบบฟอร์ม, ป้าย, ตำนาน, ตาราง, คำบรรยาย, tbody, tfoot, thead, tr, th, td, บทความ, กัน, ผืนผ้าใบ, รายละเอียด, ฝัง, รูป, figcaption, ส่วนท้าย, ส่วนหัว, hgroup, เมนู, nav, เอาต์พุต, ทับทิม, ส่วน, สรุป, เวลา, เครื่องหมาย, เสียง, วีดีโอ ( ระยะขอบ: 0; การขยาย: 0; เส้นขอบ: 0; ขนาดตัวอักษร: 100%; แบบอักษร: สืบทอด; จัดแนวตั้ง: เส้นฐาน; )

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

ปัญหาการรีเซ็ตการตั้งค่า CSS

การรีเซ็ต CSS ช่วยชีวิตได้ แต่ตอนนี้ โดยเฉพาะอย่างยิ่งเมื่อมี wireframes เพิ่มมากขึ้น พวกมันมักจะถูกใช้เหมือนเดิม ตัวอย่างเช่น Eric สันนิษฐานว่านักพัฒนารายอื่นจะเริ่มสร้างไซต์ตามรูปแบบการรีเซ็ตที่เขาเสนอ และแทนที่ตามนั้น และเวอร์ชันแรกของ Meyer Reset ได้รวมกฎนี้ไว้ชั่วคราว:

/* อย่าลืมกำหนดสไตล์โฟกัส! */ :focus ( โครงร่าง: 0; )

น่าเสียดายที่ไม่ใช่ทุกคนที่กำหนดสไตล์โฟกัสจริงๆ และ Eric ก็ลบมันออกจากเวอร์ชันที่สอง

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

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

กฎการรีเซ็ต CSS ซ้ำเนื่องจากการสืบทอด

ปรับให้เป็นมาตรฐาน.CSS

Nicholas Gallagher และ Jonathan Neal ใช้แนวทางที่แตกต่างออกไปกับ Normalize.css "ไฟล์ CSS ขนาดเล็กที่ช่วยให้มั่นใจถึงความสอดคล้องข้ามเบราว์เซอร์ที่ดีขึ้นในรูปแบบเริ่มต้น องค์ประกอบ HTML- เช่นเดียวกับการรีเซ็ต CSS มันทำให้เรามีจุดเริ่มต้นข้ามเบราว์เซอร์ที่แข็งแกร่ง ซึ่งเป็นเหตุผลหลักในการใช้การรีเซ็ตตั้งแต่แรก แต่ทั้งสองวิธีมีความแตกต่างกันในเชิงปรัชญา

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

เนื่องจากการเปลี่ยนแปลงใน Normalize.css มีเป้าหมายมากกว่า จึงไม่มีการสืบทอดกฎที่เขียนใหม่ในเครื่องมือพัฒนาเบราว์เซอร์ของคุณ นี่เป็นคำสั่ง ul: ง่ายๆ ซึ่งถูกทำให้มีสไตล์ด้วย Meyer Reset และ Normalize.css เวอร์ชัน 1 และ 2:

องค์ประกอบ "Unstyled" ของรายการที่ไม่เรียงลำดับ

การใช้การรีเซ็ตเมเยอร์

ใช้ Normalize.css v1

การใช้ Normalize.css v2

มีความแตกต่างที่ชัดเจนในปรัชญาเมื่อตัวอย่าง Meyer Reset ปรากฏเป็นข้อความธรรมดาสองสามบรรทัดโดยไม่มีระยะขอบ ช่องว่างภายใน หรือสัญลักษณ์แสดงหัวข้อย่อย ในขณะที่ตัวอย่าง Normalize.css ดูเหมือนสไตล์เริ่มต้น ความแตกต่างในรูปแบบที่ใช้กับ ul นี้ก็สังเกตเห็นได้ง่ายเช่นกัน

อย่างไรก็ตาม รูปแบบเหล่านี้ไม่ใช่ทุกสไตล์ที่ใช้กับ ul สำหรับการเปรียบเทียบ นี่คือภาพหน้าจอ "unstyled" เดียวกัน แต่มีสไตล์ตัวแทนผู้ใช้ที่มองเห็นได้ใน Firefox 21 และ Opera Next 15

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

CSS รีเซ็ตหรือรีเซ็ตเป็นการตั้งค่าเริ่มต้น

CSS Reset คือชุดของสไตล์ที่รีเซ็ตพารามิเตอร์บางตัว ติดตั้งโดยเบราว์เซอร์ค่าเริ่มต้น. นักพัฒนาเว็บแต่ละคนเขียนไฟล์นี้สำหรับตัวเองเป็นรายบุคคล และบางคนก็ใช้เวลา โซลูชั่นสำเร็จรูป- นี่คือที่ฉันเสนอให้เริ่มต้น มีมากมาย ตัวเลือกที่ดีรีเซ็ตสไตล์ แต่สิ่งที่ฉันชอบคืออันนี้ที่รวบรวมโดย Eric Meyer:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
ใบอนุญาต: ไม่มี (โดเมนสาธารณะ)
*/
html, เนื้อหา, div, สแปน, แอพเพล็ต, วัตถุ, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, ก่อน,
ก, คำย่อ, คำย่อ, ที่อยู่, ใหญ่, อ้างอิง, รหัส,
เดล, dfn, em, img, ins, kbd, q, s, samp,
เล็ก, โจมตี, แข็งแกร่ง, ย่อย, sup, tt, var,
b, คุณ, ฉัน, ศูนย์กลาง,
dl, dt, dd, ol, ul, li,
ชุดสนาม, แบบฟอร์ม, ป้าย, ตำนาน,
ตาราง, คำอธิบายภาพ, tbody, tfoot, thead, tr, th, td,
บทความ กัน ผืนผ้าใบ รายละเอียด ฝัง
รูป, figcaption, ส่วนท้าย, ส่วนหัว, hgroup,
เมนู, นำทาง, เอาท์พุต, ทับทิม, ส่วน, สรุป,
เวลา เครื่องหมาย เสียง วีดีโอ (
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
เส้นขอบ: 0;
ขนาดตัวอักษร: 100%;
แบบอักษร: สืบทอด;
แนวตั้ง-จัด: พื้นฐาน;
}
/* รีเซ็ตบทบาทการแสดงผล HTML5 สำหรับเบราว์เซอร์รุ่นเก่า */
บทความ, นอกเหนือ, รายละเอียด, รูปประกอบ, รูป,
ส่วนท้าย, ส่วนหัว, hgroup, เมนู, การนำทาง, ส่วน (
จอแสดงผล: บล็อก;
}
ร่างกาย (
ความสูงของเส้น: 1;
}
เฒ่า อุล (
รายการสไตล์: ไม่มี;
}
เครื่องหมายคำพูด,q(
คำพูด: ไม่มี;
}
blockquote:ก่อน, blockquote:หลัง,
ถาม:ก่อน, ถาม:หลัง (
เนื้อหา: "";
เนื้อหา: ไม่มี;
}
โต๊ะ (
ชายแดนยุบ: ยุบ;
ระยะห่างขอบ: 0;
}

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

วิธีรีเซ็ตการตั้งค่า CSS ด้วยตัวเอง

หากคุณมีคำสั่ง CSS ปกติไม่มากก็น้อย คุณสามารถลองเขียนกฎสองสามข้อด้วยตัวเองได้ ตัวอย่างเช่น:

*{
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
}

นี่อาจจะเป็นมากที่สุด คำสั่งง่ายๆ- เครื่องหมายดอกจันในกรณีนี้แสดงถึงตัวเลือกทั้งหมด ดังนั้นสไตล์จะถูกนำไปใช้กับองค์ประกอบทั้งหมดบนเว็บเพจ โดยจะรีเซ็ตการเติมและการเติม คุณอาจจะแปลกใจ แต่บรรทัดโค้ดง่ายๆ เหล่านี้ก็เพียงพอแล้วที่จะให้ความเข้ากันได้ข้ามเบราว์เซอร์ในเว็บเบราว์เซอร์หลายๆ ตัว คุณสามารถเพิ่มกฎอื่นๆ ทั้งหมดได้ตามดุลยพินิจของคุณเอง ฉันแนะนำให้เพิ่ม display: block สำหรับแท็ก HTML5 ทั้งหมด

จะวางกฎการรีเซ็ต CSS ได้ที่ไหน

ฉันเสนอรหัสด้านบนให้คุณแล้ว แต่จะใส่ได้ที่ไหน? มีสองตัวเลือกที่นี่:

• แทรกไว้ที่จุดเริ่มต้นของสไตล์ชีตหลักบนเว็บไซต์ของคุณ
• สร้างไฟล์ css ใหม่บนเซิร์ฟเวอร์และบันทึกโค้ดลงในไฟล์ จากนั้นบันทึกและเชื่อมต่อกับทุกหน้า ก่อน style.css ของตารางหลัก

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเชื่อมต่อสไตล์ชีต css กับ html โปรดดู

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

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