เผยแพร่เมื่อวันที่ 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
และอย่าลืมแจ้งให้เราทราบถึงประสบการณ์ของคุณเองในเครื่องมือติดตามปัญหาสาธารณะ