ตัวย่อ CSS สามารถลดขนาดไฟล์ CSS ได้อย่างมีประสิทธิภาพ

ตัวชี้วัดที่สำคัญของการใช้งานเว็บไซต์คือความเร็ว หรือถ้าให้เจาะจงกว่านั้นคือความเร็วที่หน้าเว็บปรากฏในหน้าต่างเบราว์เซอร์ของผู้เข้าชม มีหลายปัจจัยที่ส่งผลต่อความเร็ว รวมถึงความเร็วของเว็บเซิร์ฟเวอร์ การเชื่อมต่ออินเทอร์เน็ตของผู้เข้าชม และขนาดของไฟล์ที่เบราว์เซอร์ต้องดาวน์โหลด แม้ว่าคุณจะควบคุมความเร็วของเซิร์ฟเวอร์และการเชื่อมต่อไม่ได้ แต่คุณสามารถควบคุมขนาดของไฟล์ที่ประกอบเป็นหน้าเว็บของเว็บไซต์ของคุณได้
เพื่อให้เว็บไซต์เร็วขึ้น ผู้สร้างเว็บจะบีบอัดและเพิ่มประสิทธิภาพไฟล์ภาพทุกไฟล์บนเว็บไซต์ของตนเป็นประจำ ซึ่งมักจะทำให้คุณภาพของภาพลดลงเพื่อลดขนาดไฟล์ลงไม่กี่เปอร์เซ็นต์ เนื่องจากสไตล์ชีต CSS เป็นไฟล์ข้อความธรรมดาและมีขนาดค่อนข้างเล็กเมื่อเทียบกับรูปภาพ ผู้สร้างเว็บจึงไม่ค่อยพิจารณาดำเนินการเพื่อลดขนาดไฟล์สไตล์ชีต CSS อย่างไรก็ตาม ด้วยการใช้ตัวย่อ CSS และเทคนิคง่ายๆ อื่นๆ คุณสามารถลดขนาดสไตล์ชีทของคุณได้อย่างมาก ในการทดสอบสไตล์ชีทของฉันเองแบบไม่เป็นทางการ ฉันลดขนาดไฟล์ลงประมาณ 25-50%

การใช้ลักษณะย่อของ CSS

คุณสมบัติชวเลข CSS เป็นชื่อคุณสมบัติพิเศษที่ใช้เพื่อแทนที่คุณสมบัติที่เกี่ยวข้องหลายชุด ตัวอย่างเช่น คุณสมบัติการเติมจะย่อมาจาก padding-top, padding-right, padding-bottom และ padding-left

การใช้คุณสมบัติชวเลขช่วยให้คุณสามารถบีบอัดคู่คุณสมบัติ/แอตทริบิวต์หลายคู่ให้เป็นโค้ดบรรทัดเดียวในสไตล์ชีต CSS ตัวอย่างเช่น พิจารณารหัสต่อไปนี้:


การแทนที่ด้วยคุณสมบัติตัวย่อบางอย่างสามารถลดโค้ดได้ดังต่อไปนี้ ผลกระทบที่แท้จริงของทั้งสองจะเหมือนกันทุกประการ:


โปรดทราบว่าคุณสมบัติแบบย่อยังมีคุณสมบัติหลายรายการ ซึ่งแต่ละคุณสมบัติสอดคล้องกับคุณสมบัติปกติที่รวมกันเป็นคุณสมบัติแบบย่อ คุณสมบัติจะถูกคั่นด้วยช่องว่าง
เมื่อคุณสมบัติมีค่าใกล้เคียงกัน เช่น สำหรับการวัดเชิงเส้นของคุณสมบัติระยะขอบ ลำดับของคุณสมบัติที่เป็นไปตามคุณสมบัติตัวย่อเป็นสิ่งสำคัญ ลำดับของแอตทริบิวต์เริ่มต้นที่ด้านบน (เส้นขอบด้านบนว่างเปล่า) และดำเนินต่อไปตามเข็มนาฬิการอบๆ กล่อง
หากคุณสมบัติทั้งหมดของคุณสมบัติตัวย่อเหมือนกัน คุณสามารถแสดงรายการคุณสมบัติเดียวและคัดลอกไว้ข้างหน้าสี่ครั้ง ดังนั้นคุณสมบัติสองประการต่อไปนี้จึงเท่ากัน:


ในทำนองเดียวกัน คุณสามารถแสดงคู่คุณสมบัติด้านบน/ล่าง และขวา/ซ้ายได้โดยใช้คุณสมบัติสองรายการที่อยู่ถัดจากระยะขอบเส้นขอบหรือคุณสมบัติระยะห่าง


ลำดับของแอตทริบิวต์ไม่สำคัญเมื่อเป็นค่าที่แตกต่างกัน ดังนั้น คุณสมบัติ เช่น สีของเส้นขอบ ลักษณะเส้นขอบ และความกว้างของเส้นขอบ สามารถเป็นไปตามคุณสมบัติเค้าร่างในลำดับใดก็ได้ การละเว้นแอตทริบิวต์จะเทียบเท่ากับการละเว้นคุณสมบัติทั่วไปที่เกี่ยวข้องจากกฎสไตล์
ด้านล่างนี้คือรายการคุณสมบัติตัวย่อ CSS และคุณสมบัติทั่วไปที่คุณสมบัติดังกล่าวเป็นตัวแทน

พื้นหลัง: การแนบพื้นหลัง, สีพื้นหลัง, ภาพพื้นหลัง, ตำแหน่งพื้นหลัง, การทำซ้ำพื้นหลัง
เส้นขอบ: สีของเส้นขอบ รูปแบบเส้นขอบ ความกว้างของเส้นขอบ
เส้นขอบด้านล่าง (เส้นขอบด้านล่าง): สีเส้นขอบด้านล่าง, ลักษณะเส้นขอบด้านล่าง, ความกว้างของเส้นขอบด้านล่าง
เส้นขอบซ้าย (เส้นขอบซ้าย): สีเส้นขอบด้านซ้าย, รูปแบบเส้นขอบด้านซ้าย, ความกว้างของเส้นขอบด้านซ้าย
เส้นขอบขวา (เส้นขอบด้านขวา): สีเส้นขอบด้านขวา, รูปแบบเส้นขอบด้านขวา, ความกว้างของเส้นขอบด้านขวา
เส้นขอบด้านบน (เส้นขอบด้านบน): สีเส้นขอบด้านบน รูปแบบเส้นขอบด้านบน ความกว้างของเส้นขอบด้านบน
คิว (คิวเสียง): ก่อนคิวหลังคิว
ฟอนต์: ฟอนต์, ขนาดฟอนต์, ลักษณะฟอนต์, น้ำหนักฟอนต์, รูปแบบฟอนต์, ความสูงของบรรทัด, การปรับขนาดฟอนต์, การยืดฟอนต์
สไตล์รายการ: รูปภาพสไตล์รายการ, ตำแหน่งสไตล์รายการ, ประเภทสไตล์รายการ
ขอบ (ว่าง): ขอบบน, ขอบขวา, ขอบล่าง, ขอบซ้าย
โครงร่าง: สีโครงร่าง รูปแบบโครงร่าง ความกว้างของโครงร่าง
ช่องว่างภายใน: ช่องว่างด้านบน, ช่องว่างด้านขวา, ช่องว่างด้านล่าง, ช่องว่างด้านซ้าย
หยุดชั่วคราว: หยุดหลังจากหยุดชั่วคราวก่อน

ลดพื้นที่สีขาว

อีกวิธีในการลดขนาดของสไตล์ชีต CSS คือการลบช่องว่างที่ไม่จำเป็นส่วนใหญ่ออกจากเอกสาร กล่าวอีกนัยหนึ่ง ให้แบ่งแต่ละกฎออกเป็นโค้ดบรรทัดเดียว นั่นคือ ลบการขึ้นบรรทัดใหม่และการเยื้องที่เดิมแทรกลงในโค้ดเพื่อแยกคุณสมบัติ/แอตทริบิวต์แต่ละรายการลงในบรรทัดที่แยกจากกัน
ตัวอย่างเช่น ตัวอย่างโค้ดต่อไปนี้เหมือนกันในเนื้อหา แต่ตัวอย่างที่สองมีการปรับปรุงมากกว่ามาก:


ลบความคิดเห็น

การลบความคิดเห็นออกจากโค้ด CSS ของคุณเป็นอีกวิธีหนึ่งในการลดขนาดไฟล์ แม้ว่าความคิดเห็นจะมีประโยชน์สำหรับการอ่านโค้ด แต่ก็ไม่ได้ช่วยให้เบราว์เซอร์สร้างหน้าเว็บของคุณได้ เครื่องมือสร้างเว็บจำนวนมากคุ้นเคยกับการแสดงความคิดเห็นโค้ดทุกบรรทัด หรืออย่างน้อยทุกคำสั่งกฎ ความคิดเห็นที่เอื้อเฟื้อเช่นนี้แทบไม่จำเป็นในสไตล์ชีต CSS เนื่องจากคุณสมบัติและคุณสมบัติ CSS ส่วนใหญ่อ่านและเข้าใจได้ง่าย หากคุณใช้ชื่อที่มีความหมายสำหรับคลาส, ID และตัวเลือกอื่นๆ คุณสามารถกำจัดความคิดเห็นส่วนใหญ่ได้ ในขณะที่ยังคงรักษาโค้ดของคุณให้อ่านและบำรุงรักษาได้


การใช้คุณสมบัติชวเลข การลบช่องว่างที่ไม่มีประโยชน์ออก และการละเว้นความคิดเห็นสามารถลดขนาดไฟล์สไตล์ชีต CSS ของคุณได้อย่างมาก สิ่งนี้จะส่งผลเล็กๆ น้อยๆ แต่อาจสังเกตเห็นได้ชัดเจนในเป้าหมายโดยรวมในการเร่งความเร็วเว็บไซต์ของคุณ