CSS ชวเลขและเวลานาน - เมื่อต้องการใช้อันไหน

ชวเลขและลองแฮนด์ - อันใดอันหนึ่งรัดกุมและอีกอันแม่นยำ หนึ่งเกิดขึ้นจากความต้องการความกะทัดรัดในขณะที่อีกคนยืนหยัดเพื่อรักษาความชัดเจน ไม่ว่าจะด้วยวิธีใดพวกเขามีจุดประสงค์ข้อดีและข้อเสียดังนั้นต้องพูด.

โพสต์นี้จะส่องแสงทั้งบนชวเลข CSS และข้อความสั้น ๆ ในขณะที่การสรุปที่ดีที่สุดที่จะใช้สำหรับสถานการณ์ใด.

ชวเลขคุณสมบัติคืออะไร?

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

เป็นพื้น,

 เส้นขอบ: 1px สีน้ำเงินเข้ม 

เหมือนกับ:

 ความกว้างชายแดน: 1px สไตล์เส้นขอบ: ทึบ; สีเส้นขอบ: สีน้ำเงิน;

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

มันทำงานยังไง?

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

ทีนี้จะเกิดอะไรขึ้นถ้าเราพลาดคุณสมบัติหนึ่งหรือสองอย่างในการประกาศ? ในตัวอย่างข้างต้นสมมติว่าเราเพิกเฉย ชายแดนสไตล์.

 เส้นขอบ: สีน้ำเงิน 1px; 

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

 เส้นขอบ: 1px ไม่มีสีฟ้า 

ตอนนี้เรามาวาง 1px สำหรับ ชายแดนที่มีความกว้าง และเก็บอีกสอง:

 เส้นขอบ: สีน้ำเงินเข้ม

เราจะสามารถเห็นเส้นขอบได้โดยมีความกว้างหนาขึ้นเท่านั้นและนั่นเป็นเพราะ ชายแดนที่มีความกว้าง property มีค่าดีฟอลต์ กลาง.

 เส้นขอบ: สีน้ำเงินเข้มปานกลาง 

นี่เป็นการสรุปสำหรับเราว่า เมื่อมูลค่าทรัพย์สินถูกปล่อยออกมา ในการประกาศชวเลข, คุณสมบัตินั้นใช้ค่าเริ่มต้น (แม้ว่าจะต้องแทนที่ค่าก่อนหน้าใด ๆ ที่กำหนดให้เหมือนกัน).

หากมี ความกว้างชายแดน: 1px สำหรับองค์ประกอบที่ไหนสักแห่งก่อน เส้นขอบ: สีน้ำเงินเข้ม สำหรับเดียวกันความกว้างชายแดนจะเป็นไป กลาง (ค่าเริ่มต้น) ไม่ใช่ 1px.

สิ่งที่ควรค่าแก่การกล่าวขวัญก็คือ เราไม่สามารถใช้ค่าเช่น สืบทอด, แรกเริ่ม หรือ ไม่มีการตั้งค่า, ซึ่งพร้อมใช้งานสำหรับคุณสมบัติ CSS ทั้งหมดในรูปแบบย่อ หากเราใช้สิ่งเหล่านี้เบราว์เซอร์จะไม่สามารถรู้ได้อย่างชัดเจนว่าคุณสมบัติใดที่ควรแสดงค่าในชวเลข - การประกาศทั้งหมดจะถูกทิ้ง.

ทั้งหมด คุณสมบัติ

มีคุณสมบัติชวเลข CSS หนึ่งที่สามารถทำได้ ตั้งค่าสำหรับคุณสมบัติ CSS ทั้งหมด. ค่าทั้ง CSS สืบทอด, แรกเริ่ม และ ไม่มีการตั้งค่า มีผลบังคับใช้กับคุณสมบัติทั้งหมดและด้วยเหตุนี้ค่าเหล่านี้เป็นเพียงค่าที่ยอมรับโดย ทั้งหมด คุณสมบัติ.

 div all: initial

สิ่งนี้จะทำให้ div องค์ประกอบจะแยกค่าคุณสมบัติ CSS ทั้งหมดที่มีและรีเซ็ตค่าเริ่มต้นในแต่ละค่า.

⚠คำเตือน

อย่าใช้ผิดวัตถุประสงค์ ทั้งหมด คุณสมบัติ ความต้องการมันอาจเกิดขึ้นเฉพาะในสถานการณ์ที่หายากมากเมื่อเราไม่สามารถสัมผัสโค้ด CSS ก่อนหน้าขององค์ประกอบที่เราต้องการใช้คุณสมบัตินี้กับ.

บันทึก: คุณสมบัติ CSS สี รับค่าเลขฐานสิบหกพร้อมสัญกรณ์สั้น ๆ ถ้าตัวเลขฐานสิบหกสองค่าในทุกช่องสีเหมือนกัน ตัวอย่างเช่น, พื้นหลัง: # 445599; เป็นเช่นเดียวกับ พื้นหลัง: # 459;.

ทรัพย์สินที่มีมือยาวคืออะไร?

คุณสมบัติของแต่ละบุคคล ที่สามารถรวมอยู่ในคุณสมบัติจดชวเลขได้เรียกว่าคุณสมบัติแบบ Longhand ตัวอย่างบางส่วน ได้แก่ ; ภาพพื้นหลัง, ขอบซ้าย, ภาพเคลื่อนไหวระยะเวลา, ฯลฯ.

ทำไมเราควรใช้มัน?

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

รับ ตัวอักษร ตัวอย่างเช่นคุณสมบัติชวเลข มาใช้กันใน h4 องค์ประกอบ (ซึ่งมีสไตล์เบราว์เซอร์เริ่มต้น font-weight: ตัวหนา)

 ตัวอักษร: 20px "courier ใหม่"; 

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

ดังนั้นสำหรับตัวอย่างข้างต้นง่าย ๆ สองคุณสมบัติมือยาว, ขนาดตัวอักษร และ font-family สมบูรณ์แบบ.

นอกจากนี้การใช้ชวเลขสำหรับ การกำหนดค่าคุณสมบัติหนึ่งหรือสองค่าเท่านั้นนั้นไม่มีประโยชน์. เหตุใดจึงให้เบราว์เซอร์ทำงานพิเศษเพื่อตีความคุณสมบัติทุกอย่าง (รวมถึงสิ่งที่เหลือไว้) ในที่จดชวเลขเมื่อต้องการเพียงหนึ่งงานเท่านั้น?

การผลิตกันในระหว่างขั้นตอนการพัฒนาผู้พัฒนาบางคน (โดยเฉพาะผู้เริ่มต้น) อาจพบว่าการใช้สัญกรณ์ระยะยาวนั้นง่ายกว่าการทำงานด้วยการจดชวเลข อ่านง่ายและชัดเจนยิ่งขึ้น.

ข้อสรุป

ทุกวันนี้ด้วยความเป็นไปได้ของการเข้ารหัสที่รวดเร็ว (ด้วยความช่วยเหลือของเครื่องมือเช่น Emmet) และการลดขนาดทำให้ไม่จำเป็นต้องมีความน่าเชื่อถือสูงในการจดชวเลข แต่ในเวลาเดียวกัน margin: 0;. บริบทที่เราชอบสัญลักษณ์ CSS ของเราจะแตกต่างกันไป และสิ่งที่เราต้องทำก็คือหาว่าสัญกรณ์ใดที่เหมาะสมที่สุดสำหรับเราและเมื่อใด.