Ngày xuất bản: 21 tháng 10 năm 2024
Tuần trước, chúng tôi đã ra mắt một bảng điều khiển hoàn toàn mới cho DevTools: tính năng Trợ giúp 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 mà tính năng mới này có thể giúp bạn tạo kiểu cho trang dễ dàng hơn – từ việc hiểu bố cục đến sửa máy bay.
1. Tìm hiểu về bố cục
Khi xây dựng trang web, bạn không phải lúc nào 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 rất nhiều khả năng, đôi khi bạn có thể bị nhầm lẫn: liệu tôi có cần align-items không? Hoặc justify-items? Hay là justify-self hoặc 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 hiểu mọi thứ 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 như vậy đối với bạn, có thể bạn nên yêu cầu trợ lý AI thay đổi mọi thứ và làm cho web trở nên thú vị hơn một chút – giống như khi bạn đi tàu lượn trong 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ề định 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 việc này và còn nhiều tính năng khác nữa! Bạn có tin rằng trợ lý AI thậm chí 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!
Và đừng quên 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!