เผยแพร่เมื่อวันที่ 21 ตุลาคม 2024
สัปดาห์ที่แล้วเราได้เปิดตัวแผงใหม่ทั้งหมดในเครื่องมือสำหรับนักพัฒนาเว็บ ซึ่งความช่วยเหลือจาก AI ช่วยให้คุณแก้ไขข้อบกพร่องเกี่ยวกับการจัดสไตล์ด้วย Gemini ได้โดยตรงในเครื่องมือสำหรับนักพัฒนาเว็บ
อยากรู้ใช่ไหมว่าฟีเจอร์นี้ทำอะไรได้บ้าง มาดู 5 วิธีเจ๋งๆ ที่ฟีเจอร์ใหม่นี้จะช่วยให้คุณจัดสไตล์หน้าเว็บได้ง่ายขึ้น ตั้งแต่การทำความเข้าใจเลย์เอาต์ไปจนถึงการแก้ไขเครื่องบิน
1. ทําความเข้าใจเลย์เอาต์
การสร้างเว็บไซต์ไม่ได้หมายความว่าคุณจะต้องเริ่มใหม่เสมอไป บ่อยครั้งที่คุณต้องสร้างโค้ดจากโค้ดที่มีอยู่ซึ่งคุณไม่เคยรู้จักมาก่อน และในกรณีที่เลวร้ายที่สุดคือไม่มีใครรอบตัวคุณรู้จักโค้ดนั้นด้วย
ถาม AI เกี่ยวกับเลย์เอาต์ขององค์ประกอบและทําความเข้าใจสาเหตุที่องค์ประกอบแสดงออกมาในลักษณะนั้นไปจนถึงโหนดสุดท้าย และเหตุผลที่ overflow: hidden; นี้ในองค์ประกอบมีอยู่ 👀
พรอมต์ให้ลองใช้
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. การทำงานเป็นคู่
ปัจจุบัน CSS มีประสิทธิภาพมาก ตัวเลือกที่มีมากมายอาจทำให้คุณสับสนได้บ้างในบางครั้งว่าฉันต้องใช้ align-items ใช่ไหม หรือ justify-items หรือจะเลือกjustify-selfหรือalign-content
บางครั้งคุณก็รู้ดีว่าต้องการทําอะไร แต่หาชุดพร็อพเพอร์ตี้ CSS ที่ถูกต้องไม่ได้ ครั้งถัดไปที่คุณพบปัญหานี้ ให้อธิบายปัญหาให้ AI ฟังและปล่อยให้ AI แก้ปัญหาให้คุณ
ความช่วยเหลือจาก AI จะตรวจสอบโค้ดที่มีอยู่และเปรียบเทียบกับสิ่งที่คุณพยายามจะบรรลุ โดยจะแนะนำการแก้ไขที่จำเป็นให้คุณตรวจสอบ ใช้ และคัดลอกลงในโค้ดเบส
3. ที่ปรึกษาด้านการช่วยเหลือพิเศษ
การทําให้เว็บไซต์เข้าถึงได้และใช้งานง่ายด้วยเทคโนโลยีความช่วยเหลือพิเศษเป็นสิ่งสําคัญ พิจารณาการช่วยเหลือพิเศษตั้งแต่เริ่มพัฒนา ไม่ใช่คิดถึงทีหลัง และมุ่งมั่นที่จะปฏิบัติตามหลักเกณฑ์การช่วยเหลือพิเศษสำหรับเนื้อหาเว็บไซต์ (WCAG) ตลอดกระบวนการพัฒนา
ใช้ความช่วยเหลือจาก AI เพื่อดูเคล็ดลับเกี่ยวกับตําแหน่งที่จะแทนที่ <div> ด้วยองค์ประกอบ HTML เชิงความหมายมากขึ้น ประโยชน์ของแอตทริบิวต์ aria-* เพิ่มเติม หรือวิธีปรับปรุงคอนทราสต์ของสี
พรอมต์ให้ลองใช้
What about color contrast in this element?
4. สร้างสรรค์ในแบบของคุณ
เทรนด์ต่างๆ เกิดขึ้นและหายไป มีทั้งการใช้ไล่สี เงา และเส้นขอบที่คมชัด ตามด้วยการออกแบบแบบแบน ก่อนที่จะเข้าสู่ยุคการออกแบบในปัจจุบันที่มีสีนีออนสดใสบนพื้นหลังสีเข้ม
แต่บางครั้งคุณก็อาจเบื่อกับรูปลักษณ์ที่เหมือนกันหมดของสิ่งต่างๆ ในเว็บ หากเป็นเช่นนั้น คุณอาจขอให้ AI Assistant เปลี่ยนรูปแบบและทำให้เว็บสนุกขึ้นอีกนิด เช่น สนุกเหมือนอยู่ในสวนสนุก
พรอมต์ให้ลองใช้
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. มาเป็นช่างซ่อมเครื่องบิน
อธิบายปัญหาเกี่ยวกับการจัดรูปแบบ ช่วยเหลือในการแก้ไขปัญหา แนะนำเกี่ยวกับการช่วยเหลือพิเศษ และการเปลี่ยนรูปแบบที่มีอยู่ ความช่วยเหลือจาก AI ทำได้หลายอย่างแล้ว และยังมีอีกมากมาย คุณเชื่อไหมว่าความช่วยเหลือจาก AI ยังช่วยซ่อมเครื่องบินได้ด้วย ไม่จำเป็นต้องมีประสบการณ์มาก่อน เพียงสวมชุดทำงานแล้วลงมือทําใน Chrome DevTools Hangar
และอย่าลืมแจ้งให้เราทราบถึงประสบการณ์ของคุณเองในเครื่องมือติดตามปัญหาสาธารณะ