สิบปีที่ผ่านมามีเพียงนักออกแบบเว็บไซต์ที่ทันสมัยที่สุดเท่านั้นที่จะใช้ CSS สำหรับเค้าโครงหน้าเว็บและการจัดแต่ง ในเวลานั้นการสนับสนุนของเบราว์เซอร์สำหรับเค้าโครง CSS นั้นไม่สมบูรณ์และเต็มไปด้วยช่องโหว่ดังนั้นในขณะที่คนเหล่านี้ยืนยันในการกำหนดมาตรฐานเว็บพวกเขาต้องใช้แฮ็กเพื่อให้หน้าเว็บของพวกเขาแสดงตามปกติในเบราว์เซอร์ทั้งหมด หนึ่งในเทคโนโลยีแฮ็คที่ใช้มากขึ้นเรื่อย ๆ คือเบราว์เซอร์สูดดมซึ่งใช้แอตทริบิวต์ Navigator.useragent ใน JavaScript เพื่อพิจารณาว่าแบรนด์และเวอร์ชันของเบราว์เซอร์ที่ผู้ใช้ใช้ เทคโนโลยีการดมกลิ่นเบราว์เซอร์สามารถใช้รหัสสาขาได้อย่างรวดเร็วเพื่อใช้คำแนะนำที่แตกต่างกับเบราว์เซอร์ที่แตกต่างกัน
วันนี้เลย์เอาต์ที่ใช้ CSS เป็นเรื่องธรรมดามากและเบราว์เซอร์รองรับมันแข็งแกร่งมาก แต่ตอนนี้ CSS3 และ HTML5 อยู่ที่นี่ประวัติศาสตร์ได้หันไปรอบ ๆ และกลับไปยังสถานที่ดั้งเดิม - การสนับสนุนเทคโนโลยีใหม่เหล่านี้โดยเบราว์เซอร์ต่างๆได้เริ่มไม่สม่ำเสมออีกครั้ง เราถูกใช้มานานในการเขียนรหัสที่เรียบร้อยและเป็นไปตามมาตรฐานและเราจะไม่ใช้แฮ็ก CSS หรือเบราว์เซอร์อีกต่อไปเพื่อดมกลิ่นเทคโนโลยีที่ไม่น่าเชื่อถือและต่ำ นอกจากนี้เรายังเชื่อว่าผู้ใช้จำนวนมากขึ้นจะเห็นด้วยกับแนวคิดที่ว่าเว็บไซต์ไม่จำเป็นต้องมีลักษณะเหมือนกันในเบราว์เซอร์ทั้งหมด ดังนั้นเมื่อเผชิญกับสถานการณ์ที่คุ้นเคยนี้ (การสนับสนุนเบราว์เซอร์ที่แตกต่างกัน) ตอนนี้เราควรทำอย่างไร? ง่าย: ใช้การตรวจจับคุณสมบัติซึ่งหมายความว่าเราไม่ต้องถามเบราว์เซอร์ว่าคุณเป็นใคร? เพื่อทำการคาดเดาที่ไม่น่าเชื่อถือ เราถามเบราว์เซอร์แทนว่าคุณสามารถทำสิ่งนี้ได้หรือไม่ นี่เป็นเรื่องง่ายที่จะตรวจจับเบราว์เซอร์ แต่ก็ยังน่าเบื่อที่จะใช้เวลาทดสอบด้วยตนเองทีละคน Modernizr สามารถช่วยเราได้ในเวลานี้
Modernizr: ห้องสมุดการตรวจจับการทำงานที่พัฒนาขึ้นเป็นพิเศษสำหรับ HTML5 และ CSS3
Modernizr เป็นห้องสมุดโอเพนซอร์ส JS ที่ทำให้นักออกแบบที่พัฒนาประสบการณ์ในระดับต่าง ๆ ขึ้นอยู่กับความแตกต่างในเบราว์เซอร์ของแขก (หมายถึงความแตกต่างในการสนับสนุนมาตรฐานใหม่) ช่วยให้นักออกแบบสามารถใช้ประโยชน์อย่างเต็มที่จากคุณสมบัติ HTML5 และ CSS3 สำหรับการพัฒนาในเบราว์เซอร์ที่รองรับ HTML5 และ CSS3 โดยไม่ต้องเสียสละการควบคุมเบราว์เซอร์อื่น ๆ ที่ไม่สนับสนุนเทคโนโลยีใหม่เหล่านี้
เมื่อคุณฝังสคริปต์ของ Modernizr ไว้ในหน้าเว็บมันจะตรวจพบว่าเบราว์เซอร์ปัจจุบันรองรับคุณสมบัติ CSS3 เช่น @font-face, Radius ชายแดน, ภาพชายแดน, Box-Shadow, RGBA () ฯลฯ บนพื้นฐานของการรับข้อมูลนี้คุณสามารถใช้กับเบราว์เซอร์ที่สนับสนุนคุณสมบัติเหล่านี้เพื่อตัดสินใจว่าจะสร้างทางเลือกที่ใช้ JS หรือลดระดับข้อมูลที่ไม่สนับสนุนพวกเขา นอกจากนี้ Modernizr ยังสามารถเปิดใช้งาน IE เพื่อรองรับการประยุกต์ใช้สไตล์ CSS ในองค์ประกอบ HTML5 เพื่อให้นักพัฒนาสามารถใช้แท็กความหมายเหล่านี้ได้ทันที
Modernizr ได้รับการพัฒนาตามทฤษฎีการปรับปรุงแบบก้าวหน้าดังนั้นจึงสนับสนุนและสนับสนุนให้นักพัฒนาสร้างเลเยอร์เว็บไซต์ของพวกเขาด้วยเลเยอร์ ทุกอย่างเริ่มต้นด้วยรากฐานที่ไม่ได้ใช้งานด้วยการใช้ JavaScript เพิ่มเลเยอร์แอปพลิเคชันที่ปรับปรุงแล้วทีละคน เนื่องจากใช้ Modernizr จึงเป็นเรื่องง่ายสำหรับคุณที่จะรู้ว่าเบราว์เซอร์รองรับอะไร ลองมาดูตัวอย่างของการสร้างเว็บไซต์ที่ทันสมัยโดยใช้ Modernizr
เริ่มต้นด้วยการใช้ Modernizr
ก่อนอื่นดาวน์โหลดเวอร์ชันล่าสุดที่เสถียรของ Modernizr จาก www.modernizr.com (ปัจจุบันเว็บไซต์ทางการของ Modernizr ถูกบล็อกในประเทศจีนและเราสามารถดาวน์โหลดได้จาก GitHub หรือง่ายขึ้นคุณสามารถดาวน์โหลดไฟล์สคริปต์เวอร์ชัน 1.7 ล่าสุดจากต้นแบบ) ในเว็บไซต์อย่างเป็นทางการคุณยังสามารถดูรายการคุณสมบัติทั้งหมดที่รองรับการตรวจจับ (หน้าสุดท้ายของบทความนี้จะให้รายการเหล่านี้เพื่อให้รองเท้าเด็กที่ไม่สามารถพลิกผ่านผนังสามารถรู้ได้ว่าพวกเขาสนับสนุนคนไหน) หลังจากดาวน์โหลดเวอร์ชันล่าสุด (ผู้เขียนใช้เวอร์ชัน 1.5 เมื่อเขียนบทความนี้) เพิ่มลงในพื้นที่หน้า:
ถัดไปเพิ่มคลาส NO-JS ลงในองค์ประกอบ
เมื่อ Modernizr ทำงานมันจะเปลี่ยนคลาส NO-JS เป็น JS เพื่อแจ้งให้คุณทราบว่ากำลังทำงานอยู่ Modernizr ไม่เพียง แต่ทำสิ่งนี้ แต่ยังเพิ่มคลาสคลาสให้กับคุณสมบัติทั้งหมดที่ตรวจพบ หากเบราว์เซอร์ไม่รองรับคุณสมบัติจะนำหน้าชื่อคลาสที่สอดคล้องกับคุณสมบัติโดยไม่มี- ดังนั้นองค์ประกอบของคุณอาจเป็นเช่นนี้:
Modernizr จะสร้างวัตถุ JS ชื่อ Modernizr ซึ่งเป็นรายการของผลลัพธ์บูลีนที่ให้ไว้สำหรับแต่ละคุณสมบัติที่ตรวจพบ หากเบราว์เซอร์รองรับองค์ประกอบผ้าใบใหม่ค่าของ Modernizr.canvas นั้นเป็นจริง หากเบราว์เซอร์ไม่รองรับองค์ประกอบใหม่นี้ค่าที่เกี่ยวข้องเป็นเท็จ วัตถุ JS นี้จะมีข้อมูลรายละเอียดเพิ่มเติมสำหรับฟังก์ชั่นบางอย่างเช่น modernizr.video.h264 จะบอกคุณว่าเบราว์เซอร์รองรับตัวแปลงสัญญาณพิเศษนี้หรือไม่ Modernizr.InputTypes.Search จะบอกคุณว่าเบราว์เซอร์ปัจจุบันรองรับประเภทอินพุตการค้นหาใหม่ ฯลฯ
หน้าเล็ก ๆ ที่ไม่ผ่านการประมวลผลและเรียบง่ายของเราดูเหมือนระบบทดสอบล่วงหน้า แต่มีความหมายและการเข้าถึงที่ดีกว่า มาเพิ่มสไตล์พื้นฐานเล็กน้อย: รูปแบบข้อความสีและเลย์เอาต์เล็ก ๆ น้อย ๆ เพื่อให้ดูดีขึ้น ในปัจจุบันไม่มีอะไรใหม่เพียงเพิ่มสไตล์การแสดงออกลงในหน้าโครงสร้างความหมาย HTML และดูที่หน้าหลังจากเพิ่มสไตล์
ด้านล่างเราต้องการปรับปรุงหน้านี้เพื่อให้น่าสนใจยิ่งขึ้น ฉันต้องการใช้เอฟเฟกต์ข้อความแปลก ๆ กับ H1 บนหัวแบ่งรายการคุณสมบัติการตรวจจับออกเป็นสองคอลัมน์แล้วรับทุกอย่างเกี่ยวกับ Modernizr ด้วยภาพถ่ายทางด้านขวา ฉันยังต้องการทำให้เส้นขอบรอบเนื้อหาของหน้าสวยงาม ตอนนี้ยิ่ง CSS3 ที่ทรงพลังมากขึ้นช่วยให้คุณเพิ่มคุณสมบัติเพิ่มเติมให้กับกฎที่จะเพิกเฉยต่อพวกเขาหากเบราว์เซอร์ไม่รองรับ ด้วย CSS Cascade (การสืบทอด) คุณสามารถใช้คุณสมบัติใหม่เช่น Radius ชายแดนโดยไม่ต้องพึ่งพา Modernizr อย่างไรก็ตามการใช้ Modernizr สามารถให้คุณสมบัติบางอย่างที่ไม่สามารถให้ได้โดยวิธีการที่มีอยู่: ชื่อคลาสที่ปรับเปลี่ยนแบบไดนามิกตามการสนับสนุนที่แตกต่างของเบราว์เซอร์สำหรับสิ่งใหม่ ฉันจะแสดงสิ่งนี้โดยการเพิ่ม 2 กฎใหม่ในหน้าของเรา:
กฎแรกเพิ่มมุมโค้งมน 12 พิกเซลให้กับองค์ประกอบ #Content แต่ในหน้าเว็บที่มีอยู่เราได้ตั้งค่าขอบด้วยองค์ประกอบ #Content ที่มีค่าแอตทริบิวต์ที่ 2px ountset #666 สิ่งนี้ดูค่อนข้างดีเมื่อกล่องเป็นมุมฉาก แต่ไม่ได้อยู่ในมุมโค้งมน ขอบคุณ Modernizr ฉันสามารถตั้งค่าขอบ 1px Real real to Box ด้วย Radius Border ที่รองรับโดยเบราว์เซอร์
กฎข้อที่สองนั้นสูงขึ้นเล็กน้อย เราเพิ่มเงาลงในองค์ประกอบ #Content และลบแอตทริบิวต์เส้นขอบสำหรับเบราว์เซอร์ที่รองรับแอตทริบิวต์ Box-Shadow ทำไม เนื่องจากเบราว์เซอร์ส่วนใหญ่ไม่ได้ให้ประสิทธิภาพที่ดีสำหรับการรวมกันของขอบและมุมกับเงา (นี่เป็นข้อบกพร่องในเบราว์เซอร์ที่ควรสังเกต แต่เราต้องทนได้ในตอนนี้) แทนที่จะใช้เงาและใช้พรมแดนเท่านั้นฉันอยากจะใช้เงากับองค์ประกอบล้อมรอบ ด้วยวิธีนี้ฉันสามารถมีประสิทธิภาพ CSS ที่ดีที่สุดแม่นยำและดีที่สุดในโลก: เงาที่สวยงามจะปรากฏในเบราว์เซอร์ที่รองรับแอตทริบิวต์กล่อง เบราว์เซอร์ที่รองรับแอตทริบิวต์แนวชายแดนเท่านั้นที่จะนำเสนอเส้นขอบบาง ๆ ที่สวยงาม สำหรับเบราว์เซอร์ที่หักที่ไม่รองรับทั้งสองนี้เราจะเห็นเส้นขอบมุมขวา 2 พิกเซล
ด้านล่างเราต้องการใช้แบบอักษรพิเศษที่กำหนดเองกับส่วนหัว ต่อไปนี้เป็นคำสั่งปัจจุบันของเราสำหรับ H1 โดยไม่มีการเปลี่ยนแปลง:
ข้อความเหล่านี้ทำงานได้ดีบนหน้าฐานของเราและขนาดข้อความ 27 พิกเซลก็เหมาะสำหรับการแสดงแบบอักษรเหล่านั้นที่เราตั้งไว้สำหรับ H1 แต่สำหรับแบบอักษรฉันจะใช้ชื่อว่าสวยงาม 27 พิกเซลนั้นเล็กเกินไป ที่นี่เราต้องการเพิ่มกฎอื่น ๆ เพื่อใช้แบบอักษรที่กำหนดเองนี้:
ก่อนอื่นเราเพิ่มการประกาศ @font-face และระบุเส้นทางชื่อไฟล์และชื่อตัวอักษรสำหรับแบบอักษรที่กำหนดเองของเรา จากนั้นเราใช้คำสั่ง CSS เพื่อเลือกสไตล์ตัวอักษรสำหรับ H1 ของเรา คุณจะเห็นว่าฉันเลือกขนาดตัวอักษรขนาดใหญ่ที่นี่เพราะตัวอักษรที่สวยงามนั้นมีขนาดเล็กกว่าข้อความของแบบอักษรอื่น ๆ ดังนั้นเราต้องสั่งให้เบราว์เซอร์ให้ H1 ขนาดตัวอักษรขนาดใหญ่เมื่อแสดงแบบอักษรที่กำหนดเองของเรา
นอกจากนี้ข้อความที่เขียนด้วยลายมือที่สวยงามของเรายังมีปัญหาการแสดงผลบางอย่างด้วยการเงาข้อความดังนั้นเราต้องยกเลิกข้อความเงาเมื่อเบราว์เซอร์ตัดสินใจใช้ข้อความที่กำหนดเอง นอกจากนี้รายการชิ้นส่วนคุณสมบัติการตรวจจับจะต้องแบ่งออกเป็นสองคอลัมน์ เพื่อให้บรรลุเป้าหมายของฉันฉันต้องการใช้แอตทริบิวต์คอลัมน์ CSS ที่ยอดเยี่ยมซึ่งจะช่วยให้เบราว์เซอร์สามารถแบ่งรายการออกเป็นคอลัมน์ได้อย่างชาญฉลาดโดยไม่รบกวนการสั่งซื้อ แม้ว่ารายการของเราจะไม่มีตัวเลขตัวเลข แต่ก็มีการจัดเรียงตามลำดับตัวอักษร แน่นอนว่าเบราว์เซอร์ทั้งหมดไม่สนับสนุนคุณสมบัตินี้ สำหรับผู้ที่ไม่สนับสนุนเราใช้ Float เพื่อให้บรรลุวัตถุประสงค์ของ 2 คอลัมน์ - หลังจากใช้ Float รายการจะไม่ถูกจัดเรียงตามตัวอักษรอีกต่อไปอีกต่อไป แต่ก็ดีกว่าไม่มีอะไรเลย
ฉันใช้ Modernizr อีกครั้งเพื่อตั้งค่าคุณสมบัติที่แตกต่างกันสำหรับสถานการณ์ที่แตกต่างกัน หากเบราว์เซอร์รองรับคอลัมน์ CSS มันจะแบ่งรายการออกเป็น 2 คอลัมน์อย่างสมบูรณ์แบบ หากไม่ได้รับการสนับสนุนเรายังสามารถใช้วิธีการลอยเพื่อทำรายการเป็นสองคอลัมน์โดยลอยตัว แม้ว่ามันจะไม่สมบูรณ์แบบ แต่ก็ดีกว่าการใช้รายการคอลัมน์เดี่ยวที่ยาวโดยตรง
ที่นี่คุณอาจสังเกตเห็นว่าฉันได้เพิ่มคำนำหน้า (-moz-, -webkit-, -o-) ลงในแอตทริบิวต์ นี่เป็นเพราะผู้ผลิตเบราว์เซอร์ที่แตกต่างกันมีคำจำกัดความที่แตกต่างกันของการใช้งานฟังก์ชั่นนี้ดังนั้นในการใช้ฟังก์ชั่นนี้พวกเขาจำเป็นต้องเพิ่มคำนำหน้าที่สอดคล้องกันในเบราว์เซอร์ที่แตกต่างกัน
หลังจากการเปลี่ยนแปลงเหล่านี้หน้าใหม่ของเราดูดีขึ้น
เราจะเพิ่มการปรับปรุงที่ก้าวหน้ามากขึ้นในหน้าของเราเพื่อสิ้นสุดการสอนนี้ เบราว์เซอร์ที่ใช้ WebKit รองรับเอฟเฟกต์พิเศษที่ยอดเยี่ยมกว่าเช่นการแปลง CSS ภาพเคลื่อนไหวและการแปลงสามมิติ และฉันต้องการใช้เอฟเฟกต์พิเศษเหล่านี้ในหน้าของขั้นตอนสุดท้าย อีกครั้งคุณสมบัติเหล่านี้จะถูกเพิ่มเข้าไปใน CS ที่มีอยู่ของเราและละเว้นในเบราว์เซอร์ที่ไม่สนับสนุนพวกเขา ดังนั้นจึงมีความเหมาะสมที่จะใช้ Modernizr สำหรับสถานการณ์นี้ซึ่งไม่ได้รับการสนับสนุนอย่างค่อยเป็นค่อยไปในมือข้างหนึ่ง
ชุดแรก:
กฎ @KeyFrames เป็นส่วนหนึ่งของข้อกำหนดแอนิเมชั่น CSS ใหม่และปัจจุบันรองรับ WebKit เท่านั้น ช่วยให้คุณสามารถประกาศเส้นทางแอนิเมชั่นที่สมบูรณ์สำหรับแอตทริบิวต์ใด ๆ และเปลี่ยนพวกเขาในทุกขั้นตอนที่คุณต้องการ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับภาพเคลื่อนไหวให้อ่านข้อมูลจำเพาะร่างการทำงานของ W3C
ที่นี่เราเพิ่มรหัสที่ทำให้องค์ประกอบหมุนในพื้นที่สามมิติ:
เนื่องจากโลโก้จะต้องหมุนและฉันหวังว่ามันจะเข้ากันได้อย่างกลมกลืนกับพื้นหลังมากขึ้นเมื่อมีการหมุนดังนั้นไฟล์รูปแบบ PNG จึงถูกใช้ที่นี่ ฉันยังใช้แอตทริบิวต์ที่ซ่อนอยู่เพื่อซ่อนข้อความไว้ในส่วนหัวด้วยพิกเซลที่เยื้อง-9999 พิกเซล เป็นเรื่องที่น่าสนใจที่จะทำให้องค์ประกอบหมุนในรูปแบบ 3 มิติ แต่ไม่สวยเกินไป ในที่สุดเราเลือกที่จะใช้กฎแอนิเมชันตั้งค่าระยะเวลาการหมุนเป็น 2 วินาทีหมุนไปตามแกนกลางของตัวเองไม่หยุด
หน้าสุดท้ายดูดีและตั้งค่าแอนิเมชั่นที่สนุกสนานสำหรับเบราว์เซอร์ WebKit ฉันหวังว่าคุณจะเข้าใจได้ว่ามันยอดเยี่ยมแค่ไหนที่จะทำให้ข้อมือของคุณมีการควบคุม Modernizr ผ่านเว็บไซต์ของคุณและมันง่ายแค่ไหนที่จะทำให้การเพิ่มประสิทธิภาพแบบก้าวหน้าจริง นี่ไม่ได้เป็นเพียงประโยชน์อย่างเต็มที่ของ Modernizr เท่านั้น แต่ยังสามารถช่วยคุณสร้างทางเลือกตาม JS และช่วยให้คุณใช้คุณสมบัติใหม่ที่ยอดเยี่ยมของ HTML5