“ CSS 3 ไม่ใช่ของใหม่ และก็ไม่ได้เป็นแค่มุมโค้งมนที่ใช้กับคุณสมบัติ border-radius มันนั่งอยู่ที่นั่นอย่างอดทน พร้อมสำหรับการเปิดตัว จิบกาแฟ รอให้เบราว์เซอร์ปูพรมแดง เห็นไหมว่าเบราว์เซอร์จำเป็นต้องตามทัน...
–บทความนี้ต้องการบันทึกผลงานชิ้นเอกของไตรมาสที่ 2 ปี 2009 ของ 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