CSS ใดที่คุณต้องรู้อย่างแน่นอนในปี 2022

ซาช่า กรีฟ สงสัยอย่างเปิดเผย คุณรู้หรือไม่ว่า CSS นั้นใหญ่เกินไป ด้วยสิ่งดีๆ ทั้งหมดที่จัดส่งในเบราว์เซอร์ในช่วงสองสามปีที่ผ่านมา — แบบสอบถามคอนเทนเนอร์! ไวยากรณ์สีสัมพัทธ์! ชั้นน้ำตก! คุณสมบัติเชิงตรรกะ! ช่วงในการสืบค้นสื่อ! แปลงร่างเป็นรายบุคคล! :has() ผู้เลือก! — และสิ่งที่เป็นไปได้ทั้งหมด — CSS สลับ! การทำรัง! การผสมสี! แอนิเมชั่นแบบเลื่อนลิงค์! สไตล์ที่มีขอบเขต! — มีช่วงการเรียนรู้ที่แตกต่างกันสำหรับ CSS ในปัจจุบันสำหรับ front-ender ใหม่และมีประสบการณ์เหมือนกัน

อาจมีบางครั้งที่เป็นไปได้ที่จะรู้คุณสมบัติ CSS ส่วนใหญ่และวิธีการทำงาน วันเหล่านั้นผ่านพ้นไปนานแล้ว อย่างน้อยก็สำหรับคนแก่อย่างฉัน แต่นั่นทำให้เกิดคำถามว่า CSS อะไรที่คุณต้องรู้อย่างแน่นอน?

Vincas Stonys เมื่อเร็วๆ นี้ เอาแทงที่รายการ. คริส รวมกันเป็นหนึ่ง ตามคุณสมบัติที่เปิดตัวตั้งแต่ CSS3 คุณอาจมีความคิดของสิ่งที่คุณจะรวมไว้ในรายการ ถ้าฉันต้องรวม Top 5 เข้าด้วยกันและจำกัดตัวเองให้เหลือแค่คุณสมบัติและตัวเลือก มันอาจจะเป็นแบบนี้...

writing-mode

ฉันไม่สามารถพูดเพียงพอเกี่ยวกับ writing-mode คุณสมบัติ. สิ่งที่สำคัญ — โดยเฉพาะอย่างยิ่งจากมุมมองการเรียนรู้ — คือการที่ทำให้คุณมีหลักการที่ครอบคลุมซึ่งพิจารณาถึงการจัดวางเลย์เอาต์ โดยไม่คำนึงถึงภาษาของผู้ใช้ ความเข้าใจที่ดีของ writing-mode จะนำไปสู่การทำความเข้าใจ คุณสมบัติและค่าตรรกะและในทางกลับกันก็กำหนดขั้นตอนสำหรับการทำความเข้าใจการไหลของเอกสารและการคิดในแง่ของ block, inline, startและ end มากกว่าทิศทางทางกายภาพ

display

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

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

margin / padding / border

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

::before และ ::after

อีกอย่างที่ฉันโกงนิดหน่อย ใช่, ::before และ ::after เป็นองค์ประกอบเทียมสององค์ประกอบ แต่อีกครั้ง ฉันไม่สามารถจินตนาการถึงการเรียนรู้เกี่ยวกับสิ่งหนึ่งโดยปราศจากอีกองค์ประกอบหนึ่ง มันเป็นสองเฟอร์!

ฉันจำได้ว่าฉันรู้สึกทึ่งมากที่ได้เรียนรู้ว่าสิ่งเหล่านี้มีอยู่จริงและสามารถใช้เพื่อสร้างทุกอย่างจาก เอฟเฟกต์ UI สุดเจ๋ง ให้เสร็จสมบูรณ์ ภาพประกอบ div เดียว. มันเปิดโอกาสใหม่ๆ และให้ข้อมูลเบื้องต้นว่า CSS มีประสิทธิภาพเพียงใด

@media

โอ้ ฉันมาถึงรายการที่ห้าและรายการสุดท้ายในรายการแล้ว และรู้สึกว่ายังมี CSS ดีๆ อยู่ที่นี่อีกมาก แต่ถ้าต้องเลือกอย่างสุดท้ายก็คงเป็น คำถามสื่อ. ทำไม เนื่องจากเป็นส่วนประกอบหลักในการสร้างเค้าโครงที่ลื่นไหล ยืดหยุ่น และบริบทการดูที่แตกต่างกัน แบบสอบถามคอนเทนเนอร์ อาจจะปิดท้ายรายการของฉันเมื่อครบกำหนด แต่สำหรับตอนนี้ @media เป็นไพรเมอร์ที่ยอดเยี่ยมสำหรับการออกแบบที่ตอบสนอง

นอกเหนือจากนั้น, @media เป็นขั้นตอนแรกที่ดีในคุณภาพตามเงื่อนไขของ CSS ไม่ว่าเราจะเขียนแบบสอบถามตามประเภทของอุปกรณ์ที่ใช้หรือไม่ (เช่น screen or print) หรือเมื่อวิวพอร์ตของเบราว์เซอร์ตรงตามเกณฑ์ที่กำหนด (เช่น width >= 768px) @media ไวยากรณ์มีประโยชน์อย่างเหลือเชื่อสำหรับการสร้างเลย์เอาต์ที่ได้รับการปรับให้เหมาะสมสำหรับเงื่อนไขต่างๆ

โอ้และเรายังไม่ได้สัมผัสกับวิธีการ @media เกี่ยวข้องกับการเข้าถึงด้วยความสามารถในการ ใช้สไตล์ตามความชอบของผู้ใช้ (เช่น, prefers-reduced-motion). ดังนั้น นอกเหนือจากการสร้างเค้าโครงตามเงื่อนไขแล้ว การสืบค้นสื่อเป็นขั้นตอนต่อไปที่ดีในการทำความเข้าใจการออกแบบที่รวม

ขอแสดงความนับถือ

การกลั่น CSS ลงในรายการคุณสมบัติและตัวเลือกที่ต้องทราบห้ารายการนั้นยาก โดยเฉพาะอย่างยิ่งตอนนี้ CSS มีประสิทธิภาพมากกว่าที่เคยเป็น พูดเมื่อห้าปีที่แล้ว มีอีกหลายรายการที่ฉันอยากจะรวมไว้จริงๆ เช่น (ไม่เรียงตามลำดับ):

• calc()
• has()
• color
• font
• overflow
• position (โดยเฉพาะสิ่งนี้)
• z-index

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

เอาล่ะบอกฉันของคุณ!

ไม่เห็นด้วยกับรายการของฉัน? คุณควร! ฉันพนันได้เลยว่าคุณคงมีความคิดเห็นที่ชาญฉลาด และฉันต้องการดูว่าคุณจะสรุปรายชื่อ 5 อันดับแรกได้อย่างไร