นำเราไปสู่อีกระดับด้วย CSS 3

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

– บทความนี้ต้องการบันทึกผลงานชิ้นเอกประจำไตรมาส 2 ปี 2552 ของ ISD WEBTEAM: คู่มืออ้างอิง CSS 3.0 (เวอร์ชันภาษาจีน)

พื้นหลัง

เอกสารอ้างอิง CSS2.0 ที่แสดงโดย "คู่มือภาษาจีนสไตล์ชีต" ของ Su Yu ได้ใช้ร่วมกับนักออกแบบเว็บไซต์ในประเทศจำนวนมากมาเกือบ 10 ปี ผลกระทบนี้ส่งผลกระทบอย่างกว้างขวาง แต่ด้วยการพัฒนาเทคโนโลยี CSS อย่างต่อเนื่อง นักออกแบบส่วนใหญ่ได้รับอิทธิพลจากวัสดุแบบดั้งเดิมและ ไม่สามารถข้ามรั้วที่มีอยู่ได้ ทำให้ตัวเองมีภาระหนัก คุณสังเกตไหมว่า CSS 3 กำลังได้รับแรงผลักดัน? คุณกระตือรือร้นที่จะเริ่มใช้มันแต่ไม่รู้ว่าจะเริ่มต้นอย่างไร? เมื่อคุณสมบัติใหม่ของ CSS 3 ได้รับการคาดหวังอย่างสูง คู่มืออ้างอิงภาษาจีน CSS3.0 ของเราก็เริ่มมีขึ้น...

CSS3 คืออะไร?

CSS เป็นตัวย่อของ Cascading Style Sheet แปลว่า "สไตล์ชีทแบบเรียงซ้อน" เป็นภาษามาร์กอัปที่ใช้สำหรับควบคุม (ปรับปรุง) สไตล์หน้าเว็บ และอนุญาตให้แยกข้อมูลสไตล์ออกจากเนื้อหาหน้าเว็บ
CSS3.0 หมายถึง CSS เวอร์ชันถัดไป และ 3.0 คือหมายเลขเวอร์ชัน

CSS 3 ทำให้เราประหลาดใจอะไร?

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

คำแนะนำสำหรับการใช้งาน

• คู่มือนี้มีไว้สำหรับผู้สร้างเว็บเพจใหม่หรือวิศวกรพัฒนาส่วนหน้า
• คู่มือนี้แปลตามร่างการทำงานของ W3C และมีความไม่แน่นอนบางประการ สิทธิ์ในการตีความขั้นสุดท้ายเป็นของ ISD WEBTEAM
• เค้าโครงของคู่มือนี้อ้างอิงถึงการแสดงตัวอย่าง CSS ของ css3.info ซึ่งแบ่งคุณสมบัติของ CSS 3 ออกเป็นเก้าหมวดหมู่ ได้แก่ เส้นขอบ พื้นหลัง สี ข้อความ อินเทอร์เฟซผู้ใช้ โมเดลกล่องพื้นฐาน เนื้อหา โมดูลอื่นๆ และตัวเลือกขั้นสูง
• รายการความเข้ากันได้ชั่วคราวแสดงความเข้ากันได้ของเบราว์เซอร์อย่างเป็นทางการสำหรับ Internet Explorer, FireFox, Opera, Safari และ Chrome
• ในรายการแอตทริบิวต์ส่วนตัว เบราว์เซอร์ที่ใช้กลไก Gecko จะรวม Firefox และแอตทริบิวต์ส่วนตัวจะเริ่มต้นด้วย -moz-; เบราว์เซอร์ที่ใช้กลไก webkit ได้แก่ Safari และ Chrome โดยเริ่มต้นด้วย -webkit-; -o- Start เช่นเดียวกับ Internet Explorer เริ่มต้นด้วย -ms- ปัจจุบันมีเพียง IE8 เท่านั้นที่รองรับคำนำหน้า -ms-
• ตัวอย่างที่สร้างขึ้นสำหรับแต่ละแอตทริบิวต์ ยกเว้นตัวอย่างของ @font face ที่นำมาจาก Microsoft เนื่องจากลิขสิทธิ์แบบอักษร ล้วนจัดทำขึ้นโดยสมาชิกในทีมตามประสบการณ์ของตนเอง เนื่องจากข้อจำกัดของความยาวของคู่มือ ตัวอย่างบางส่วนจึงอาจเข้าใจได้ยาก เราจะหารือเกี่ยวกับสิ่งเหล่านี้ในอนาคต ตัวอย่างบางส่วนได้รับการวิเคราะห์โดยละเอียดในบทความแยกต่างหาก
• การสืบทอด เนื่องจากร่างการทำงานของ W3C ไม่มีคำอธิบายที่ชัดเจนเกี่ยวกับการสืบทอด ยังไม่มีการทดสอบการสืบทอดในประเด็นนี้ และยังไม่มีค่าอ้างอิง
• หากไม่สามารถเปิดไฟล์ CHM ที่ดาวน์โหลดมาได้ คุณสามารถลองคลิกขวาที่ไฟล์ CHM แล้วคลิก "ปลดล็อก" ใน "คุณสมบัติ"
• คู่มือนี้มีไว้เพื่อการสื่อสารเป็นหลัก มีข้อจำกัดด้านเวลาและเป็นงานกลางคืนแบบมือสมัครเล่น ข้อผิดพลาดและการละเว้นเป็นสิ่งที่หลีกเลี่ยงไม่ได้ เราจะปรับปรุงและอัปเกรดคู่มือนี้ต่อไป คู่มือเวอร์ชัน V1 มีให้ที่นี่ ซึ่งได้รับการอัปเดตเป็นครั้งคราวทุกเดือน

ที่มา: Tencent Webteam