ค่าเริ่มต้น CSS สำหรับองค์ประกอบ html ใช้ค่า CSS เริ่มต้นเพื่อรีเซ็ตการตั้งค่า ใช้เอกสาร CSS แยกต่างหากสำหรับการรีเซ็ต CSS

คลาส ResourceBundle.Control มีชุดของวิธีการภายนอกที่ถูกเรียกโดยเมธอด ResourceBundle.getBundle() เมื่อค้นหาและโหลดบันเดิล ด้วยการสร้างคลาส Control คุณสามารถเปลี่ยนลักษณะการทำงานเริ่มต้นสำหรับการโหลดและการแคชได้

ในกรณีนี้ คุณต้องสร้างการใช้งานสองวิธีของคลาส Control: getFormats() และ newBundle() เมธอด getFormats() มีหน้าที่รับผิดชอบในการรองรับรูปแบบ XML และ newBundle() ทำงานร่วมกับรีซอร์สบันเดิล มีวิธีช่วยเหลือในคลาสฐานการควบคุมเพื่อเปลี่ยนชื่อชุดพื้นฐานเป็นชื่อทรัพยากรจริง

การใช้งานคลาส ResourceBundle.Control นี้รวมถึงคลาสย่อยของ XMLResourceBundle คลาสย่อยนี้ใช้ในการโหลดข้อมูลจากไฟล์ XML และใช้ในวิธี ResourceBundle

ด้านล่างนี้เป็นคำอธิบายของคลาส Control และการใช้งานเมธอด ResourceBundle:

นำเข้า java.io.*;
นำเข้า java.net.*;
นำเข้า java.util.*;

คลาสสาธารณะ XMLResourceBundleControl ขยาย ResourceBundle.Control (
XML สตริงคงที่ส่วนตัว = "xml" ;

รายการสาธารณะ getFormats (String baseName) (
กลับ Collections.singletonList (XML);
}

Public ResourceBundle newBundle ( สตริง baseName, สถานที่เกิดเหตุ,
รูปแบบสตริง, ตัวโหลด ClassLoader,โหลดบูลีนซ้ำ)
พ่น IllegalAccessException, InstantiationException, IOException{
ถ้า ((baseName == null ) || (locale == null ) || (รูปแบบ == null )
- (ตัวโหลด == null )) (
โยน NullPointerException ใหม่ () ;
}
บันเดิล ResourceBundle = null ;
ถ้า (format.equals(XML)) (
สตริงบันเดิลชื่อ = toBundleName(ชื่อฐาน สถานที่) ;
สตริงชื่อทรัพยากร = toResourceName(ชื่อบันเดิล รูปแบบ) ;
URL url = loader.getResource(ชื่อทรัพยากร);
ถ้า (url != null ) (
การเชื่อมต่อ URLConnection = url.openConnection() ;
ถ้า (การเชื่อมต่อ != null ) (
ถ้า (โหลดซ้ำ) (
การเชื่อมต่อ setUseCaches (เท็จ);
}
สตรีม InputStream = Connection.getInputStream() ;
ถ้า (สตรีม != null ) (
BufferedInputStream ทวิ = BufferedInputStream ใหม่ (
ลำธาร);
มัด = XMLResourceBundle ใหม่ (ทวิ);
ทวิ.ปิด();
}
}
}
}
ส่งคืนมัด;
}

คลาสคงที่ส่วนตัว XMLResourceBundle ขยาย ResourceBundle (
อุปกรณ์ประกอบฉากคุณสมบัติส่วนตัว;

XMLResourceBundle (สตรีม InputStream) พ่น IOException (
อุปกรณ์ประกอบฉาก = คุณสมบัติใหม่ ();
อุปกรณ์ประกอบฉาก.loadFromXML(สตรีม);
}

วัตถุที่ได้รับการป้องกัน handleGetObject (คีย์สตริง) (
ส่งคืนอุปกรณ์ประกอบฉาก getProperty (คีย์);
}

การแจงนับสาธารณะ getKeys() (
ตั้งค่า handleKeys = อุปกรณ์ประกอบฉาก.stringPropertyNames() ;
กลับ Collections.enumeration (handleKeys);
}
}

โมฆะคงสาธารณะหลัก (String args) (
("ทดสอบ2" ,
ใหม่ XMLResourceBundleControl()) ;
สตริง สตริง = Bundle.getString("รหัสช่วยเหลือ");
System.out.println ("HelpKey: " + สตริง ) ;
}
}

การใช้งานนี้ประกอบด้วยโปรแกรมทดสอบสามบรรทัด:

บันเดิล ResourceBundle = ResourceBundle.getBundle("Test2", XMLResourceBundleControl() ใหม่) ;
สตริง สตริง = Bundle.getString("รหัสช่วยเหลือ");
System.out.println ("HelpKey: " + สตริง ) ;

บรรทัดแรกเป็นที่สนใจมากที่สุดที่นี่ คุณต้องส่งการควบคุมของคุณไปยังเมธอด getBundle() หลังจากนี้คุณสามารถใช้ชุดนี้ได้เหมือนในกรณีอื่น ๆ

ด้านล่างนี้เป็นตัวอย่างไฟล์ XML Test2.xml:

http://java.sun.com/dtd/properties.dtd" > ตกลง ยกเลิก ช่วย ใช่ เลขที่

ผลลัพธ์ของการรันโปรแกรม XMLResourceBundleControl จะเป็น:

> java XMLResourceBundleControl HelpKey: วิธีใช้

การใช้งานข้างต้นไม่ได้ใช้เมธอด getTimeToLive() และ needsReload():

สาธารณะ getTimeToLive ยาว ( สตริง baseName, สถานที่เกิดเหตุ)

ความต้องการบูลีนสาธารณะโหลดใหม่ ( ชื่อฐานสตริง
สถานที่เกิดเหตุ
รูปแบบสตริง
ตัวโหลด ClassLoader
บันเดิล ResourceBundle
เวลาโหลดนาน)

เมธอด getTimeToLive() ส่งคืนอายุการใช้งานสำหรับบันเดิลทรัพยากรที่สร้างโดยใช้ ResourceBundle.Control ชุดทรัพยากรจะถูกเก็บไว้ในแคชเพื่อเร่งกระบวนการโหลดซ้ำ ดังนั้นเมื่อดาวน์โหลดชุดนี้อีกครั้ง ชุดนั้นจะอยู่ในแคช ค่า time-to-live ที่เป็นค่าบวกจะระบุเป็นมิลลิวินาทีว่าชุดจะยังคงอยู่ในแคชนานเท่าใดโดยไม่ได้รับการตรวจสอบอีกครั้ง ค่าเริ่มต้นที่ส่งคืนโดยเมธอด getTimeToLive() คือ TTL_NO_EXPIRATION_CONTROL ซึ่งปิดใช้งานการตรวจสอบการหมดอายุของแคช หากคุณไม่ต้องการแคชชุด ให้ส่งคืนค่า TTL_DONT_CACHE หากส่งคืน 0 บันเดิลจะถูกแคช แต่จะถูกตรวจสอบทุกครั้งที่เรียกใช้ getBundle() หากต้องการล้างแคช ให้เรียกใช้เมธอด clearCache() แบบคงที่ของคลาส ResourceBundle มีอาร์กิวเมนต์ ClassLoader เผื่อเลือกที่อนุญาตให้ล้างแคชที่สร้างโดยตัวโหลดเฉพาะ

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการปรับปรุงที่เกี่ยวข้องกับกระบวนการทำให้เป็นสากลใน Mustang คุณสามารถดูบล็อกของ John Oconer ผู้พัฒนาซอฟต์แวร์ Sun ได้ที่

บทความนี้เป็นบทความแรกในชุดเกี่ยวกับหัวข้อการทำให้ CSS เชื่อง วันนี้เราจะมาดูเรื่องเทคโนโลยี รีเซ็ต CSS.

เหตุใดจึงจำเป็น?

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

ตัวอย่างเช่น คุณใช้องค์ประกอบ กในเอกสารของคุณ เบราว์เซอร์ส่วนใหญ่ เช่น Internet Explorer และ Firefox เพิ่มลิงก์ สีฟ้าและ ขีดเส้นใต้- อย่างไรก็ตาม ลองจินตนาการว่าห้าปีต่อจากนี้มีคนตัดสินใจสร้างเบราว์เซอร์ใหม่ (เรียกอีกอย่างว่า UltraBrowser) นักพัฒนาเบราว์เซอร์ไม่ชอบสีน้ำเงินและรู้สึกรำคาญกับการขีดเส้นใต้ ดังนั้นพวกเขาจึงตัดสินใจเน้นลิงก์ สีแดงและ ตัวหนา- ขึ้นอยู่กับสิ่งนี้หากคุณตั้งค่าสไตล์พื้นฐานสำหรับองค์ประกอบ กจึงรับประกันได้ว่าจะเป็นแบบที่คุณต้องการ ไม่ใช่วิธีที่นักพัฒนา UltraBrowser ต้องการแสดง

แต่ตอนนี้เราไม่มีการเยื้องเลย รวมทั้งระหว่างแต่ละย่อหน้าด้วย! จะทำอย่างไร? อย่าโกหกและอย่ากลัว: ด้านล่างการรีเซ็ตเราจะอธิบายกฎที่เราต้องการ ซึ่งสามารถทำได้หลายวิธี: ระบุการเยื้องที่ด้านล่างหรือด้านบนของย่อหน้า ระบุเป็นเปอร์เซ็นต์ พิกเซล หรือ em

สิ่งสำคัญที่สุดคือ ตอนนี้เบราว์เซอร์เล่นตามกฎของเรา ไม่ใช่เล่นตามกฎของมัน ฉันตัดสินใจทำเช่นนี้:

* ( ระยะขอบ: 0; การขยาย: 0; ) p ( ระยะขอบ: 5px 0 10px 0; )

เป็นผลให้เราได้สิ่งที่เห็นได้ในตัวอย่างที่สาม

คุณสามารถสร้างสไตล์การรีเซ็ตของคุณเองได้ หากคุณกำลังแก้ไขปัญหาเฉพาะในโปรเจ็กต์ของคุณ อย่างไรก็ตาม ไม่มีคำแนะนำทีละขั้นตอนในการสร้างการรีเซ็ต CSS ของคุณเอง พึ่งพาหลักการและสไตล์ของคุณเอง

เพื่อช่วยให้คุณตัดสินใจได้ถูกต้อง ต่อไปนี้เป็นลิงก์เพิ่มเติมสองสามรายการ:

  1. Less is more - ตัวเลือกของฉันในการรีเซ็ต CSS (Ed Elliott)

2. การรีเซ็ต CSS ของคุณคือสิ่งแรกที่เบราว์เซอร์ควรเห็น

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

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

บางคนอาจถามคำถามเชิงตรรกะ: เหตุใดจึงเกิดเหตุการณ์เช่นนี้ คำตอบนั้นง่าย: กฎที่เขียนต่ำกว่าในข้อความของไฟล์ CSS (และต่ำกว่าตามลำดับในเอกสาร) จะเขียนทับกฎที่ประกาศไว้ก่อนหน้านี้

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

3. ใช้เอกสาร CSS แยกต่างหากสำหรับการรีเซ็ต CSS

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

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

4. พยายามหลีกเลี่ยงการใช้ตัวเลือกสากล

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

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

5. หลีกเลี่ยงคำอธิบายคุณสมบัติที่ซ้ำซ้อนเมื่อใช้การรีเซ็ต CSS

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

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

เนื้อ ( line-height: 1; สี: ดำ; พื้นหลัง: ขาว; )

สมมติว่าคุณรู้อยู่แล้วว่าองค์ประกอบนั้นจะมีลักษณะอย่างไร ร่างกาย:
  1. สีพื้นหลัง: #cccccc;
  2. สี: #996633;
  3. คุณต้องการทำซ้ำภาพพื้นหลังบางภาพในแนวนอน

ในกรณีนี้ ไม่จำเป็นต้องสร้างตัวเลือกใหม่เพื่ออธิบายคุณสมบัติของคุณ - คุณสามารถรวมคุณสมบัติเหล่านั้นในการรีเซ็ต CSS ได้เลย มาทำสิ่งนี้กัน:

เนื้อความ ( ความสูงของบรรทัด: 1; สี: #996633; พื้นหลัง:#ccc url(tiled-image.gif) ทำซ้ำ-x ซ้ายบน; )

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

Eric Meyer กล่าวเกี่ยวกับเรื่องนี้: “นี่ไม่ใช่กรณีที่ทุกคนควรใช้ CSS Reset โดยไม่มีการเปลี่ยนแปลง”



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

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

  • ไฟร์ฟอกซ์ (ตุ๊กแก):- หรือไปที่ resources://gre-resources/ และดูที่ html.css
  • Chrome/ซาฟารี (WebKit):
    • Chrome (กะพริบ):
  • Internet Explorer (ตรีศูล)เวอร์ชันก่อนหน้า: 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 เพื่อทำให้ส่วนหัวดูเหมือนส่วนหัว ฯลฯ ก่อนที่คุณจะกำหนดสไตล์ให้กับเพจ 1 เสียอีก แน่นอนว่ากลไกของเบราว์เซอร์แต่ละตัวใช้การตั้งค่าเริ่มต้นที่แตกต่างกันเล็กน้อย

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

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

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

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

* ( ระยะขอบ : 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%; แบบอักษร: สืบทอด; จัดแนวตั้ง: เส้นฐาน; )

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%;

แบบอักษร: สืบทอด;

แนวตั้ง - จัดตำแหน่ง : พื้นฐาน ;

มันจะรีเซ็ตคุณสมบัติบางอย่างขององค์ประกอบหลายอย่าง (แต่ไม่ใช่ทั้งหมด) ให้เป็นข้อความธรรมดาที่เทียบเท่ากัน เนื่องจากการรีเซ็ตเฉพาะองค์ประกอบที่ตรงกันเท่านั้น จึงช่วยหลีกเลี่ยงปัญหาบางประการ * (ระยะขอบ: 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



บทความที่เกี่ยวข้อง