Miriam Suzanne เป็นนักเขียน ศิลปิน และนักพัฒนาเว็บในเดนเวอร์ โคโลราโด และตอนนี้กำลังพัฒนาข้อกําหนดของ CSS ที่น่าตื่นเต้น เช่น การค้นหาคอนเทนเนอร์และเลเยอร์ Cascade
โพสต์นี้เป็นส่วนหนึ่งของ Designcember ร่วมฉลองการออกแบบเว็บที่ Web.dev นำเสนอ
Miriam Suzanne เป็นนักเขียน ศิลปิน และนักพัฒนาเว็บในเดนเวอร์ รัฐโคโลราโด เธอเป็นผู้ร่วมก่อตั้ง OddBird (เว็บเอเจนซี) นักเขียนงานสำหรับ CSS Tricks สมาชิกของทีมหลักของ Sass และ W3C Invite Expert ในคณะทำงาน CSS ไม่นานมานี้เธอมุ่งเน้นไปที่การพัฒนาฟีเจอร์ CSS ใหม่ เช่น การเรียงซ้อนเลเยอร์ คำค้นหาคอนเทนเนอร์ และขอบเขต หากออฟไลน์ Miriam เป็นนักเขียนนวนิยาย นักเขียนบทละคร และนักดนตรีที่ได้รับการตีพิมพ์ เราคุยกันเกี่ยวกับงานของเธอกับ Sass และ CSS
Rachel: ครั้งแรกที่เราได้เรียนรู้เกี่ยวกับงานของคุณเนื่องจากเฟรมเวิร์กของตารางกริด Susy อะไรทำให้คุณสร้างสรรค์สิ่งนั้น
Miriam: เมื่อปี 2008 การออกแบบบนเว็บมอบประสบการณ์ที่แตกต่างไปจากเดิมมาก นักพัฒนาซอฟต์แวร์ได้เปลี่ยนจากเลย์เอาต์ตารางไปใช้ตารางกริดแบบลอยที่สื่อความหมายมากขึ้น (แต่ยังดูซับซ้อน) ความเติบโตของ "เฟรมเวิร์กตารางกริด" ที่มี 12 คอลัมน์มีขนาดเดียวที่เหมาะกับทั้ง 12 คอลัมน์ โดยให้ตารางกริดที่กำหนดไว้ล่วงหน้า (โดยปกติจะเป็นแบบคงที่) ด้วยชุดคลาส CSS ที่กำหนดไว้ล่วงหน้า หากต้องการปรับแต่งอะไรเพิ่มเติม ก็เลือกมาทำเป็นทีมของคุณเอง เห็นได้ชัดว่าเว็บไซต์ต่างๆ จําเป็นต้องมีการตอบสนองมากขึ้น แต่ก็ยังไม่มีคําค้นหาสื่อให้ใช้งาน และมีปัญหาเรื่องความเข้ากันได้ของเบราว์เซอร์หลายข้อกับวงกลมที่เคลื่อนไหวได้
ฉันใช้วิธี CSS Systems ของ Natalie Downe ซึ่งตอบสนองทั้งขนาดแบบอักษรและวิวพอร์ตได้อย่างชาญฉลาด แต่ก็ต้องหงุดหงิดกับปัญหาคณิตศาสตร์และการแฮ็กเบราว์เซอร์ซ้ำๆ ที่จำเป็น ในเวลาเดียวกัน Sass ก็เริ่มได้รับความสนใจมากขึ้น และมันก็เหมาะกับสิ่งที่ฉันต้องการ ข้อความร่างแรกของ Susy ไม่ซับซ้อนเลย โดยมีแค่การผสม 2-3 อย่างเพื่อคำนวณและเพิ่มเคล็ดลับที่ฉันต้องการ เป้าหมายคือให้น้อยที่สุดและแสดงเฉพาะโค้ดที่จำเป็น ตารางกริดที่ปรับแต่งได้ทั้งหมดโดยไม่ต้องมีคลาสที่กำหนดไว้ล่วงหน้า
Rachel: คุณเปลี่ยนจากการทำงานในระบบ CSS Preprocessor ไปเป็นการทำงานในส่วนข้อมูลจำเพาะของ CSS ได้อย่างไร คุณคิดว่าการทำงานในระบบก่อนการประมวลผลข้อมูลเป็นพื้นฐานที่ดีสำหรับการเขียนข้อมูลจำเพาะไหม
Miriam: จากประสบการณ์ผมก็มีส่วนคาบเกี่ยวกัน และผมก็ยังคงมีส่วนร่วมอย่างมากกับการแบ่งฝั่งนั้น แต่ผมคิดว่าต้องขอขอบคุณทีม Sass โดยเฉพาะ ซึ่งนำโดย Natalie Weizenbaum ซึ่งเห็นถึงผลลัพธ์ในระยะยาว จึงพยายามพัฒนาเครื่องมือที่ผสานรวมกับมาตรฐานการพัฒนาเว็บได้อย่างราบรื่น การผลักดันไปให้ไกลกว่าโซลูชันที่ "เหมาะสม" และการสร้างความยืดหยุ่นในระยะยาวนั้นสำคัญอย่างยิ่งเมื่อคุณคำนึงถึงอนาคตของมาตรฐานเว็บหลัก
เราจะสร้างเครื่องมือที่ตอบโจทย์ความหลากหลายของความต้องการและแนวทางของนักพัฒนาซอฟต์แวร์ ในขณะเดียวกันก็ส่งเสริมและอำนวยความสะดวกเรื่องการช่วยเหลือพิเศษ รวมทั้งข้อควรพิจารณาที่สำคัญอื่นๆ ได้อย่างไร
Rachel: เรามีข้อมูลมากมายที่เข้ามาใน CSS ซึ่งหลักๆ แล้วจะเข้ามาแทนที่ฟังก์ชันการทำงานที่เดิมเป็นส่วนหนึ่งของ Sass มีเหตุผลหนักแน่นอะไรที่ยังใช้แอปอย่าง Sass อยู่ไหม
Miriam: ใช่ สำหรับบางคน แต่ไม่มีคำตอบสากลที่นี่ ลองดูตัวแปรเป็นตัวอย่าง ตัวแปร Sass จะกำหนดขอบเขตทางภาษา และคอมไพล์บนเซิร์ฟเวอร์โดยมีโครงสร้างข้อมูลที่เป็นระเบียบ เช่น ลิสต์และวัตถุ การปรับแต่งสี ฯลฯ ซึ่งเหมาะมากสำหรับตรรกะของระบบการออกแบบที่ไม่จำเป็นต้องทำงานในเบราว์เซอร์
ตัวแปร CSS มีการทับซ้อนกันอยู่บ้าง แต่ก็สามารถจัดเก็บค่าได้เช่นกัน แต่ให้ชุดจุดแข็งและจุดอ่อนแบบ Cascade ที่ต่างกันโดยสิ้นเชิง Sass จัดการพร็อพเพอร์ตี้ที่กำหนดเองไม่ได้และ CSS จัดการ Structured Data ไม่ได้จริงๆ ทั้ง 2 อย่างมีประโยชน์และทรงพลัง แต่ความต้องการเฉพาะของคุณอาจแตกต่างกันไป
ผมคิดว่าการที่เราสามารถกำจัดเครื่องมือที่ไม่ต้องการอีกต่อไป และบางโปรเจ็กต์อาจไม่ต้องใช้ทั้งตัวแปรเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ สบายดีสุดๆ เลย แต่การสรุปว่าเหมือนกัน แล้วไฟล์หนึ่งมาแทนที่อีกไฟล์หนึ่ง ลอจิกการออกแบบบางรูปแบบอาจเกิดขึ้นจากฝั่งเซิร์ฟเวอร์เสมอ และบางกรณีอาจเกิดขึ้นที่ฝั่งไคลเอ็นต์ แม้ว่าเราจะไปถึงจุดที่ภาษาต่างๆ ให้บริการฟีเจอร์เดียวกันโดยพื้นฐานแล้ว ผู้ประมวลผลข้อมูลล่วงหน้าจะอยู่กับเราในระยะยาว
Rachel: มีเรื่องใดที่ทำให้คุณแปลกใจเมื่อได้มีส่วนร่วมมากขึ้นในการสร้างมาตรฐาน หรืออะไรที่คิดว่าคนทั่วไปอาจยังไม่ทราบเกี่ยวกับกระบวนการนี้
Miriam: ก่อนเข้าไป กระบวนการมาตรฐานให้ความรู้สึกเหมือนเป็นกล่องดำที่ลึกลับและมหัศจรรย์ แล้วผมก็ไม่มั่นใจว่าจะได้เจอกับอะไร ฉันกลัวว่าฉันอาจมีความรู้เกี่ยวกับเบราว์เซอร์ภายในไม่พอที่จะมีส่วนร่วม แต่ความจริงแล้วพวกเขาไม่ต้องการวิศวกรเบราว์เซอร์เพิ่มเติมเลย เนื่องจากต้องการนักพัฒนาและนักออกแบบที่สร้างเว็บไซต์และแอปพลิเคชันต่างๆ ในพื้นที่
ฉันประหลาดใจที่พบว่าคนส่วนนั้นน้อยมากที่ให้ความสำคัญกับมาตรฐานเป็นหลัก แต่ก็มีน้อยมากที่พัฒนาหรือออกแบบเว็บไซต์เป็นหลัก W3C ประกอบด้วย "อาสาสมัคร" จากองค์กรสมาชิก (มักได้รับเงินจากองค์กรเหล่านั้น แต่ไม่ใช่งานหลัก) และการเป็นสมาชิกก็ไม่ได้มีราคาถูก ซึ่งทำให้ผู้เข้าร่วมเลิกเป็นนักออกแบบและนักพัฒนาในแต่ละวัน โดยเฉพาะผู้ที่เราทำงานให้ลูกค้าในเอเจนซีขนาดเล็กหรือฟรีแลนซ์ บทบาทของฉันในฐานะผู้เชี่ยวชาญที่ได้รับเชิญจะเป็นงานอดิเรกที่น่าทำเป็นงานอดิเรกมากๆ ถ้าฉันหาเงินทุนสำหรับงานนั้นไม่เจอ
ในความเป็นจริงแล้ว กระบวนการที่เปิดกว้างและเป็นสาธารณะและต้องอาศัยความร่วมมือจากนักพัฒนาซอฟต์แวร์ แต่ก็มีการสนทนาเกิดขึ้นพร้อมกันเป็นจำนวนมากเสมอ การค้นหาสถานที่ของคุณจึงทำได้ยาก โดยเฉพาะอย่างยิ่งหากไม่ใช่งานประจำวัน
Rachel: คำค้นหาคอนเทนเนอร์เป็นสิ่งศักดิ์สิทธิ์สำหรับนักพัฒนาเว็บจำนวนมากมาหลายปี ฉันตื่นเต้นมากที่ได้รู้ว่าเราได้รับโอกาสนี้อย่างไร ฉันรู้สึกราวกับว่าผู้คนจำนวนมากกำลังคิดถึงการใช้ประโยชน์จากข้อความค้นหาคอนเทนเนอร์ คุณรู้สึกว่าพวกเขามีโอกาสได้ปลดปล่อยความคิดสร้างสรรค์มากขึ้นเช่นกันหรือไม่
Miriam: แน่นอน แต่ผมไม่เห็นว่าแยกจากกันโดยสิ้นเชิง เราทุกคนมีเวลาจำกัด และกำลังพยายามเขียนโค้ดที่บำรุงรักษาได้และใช้งานได้ เวลามีอะไรทำได้จริงไม่ค่อยเข้าที่ เราก็มักจะไม่สร้างสรรค์สิ่งที่ทำได้
ถึงกระนั้น อุตสาหกรรมเว็บก็ถูกครอบงำด้วยผลประโยชน์ของบริษัทขนาดใหญ่ ดังนั้นข้อกังวลทางธุรกิจเหล่านี้จึงมักมีเวลาออกอากาศมากกว่าศิลปินบนเว็บอยู่เสมอ และฉันคิดว่าเราจะสูญเสียไปมากมายหากเราไม่สนใจความคิดสร้างสรรค์ของเว็บในฐานะกรณีการใช้งานหลักสำหรับฟีเจอร์ ผมตื่นเต้นมากที่ได้เห็นศิลปิน CSS บางส่วนเล่นกับต้นแบบการค้นหาคอนเทนเนอร์ Jhey Tompkins สร้างการสาธิตมู่ลี่ CSS ที่ชาญฉลาดและมีการโต้ตอบเป็นพิเศษสำหรับการแสดงความคิดเห็นเกี่ยวกับมีมเก่าที่ต่อต้าน CSS ฉันว่าพื้นที่นั้นมีอะไรให้สำรวจเยอะเลย และแทบจะอดใจรอไม่ไหวว่าจะได้ดูว่าคนอื่นๆ คิดอะไรกันอยู่
การสนทนายังมุ่งเน้นที่การค้นหาตามขนาดในฐานะกรณีการใช้งานเดิม แต่ผมตื่นเต้นที่จะได้เห็นว่าผู้คนทำอะไรกับคำค้นหารูปแบบ ซึ่งก็คือความสามารถในการเขียนรูปแบบตามเงื่อนไขตามค่าของคุณสมบัติหรือตัวแปร CSS นี่เป็นคุณลักษณะที่ทรงพลังมากๆ และแทบจะไม่เคยมีการสำรวจเลย ซึ่งถือเป็นการเปิดโอกาสใหม่ๆ ในการสร้างสรรค์
Rachel: มีอะไรที่เราทำไม่ได้ (หรือมีทางเลือกอื่นในอนาคต) ใน CSS ที่คุณคิดว่าน่าจะเป็นประโยชน์ไหม
Miriam: ผมตื่นเต้นมากกับสเปคอื่นๆ ที่ผมกำลังพัฒนาอยู่ เลเยอร์ Cascade จะช่วยให้ผู้เขียนควบคุมปัญหาความจำเพาะเจาะจงได้มากขึ้น และ "ขอบเขต" ควรช่วยในการกำหนดเป้าหมายตัวเลือกที่แม่นยำยิ่งขึ้น แต่ทั้ง 2 อย่างนี้เป็นข้อกังวลด้านสถาปัตยกรรมระดับสูง ศิลปินของผมตื่นเต้นกับสิ่งต่างๆ มากกว่าการสลับ CSS, วิธีประกาศวิธีสร้างสไตล์อินเทอร์แอกทีฟ หรือ "ไทม์ไลน์" ของคอนเทนเนอร์ ช่วยให้เราเปลี่ยนค่าระหว่างสื่อหรือเบรกพอยท์คอนเทนเนอร์ได้อย่างราบรื่น วิธีนี้ส่งผลต่อการออกแบบตัวอักษรที่ตอบสนองตามอุปกรณ์ได้จริง แต่ก็เปิดโอกาสในการสร้างสรรค์อีกมากสำหรับอาร์ตเวิร์กและภาพเคลื่อนไหวที่ปรับเปลี่ยนตามอุปกรณ์ด้วย
Rachel: มีใครบ้างที่กำลังทำผลงานที่น่าสนใจ สนุกสนาน หรือสร้างสรรค์ในเว็บอยู่ในขณะนี้
Miriam: โอ้ ฉันไม่แน่ใจว่าจะตอบอย่างไรดี มีผู้คนมากมายที่ทำงานด้านการสร้างสรรค์ในด้านต่างๆ แบบนั้น มีมาตรฐานที่น่าตื่นเต้นจำนวนมากที่กำลังดำเนินการอยู่จากทั้ง CSSWG และ Open-UI รวมทั้งงานบางส่วนเกี่ยวกับการแยกส่วน แต่ฉันมักจะได้พบแรงบันดาลใจส่วนใหญ่จากศิลปินเว็บ และวิธีที่ผู้คนนำเครื่องมือเหล่านี้ไปใช้ในการผลิตในรูปแบบที่ไม่ได้เชื่อมโยงโดยตรงกับการค้า ผู้คนอย่าง Jhey หรือ Lynn Fisher หรือ Yuan Chuan หรือคนอื่นๆ อีกจำนวนมากที่ก้าวข้ามขอบเขตของเทคโนโลยีเว็บที่สามารถทำได้ด้วยภาพและโต้ตอบได้ แม้แต่คนที่ทำงานด้านการทำธุรกิจมากขึ้นก็สามารถเรียนรู้มากมายจากเทคนิคด้านศิลปะของตนเอง
นอกจากนี้ ผมยังชื่นชอบเว็บอาร์ตเชิงแนวคิดของบุคคลอย่าง Ben Grosser ที่คอยผลักดันให้เราพิจารณาสิ่งที่เราต้องการจากเว็บและโซเชียลมีเดียโดยเฉพาะอย่างยิ่ง ลองดูminus.socialใหม่ของเขา
Rachel: ติดตามผลงานของ Miriam เกี่ยวกับ CSS ที่ css.oddbird.net และดูว่าเธอกำลังทำอะไรผ่านเว็บไซต์ของเธอได้ที่ miriam.codes และ Twitter @TerribleMia