Ngày xuất bản: 21 tháng 10 năm 2024
Tuần trước, chúng tôi đã giới thiệu một bảng điều khiển hoàn toàn mới cho DevTools: tính năng hỗ trợ AI có thể giúp bạn gỡ lỗi các vấn đề về kiểu bằng Gemini ngay trong DevTools.
Bạn muốn biết Trợ lý Google có thể làm gì? Hãy xem 5 cách tuyệt vời sau đây của tính năng mới này để việc tạo kiểu cho trang của bạn trở nên dễ dàng hơn, từ hiểu bố cục cho đến sửa máy bay.
1. Tìm hiểu về bố cục
Khi xây dựng trang web, không phải lúc nào bạn cũng bắt đầu từ đầu. Thông thường, bạn cần xây dựng dựa trên mã hiện có mà bạn không có kiến thức trước đó – và trong trường hợp xấu nhất, không ai xung quanh bạn có kiến thức về mã đó.
Hãy hỏi AI về bố cục của một phần tử và tìm hiểu lý do tại sao bố cục đó hiển thị như vậy cho đến nút cuối cùng – cũng như lý do tại sao overflow: hidden; này trên một phần tử thực sự có lý do. 👀
Lời nhắc thử
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. Lập trình theo cặp
CSS hiện đã thực sự mạnh mẽ. Với vô vàn khả năng, đôi khi bạn sẽ không thấy bối rối: tôi có cần align-items không? Hoặc justify-items? Hay bạn muốn dùng justify-self hay align-content?
Đôi khi, bạn thực sự biết mình muốn làm gì nhưng không thể tìm được bộ thuộc tính CSS phù hợp. Lần tới khi bạn gặp phải trường hợp này, hãy giải thích vấn đề của bạn cho AI và để AI tìm ra giải pháp cho bạn.
Tính năng Hỗ trợ AI sẽ điều tra mã hiện có của bạn và so sánh với mục tiêu bạn đang cố gắng đạt được, đề xuất các bản sửa lỗi cần thiết để bạn xem xét, áp dụng và sao chép vào cơ sở mã của mình.
3. Cố vấn hỗ trợ tiếp cận
Bạn cần đảm bảo trang web của mình dễ truy cập và dễ sử dụng bằng công nghệ hỗ trợ. Hãy cân nhắc đến khả năng hỗ trợ tiếp cận ngay từ đầu quá trình phát triển, thay vì sau khi hoàn tất, đồng thời cố gắng tuân thủ Nguyên tắc hỗ trợ tiếp cận nội dung web (WCAG) trong suốt quá trình phát triển.
Sử dụng tính năng hỗ trợ AI để nhận các mẹo về nơi có thể thay thế <div> bằng một phần tử HTML ngữ nghĩa hơn, cách một thuộc tính aria-* bổ sung có thể hữu ích hoặc cách cải thiện độ tương phản màu.
Lời nhắc thử
What about color contrast in this element?
4. Cá nhân hóa thiết bị theo cách của bạn
Xu hướng đến rồi đi: có hiệu ứng chuyển màu, bóng đổ và đường viền sắc cạnh, theo sau là thiết kế phẳng, chuyển sang kỷ nguyên thiết kế hiện nay với màu neon sáng trên nền tối.
Nhưng đôi khi, bạn có thấy mệt mỏi khi mọi thứ trên web đều trông giống nhau không? Nếu đó là một trong những ngày đó, bạn có thể nhờ sự hỗ trợ của AI để thay đổi mọi thứ và làm cho web trở nên thú vị hơn một chút, chẳng hạn như đi tham quan công viên giải trí!
Lời nhắc thử
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Trở thành thợ cơ khí máy bay
Giải thích các vấn đề về kiểu, giúp khắc phục các vấn đề đó, tư vấn về khả năng hỗ trợ tiếp cận và thay đổi các kiểu hiện có – trợ lý AI có thể hỗ trợ bạn rất nhiều trong những vấn đề này và còn nhiều vấn đề khác nữa! Bạn có tin rằng trợ lý AI còn giúp bạn sửa máy bay không? Bạn không cần có kinh nghiệm trước đó, hãy mặc quần áo bảo hộ và thử sức trong Bãi đỗ xe của Công cụ dành cho nhà phát triển Chrome!
Hãy nhớ cho chúng tôi biết trải nghiệm của bạn trong công cụ theo dõi lỗi công khai của chúng tôi!