Tại sao chúng tôi tạo ra Công cụ lưới CSS?
Lưới CSS là hệ thống bố cục CSS rất mạnh mẽ cho phép các nhà phát triển web xây dựng một bố cục hai chiều phức tạp và đặt ra các quy tắc về cách định kích thước, căn chỉnh và sắp xếp từng mục con trong lưới. CSS Grid được ra mắt sau khi Flexbox trở nên phổ biến. Cùng nhau, chúng có thể giúp nhà phát triển đạt được thiết kế đáp ứng tốt hơn mà không cần các mẹo căn chỉnh phức tạp hoặc bố cục hỗ trợ JavaScript.
Là một hệ thống bố cục tương đối mới, CSS Grid cũng khó chính xác. Cú pháp của hàm này khá linh hoạt (chỉ cần tìm bản tóm tắt về lưới), có nhiều cách để đạt được cùng một bố cục, cũng như các kích thước linh hoạt và các bản nhạc ngầm ẩn khiến bạn khó giải thích lý do bố cục có hoặc không hoạt động như mong muốn. Đây là lý do tại sao chúng tôi bắt đầu cung cấp công cụ Lưới CSS chuyên dụng trong Công cụ cho nhà phát triển, để nhà phát triển có thể hiểu rõ hơn về mã CSS của họ đang làm việc và cách để có được bố cục phù hợp.
Thiết kế công cụ
Sự hợp tác chung của Chrome và Edge
Công cụ lưới CSS đã thu hút sự chú ý của cả Công cụ của Chrome cho nhà phát triển và Công cụ cho nhà phát triển Edge. Chúng tôi quyết định cộng tác ngay từ đầu. Chúng tôi đã chia sẻ tài nguyên về sản phẩm, kỹ thuật và thiết kế của cả hai nhóm và điều phối hằng tuần để hiện thực hoá mục tiêu này.
Tóm tắt các tính năng
Có 3 tính năng chính của công cụ Lưới CSS:
- Lớp phủ cố định, dành riêng cho lưới giúp cung cấp thông tin về kích thước và thứ tự
- Các huy hiệu trong Cây DOM làm nổi bật vùng chứa Lưới CSS và bật/tắt lớp phủ Lưới
- Ngăn thanh bên cho phép các nhà phát triển cá nhân hoá màn hình hiển thị lớp phủ DOM (ví dụ: thay đổi màu và chiều rộng của các quy tắc)
- Trình chỉnh sửa Lưới CSS trong ngăn Styles (Kiểu)
Hãy cùng tìm hiểu kỹ hơn về những thành phần này ở phần tiếp theo.
Lớp phủ cố định dạng lưới
Trong Công cụ cho nhà phát triển, lớp phủ là một công cụ mạnh mẽ cung cấp thông tin về bố cục và kiểu của một phần tử riêng lẻ:
Thông tin bổ sung này nằm chồng ở đầu yếu tố quan tâm. Trước đây, khi bạn di chuột qua Lưới có Công cụ cho nhà phát triển đang mở, lớp phủ hiển thị thông tin mô hình hộp, nhưng giới hạn nội dung được làm nổi bật ở các mục trong lưới mà không giải thích lý do. Có hai phần chính mà chúng tôi muốn thêm cho lớp phủ Lưới CSS:
- chúng tôi muốn hiển thị thông tin hữu ích hơn về Lưới, ví dụ: các phương diện và khoảng trống được tạo
- chúng ta muốn làm cho các lớp phủ cố định để có thể xem nhiều Lưới cùng lúc và có thể thấy các lớp phủ cập nhật thông tin Lưới khi thay đổi kiểu phần tử
Hãy xem cách chúng tôi đạt được cả hai mục tiêu này.
Kích thước được tạo so với kích thước được tính toán
Một trong những phần khó khăn khi gỡ lỗi Lưới CSS là có nhiều cách để xác định kích thước đường lưới. Ví dụ: bạn có thể sử dụng kết hợp giá trị pixel, giá trị phần trăm, phân số, hàm lặp lại và hàm minmax để tạo kích thước bản nhạc linh hoạt:
.grid-cards {
display: grid;
width: 200px;
height: 300px;
grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
grid-template-columns: repeat(3, minmax(200px, 1fr));
}
Tuy nhiên, sẽ khó để liên kết các kích thước bản nhạc được tạo này với các kích thước bản nhạc được tính toán mà trình duyệt đã tính cho chúng tôi. Để thu hẹp khoảng cách này, chúng tôi đặt hai thông tin này cạnh nhau trên lớp phủ:
Chuỗi trước dấu chấm là giá trị đã tạo, còn chuỗi sau dấu chấm biểu thị giá trị đã tính thực tế.
Trước đây, Công cụ cho nhà phát triển không có khả năng lấy các giá trị đã tạo. Về lý thuyết, bằng cách nào đó, chúng tôi có thể tự phân tích cú pháp các giá trị đã tạo trong Công cụ cho nhà phát triển và tính toán chúng theo thông số kỹ thuật của Lưới CSS. Việc này có thể dẫn đến nhiều tình huống phức tạp và về cơ bản sẽ chỉ là sự trùng lặp với các nỗ lực của Blink. Do đó, với sự trợ giúp của nhóm Kiểu của Blink, chúng tôi đã có được API mới từ công cụ tạo kiểu cho thấy "giá trị được xếp tầng". Giá trị xếp tầng là giá trị hiệu quả cuối cùng sau khi phân tầng CSS cho thuộc tính CSS. Đây là giá trị giành chiến thắng sau khi công cụ tạo kiểu đã biên dịch tất cả các biểu định kiểu, nhưng trước khi thực sự tính toán bất kỳ giá trị nào, ví dụ: tỷ lệ phần trăm, phân số, v.v.
Chúng tôi hiện đang sử dụng API này để hiển thị các giá trị đã tạo trong lớp phủ lưới.
Lớp phủ ổn định
Trước khi sử dụng công cụ Lưới CSS, lớp phủ trong Công cụ cho nhà phát triển khá đơn giản: bạn di chuột lên một phần tử, trong ngăn Cây DOM của Công cụ cho nhà phát triển hoặc trực tiếp trong trang được kiểm tra và bạn sẽ thấy một lớp phủ mô tả phần tử này. Bạn di chuột qua và lớp phủ biến mất. Đối với Lớp phủ Lưới, chúng tôi muốn có điểm khác biệt: nhiều Lưới có thể được làm nổi bật đồng thời và Lớp phủ Lưới có thể vẫn bật trong khi các lớp phủ khi di chuột thông thường vẫn hoạt động.
Ví dụ:
Tuy nhiên, lớp phủ trong Công cụ cho nhà phát triển không được thiết kế theo cơ chế liên tục, đa phần tử này (đã tạo từ nhiều năm trước). Do đó, chúng tôi đã phải tái cấu trúc thiết kế lớp phủ để làm được việc này. Chúng tôi thêm một GridHighlightTool mới vào bộ công cụ làm nổi bật hiện có, sau đó phát triển thành PersistentTool toàn cầu để làm nổi bật tất cả các lớp phủ cố định cùng một lúc. Đối với mỗi loại lớp phủ cố định (Lưới, Flex, v.v.), chúng tôi giữ một trường cấu hình tương ứng bên trong công cụ liên tục. Mỗi khi trình đánh dấu lớp phủ kiểm tra xem cần vẽ gì, nó cũng sẽ đưa vào các cấu hình này.
Để cho phép Công cụ cho nhà phát triển kiểm soát những nội dung cần được đánh dấu, chúng tôi đã tạo một lệnh CDP mới cho Lớp phủ cố định lưới:
# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
parameters
# An array of node identifiers and descriptors for the highlight appearance.
array of GridNodeHighlightConfig gridNodeHighlightConfigs
trong đó mỗi GridNodeHighlightConfig chứa thông tin về nút nào cần vẽ và cách vẽ nút đó. Điều này cho phép chúng tôi thêm một cơ chế cố định nhiều mục mà không phá vỡ hành vi di chuột hiện tại.
Huy hiệu Lưới theo thời gian thực
Để giúp nhà phát triển dễ dàng bật và tắt Lớp phủ Lưới, chúng tôi quyết định thêm các huy hiệu nhỏ bên cạnh vùng chứa Lưới trong Cây DOM. Những huy hiệu này cũng có thể giúp nhà phát triển xác định vùng chứa Lưới trong cấu trúc DOM của họ.
Các thay đổi đối với cây DOM
Vì huy hiệu Grid không phải là huy hiệu duy nhất mà chúng tôi muốn hiển thị trong Cây DOM, nên chúng tôi muốn làm cho việc thêm huy hiệu trở nên dễ dàng nhất có thể. ElementsTreeElement, lớp chịu trách nhiệm tạo và quản lý các phần tử Cây DOM riêng lẻ trong Công cụ cho nhà phát triển, đã được cập nhật với một số phương thức công khai mới để định cấu hình huy hiệu. Nếu có nhiều huy hiệu cho một thành phần, thì các huy hiệu đó được sắp xếp theo danh mục của huy hiệu, sau đó là tên của các huy hiệu đó theo thứ tự bảng chữ cái nếu các thành phần đó thuộc cùng một danh mục. Các danh mục hiện có bao gồm Security, Layout, v.v. và Grid thuộc về danh mục Layout.
Ngoài ra, chúng tôi đã tích hợp sẵn tính năng hỗ trợ tiếp cận ngay từ đầu. Mọi huy hiệu tương tác đều bắt buộc phải cung cấp aria-label mặc định và đang hoạt động, còn huy hiệu chỉ có thể đọc sử dụng tên huy hiệu làm aria-label.
Chúng tôi nhận được thông tin cập nhật về kiểu theo thời gian thực như thế nào?
Nhiều thay đổi về DOM được phản ánh trong Cây DOM của Công cụ cho nhà phát triển theo thời gian thực. Ví dụ: các nút mới thêm vào sẽ xuất hiện ngay lập tức trong Cây DOM, còn các tên lớp bị xoá cũng sẽ biến mất ngay lập tức. Chúng tôi muốn trạng thái của huy hiệu Lưới cũng phản ánh cùng một thông tin cập nhật. Tuy nhiên, việc triển khai này khá khó khăn vì không có cách nào để Công cụ cho nhà phát triển nhận được thông báo khi các phần tử hiển thị trong Cây DOM nhận các bản cập nhật kiểu đã tính toán. Cách duy nhất hiện có để biết khi nào một phần tử trở thành hoặc ngừng là vùng chứa Lưới là liên tục truy vấn trình duyệt về thông tin kiểu cập nhật của mỗi phần tử. Việc này sẽ gây tốn kém cực kỳ.
Để giao diện người dùng dễ dàng biết được thời điểm một phần tử được cập nhật kiểu, chúng tôi đã thêm phương thức CDP mới để kiểm tra thông tin cập nhật về kiểu. Để cập nhật kiểu của các nút DOM, chúng ta bắt đầu bằng cách cho trình duyệt biết các khai báo CSS mà chúng ta muốn theo dõi. Đối với huy hiệu Lưới, chúng ta sẽ yêu cầu trình duyệt theo dõi:
{
"display": "grid",
"display": "inline-grid",
}
Sau đó, chúng tôi gửi một yêu cầu thăm dò ý kiến và khi có bản cập nhật kiểu được theo dõi cho các nút DOM trong bảng điều khiển Phần tử, trình duyệt sẽ gửi cho Công cụ cho nhà phát triển một danh sách các nút đã cập nhật và giải quyết yêu cầu thăm dò hiện có. Bất cứ khi nào Công cụ cho nhà phát triển muốn được thông báo lại về thông tin cập nhật kiểu, công cụ này có thể gửi yêu cầu thăm dò này thay vì liên tục thăm dò phần phụ trợ từ mỗi nút. Công cụ cho nhà phát triển cũng có thể thay đổi nội dung khai báo CSS đang được theo dõi bằng cách gửi một danh sách mới đến trình duyệt.
Ngăn bố cục
Mặc dù huy hiệu Cây DOM giúp tăng khả năng khám phá Lưới CSS, nhưng đôi khi chúng ta muốn xem danh sách tất cả Lưới CSS trong một trang nhất định và dễ dàng bật và tắt lớp phủ cố định để gỡ lỗi bố cục. Do đó, chúng tôi đã quyết định tạo một ngăn thanh bên chuyên dụng dành riêng cho các công cụ bố cục. Điều này cung cấp cho chúng ta một không gian dành riêng để tập hợp tất cả các vùng chứa Lưới và để định cấu hình tất cả các tuỳ chọn cho lớp phủ Lưới. Ngăn Layout (Bố cục) này cũng cho phép chúng ta đặt các công cụ sẽ tạo nhiều bố cục trong tương lai (ví dụ: Flexbox, Truy vấn vùng chứa) vào đây.
Tìm phần tử theo kiểu đã tính toán
Để hiển thị danh sách các vùng chứa Lưới CSS trong ngăn Bố cục, chúng ta cần tìm các nút DOM theo kiểu đã tính toán. Việc này cũng không đơn giản vì Công cụ cho nhà phát triển đang mở tất cả các nút DOM. Thay vào đó, Công cụ cho nhà phát triển chỉ biết một tập hợp con nhỏ các nút, thường ở cấp cao nhất của hệ phân cấp DOM, chỉ để bắt đầu Cây DOM của Devtools. Vì lý do hiệu suất, các nút khác sẽ chỉ được tìm nạp khi có thêm yêu cầu. Điều này có nghĩa là chúng tôi cần một lệnh CDP mới để thu thập tất cả các nút trên trang và lọc chúng theo kiểu đã tính toán:
# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
parameters
# Node ID pointing to the root of a subtree.
NodeId nodeId
# The style to filter nodes by (includes nodes if any of properties matches).
array of CSSComputedStyleProperty computedStyles
# Whether or not iframes and shadow roots in the same target should be traversed when returning the
# results (default is false).
optional boolean pierce
returns
# Resulting nodes.
array of NodeId nodeIds
Điều này cho phép giao diện người dùng Công cụ cho nhà phát triển có được danh sách các vùng chứa Lưới CSS trong một trang, có thể xuyên qua iframe và gốc bóng, đồng thời hiển thị chúng trong ngăn Bố cục.
Kết luận
Công cụ Lưới CSS là một trong những dự án công cụ thiết kế Công cụ cho nhà phát triển đầu tiên hỗ trợ tính năng Nền tảng web. Phiên bản này ra mắt nhiều công cụ cơ bản trong Công cụ cho nhà phát triển, ví dụ: lớp phủ cố định, huy hiệu Cây DOM và ngăn Layout (Bố cục), đồng thời mở đường cho các công cụ bố cục sau này trong Công cụ của Chrome cho nhà phát triển như Flexbox và truy vấn Vùng chứa. Việc này cũng đặt nền móng cho trình chỉnh sửa Lưới và Hộp linh hoạt, cho phép nhà phát triển thay đổi cách căn chỉnh Lưới và Hộp linh hoạt theo cách tương tác. Chúng ta sẽ tìm hiểu về chúng sau này.
Tải các kênh xem trước xuống
Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Những kênh xem trước này cung cấp cho bạn quyền truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, kiểm thử API nền tảng web tiên tiến và tìm ra các sự cố trên trang web của bạn trước khi người dùng làm việc đó!
Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển
Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất kỳ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.
- Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
- Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng mục Tuỳ chọn khác
> Trợ giúp > Báo cáo sự cố Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển. - Tweet tại @ChromeDevTools.
- Để lại nhận xét về Video trên YouTube của chúng tôi về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc mẹo Công cụ cho nhà phát triển.