Houdini: Phát triển Sôi động nhất trong CSS mà Bạn chưa từng thấy (P2)
Bài đăng này đã không được cập nhật trong 8 năm
Những tính năng Houdini Are Hiện nay đang phát triển?
Tôi đã đề cập ở p1 mà các nhà phát triển có rất ít các điểm truy cập vào render pipeline của trình duyệt. Thực sự, những nơi chỉ là DOM và, đến một mức độ nào đó, các CSSOM. Để giải quyết vấn đề này Houdini đã giới thiệu một số kỹ thuật mới sẽ, lần đầu tiên, cung cấp cho các nhà phát triển truy cập vào các bộ phận khác của rendering pipeline. Biểu đồ dưới đây cho thấy các pipeline có thông số kỹ thuật mới có thể được sử dụng để sửa đổi. (Lưu ý rằng các thông số kỹ thuật trong màu xám được lên kế hoạch nhưng chưa được viết.)
Trường hợp thông số kỹ thuật Houdini mới phù hợp với rendering pipeline của trình duyệt.
Các phần tiếp theo cho một tổng quan ngắn gọn của từng đặc điểm kỹ thuật mới và những loại khả năng mà nó cung cấp. Tôi cũng nên lưu ý rằng thông số kỹ thuật khác không được đề cập trong bài viết này; cho đầy đủ, xem GitHub của Houdini .
CSS PARSER API
Các API CSS Parser hiện không được viết ra; như vậy, phần lớn những gì tôi nói có thể dễ dàng thay đổi, nhưng ý tưởng cơ bản là nó cho phép các nhà phát triển mở rộng phân tích cú pháp CSS và nói về cấu trúc mới - ví dụ, các quy tắc media mới, mới giả lớp, tổ, @extends , @apply , vv Sau khi phân tích cú pháp biết về các cấu trúc mới, nó có thể đặt chúng vào đúng chỗ trong CSSOM, thay vì chỉ loại bỏ chúng.
CSS PROPERTIES VÀ VALUES API
CSS đã có tính tùy chỉnh, và, như tôi đã thể hiện trước , tôi rất vui mừng về những khả năng chúng unlock. Các thuộc tính CSS và giá trị API có tính tùy chỉnh xa hơn và khiến chúng trở nên hữu ích hơn bằng cách thêm các loại. Có rất nhiều điều tuyệt vời về cách thêm các loại tùy chỉnh, nhưng có lẽ điểm lớn nhất là các loại sẽ cho phép các nhà phát triển để chuyển tiếp và làm sinh động tính tùy chỉnh, một cái gì đó chúng ta không thể làm hôm nay. Hãy xem xét ví dụ này:
body {
--primary-theme-color: tomato;
transition: --primary-theme-color 1s ease-in-out;
}
body.night-theme {
--primary-theme-color: darkred;
}
Trong đoạn mã trên, nếu lớp night-theme được thêm vào <body>, sau đó mỗi phần tử trên trang tham chiếu đến --primary-theme-màu giá trị thuộc tính sẽ dần dần chuyển từ tomato đến darkred . Nếu bạn muốn làm điều này hôm nay, bạn sẽ phải viết quá trình chuyển đổi cho từng yếu tố bằng tay, bởi vì bạn không thể chuyển thuộc tính riêng của mình.
Một tính năng đầy hứa hẹn của API này là khả năng để đăng ký một "apply hook", trong đó cung cấp cho các nhà phát triển một cách để sửa đổi các giá trị cuối cùng của một thuộc tính tùy chỉnh trên các yếu tố sau khi bước thác đã hoàn thành, mà có thể là một tính năng rất hữu ích cho polyfills.
CSS TYPED OM
CSS Typed OM có thể được coi là phiên bản 2 của CSSOM hiện hành. Đó là mục tiêu là để giải quyết rất nhiều vấn đề với mô hình hiện tại và bao gồm các tính năng bổ sung bởi các CSS Parsing API và CSS Properties và Values API. Một mục tiêu chính của Typed OM là để cải thiện hiệu suất. Chuyển đổi các giá trị chuỗi các CSSOM hiện tại thành các thể hiện Javascript có ý nghĩa sẽ mang lại hiệu suất đáng kể.
CSS LAYOUT API LIÊN KẾT
Các API CSS Layout cho phép các nhà phát triển viết các module layout. Và bởi "module layout," có nghĩa là bất cứ điều gì có thể được thông qua với CSS hiển thị thuộc tính. Điều này sẽ cung cấp cho các nhà phát triển, lần đầu tiên, một cách thực hiện như native layout modules tựa như display: flex và display: table .
Là một trường hợp ví dụ sử dụng, thư viện layout Masonry cho thấy mức độ mà các nhà phát triển sẵn sàng đến ngày hôm nay để đạt được bố cục phức tạp không thể với một mình CSS. Trong khi những bố trí này là ấn tượng, thật không may, họ bị các vấn đề hiệu suất, đặc biệt là trên các thiết bị ít mạnh mẽ.
Các API CSS Layout hoạt động bằng cách cho các nhà phát triển một registerLayout phương pháp mà chấp nhận một tên Layout (mà sau này được sử dụng trong CSS) và một lớp JavaScript bao gồm tất cả các logic Layout. Dưới đây là một ví dụ cơ bản về cách bạn có thể xác định masonry qua registerLayout :
registerLayout('masonry', class {
static get inputProperties() {
return ['width', 'height']
}
static get childrenInputProperties() {
return ['x', 'y', 'position']
}
layout(children, constraintSpace, styleMap, breakToken) {
// Layout logic goes here.
}
}
Nếu không có gì trong ví dụ trên có ý nghĩa đối với bạn, đừng lo lắng. Những điều chính cần quan tâm là các mã trong ví dụ tiếp theo. Một khi bạn đã tải về các masonry.js và thêm nó vào trang web của bạn, bạn có thể viết CSS như thế này và tất cả mọi thứ sẽ làm việc:
body {
display: layout('masonry');
}
CSS Paint API CSS Paint API là rất giống với các Layout API ở trên. Nó cung cấp một method registerPaint mà hoạt động giống như các method registerLayout. Sau đó các nhà phát triển có thể sử dụng function Paint () trong CSS bất cứ nơi nào mà một hình ảnh CSS được truyền qua trong tên đó đã được đăng ký.
Dưới đây là một ví dụ đơn giản là vẽ một vòng tròn màu:
registerPaint('circle', class {
static get inputProperties() { return ['--circle-color']; }
paint(ctx, geom, properties) {
// Change the fill color.
const color = properties.get('--circle-color');
ctx.fillStyle = color;
// Determine the center point and radius.
const x = geom.width / 2;
const y = geom.height / 2;
const radius = Math.min(x, y);
// Draw the circle \o/
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.fill();
}
});
Và nó có thể được sử dụng trong CSS như thế này:
.bubble {
--circle-color: blue;
background-image: paint('circle');
}
Bây giờ, các phần tử .bubble sẽ được hiển thị với một vòng tròn màu xanh như nền. Các vòng tròn sẽ được trung tâm và kích thước tương tự như các yếu tố riêng của mình.
WORKLETS LIÊN KẾT
Nhiều thông số kỹ thuật được liệt kê ở trên các mẫu chương trình (ví dụ, registerLayout và registerPaint ). Nếu bạn đang tự hỏi, nơi bạn đã đặt mã đó, câu trả lời là trong worklet scripts.
Worklets tương tự như web workers, và họ cho phép bạn nhập các tập tin script và chạy mã JavaScript mà (1) có thể được viện dẫn tại các điểm khác nhau trong các rendering pipeline và (2) là độc lập với thread chính. Worklet scripts sẽ hạn chế những loại hoạt động bạn có thể làm, đó là chìa khóa để đảm bảo hiệu suất cao.
GHÉP SCROLLING VÀ ANIMATION LIÊN KẾT
Mặc dù không có đặc điểm kỹ thuật chính thức nào cho cuộn kết hợp và hình ảnh động , nó thực sự là một trong những tính năng Houdini nổi tiếng hơn và rất được mong đợi. Các API cuối cùng sẽ cho phép các nhà phát triển để chạy logic trong compositor worklet, tắt các thread chính, với sự hỗ trợ cho sửa đổi của một tập hợp hữu hạn các đặc tính của một phần tử DOM. Tập hợp con này sẽ chỉ bao gồm các thuộc tính có thể được đọc hoặc thiết lập mà không buộc các công cụ vẽ để tính toán lại layout hoặc style (ví dụ, transform, opacity, scroll offset).
Điều này sẽ cho phép các nhà phát triển để tạo ra scroll hiệu suất cao và input-based animations, chẳng hạn như tiêu đề cuộn sticky và hiệu ứng song song. Bạn có thể đọc thêm về các trường hợp sử dụng mà các API này trên GitHub. Trong khi không có đặc điểm kỹ thuật chính thức nào, triển khai thực nghiệm đã bắt đầu trong Chrome. Trong thực tế, nhóm Chrome hiện đang thực hiện Css snap point và sticky positioning bằng cách sử dụng các API được đề xuất. Điều này là tuyệt vời vì nó có nghĩa là Houdini API đủ performant, các đặc tính Chrome mới đang được xây dựng trên top. Nếu bạn vẫn còn có bất kỳ lo ngại rằng Houdini sẽ không được nhanh như bản tốc, thực tế này thì mình nên thuyết phục bạn nghĩ khác.
Bạn có thể làm gì bây giờ?
Như đã đề cập, tôi nghĩ rằng tất cả mọi người những người xây dựng trang web nên quan tâm Houdini; nó sẽ làm cho tất cả cuộc sống của chúng ta dễ dàng hơn nhiều trong tương lai. Thậm chí nếu bạn không bao giờ sử dụng một đặc điểm kỹ thuật Houdini trực tiếp, bạn sẽ gần như chắc chắn sử dụng một cái gì đó trong nó. Và trong khi tương lai này có thể không ngay lập tức, nó có thể gần gũi hơn so với rất nhiều người trong chúng ta nghĩ. Đại diện của tất cả các nhà cung cấp trình duyệt lớn là tại Houdini mặt đối mặt cuộc họp cuối cùng tại Sydney hồi đầu năm nay, và có rất ít sự bất đồng về những gì để xây dựng hoặc làm thế nào để tiến hành. Từ những gì tôi có thể nói, nó không phải là một vấn đề nếu Houdini sẽ là một chuyện, nhưng khi nào, và đó là nơi mà tất cả các bạn sẽ đi vào. các nhà cung cấp trình duyệt, giống như tất cả mọi người xây dựng phần mềm, phải ưu tiên cho các tính năng mới. Và ưu tiên thường là một chức năng của làm thế nào xấu người dùng muốn những tính năng. Vì vậy, nếu bạn quan tâm về khả năng mở rộng của styling and layout trên các trang web, và nếu bạn muốn sống trong một thế giới mà bạn có thể sử dụng tính năng CSS mới mà không cần phải chờ đợi cho họ để đi qua quá trình tiêu chuẩn, nói chuyện với các thành viên của đội quan hệ phát triển cho (các) trình duyệt bạn sử dụng, và cho họ biết bạn muốn điều này. Cách khác, bạn có thể giúp đỡ bằng cách cung cấp các trường hợp sử dụng thế giới thực - những thứ bạn muốn để có thể làm với styling and layout rất khó hoặc không thể làm ngày hôm nay. Một số dự thảo trên GitHub có trường hợp sử dụng tài liệu, và bạn có thể gửi yêu cầu pull để đóng góp ý kiến của bạn. Nếu tài liệu không tồn tại, bạn có thể bắt đầu.
All rights reserved
