Manuel Matuzovic: max () Mánh khóe

Bằng cách của một bài của Manuel Matuzović đó là một bản trình diễn bằng cách Temani Afif.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

Bạn sẽ tự giúp mình khi đọc sự phân tích của Manuel về tất cả những gì đang xảy ra ở đây, nhưng về cơ bản nó hoạt động tương đương với cú pháp dài hơn này:

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…ở đâu:

• max () chấp nhận danh sách các giá trị số CSS được phân tách bằng dấu phẩy, trong đó giá trị áp dụng là giá trị lớn nhất (hoặc bằng MDN đặt nó, "tích cực nhất") trong tập hợp.
• 0px là giá trị đầu tiên trong tập hợp, đảm bảo rằng giá trị nhỏ nhất sẽ luôn lớn hơn XNUMX pixel.
• (100% - 64rem) là "giá trị" thứ hai trong tập hợp, nhưng được biểu thị dưới dạng một phép tính (lưu ý rằng calc() là không cần thiết) mà trừ đi max-width của phần tử (64rem) từ đầy đủ của nó có sẵn width (100%). Những gì còn lại là không gian không được sử dụng bởi phần tử.
• ((100% - 64rem) / 2)) chia đều không gian còn lại đó vì chúng ta đang chia nó giữa các ranh giới nội tuyến của phần tử.
• max(0px, ((100% - 64rem) / 2)) SO 0px và (100% - 64rem) / 2). Giá trị lớn nhất được sử dụng. Đó sẽ là kết quả của phương trình trong hầu hết các trường hợp, nhưng nếu 64rem lớn hơn bao giờ hết giá trị tính toán của phần tử đầy đủ 100% width, nó sẽ khóa giá trị đó ở XNUMX để đảm bảo nó không bao giờ dẫn đến giá trị âm.
• margin-inline là thuộc tính mà giá trị chiến thắng đặt, áp dụng lợi nhuận cho các cạnh nội tuyến của phần tử - đó là cách viết tắt logic tương đương với việc đặt cùng một giá trị cho margin-left và margin-right tính chất vật lý.

Đó là cùng một loại ý tưởng Chris đã chia sẻ một thời gian trở lại sử dụng CSS max()chức năng để giải quyết “Vấn đề bên trong” - một vùng chứa hỗ trợ màu nền tràn toàn bộ trong khi hạn chế nội dung bên trong nó bằng padding.

max(), calc(), margin-inline… Đó là rất nhiều CSS mới! Và Manuel đã đúng vào giữa viết về những điều này và các tính năng CSS hiện đại khác trong hơn 100 ngày.

Liên kết trực tiếp & rarr;