คำอธิบายโดยละเอียดของการปรับปรุงแบบก้าวหน้าของ CSS (Cascading Style Sheets)

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

องค์กรสไตล์ชีท

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

ใช้สไตล์ชีตหลายแบบ

การแบ่งสไตล์ของคุณเพียงเล็กน้อยจะก่อให้เกิดประโยชน์มากมาย แน่นอนว่าสไตล์ชีตที่มีมากกว่า 1,500 บรรทัดนั้นดูแลรักษาได้ยากนิดหน่อย และการแยกออกเป็นหลายสไตล์ชีทสามารถปรับปรุงขั้นตอนการทำงานได้ (และช่วยคุณประหยัดเวลา) มีประโยชน์อีกประการหนึ่งที่ไม่ค่อยมีใครกล่าวถึง: ช่วยให้ได้เอฟเฟ็กต์การนำเสนอที่สอดคล้องกันมากขึ้นในประเภทสื่อเป้าหมาย (การแปล: หมายถึงสื่อประเภทต่างๆ เช่น คอมพิวเตอร์ เครื่องพิมพ์ โทรทัศน์ โทรศัพท์มือถือ ฯลฯ)

ไฟล์ main.css มีกฎสไตล์ทั้งหมดของไซต์ ลองแยกออกเป็นสไตล์ชีตอิสระที่มีตัวพิมพ์ เลย์เอาต์ และสี ตั้งชื่อตาม: type.css,layout.css, color.css


(ภาพประกอบ: วิธีแยกสไตล์ชีตเดียวออกเป็นหลายสไตล์ชีตที่เกี่ยวข้องกัน)

เมื่อการแยกข้างต้นเสร็จสิ้น คุณสามารถใช้ลูกเล่นมหัศจรรย์เพื่อมอบประสบการณ์ "ความเที่ยงตรงต่ำ" โดยอัตโนมัติสำหรับเบราว์เซอร์ที่ล้าสมัย (เช่น IE5/Mac) และเบราว์เซอร์จำนวนมากที่ขาดการสนับสนุนที่แข็งแกร่งสำหรับเค้าโครง CSS ทำอย่างไร? ทุกอย่างขึ้นอยู่กับว่าคุณนำเข้าไฟล์อย่างไร สมมติว่า main.css ได้รับการแนะนำผ่านองค์ประกอบลิงก์:


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


ในอดีต นักพัฒนาจำนวนมากตั้งค่าสื่อเป็น "หน้าจอ" หรือ "การฉายภาพ" ทำให้รูปแบบเค้าโครงไม่ถูกต้องโดยสิ้นเชิงบน Netscape 4.x (คำอธิบายประกอบ: Netscape 4.x ไม่รองรับเค้าโครงที่ซับซ้อน เช่น การลอยตัวและการวางตำแหน่ง) อย่างไรก็ตาม มีวิธีแก้ไขที่ดีกว่า ก่อนที่จะอธิบายวิธีการนี้โดยละเอียด เรามาดูประเภทสื่อสำรองกันก่อน

ประเภทสื่อเสริม

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

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

โดยปกติแล้ว เราจำเป็นต้องใช้องค์ประกอบลิงก์อื่นเพื่อเพิ่มสไตล์การพิมพ์:


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

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

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


เราไม่ได้ประกาศประเภทสื่อ ดังนั้น Netscape 4.x จะอ่านสไตล์ทั้งหมดในไฟล์ทั้งสามนี้ อย่างไรก็ตาม เบราว์เซอร์ Netscape เข้าใจ CSS พื้นฐาน และเราสามารถใช้ประโยชน์จากสิ่งนี้ได้ เราสามารถจัดระเบียบสไตล์ของเราเพิ่มเติมได้โดยการย้ายสไตล์ทั้งหมดที่มีอยู่ในlayout.cssไปยังสไตล์ชีตใหม่ - ชื่อ screen.css อย่างเหมาะสม สุดท้าย อัปเดตเนื้อหาในlayout.cssเพื่อนำเข้า screen.css เพื่อให้ NS4.x และเบราว์เซอร์พี่น้องไม่ฉลาดอีกต่อไป (เนื่องจากไม่เข้าใจคำสั่ง @import) (หมายเหตุการแปล: สิ่งที่ผู้เขียนกำลังพูดถึงที่นี่คือการย้ายเนื้อหาทั้งหมดในlayout.css ไปยัง screen.css จากนั้นแนะนำ screen.css ผ่าน @import ในlayout.css ฉันคิดว่าวิธีที่ดีที่สุดคือการเพิ่มลงใน layout.css คงรูปแบบเค้าโครงพื้นฐานที่สุดที่ NS4.x เข้าใจได้ และย้ายรูปแบบเค้าโครงขั้นสูงอื่นๆ ไปที่ screen.css)


ยังมีพื้นที่สำหรับการปรับปรุง - สื่อที่ควรประกาศเป้าหมายสไตล์ชีต ซึ่งเราทำโดยการเพิ่มประเภทสื่อลงในการประกาศ @import:


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

เมื่อใช้เทคนิคเดียวกัน คุณสามารถนำเข้าไฟล์ print.css (ซึ่งคุณอาจเดาได้ว่ามีกฎเฉพาะสำหรับเค้าโครงการพิมพ์)


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


(ภาพประกอบว่าสไตล์ชีตหลายแบบเกี่ยวข้องกันอย่างไร และวิธีนำไปใช้กับเอกสาร)

จะจัดการกับ IE6 ได้อย่างไร?

สำหรับคนจำนวนมาก Internet Explorer 6 คือ Netscape 4 ใหม่ และใครๆ ก็อยากให้มันหายไป

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

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

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


จากนั้น ให้เพิ่มไฟล์ CSS เฉพาะเบราว์เซอร์เพื่อรวม "การแก้ไขเล็กน้อย" เหล่านั้น ขึ้นอยู่กับความต้องการของโปรเจ็กต์ ในโปรเจ็กต์ส่วนใหญ่ตอนนี้ ไฟล์เหล่านี้คือ ie7.css และ ie6.css หากโปรเจ็กต์ต้องการการสนับสนุนเวอร์ชันก่อน IE6 ฉันจะสร้างไฟล์ที่เกี่ยวข้องให้ด้วย (เช่น ie5.5.css เป็นต้น) ด้วยไฟล์เหล่านี้ ฉันจึงเริ่มเพิ่มกฎสไตล์ให้กับสไตล์ชีตที่เหมาะสม

ฉันเริ่มการทดสอบ CSS ใน Mozilla Firefox เนื่องจาก CSS ส่วนใหญ่ของฉันเขียนโดยใช้แถบด้านข้างตัวแก้ไข CSS ของ Firefox เมื่อฉันออกแบบเพจใน Firefox เสร็จแล้ว ฉันเปิดเบราว์เซอร์อื่นทันทีเพื่อทดสอบและดู ส่วนใหญ่ทำงานได้อย่างสมบูรณ์แบบเพราะเป็นไปตามมาตรฐานเว็บ จากนั้นเปิด IE7 เพื่อทดสอบ ในกรณีส่วนใหญ่ จะไม่ค่อยมีปัญหามากนัก ในบางครั้ง hasLayout จำเป็นต้องถูกทริกเกอร์ หรือข้อผิดพลาดเล็กๆ น้อยๆ ของเลย์เอาต์อื่นๆ จำเป็นต้องได้รับการแก้ไข แทนที่จะเขียนการแก้ไขเหล่านี้ลงในไฟล์สไตล์ชีตของชุดโปรแกรมพื้นฐาน ฉันเพิ่มมันลงใน ie7.css และแนะนำการแก้ไขเหล่านี้ผ่านความคิดเห็นแบบมีเงื่อนไขใน HEAD ของเอกสาร:


ความคิดเห็นแบบมีเงื่อนไขข้างต้นเปิดใช้งาน IE7 และต่ำกว่า (หมายเหตุการแปล: lte เป็นตัวย่อที่น้อยกว่าหรือเท่ากับ) เพื่อจดจำสไตล์ที่แนะนำ ดังนั้นเมื่อเรียกดูหน้าด้วย IE7 จะได้รับแพตช์เหล่านี้ แต่ถ้าคุณใช้ IE เวอร์ชันใหม่ ซึ่งอาจแก้ไขปัญหาเหล่านี้ได้ เช่น IE8 ละทิ้ง hasLayout และไม่มีปัญหาเหล่านี้อีกต่อไป สไตล์เหล่านี้จะถูกละเว้น ในทางกลับกัน สามารถรับสไตล์เหล่านี้ได้โดยใช้ IE6 นี่เป็นสิ่งที่ดีเพราะว่าการแสดงข้อบกพร่องใน IE7 มีแนวโน้มที่จะปรากฏใน IE6 เช่นกัน ตามที่กล่าวไว้ข้างต้น IE7 และเวอร์ชันต่ำกว่าไม่สามารถเข้าใจ @import ด้วยประเภทสื่อได้ การแนะนำ screen.css ในลักษณะนี้ไม่ถูกต้องสำหรับ IE7 และเวอร์ชันต่ำกว่า ดังนั้น คุณต้องเพิ่มคำสั่ง @import ที่ไม่มีประเภทสื่อที่ด้านบนของไฟล์ ie7.css เพื่อแนะนำ screen.css

เมื่อฉันแพตช์ IE7 แล้ว ฉันจะเปิด IE6 และดูว่าฉันต้องแพตช์อะไรอีกหรือไม่ หากจำเป็น ฉันจะเพิ่มความคิดเห็นแบบมีเงื่อนไขอื่นลงในเอกสาร โดยนำเข้าลงใน ie6.css:


จากนั้น เพียงเพิ่มแพตช์ที่ IE6 ต้องการลงในสไตล์ชีตที่เกี่ยวข้อง IE7 จะละเว้นสไตล์ชีตเหล่านี้ แต่จะยังคงส่งผลต่อเวอร์ชันต่างๆ เช่น IE5.5

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

ข้อควรพิจารณาอื่น ๆ

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

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

ใช้แบบฟอร์มติดต่อง่ายๆ เป็นตัวอย่าง:


(ภาพประกอบ: รูปแบบ HTML ที่ใช้ในตัวอย่างนี้ (โค้ดจะได้รับด้านล่าง))

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


วิธีที่เหมาะสมยิ่งขึ้นคือการเพิ่มเครื่องหมายทวิภาคกลับเข้าไปในเอกสารโดยการสร้างเนื้อหา:


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

บางทีคุณอาจค้นพบว่าการใช้ตัวเลือก CSS ขั้นสูง (การแปล: ตัวเลือก หรือแปลว่าตัวเลือกด้วย แต่ฉันคิดว่าตัวเลือกสามารถสะท้อนความหมายดั้งเดิมได้ดีขึ้น เช่น ตัวดำเนินการถูกแปลเป็นตัวดำเนินการ แทนที่จะเป็นตัวดำเนินการ) คุณสามารถเปลี่ยนสไตล์เฉพาะที่แนบมากับ เบราว์เซอร์ขั้นสูง ซึ่งจะช่วยปรับปรุงไซต์เมื่อเวลาผ่านไป ตัวอย่างที่ดีคือตัวเลือกแอตทริบิวต์ ซึ่งไม่เข้าใจ (และถูกละเลย) ใน IE6 รุ่นเดียวกัน และเบราว์เซอร์รุ่นก่อนหน้า Egor Kloos ใช้แนวคิดนี้อย่างสวยงามกับผลงานของเขาที่มีชื่อว่า "Gemination" บน CSS Zen Garden:


(ภาพประกอบ: การเปรียบเทียบการเรนเดอร์งาน CSS Zen Garden ของ Egor Kloos ("Double Double") ในเบราว์เซอร์มาตรฐานและ IE6)

เขาทำมันได้อย่างไร? นี่คือโค้ดตัวอย่างที่แก้ไขเล็กน้อย:


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

ในทำนองเดียวกัน เว็บไซต์ของ Andy Clarke มีเกร็ดความรู้ IE6 บางส่วน ด้วยการใช้ตัวกรองของ IE และเพิ่มคำอธิบายประกอบแบบมีเงื่อนไข Andy สามารถลบสีทั้งหมดออกจากไซต์ได้ และจัดเตรียมรูปภาพที่สามารถเปลี่ยนได้บางส่วนซึ่งสร้างประสบการณ์ "lo-fi" อย่างแท้จริง


(ภาพประกอบ: การเปรียบเทียบไซต์ของ Andy Clark ในเบราว์เซอร์มาตรฐานและ IE6)

เทคนิคสีเทาในภาพด้านบนคือ: ในสไตล์ชีทสำหรับ IE6 (และด้านล่าง) ที่เพิ่มโดยความคิดเห็นแบบมีเงื่อนไข ให้เพิ่มข้อความต่อไปนี้:


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

สรุป

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

ด้วยความรู้นี้ คุณจะก้าวไปสู่การเป็นผู้เชี่ยวชาญด้านการปรับปรุงแบบก้าวหน้าได้ดี