นักออกแบบเว็บไซต์หญิงที่ทำงานบนคอมพิวเตอร์ของเธอในสำนักงานสมัยใหม่
เครดิตรูปภาพ: ภาพธุรกิจลิง / รูปภาพ iStock / Getty
ข้อมูลจำเพาะ Cascading Style Sheets ดั้งเดิม รวมถึงการแก้ไข CSS3 ล่าสุด เป็นเทคโนโลยีที่ใช้เพื่อปรับปรุงและจัดรูปแบบเว็บเพจ HTML CSS ได้รับการออกแบบมาเพื่อจัดการกับเลเยอร์การนำเสนอของเว็บเพจในลักษณะที่มีประสิทธิภาพมากกว่า การจัดรูปแบบด้วย HTML ซึ่งไม่เคยมีจุดมุ่งหมายเพื่อจัดการกับโครงสร้างที่ซับซ้อนของเว็บร่วมสมัย เนื่องจาก CSS2 เป็นส่วนขยายที่เป็นที่ยอมรับในระดับสากลของ CSS1 คำว่า CSS ที่ไม่มีตัวเลขหมายถึงการรวม CSS2 ข้อมูลจำเพาะ CSS3 ยังอยู่ระหว่างการพัฒนาในเดือนกรกฎาคม 2014 ดังนั้นนักพัฒนาเว็บจึงจำเป็นต้องพิจารณาว่าการรองรับฟีเจอร์นั้นแตกต่างกันไปในแต่ละเบราว์เซอร์
CSS3 เข้ากันได้กับ CSS. ย้อนหลัง
CSS3 คือการอัปเดตของ CSS2 ที่รักษาความเข้ากันได้กับคุณลักษณะทั้งหมดของ CSS -- CSS3 ไม่ได้เลิกใช้โค้ด CSS ใดๆ โค้ด CSS3 ได้รับการออกแบบมาเพื่อทำให้หน้าเว็บดูดีขึ้นและโหลดเร็วขึ้น รวมทั้งลดเวลาในการพัฒนาเพื่อสร้างเพจในเบราว์เซอร์ของผู้ใช้ CSS3 ทำให้การออกแบบเว็บพึ่งพาไฟล์รูปภาพน้อยลงสำหรับองค์ประกอบการออกแบบหน้า และลดคำขอโอนไฟล์และเวลาในการดาวน์โหลดโดยใช้รูปภาพน้อยลง CSS1 มุ่งเน้นไปที่การจัดรูปแบบลักษณะที่ปรากฏ ในขณะที่ CSS2 ได้เพิ่มความสามารถในการจัดตำแหน่งสำหรับข้อความและวัตถุ เบราว์เซอร์เวอร์ชันเก่า เช่น IE 9 และก่อนหน้านั้นไม่สนับสนุนคุณลักษณะเพิ่มเติมของ CSS3 อย่างกว้างขวาง ซึ่งอาจต้องใช้เวลาในการพัฒนาเพิ่มเติมเพื่อคงโค้ดทางเลือก CSS ไว้
วีดีโอประจำวันนี้
CSS3 เพิ่มมุมโค้งมนและการไล่ระดับสี
ก่อนหน้า CSS3 นักพัฒนาเว็บจำเป็นต้องออกแบบไฟล์รูปภาพเพื่อเพิ่มสิ่งต่างๆ เช่น มุมโค้งมนสำหรับเส้นขอบโครงสร้างและการไล่ระดับสีของภาพพื้นหลัง CSS3 มีคุณลักษณะที่เปรียบเทียบกันได้ซึ่งสามารถเพิ่มได้ด้วยโค้ดไม่กี่บรรทัด ใน CSS นักพัฒนาเว็บต้องออกแบบเส้นขอบหรือการไล่ระดับสี อัปโหลดไปยังเซิร์ฟเวอร์รูปภาพ วางรูปภาพบนหน้า และใช้ CSS เพื่อจัดตำแหน่งเส้นขอบอย่างถูกต้อง ใน CSS3 นักพัฒนาเว็บสามารถทำบางสิ่งที่คล้ายกับโค้ด เช่น ".roundBorder{border-radius: 10px;}" ได้ การไล่ระดับสีพื้นหลังนั้นซับซ้อนกว่าเล็กน้อย และต้องใช้โค้ดที่แตกต่างกันสำหรับเบราว์เซอร์ที่แตกต่างกัน ตัวอย่างเช่น การไล่ระดับสีขาวเป็นดำสำหรับ Chrome และ IE ใช้โค้ดเช่น ".gradBG{background: liner-gradient (white, black);}"
CSS3 เพิ่มคุณสมบัติแอนิเมชั่นและเอฟเฟกต์ข้อความ
CSS3 มีคุณลักษณะบางอย่างที่ไม่มีอยู่ใน CSS เพื่อปรับปรุงรูปลักษณ์ขององค์ประกอบของหน้า ด้วย CSS3 นักพัฒนาเว็บสามารถเพิ่มเงาข้อความให้กับข้อความเพื่อให้อ่านหรือเพิ่มไหวพริบในการมองเห็นได้ง่ายขึ้น และสามารถบังคับการขึ้นบรรทัดใหม่ภายในคำที่ยาวขึ้นเพื่อให้พอดีกับคอลัมน์ที่มีการตัดคำ ก่อน CSS3 นักพัฒนาเว็บจำเป็นต้องเขียนโค้ดแอนิเมชั่นในภาษาสคริปต์ เช่น JavaScript และ jQuery CSS3 เพิ่มคุณสมบัติแอนิเมชั่นหลายอย่างให้กับเลเยอร์การออกแบบ W3C ยังคงทำงานบนมาตรฐานแอนิเมชั่นเว็บเพื่อแก้ไขปัญหาความเข้ากันได้ระหว่างเทคนิคแอนิเมชั่นต่างๆ
CSS3 กำหนดคอลัมน์ข้อความ
CSS3 เพิ่มความสามารถในการแบ่งส่วนข้อความออกเป็นหลายคอลัมน์เพื่ออ่านเหมือนหนังสือพิมพ์ ในข้อมูลจำเพาะ CSS2 นักพัฒนาเว็บมีปัญหาในการสร้างส่วนข้อความแบบหลายคอลัมน์ เนื่องจากมาตรฐานไม่ได้จัดเตรียมให้แยกข้อความโดยอัตโนมัติ โดยเฉพาะกับไซต์ที่มีการออกแบบที่ตอบสนอง เทคนิคการพัฒนาที่จัดเรียงใหม่และปรับขนาดเนื้อหาตาม การดูความละเอียดหน้าจอของอุปกรณ์ ผู้ที่มีจอภาพขนาดใหญ่อาจมีปัญหาในการอ่านแถวข้อความที่แผ่ขยายไปทั่ว หน้าจอ.
