Công cụ Lưới CSS trong Công cụ cho nhà phát triển

Changhao Han
Changhao Han
X GitHub

Tại sao chúng tôi tạo ra Công cụ CSS Grid?

Lưới CSS là một hệ thống bố cục CSS rất mạnh mẽ, cho phép các nhà phát triển web tạo một bố cục hai chiều phức tạp và đặt ra các quy tắc về cách định cỡ, căn chỉnh và sắp xếp từng mục con trong lưới. CSS Grid được giới thiệu sau khi Flexbox trở nên phổ biến. Cả hai công cụ này có thể giúp nhà phát triển đạt được thiết kế thích ứng tốt hơn mà không cần các thủ thuật căn chỉnh phức tạp hoặc bố cục được hỗ trợ JavaScript.

Là một hệ thống bố cục tương đối mới, CSS Grid cũng khó sử dụng đúng cách. Cú pháp của nó khá linh hoạt (chỉ cần tìm kiếm bảng tra cứu nhanh về lưới), có nhiều cách để đạt được cùng một bố cục, đồng thời kích thước linh hoạt và các kênh ngầm ẩn khiến việc lý giải lý do bố cục đang hoặc không hoạt động như mong đợi trở nên khó khăn hơn. Đó là lý do chúng tôi quyết định cung cấp công cụ CSS Grid chuyên dụng trong DevTools để nhà phát triển có thể hiểu rõ hơn về những gì mã CSS của họ đang làm và cách tạo bố cục phù hợp.

Thiết kế công cụ

Nỗ lực chung giữa Chrome và Edge

Công cụ CSS Grid đã thu hút sự chú ý của cả Công cụ của Chrome cho nhà phát triển và Công cụ của Edge cho nhà phát triển. 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ế từ cả hai nhóm và phối hợp 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 cho công cụ CSS Grid:

  1. Lớp phủ cố định, dành riêng cho lưới giúp cung cấp thông tin về thứ nguyên và thứ tự
  2. 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
  3. Ngăn thanh bên cho phép nhà phát triển cá nhân hoá chế độ hiển thị lớp phủ DOM (ví dụ: thay đổi màu sắc và chiều rộng của các quy tắc)
  4. Trình chỉnh sửa Lưới CSS trong ngăn Kiểu

Tiếp theo, hãy cùng tìm hiểu kỹ hơn về các tính năng này.

Lớp phủ cố định dạng lưới

Trong Công cụ cho nhà phát triển, lớp phủ là 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ẻ:

ALT_TEXT_HERE

Thông tin bổ sung này được che phủ ở trên phần tử quan tâm. Trước đây, khi bạn di chuột qua một Lưới có DevTools đang mở, lớp phủ sẽ hiển thị thông tin mô hình hộp của lưới đó, nhưng giới hạn việc làm nổi bật nội dung ở các mục 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 vào cho lớp phủ Lưới CSS:

  • chúng tôi muốn hiển thị thêm thông tin hữu ích về Lưới, ví dụ: các phương diện và khoảng trống do tác giả tạo
  • chúng ta muốn làm cho lớp phủ cố định để có thể xem nhiều Lưới cùng một lúc và chúng ta có thể thấy các lớp phủ cập nhật thông tin Lưới khi chúng ta thay đổi kiểu phần tử

Hãy cùng xem cách chúng ta đạt được cả hai điều này.

Kích thước do tác giả 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 tối thiểu để tạo các 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ó để ánh xạ các kích thước kênh do tác giả tạo này với các kích thước kênh được tính toán mà trình duyệt đã tính toán cho chúng ta. Để khắc phục vấn đề này, chúng ta đặt hai thông tin này cạnh nhau trên lớp phủ:

ALT_TEXT_HERE

Chuỗi trước dấu chấm là giá trị do tác giả tạo và chuỗi sau dấu chấm thể hiện giá trị được tính toán thực tế.

Trước đây, DevTools không có khả năng lấy các giá trị do tác giả tạo. Về lý thuyết, bằng cách nào đó, chúng ta 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ố Lưới CSS. Điều này sẽ liên quan đến nhiều tình huống phức tạp và về cơ bản sẽ chỉ trùng lặp với những 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ó một API mới từ công cụ kiểu hiển thị "giá trị lồng nhau". Giá trị lồng nhau là giá trị hiệu quả cuối cùng, sau khi CSS lồng nhau, cho một thuộc tính CSS. Đây là giá trị thắng sau khi công cụ kiểu đã biên dịch tất cả các tệp 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 ta hiện đang sử dụng API này để hiển thị các giá trị do tác giả tạo trong lớp phủ lưới.

Lớp phủ ổn định

Trước khi có công cụ CSS Grid, lớp phủ trong DevTools rất đơn giản: bạn di chuột qua một phần tử, trong ngăn Cây DOM của DevTools 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 ra xa và lớp phủ sẽ biến mất. Đối với lớp phủ Lưới, chúng tôi muốn có một chút khác biệt: nhiều Lưới có thể được làm nổi bật cùng lúc 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ụ:

ALT_TEXT_HERE

Tuy nhiên, lớp phủ trong DevTools không được thiết kế với cơ chế nhiều phần tử, ổn định này (lớp phủ này được tạo cách đây nhiều năm). Do đó, chúng tôi phải tái cấu trúc thiết kế lớp phủ để tính năng này hoạt động. 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 đó, bộ công cụ này đã phát triển thành một PersistentTool toàn cục để làm nổi bật tất cả các lớp phủ ổn định cùng một lúc. Đối với mỗi loại lớp phủ ổn định (Lưới, Flex, v.v.), chúng ta giữ một trường cấu hình tương ứng bên trong công cụ ổn định. Mỗi khi bút đánh dấu lớp phủ kiểm tra nội dung cần vẽ, bút đánh dấu này cũng sẽ bao gồm các cấu hình này.

Để cho phép Công cụ cho nhà phát triển kiểm soát nội dung cần được làm nổi bật, 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 cần vẽ và cách vẽ nút đó. Điều này cho phép chúng ta thêm 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 các 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. Các 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ọ.

ALT_TEXT_HERE

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 ta muốn hiển thị trong Cây DOM, nên chúng ta muốn 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ý từng phần tử Cây DOM trong DevTools, đã đượ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 phần tử, thì các huy hiệu đó sẽ được sắp xếp theo danh mục huy hiệu, sau đó là tên theo thứ tự bảng chữ cái nếu các huy hiệu đó 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 danh mục Layout.

Ngoài ra, chúng tôi đã tích hợp tính năng hỗ trợ tiếp cận ngay từ đầu. Mỗi huy hiệu tương tác cần phải cung cấp aria-label mặc định và hoạt động, trong khi huy hiệu chỉ đọc sử dụng tên huy hiệu làm aria-label.

Chúng tôi nhận thông tin cập nhật về phong cách theo thời gian thực bằng cách nào?

Nhiều thay đổi về DOM được phản ánh trong Cây DOM của DevTools 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, đồng thời 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 huy hiệu Lưới cũng phản ánh cùng một thông tin mới nhất. Tuy nhiên, điều này tỏ ra khó triển khai vì không có cách nào để Công cụ cho nhà phát triển nhận thông báo khi các phần tử hiển thị trong Cây DOM nhận được cập nhật kiểu đã tính toán. Cách duy nhất hiện có để biết thời điểm một phần tử trở thành hoặc ngừng trở thành vùng chứa Lưới là liên tục truy vấn trình duyệt để biết thông tin kiểu mới nhất của từng phần tử. Việc này sẽ cấm tốn kém.

Để giúp phần giao diện người dùng dễ dàng biết thời điểm một phần tử được cập nhật kiểu, chúng tôi đã thêm một phương thức CDP mới để thăm dò ý kiến về nội dung cập nhật kiểu. Để nhận 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 chúng tôi muốn theo dõi khai báo CSS nào. Trong trường hợp 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 ta sẽ gửi một yêu cầu thăm dò ý kiến và khi có nội dung 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 DevTools danh sách các nút đã cập nhật và phân giải yêu cầu thăm dò ý kiến hiện có. Bất cứ khi nào muốn được thông báo về nội dung cập nhật kiểu lại, DevTools có thể gửi yêu cầu thăm dò ý kiến này thay vì liên tục thăm dò ý kiến phần phụ trợ từ mỗi nút. Công cụ phát triển cũng có thể thay đổi các 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 bạn dễ dàng tìm thấy 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/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 chỉ dành cho các công cụ bố cục. Điều này giúp chúng ta có một không gian chuyên dụng để thu thậ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 Bố cục này cũng cho phép chúng ta đặt các công cụ có nhiều bố cục trong tương lai (ví dụ: Flexbox, Truy vấn vùng chứa) tại đây.

Tìm phần tử theo kiểu đã tính toán

Để hiển thị danh sách 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. Điều này cũng không đơn giản vì không phải tất cả các nút DOM đều được DevTools biết khi DevTools đang mở. Thay vào đó, DevTools 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 theo yêu cầu khác. Điều này có nghĩa là chúng ta 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 các nút đó theo kiểu đã tính toán của chúng:

# 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

Thao tác này cho phép giao diện người dùng của DevTools nhận danh sách các vùng chứa Lưới CSS trong một trang, có thể xuyên qua các iframe và gốc bóng và hiển thị các vùng chứa đó trong ngăn Bố cục.

Kết luận

Công cụ CSS Grid là một trong những dự án công cụ thiết kế DevTools đầu tiên hỗ trợ tính năng Nền tảng web. Công cụ này đã ra mắt nhiều công cụ cơ bản trong DevTools, chẳng hạn như lớp phủ ổn định, huy hiệu Cây DOM và ngăn Bố cục, đồng thời mở đường cho các công cụ bố cục trong tương lai trong DevTools của Chrome như Flexbox và truy vấn Vùng chứa. Điều này cũng đặt nền tảng cho trình chỉnh sửa Lưới và Flexbox, cho phép nhà phát triển thay đổi cách căn chỉnh Lưới và Flexbox theo cách tương tác. Chúng ta sẽ tìm hiểu các phương thức này trong tương lai.

Tải 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. Các kênh xem trước này cho phép bạ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, cho phép bạn kiểm thử các API nền tảng web tiên tiến và giúp bạn phát hiện các vấn đề trên trang web của mình trước người dùng!

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, bản cập nhật mới hoặc bất kỳ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.