แม้ว่าผู้คนคาดหวังการเปลี่ยนแปลงบางอย่างบนหน้าจอ แต่ CSS และ HTML ก็สามารถโต้ตอบในเพจได้น้อยเกินไป และยังจำเป็นต้องนำไปใช้ในโค้ดอีกด้วย
ตัวอย่างเช่น ลิงก์เป็นสีนี้หรือสีนั้น พื้นที่ข้อความมีขนาดใหญ่หรือใหญ่ขนาดนั้น รูปภาพมีความโปร่งใสหรือทึบ โดยจะเปลี่ยนจากสถานะหนึ่งไปอีกสถานะหนึ่ง โดยตรง - ;
ส่งผลให้หน้าเว็บส่วนใหญ่ค่อนข้างเข้มงวด เนื่องจากองค์ประกอบต่างๆ จะเปลี่ยนหรือเปลี่ยนแปลงอย่างเข้มงวดเท่านั้น
ใช่ คุณสามารถหักโหมมันได้โดยใช้ DHTML, jQuery หรือเขียน JS ของคุณเอง แต่ต้องใช้โค้ดเพิ่มเติมเพื่อใช้งานสิ่งที่ควรเป็นฟังก์ชันที่เรียบง่ายมาก
สิ่งที่เราต้องการคือวิธีที่ง่ายและรวดเร็วในการเพิ่มเอฟเฟ็กต์การเปลี่ยนแปลงให้กับเพจ ในบทความนี้ คุณจะพบข้อมูลที่เป็นประโยชน์เกี่ยวกับ การเปลี่ยน CSS และวิธีใช้งาน
เมื่อไม่กี่เดือนที่ผ่านมา ฉันแนะนำว่านักออกแบบควรเริ่มใช้เทคโนโลยี CSS 3 ใหม่เพื่อให้ได้ฟังก์ชันพื้นฐานบางอย่างที่พวกเขาปรารถนามานาน ปัญหาเดียวคือไม่มีเทคโนโลยีเหล่านี้ใน IE รวมถึง IE8 ด้วย
มุมมองที่ผู้อ่านบางคนเชื่อว่าเทคโนโลยีเหล่านั้นจะมองไม่เห็นโดยผู้ใช้ 75% นั้นไม่น่าเชื่อถือ
สำหรับผู้อ่านเหล่านั้น ฉันอยากจะบอกว่า "เดี๋ยวก่อน" เพราะว่าฉันกำลังจะแนะนำให้คุณรู้จักกับคุณสมบัติ CSS ใหม่อีกอย่างหนึ่งที่ให้คุณเพิ่มเอฟเฟกต์การเปลี่ยนแปลงสุดเจ๋งให้กับองค์ประกอบใดๆ ด้วยโค้ดเพียงไม่กี่บรรทัด
การแปลง CSS เพิ่งเปิดตัวใน CSS 3 แต่ได้ถูกเพิ่มเป็นส่วนขยาย webkit นั่นคือตอนนี้สามารถใช้ได้เฉพาะในเบราว์เซอร์ที่ใช้ webkit เท่านั้น รวมถึง Apple Safari และ Google Chrome อย่างไรก็ตาม เมื่อพิจารณาจาก Opera 10.5 เวอร์ชันก่อนอัลฟ่า Opera จะรองรับการแปลง CSS 3 ใน 10.5 ถัดไป ดังนั้น หากต้องการดูเอฟเฟกต์จริงที่กล่าวถึงในบทความนี้ ขอแนะนำอย่างยิ่งให้คุณใช้ Chrome หรือ Safari 4 เพื่อดูบทความนี้
การแปลง CSS มาจากไหน
การแปลงเคยเป็นเพียงส่วนหนึ่งของ Webkit และเป็นพื้นฐานสำหรับสิ่งดีๆ บางอย่างที่ Safari UI สามารถทำได้แต่เบราว์เซอร์อื่นไม่สามารถทำได้
อย่างไรก็ตาม คณะทำงาน CSS ของ W3C ปฏิเสธที่จะเพิ่มการเปลี่ยนแปลงให้กับคุณสมบัติอย่างเป็นทางการ โดยมีสมาชิกบางคนยืนยันว่าการเปลี่ยนแปลงไม่ใช่คุณสมบัติของ CSS และจะได้รับการจัดการผ่านสคริปต์ที่ดีกว่า (ฉันมีความมั่นใจเต็มเปี่ยม ฉันมีมุมมองที่คล้ายกันในย่อหน้าก่อนหน้าและได้พูดคุยกับ Gao Gao ฉันคิดว่าแอนิเมชั่น CSS นั้นอยู่นอกเหนือขอบเขตของประสิทธิภาพ สิ่งโต้ตอบควรนำไปใช้กับสคริปต์ แต่ในภายหลังภายใต้ คำแนะนำของพี่กุยผมเริ่มด้วยความเข้าใจใหม่ - Shen Fei)
แต่นักออกแบบและนักพัฒนาหลายคนรวมทั้งตัวฉันเองด้วย ยืนยันว่าสิ่งเหล่านี้คือสไตล์จริงๆ—แค่สไตล์ ไดนามิก แทนที่จะเป็นสไตล์คงที่แบบดั้งเดิมที่เราใช้ทุกวัน
โชคดีที่การถกเถียงเรื่องสไตล์แบบไดนามิกเป็นเรื่องของอดีตไปแล้ว เมื่อเดือนมีนาคมที่ผ่านมา ตัวแทนจาก Apple และ Mozilla เริ่มเพิ่มโมดูลการแปลง CSS ให้กับฟีเจอร์ CSS 3 ซึ่งใกล้เคียงกับที่ Apple ได้เพิ่มลงใน WebKit มาก
การแนะนำโดยย่อเกี่ยวกับการปรับปรุงการออกแบบ
ก่อนที่เราจะดำเนินการต่อ ฉันขอเน้นย้ำเรื่องนี้: อย่าทำให้ฟังก์ชันการทำงานของเว็บไซต์ขึ้นอยู่กับสไตล์หากสไตล์นั้นไม่เหมาะกับเบราว์เซอร์ (นั่นคือ รองรับโดยเบราว์เซอร์ที่ใช้กันทั่วไปทั้งหมด)
ฉันขอย้ำอีกครั้งสำหรับผู้ที่พลาด: อย่าปล่อยให้ฟังก์ชันการทำงานของเว็บไซต์ขึ้นอยู่กับสไตล์ หากสไตล์นั้นไม่เป็นสากลในเบราว์เซอร์
ซึ่งหมายความว่าคุณสามารถใช้สไตล์ เช่น การเปลี่ยนภาพ เป็นการปรับปรุงการออกแบบเพื่อปรับปรุงประสบการณ์ผู้ใช้ โดยไม่กระทบต่อการใช้งานสำหรับผู้ใช้ที่มองไม่เห็น หากใช้งานได้โดยไม่ต้องแปลง CSS และผู้ใช้ยังสามารถทำงานให้เสร็จสิ้นได้ ก็ไม่เป็นไร และคุณสามารถใช้การแปลง CSS ได้
แปลจาก: การเปลี่ยน CSS 101
ภาษาจีน: เริ่มต้นใช้งานการแปลง CSS3 ผู้แต่งต้นฉบับ: Jason Cranford Teague
ผู้แปล: Shenfei โปรดเคารพลิขสิทธิ์และระบุแหล่งที่มาเมื่อพิมพ์ซ้ำ ขอบคุณ!