ในฐานะนักพัฒนา front-end เราปรารถนาสิ่งต่างๆ มากมายในช่วงหลายปีที่ผ่านมา — วิธีการจัดวางสิ่งต่างๆ ใน CSS, ห่อหุ้มสไตล์, กำหนดอัตราส่วนกว้างยาวขององค์ประกอบ, ควบคุมสีของเราได้ละเอียดยิ่งขึ้น, เลือกองค์ประกอบตาม คุณสมบัติของลูก จัดการเลเยอร์ของความเฉพาะเจาะจง อนุญาตให้องค์ประกอบตอบสนองต่อความกว้างของผู้ปกครอง... รายการจะดำเนินต่อไป
และตอนนี้เราได้ทุกอย่างที่อยากได้และมากขึ้นแล้ว บางคนก็ถามว่า ตอนนี้เรามีไหม มากเกินไป ซีเอสเอส?
ยุคมืด
หากคุณเริ่มพัฒนาเว็บในช่วงวัยเด็กของ CSS เช่นเดียวกับฉัน ความคิดที่จะมีมากเกินไปก็ดูน่าหัวเราะ
ในสมัยก่อน แทบทุกรายละเอียดของงานของนักพัฒนา front-end ประกอบด้วยการจัดการกับข้อจำกัดของ CSS ดิ แฮ็ค clearfix เพื่อล้างลอย the แฮ็คแพดดิ้ง 100% เพื่อสร้าง div แบบสี่เหลี่ยม ไม่ต้องพูดถึงการใช้คุณสมบัติที่ไม่เกี่ยวข้องแบบกึ่งสุ่มเพื่อหลอกให้ Internet Explorer ทำการเสนอราคาของคุณ
ในขณะนั้นเบราว์เซอร์เป็นศัตรูตัวฉกาจที่ต้องพ่ายแพ้ด้วยเล่ห์กลและคาถาอันลี้ลับ วันนี้ พร็อพเพอร์ตี้ที่สมบูรณ์แบบกำลังรออยู่และเพียงแค่คัดลอกและวางบน MDN
ยุคใหม่ของ CSS
แต่ทุกวันนี้สิ่งต่าง ๆ แตกต่างกันมาก ไม่เพียงแต่สิ่งต่าง ๆ จะเคลื่อนไหวเร็วขึ้นมากเท่านั้น แต่ยังรวมถึงผู้จำหน่ายเบราว์เซอร์ด้วย จริงๆดูแล เกี่ยวกับการทำให้นักพัฒนามีความสุข! ฉันรู้ว่าฉันไม่อยากจะเชื่อเลย แต่ฉันวิ่งทุกปี สถานะของ CSS แบบสำรวจนักพัฒนา (ซึ่งก็คือ เปิดแล้ว ลุยเลย!) และฉันรู้ดีว่าทีมพัฒนาเบราว์เซอร์ใช้ผลการสำรวจ (ท่ามกลางจุดข้อมูลอื่น ๆ อีกมากมาย) เพื่อแจ้งแผนงานของพวกเขา
นอกเหนือจากนี้ Google ยังช่วยจัดหาเงินทุนให้กับงานของฉันในการทำแบบสำรวจ และแม้กระทั่งจ้าง ลีอา เวรู เพื่อเป็นผู้นำในการเลือกคำถามสำหรับการสำรวจในปีนี้
ไม่ใช่แค่ Google เป็นที่นิยมในการทุบตี Safari และ Apple โดยทั่วไป (บางครั้งสมควรได้รับ) แต่คุณไม่สามารถปฏิเสธได้ว่ามีคนชอบ เจน ซิมมอนส์ คือการรับฟังนักพัฒนาและปรับปรุงเว็บ
และไม่เพียงแต่ผู้จำหน่ายเบราว์เซอร์จะปรับปรุง CSS ด้วยตนเองเท่านั้น พวกเขายังร่วมมือกันข้ามแนวรบด้วยความคิดริเริ่มเช่น การทำงานร่วมกัน 2023 เพื่อช่วยลดความไม่สอดคล้องกันและความไม่ลงรอยกันระหว่างเบราว์เซอร์
เป็นสิ่งที่ดีเกินไปหรือไม่
ผลลัพธ์ทั้งหมดนี้คือตอนนี้เรากำลังเผชิญกับความอับอายของ CSS ที่ร่ำรวย และอาจเป็นเรื่องยากที่จะตามให้ทัน CSS กริด เริ่มได้รับการสนับสนุนในเบราว์เซอร์หลักเมื่อเกือบห้าปีที่แล้ว แต่ฉันยังคงตรวจสอบข้อมูลอ้างอิงทุกครั้งที่ใช้งาน และเท่อย่าง ตารางย่อย ดูเหมือนว่าฉันยังไม่ได้ลองใช้เลย
ระหว่างขั้นตอนการคัดเลือก คุณสมบัติ CSS ใดที่จะรวมหรือไม่อยู่ในสถานะของ CSS, Lea และตัวฉันเองได้พิจารณาคุณสมบัติมากมาย แต่เราก็ปฏิเสธไปบางส่วนเช่นกัน ตัวอย่างคุณสมบัติที่เรา ไม่ได้ ได้แก่:
- พื้นที่
linear()ฟังก์ชั่นการผ่อนคลายซึ่งช่วยให้คุณกำหนดเส้นโค้งการค่อยๆ เปลี่ยนที่มีความละเอียดมากขึ้น - พื้นที่
env()ฟังก์ชันซึ่งช่วยให้คุณใช้ตัวแปรที่กำหนดโดยเบราว์เซอร์หรืออุปกรณ์ได้ - พื้นที่
scrollbar-widthคุณสมบัติ ซึ่งช่วยควบคุมลักษณะที่ปรากฏของแถบเลื่อน - พื้นที่
margin-trimคุณสมบัติ ซึ่งช่วยให้คุณควบคุมลักษณะการทำงานของระยะขอบของลูกของคอนเทนเนอร์
สิ่งเหล่านี้มีประโยชน์อย่างมาก และน่าจะเป็นข่าวใหญ่ในช่วงฤดูแล้ง CSS ในปีที่ผ่านมา แต่ในบริบทของวันนี้ พวกเขาต้องต่อสู้เพื่อเรียกร้องความสนใจด้วยการประกาศที่ใหญ่กว่ามาก เช่น ตัวเลือก has() หรือการซ้อน CSS!
ไม่ตื่นเต้น
ในฐานะ Silvestar Bistrović เขียนเขา “ไม่ค่อยตื่นเต้นกับฟีเจอร์ CSS ใหม่ทั้งหมดนี้” พบเสียงสะท้อนบน Twitter ด้วย ซาร่า ซูเอดัน โดยระบุว่าสิ่งที่เธอสนใจคือ “การปฏิบัติจริง ไม่ใช่ว่าฟีเจอร์ที่ดูเป็นประกายในตอนนี้”
นี่อาจดูเหมือนทัศนคติเชิงลบ แต่ฉันคิดว่ามันเข้าใจได้ ไม่มีใครสามารถคาดหวังให้ทันกับคุณสมบัติใหม่มากมาย!
ผลที่ตามมาโดยไม่ได้ตั้งใจอีกประการหนึ่ง (หรืออาจจะตั้งใจ?) คือ CSS ที่ซับซ้อนมากขึ้นจะยิ่งเพิ่มระดับให้กับบริษัทใหม่ที่ต้องการพัฒนาเอ็นจิ้นเบราว์เซอร์ — ไม่ต้องพูดถึงภาระงานที่เพิ่มเข้ามาเมื่อต้องดูแลและจัดทำเอกสารทั้งหมด คุณลักษณะใหม่เหล่านี้
CSS เกินกำหนด
นอกจากนี้ยังมีข้อกังวลที่ถูกต้องว่า CSS อาจแยกออกเป็นพื้นที่ที่ไม่เหมาะที่จะจัดการ นั่นเป็นอีกสิ่งหนึ่งที่ Sara Soueidan ชี้ให้เห็นเมื่อตอบสนองต่อการใช้งานทดลอง CSS Toggles ใหม่ (นี่คือตั๋วพูดคุย):
หลายคนได้ชี้ให้เห็นอย่างสมเหตุสมผลว่าพฤติกรรมประเภทนี้จะจัดการได้ดีที่สุดโดยองค์ประกอบ HTML ใหม่ แทนที่จะจัดการสถานะการสลับผ่าน CSS เพียงอย่างเดียว และ CSS อาจไม่ใช่สื่อที่ดีที่สุดเพื่อให้แน่ใจว่าปัญหาการช่วยสำหรับการเข้าถึงได้รับการจัดการอย่างเหมาะสม
เมื่อ CSS เข้ามาแทนที่บางสิ่งที่เคยจัดการผ่าน JavaScript โดยทั่วไปถือว่าเป็นสิ่งที่ดี เนื่องจากมักจะลดจำนวนโค้ดที่เบราว์เซอร์ต้องโหลด ดังนั้น ฉันมองโลกในแง่ดีอย่างระมัดระวังเกี่ยวกับ CSS Toggles และเชื่อมั่นว่า CSS Working Group จะจัดการกับข้อกังวลของชุมชนได้อย่างเหมาะสม แต่อาจมีสักวันที่เราเริ่มกังวลว่า CSS อาจขยายเกินขอบเขตและรุกล้ำหน้าที่ความรับผิดชอบของ HTML และ JavaScript
ความคาดหวังใหม่
และบางทีนี่อาจเป็นสิ่งที่ต้องเปลี่ยน บางทีเราควรทิ้งความคาดหวังที่นักพัฒนา CSS ต้องรู้ ทั้งหมด ของ CSS?
ความคาดหวังนี้เกิดขึ้นจากยุคสมัยที่ CSS เกิดขึ้นภายหลัง ไวยากรณ์ที่น่ารำคาญเล็กน้อยที่คุณต้องเรียนรู้ที่จะทำให้ปุ่มของคุณเป็นสีน้ำเงินและเป็นตัวหนาเหมือนกับที่ลูกค้าถาม แต่ฉันคิดว่าเราต้องยอมรับว่า CSS ในปัจจุบันอาจกว้างเกินไปสำหรับคนเพียงคนเดียวที่จะเชี่ยวชาญ โดยเฉพาะอย่างยิ่งนอกเหนือจากหน้าที่ส่วนหน้าอื่นๆ
As มิเชล บาร์เกอร์ ทำให้มัน:
และนั่นคือที่ที่ตัวฉันเองลงจอดในที่สุด ฉันสบายใจกับความจริงที่ว่าฉันจะไม่ใช้ – หรือแม้แต่รู้เกี่ยวกับ – คุณสมบัติ CSS ที่เป็นไปได้ทั้งหมด และนี่มาจากคนที่ ดำเนินการสำรวจเกี่ยวกับ CSS!
แต่คุณสมบัติใหม่เหล่านี้จะเป็นประโยชน์กับ บางคน. บางคนจะเขียนบล็อกโพสต์เกี่ยวกับพวกเขา สร้าง CodePens เจ๋งๆ ร่วมกับพวกเขา พูดคุยเกี่ยวกับพวกเขา คนๆนั้นจะเป็นนักพัฒนาที่เท่ เท่ กระฉับกระเฉง ที่ยังมีผมอยู่ครบ กล่าวอีกนัยหนึ่ง มันไม่ใช่ฉัน — และก็ไม่เป็นไร
และบางทีคุณอาจกังวลว่านักพัฒนาซอฟต์แวร์รายใหม่นี้จะเต็มไปด้วยสิ่งที่พวกเขาต้องเรียนรู้ในคราวเดียว แต่จงระลึกไว้ทุกสิ่งที่พวกเขา จะไม่ ต้องเรียนรู้อย่างแน่นอน เพราะมันถูกแทนที่ด้วยทางเลือกที่ใหม่กว่าเหล่านี้ ฉันรู้ว่าฉันจะทำข้อตกลงนั้นได้ทุกเมื่อ
แต่ลองคิดดู: ในช่วงสองสามปีที่ผ่านมา ไม่เพียงแต่เราได้เห็นอุปกรณ์ที่เราต้องการเพื่อรองรับการเพิ่มขึ้นอย่างมากเท่านั้น เรายังเริ่มตระหนักว่าเราทุกคนใช้เว็บในลักษณะที่แตกต่างกันเล็กน้อย ไม่ว่าจะเนื่องมาจากสาเหตุใดก็ตาม ต่อความทุพพลภาพ บริบทปัจจุบัน หรือความชอบส่วนบุคคล CSS ไม่ควรปรับให้เข้ากับความเป็นจริงใหม่นี้หรือ
ตอนนี้ ฉันต้องสารภาพว่าทั้งหมดนี้ทำให้ฉันรู้สึกหวนคิดถึง… ดังนั้นขอโทษฉันด้วยขณะที่ฉันเดินออกไปสองสามลอย เพียงเพื่อประโยชน์ของเวลาเก่า
ดังที่ได้กล่าวมาแล้ว ทุกปี แบบสำรวจสถานะ CSS เปิดให้บริการแล้ว ไม่ว่าคุณจะคิดว่า CSS มากเกินไปหรือไม่ก็ตาม แบบสำรวจนี้เป็นวิธีที่ดีในการให้นักพัฒนาเบราว์เซอร์รู้ว่าคุณรู้สึกอย่างไร ดังนั้น ไปกรอกเลย หากคุณมีเวลา 10 นาที
