Bạn đã bao giờ nghĩ đến lượng công việc mà CSS cần làm chưa? Bạn thay đổi một và đột nhiên toàn bộ trang web của bạn xuất hiện ở một bố cục khác. Bây giờ kỳ diệu. Cho đến nay, chúng tôi (cộng đồng các nhà phát triển web) đã chỉ có thể chứng kiến và quan sát sự kỳ diệu. Nếu chúng ta muốn nghĩ ra kỳ diệu của chính chúng tôi? Nếu chúng ta muốn trở thành nhà ảo thuật thì sao?
Tiến vào Houdini!
Lực lượng đặc nhiệm Houdini bao gồm các kỹ sư của Mozilla, Apple, Opera, Microsoft, HP, Intel và Google hợp tác với nhau để hiển thị một số phần của công cụ CSS cho nhà phát triển web. Lực lượng chuyên trách đang nỗ lực tìm ra bộ sưu tập các bản nháp với mục tiêu khiến chúng được W3C chấp nhận để trở thành môi trường web thực sự chuẩn. Họ đặt ra cho mình một số mục tiêu cao cấp và biến chúng thành các bản nháp thông số kỹ thuật này cũng sinh ra tập hợp các thông tin hỗ trợ, các bản nháp thông số kỹ thuật cấp thấp hơn.
Tập hợp các bản thảo này là nội dung thường được hiểu khi ai đó nói về "Houdini". Tại thời điểm viết, danh sách bản nháp là chưa hoàn chỉnh và một số bản nháp chỉ là phần giữ chỗ.
Thông số kỹ thuật
Worklet (thông số kỹ thuật)
Bản thân các Worklet không thực sự hữu ích. Chúng là một khái niệm được đưa vào cho phép thực hiện nhiều bản nháp sau này. Nếu bạn nghĩ về Web Workers khi hãy đọc "worklet", bạn không sai. Chúng có rất nhiều điểm trùng lặp về khái niệm. Vậy tại sao một điều mới khi chúng tôi đã có nhân viên?
Mục tiêu của Houdini là hiển thị các API mới để cho phép các nhà phát triển web nối mã của riêng họ vào công cụ CSS và các hệ thống xung quanh. Có thể không phi thực tế khi cho rằng một vài trong số những sẽ phải chạy mỗi đoạn mã. duy nhất. . Một số nhà quảng cáo phải theo định nghĩa. Trích dẫn thông số kỹ thuật của Trình chạy web:
Điều đó nghĩa là nhân viên web không thể thực hiện những việc mà Houdini dự định làm. Do đó, worklet thật ra đời. Worklet sử dụng các lớp ES2015 để xác định một tập hợp phương thức, chữ ký trong đó được xác định trước bằng loại worklet. Chúng nhẹ và tồn tại trong thời gian ngắn.
CSS Paint API (quy cách)
Paint API được bật theo mặc định trong Chrome 65. Đọc phần giới thiệu chi tiết.
Worklet trình tổng hợp
API được mô tả ở đây đã lỗi thời. Worklet trình tổng hợp có đã được thiết kế lại và hiện được đề xuất là "Animation Worklet". Đọc thêm trên trang lần lặp lại hiện tại của API.
Mặc dù thông số worklet của trình tổng hợp đã được chuyển sang WICG và sẽ được lặp lại, đó là thông số kỹ thuật làm tôi thích thú nhất. Hơi nhiều các hoạt động này được CSS thuê ngoài thẻ đồ hoạ của máy tính của bạn mặc dù điều đó phụ thuộc vào cả thẻ đồ hoạ và thiết bị của bạn trong chung.
Một trình duyệt thường lấy cây DOM và dựa trên các tiêu chí cụ thể, quyết định cung cấp cho một số nhánh và cây con vào lớp riêng. Các cây con này tự vẽ lên đó (có thể sử dụng worklet sơn trong tương lai). Bước cuối cùng, tất cả những lớp riêng lẻ này, giờ được tô, được xếp chồng lên nhau và chồng lên nhau, tôn trọng chỉ số z, biến đổi 3D và để thu được hình ảnh cuối cùng hiển thị trên màn hình. Quá trình này có tên là compositing và được trình tổng hợp thực thi.
Ưu điểm của quá trình kết hợp là bạn không phải tạo tất cả các phần tử sẽ tự vẽ lại khi trang cuộn một chút. Thay vào đó, bạn có thể sử dụng lại các lớp từ khung trước và chỉ cần chạy lại trình tổng hợp với vị trí cuộn đã cập nhật. Điều này giúp mọi thứ trở nên nhanh chóng. Điều này giúp chúng tôi đạt được tốc độ 60 khung hình/giây.
Như cái tên cho thấy, worklet trình tổng hợp cho phép bạn nối vào trình tổng hợp và tác động đến cách lớp của một phần tử, vốn đã được vẽ, được định vị và xếp chồng lên trên các lớp khác.
Để tận hưởng thêm
cụ thể, bạn có thể cho trình duyệt biết rằng bạn muốn nối vào công cụ tổng hợp
cho một nút DOM nhất định và có thể yêu cầu quyền truy cập vào một số thuộc tính nhất định như
vị trí cuộn, transform hoặc opacity. Thao tác này sẽ buộc phần tử này bật
lớp riêng và trên mỗi khung, mã của bạn sẽ được gọi. Bạn có thể di chuyển lớp của mình
bằng cách thao tác với các lớp biến đổi và thay đổi các thuộc tính của nó (như opacity)
cho phép bạn thực hiện những điều thú vị hơn ở tốc độ 60 khung hình/giây.
Dưới đây là cách triển khai đầy đủ cho cuộn thị sai, sử dụng trình tổng hợp Worklet.
// main.js
window.compositorWorklet.import('worklet.js')
.then(function() {
var animator = new CompositorAnimator('parallax');
animator.postMessage([
new CompositorProxy($('.scroller'), ['scrollTop']),
new CompositorProxy($('.parallax'), ['transform']),
]);
});
// worklet.js
registerCompositorAnimator('parallax', class {
tick(timestamp) {
var t = self.parallax.transform;
t.m42 = -0.1 * self.scroller.scrollTop;
self.parallax.transform = t;
}
onmessage(e) {
self.scroller = e.data[0];
self.parallax = e.data[1];
};
});
Robert Flack đã viết một polyfill cho công cụ tổng hợp để bạn có thể dùng thử – rõ ràng là bạn cần rất nhiều tác động cao hơn đến hiệu suất.
Worklet bố cục (thông số kỹ thuật)
Bản nháp thông số kỹ thuật thực đầu tiên đã được đề xuất. Triển khai chỉ là một khoảng thời gian thú vị.
Xin nhắc lại, nội dung đặc tả cho thuộc tính này thực tế trống, nhưng khái niệm thì
tạo sự tò mò: viết bố cục của riêng bạn! Worklet bố cục phải hỗ trợ bạn
để thực hiện display: layout('myLayout') và chạy JavaScript của bạn để sắp xếp
phần tử con trong hộp của nút.
Tất nhiên, việc chạy triển khai JavaScript đầy đủ cho bố cục flex-box của CSS
chậm hơn so với việc chạy triển khai gốc tương đương, nhưng rất dễ
hãy hình dung một tình huống trong đó các góc cắt có thể mang lại mức tăng hiệu suất. Hãy tưởng tượng một
trang web không có gì ngoài ô, như Windows 10 hoặc kiểu khối xây
của bạn. Không sử dụng vị trí tuyệt đối và cố định, cũng như z-index và cũng không
các phần tử chồng chéo nhau hoặc có bất kỳ loại đường viền hoặc tràn lề nào. Có thể bỏ qua
tất cả những bước kiểm tra này về bố cục lại đều có thể mang lại hiệu suất tốt hơn.
registerLayout('random-layout', class {
static get inputProperties() {
return [];
}
static get childrenInputProperties() {
return [];
}
layout(children, constraintSpace, styleMap) {
const width = constraintSpace.width;
const height = constraintSpace.height;
for (let child of children) {
const x = Math.random()*width;
const y = Math.random()*height;
const constraintSubSpace = new ConstraintSpace();
constraintSubSpace.width = width-x;
constraintSubSpace.height = height-y;
const childFragment = child.doLayout(constraintSubSpace);
childFragment.x = x;
childFragment.y = y;
}
return {
minContent: 0,
maxContent: 0,
width: width,
height: height,
fragments: [],
unPositionedChildren: [],
breakToken: null
};
}
});
CSSOM đã nhập (quy cách)
CSSOM (Mô hình đối tượng CSS hoặc Mô hình đối tượng biểu định kiểu xếp chồng) giải quyết một vấn đề mà có lẽ tất cả chúng ta đều đã gặp phải và vừa mới học được cách giải quyết. Hãy để tôi minh hoạ bằng một dòng JavaScript:
$('#someDiv').style.height = getRandomInt() + 'px';
Chúng ta đang làm toán, chuyển đổi một số thành một chuỗi để nối thêm một đơn vị để có trình duyệt phân tích cú pháp chuỗi đó và chuyển đổi chuỗi trở lại thành một số cho công cụ CSS. Điều này thậm chí còn xấu hơn khi bạn thao tác biến đổi bằng JavaScript. Không còn nữa! CSS sắp bắt đầu nhập.
Bản nháp này là một trong những bản nháp cũ hơn và polyfill là đang được xử lý. (Tuyên bố từ chối trách nhiệm: việc sử dụng polyfill rõ ràng sẽ làm tăng thêm thậm chí chi phí tính toán. Mục đích là để cho thấy rằng API.)
Thay vì chuỗi, bạn sẽ làm việc trên StylePropertyMap của một phần tử, trong đó
mỗi thuộc tính CSS đều có khoá riêng và kiểu giá trị tương ứng. Thuộc tính
như width có loại giá trị là LengthValue. LengthValue là một
từ điển của tất cả các đơn vị CSS như em, rem, px, percent, v.v. Chế độ cài đặt
height: calc(5px + 5%) sẽ mang lại LengthValue{px: 5, percent: 5}. Hơi nhiều
các thuộc tính như box-sizing chỉ chấp nhận một số từ khóa nhất định, do đó có
Loại giá trị KeywordValue. Sau đó, có thể kiểm tra tính hợp lệ của các thuộc tính đó
trong thời gian chạy.
<div style="width: 200px;" id="div1"></div>
<div style="width: 300px;" id="div2"></div>
<div id="div3"></div>
<div style="margin-left: calc(5em + 50%);" id="div4"></div>
var w1 = $('#div1').styleMap.get('width');
var w2 = $('#div2').styleMap.get('width');
$('#div3').styleMap.set('background-size',
[new SimpleLength(200, 'px'), w1.add(w2)])
$('#div4')).styleMap.get('margin-left')
// => {em: 5, percent: 50}
Thuộc tính và giá trị
Bạn có biết Thuộc tính tuỳ chỉnh CSS (hoặc bí danh không chính thức của chúng là "Biến CSS") không? Đó là chúng nhưng có loại! Cho đến nay, các biến chỉ có thể chứa các giá trị chuỗi và đã sử dụng phương pháp tìm kiếm và thay thế đơn giản. Bản nháp này sẽ cho phép bạn không chỉ chỉ định loại cho các biến, nhưng cũng xác định giá trị mặc định và ảnh hưởng đến hành vi kế thừa bằng cách sử dụng API JavaScript. Về mặt kỹ thuật, cũng sẽ cho phép các thuộc tính tuỳ chỉnh tạo ảnh động bằng các hiệu ứng chuyển đổi CSS chuẩn và ảnh động. Các nội dung này cũng đang được xem xét.
["--scale-x", "--scale-y"].forEach(function(name) {
document.registerProperty({
name: name,
syntax: "<number>",
inherits: false,
initialValue: "1"
});
});
Chỉ số phông chữ
Chỉ số phông chữ chính xác như tên gọi. Hộp giới hạn là gì (hoặc hộp giới hạn) khi kết xuất chuỗi X có phông chữ Y ở kích thước Z không? Nếu tôi sử dụng thì sao chú thích ruby? Người ta yêu cầu rất nhiều và cuối cùng thì Houdini đã biến những điều ước này thành hiện thực.
Tuy nhiên, hãy đợi vì còn nhiều thứ khác nữa!
Danh sách các bản nháp của Houdini thậm chí còn có nhiều thông số kỹ thuật hơn, nhưng tương lai của những thông số đó sẽ thay vì không chắc chắn và không chỉ là phần giữ chỗ cho ý tưởng. Ví dụ: hành vi tràn tuỳ chỉnh, API tiện ích cú pháp CSS, tiện ích về hành vi cuộn gốc và những điều tham vọng tương tự, tất cả đều cho phép những tính năng trên nền tảng web mà trước đây không thể làm được.
Bản thu thử
Tôi đã tìm nguồn mở mã cho bản minh hoạ (bản minh hoạ trực tiếp về cách sử dụng đoạn mã polyfill).