แปลจาก: การเปลี่ยน CSS 101
ภาษาจีน: ข้อมูลเบื้องต้นเกี่ยวกับการแปลง CSS3
ผู้เขียนต้นฉบับ: เจสัน แครนฟอร์ด ทีก
ผู้แปล: เซิน เฟย
โปรดเคารพลิขสิทธิ์และระบุแหล่งที่มาเมื่อพิมพ์ซ้ำ ขอขอบคุณ!
แม้ว่าผู้คนคาดหวังการเปลี่ยนแปลงบางอย่างบนหน้าจอ แต่ 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 นั้นอยู่นอกเหนือขอบเขตของประสิทธิภาพ สิ่งโต้ตอบควรนำไปใช้กับสคริปต์ แต่ในภายหลังภายใต้ คำแนะนำของ พี่ Gui ฉันเริ่มด้วยความเข้าใจใหม่ - Shen Fei)
แต่นักออกแบบและนักพัฒนาหลายคนรวมอยู่ด้วย ยืนยันว่าสิ่งเหล่านี้คือสไตล์จริงๆ - มันเป็นแค่สไตล์ ไดนามิก แทนที่จะเป็นสไตล์คงที่แบบดั้งเดิมที่เราใช้ทุกวัน
โชคดีที่การถกเถียงเรื่องสไตล์ไดนามิกเป็นเรื่องของอดีตไปแล้ว เมื่อเดือนมีนาคมที่ผ่านมา ตัวแทนจาก Apple และ Mozilla เริ่ม เพิ่มโมดูลการแปลง CSS ให้กับฟีเจอร์ CSS 3 ซึ่งใกล้เคียงกับที่ Apple ได้เพิ่มลงใน WebKit มาก
การแนะนำสั้นๆ เกี่ยวกับการปรับปรุงการออกแบบก่อนที่เราจะดำเนินการต่อ ฉันขอเน้นย้ำเรื่องนี้: อย่าทำให้ฟังก์ชันการทำงานของเว็บไซต์ขึ้นอยู่กับสไตล์หากสไตล์นั้นไม่เหมาะกับเบราว์เซอร์ (นั่นคือ รองรับโดยเบราว์เซอร์ที่ใช้กันทั่วไปทั้งหมด)
สำหรับผู้ที่พลาด ฉันขอย้ำอีกครั้ง: อย่าปล่อยให้ฟังก์ชันการทำงานของเว็บไซต์ขึ้นอยู่กับสไตล์ หากสไตล์นั้นไม่เป็นสากลในเบราว์เซอร์
อย่างไรก็ตาม คุณสามารถใช้สไตล์ เช่น การแปลง เพื่อปรับปรุงการออกแบบเพื่อปรับปรุงประสบการณ์ผู้ใช้ โดยไม่กระทบต่อการใช้งานสำหรับผู้ใช้ที่มองไม่เห็น หากใช้งานได้โดยไม่ต้องแปลง CSS และผู้ใช้ยังสามารถทำงานให้เสร็จสิ้นได้ ก็ไม่เป็นไร และคุณสามารถใช้การแปลง CSS ได้