8 tính năng CSS tiên tiến (và cách sử dụng chúng)

CSS không ngừng phát triển và một loạt các tính năng mới thú vị đã được thêm vào để làm cho đặc điểm kỹ thuật một vũ khí thậm chí còn mạnh hơn trong bộ công cụ của thiết kế web.

Lưới CSS có bố cục đến các cấp độ mới Không thấy trước đây, các thuộc tính tùy chỉnh giới thiệu khái niệm về các biến trong khi truy vấn tính năng Kiểm tra hỗ trợ trình duyệt. Truy vấn phương tiện di chuyển lên một cấp độ với các thuộc tính trợ năng mới, phông chữ biến cung cấp sự sáng tạo tối đa với độ bám mã tối thiểu trong khi cuộn cuộn giúp loại bỏ sự cần thiết của JavaScript. Kiểm tra mát của chúng ta Hoạt hình CSS. Ví dụ để xem những gì bạn có thể tạo. Hoặc, để xây dựng một trang web mà không cần mã thử xây dựng trang web .

Đối với những người tìm cách sáng tạo, có hình dạng CSS cho các bố cục độc đáo và một loạt các chế độ và bộ lọc trộn để giới thiệu hiệu ứng thiết kế theo phong cách Photoshop. Đọc để tìm hiểu cách bạn có thể sử dụng các tính năng phải thử này trong các bản dựng mới nhất của mình. Nhưng hãy nhớ rằng, một trang web phức tạp có nghĩa là bạn cần một web hosting dịch vụ có thể hỗ trợ nhu cầu của bạn.

01. Thuộc tính tùy chỉnh

Nếu bạn sử dụng bộ tiền xử lý như Sass hoặc thực sự là một ngôn ngữ lập trình như JavaScript, bạn chắc chắn sẽ quen thuộc với khái niệm các biến - các giá trị được xác định để sử dụng lại trong suốt mã của bạn. Thuộc tính tùy chỉnh cho phép chúng tôi thực hiện việc này trong CSS của chúng tôi, mà không cần bộ tiền xử lý. Các biến có thể được đặt ở cấp độ: root (tạo biến toàn cục) hoặc phạm vi trong bộ chọn. Sau đó, họ có thể được gọi bằng cách sử dụng cú pháp var (-> - myvariablename). Ví dụ: chúng ta có thể đặt một biến được gọi là --màu chính như thế này:

 / * trên phần tử gốc (toàn cầu
Biến đổi) */
:nguồn gốc {
- -PrromaryColor: # F45942;
Không thể
/ * Phạm vi đến bộ chọn * /
.my-Thành phần {
- -PrimaryColor: # 4171F4;
} 

Bây giờ chúng ta có thể sử dụng biến đó dưới dạng giá trị tài sản:

 H1 {
Màu sắc: var (- -primarycolor);
} 

Thuộc tính tùy chỉnh được kế thừa, có một số ý nghĩa rất hữu ích. Một trong số đó là chủ đề. Lấy ví dụ trên: Chúng ta có thể xác định một biến toàn cục (# F45942 - Màu đỏ cam sáng) cho --màu chính Ở cấp gốc, vì vậy mọi trường hợp mà chúng ta sử dụng biến này, giá trị sẽ có màu đỏ. Nhưng chúng tôi cũng định hướng xác định cùng một biến trong bộ chọn, với một giá trị khác nhau (# 4171F4 - màu xanh trung bình). Vì vậy, đối với mọi trường hợp nơi chúng ta sử dụng --màu chính Biến trong bộ chọn đó, giá trị tính toán sẽ có màu xanh.

Cài đặt mặc định

Phạm vi của các biến là một tính năng tuyệt vời, nhưng một cái có thể bắt bạn ra ngoài dịp này! Nếu bạn cố gắng sử dụng một biến chưa được xác định, giá trị kết quả sẽ quay trở lại bộ phận mặc định của trình duyệt hoặc giá trị được kế thừa, thay vì một biến được xác định xa hơn so với Cascade. Trong một số trường hợp, có thể thích hợp để đặt giá trị mặc định:

 H1 {
Màu sắc: var (- -primarycolor, màu xanh);
} 

Làm thế nào để các thuộc tính tùy chỉnh khác với các biến tiền xử lý?

Tính chất tùy chỉnh khác với các biến tiền sản theo một vài cách chính. Các biến tiền xử lý được biên dịch trước khi mã của bạn được gửi đến trình duyệt. Trình duyệt không bao giờ thấy rằng giá trị là một biến, nó chỉ nhìn thấy kết quả cuối cùng. Thuộc tính tùy chỉnh được tính toán trong trình duyệt. Bạn có thể kiểm tra chúng trong các công cụ phát triển hiện đại, thay đổi biến và xem giá trị được giải quyết. Chúng là các biến động, nghĩa là các giá trị của chúng có thể được thay đổi trong CSS hoặc khi chạy với JavaScript.

Không giống như các biến tiền sản theo, thuộc tính tùy chỉnh không thể được sử dụng trong tên bộ chọn, khóa thuộc tính hoặc khai báo truy vấn phương tiện - chỉ các giá trị thuộc tính CSS. Bộ tiền xử lý CSS vẫn có rất nhiều lợi ích, vì vậy chúng ta có khả năng thấy chúng dính xung quanh lâu hơn, nhưng chúng có thể sẽ được sử dụng thường xuyên hơn kết hợp với các thuộc tính tùy chỉnh.

02. Truy vấn tính năng

Các truy vấn tính năng là một cách để kiểm tra xem trình duyệt có hỗ trợ kết hợp giá trị thuộc tính CSS cụ thể trong tệp CSS của bạn hay không. Họ hầu như loại bỏ sự cần thiết của các thư viện phát hiện tính năng như Modernizr. Cú pháp tương tự như truy vấn phương tiện: bạn sử dụng quy tắc tại @Supports. , theo sau là cặp giá trị tài sản của bạn, gói mã sẽ được thực thi nếu trình duyệt đáp ứng các điều kiện được chỉ định.

Các truy vấn tính năng được hỗ trợ tốt trong các trình duyệt hiện đại, nhưng chúng tương đối mới và một "gotcha" là một số trình duyệt bạn có thể muốn kiểm tra để hỗ trợ có thể không hỗ trợ các truy vấn tính năng. Thông thường cách tốt nhất để xử lý việc này là cung cấp các kiểu dự phòng trước tiên (bên ngoài truy vấn tính năng), sau đó bọc các cải tiến của bạn để hỗ trợ các trình duyệt bên trong @Supports. qui định.

Hãy cảnh giác, các truy vấn tính năng chỉ cần được sử dụng một cách tiết kiệm. Một trong những tính năng tuyệt vời của CSS là các trình duyệt sẽ chỉ cần bỏ qua bất kỳ thuộc tính hoặc giá trị nào mà chúng không hiểu. Tốt nhất chỉ là chỉ sử dụng các truy vấn tính năng khi không làm như vậy sẽ gây ra lỗi trực quan, nếu không bạn có thể tự cài đặt cho nhiều công việc thêm.

Cách sử dụng truy vấn tính năng

Để kiểm tra sự hỗ trợ của một giá trị thuộc tính duy nhất, chúng ta có thể cung cấp dự phòng trước. Trong ví dụ này, chúng tôi đang cung cấp fallback Flexbox cho các trình duyệt không hỗ trợ bố cục lưới.

 .my-ignonent {
Hiển thị: lưới;
Không thể
@supports (hiển thị: lưới) {
.my-Thành phần {
Hiển thị: Flex;
Không thể
} 

03. Truy vấn truyền thông

Bạn có thể đã quen với việc sử dụng các truy vấn phương tiện để phát hiện chiều rộng và chiều cao của chế độ xem và loại phương tiện (phổ biến nhất là màn hình hoặc in). Thông số kỹ thuật truy vấn phương tiện cấp 5 mang đến cho chúng ta một số tính năng phương tiện mới hơn để kiểm tra (tùy chọn), đã được hỗ trợ trong một số trình duyệt. Những điều này cung cấp một số lợi ích tuyệt vời cho khả năng tiếp cận.

Người dùng bị rối loạn tiền đình và những người bị bệnh chuyển động, có thể không đánh giá cao các trang web với rất nhiều chuyển động, chẳng hạn như hoạt hình và hiệu ứng cuộn thị sai. Sử dụng truy vấn Media-Motion-Motion-Motion, chúng ta có thể cung cấp cho người dùng từ chối với một sự thay thế giảm chuyển động.

 .my-phần tử {
Hoạt hình: Lắc 500ms Dễ dàng vào 5;
Không thể
@Media (Thích giảm chuyển động: Giảm) {
.my-Element {
Hoạt hình: Không có;
Không thể
} 

Nó đang ngày càng trở nên phổ biến đối với các trang web để cung cấp một chủ đề tối thay thế. Perfers-Color-Scheme cho phép chúng tôi truy vấn xem người dùng đã đặt ưu tiên toàn hệ thống (sử dụng các từ khóa tối, sáng hoặc không ưu tiên) và hiển thị bảng màu thích hợp cho phù hợp.

 / * Truy vấn phương tiện 02 * /
thân hình {
nền tảng: gradient tuyến tính (đến
đáy, # b5faff, # ffe2b4);
Không thể
@Media (thích sơ đồ màu: tối) {
thân hình {
màu trắng;
nền tảng: gradient tuyến tính (đến
Đáy, # 0C1338, # 3E3599);
Không thể
} 

04. Phông chữ biến

Nói chung, nếu chúng tôi muốn bao gồm một số mặt phông chữ khác nhau của cùng một gia đình trên trang web của chúng tôi, chúng tôi sẽ cần tải cùng một số tệp phông chữ. Càng nhiều tệp phông chữ bạn tải, bạn càng thêm trọng lượng cho trang của mình, với tác động đến hiệu suất - vì vậy thông thường để tải tối đa ba hoặc bốn tệp phông chữ (tùy thuộc vào ngân sách hiệu suất của bạn).

Phông chữ biến thay đổi tất cả. Chúng cho phép chúng tôi tải một tệp phông chữ duy nhất cho toàn bộ một gia đình phông chữ. Mặc dù tệp này thường sẽ lớn hơn một phông chữ, nếu bạn muốn tận dụng các trọng lượng và kiểu khác nhau, thì một phông chữ biến là giải pháp bổ sung nhiều hơn. Nếu bạn đã mua cả một gia đình phông chữ, hãy nhớ để stash nó một cách an toàn trong lưu trữ đám mây Vì vậy, bạn không mất tập tin của bạn!

Trục biến thể.

Không chỉ vậy, mà với các phông chữ thay đổi, chúng tôi không giới hạn ở một tập hợp nhỏ của trọng lượng phông chữ. Khi làm việc với phông chữ thông thường, các trọng lượng phông chữ có sẵn được đưa ra trong bội số 100. Thông thường, 400 có thể là trọng lượng thông thường, 300 trọng lượng nhẹ và 700 trọng lượng đậm - với các gia đình khác nhau cung cấp nhiều trọng lượng hơn hoặc ít hơn. Phông chữ biến có một trục biến thể, cung cấp cho chúng ta một loạt các giá trị cho các thuộc tính như trọng lượng phông chữ. Một phông chữ có thể có một trục 1-900, sẽ cung cấp cho chúng ta quyền truy cập vào 900 trọng lượng khác nhau!

Trục biến thể không chỉ giới hạn ở trọng lượng. Phông chữ biến có thể có các trục khác nhau cho chiều cao X, độ nghiêng, serif và độ tương phản (chỉ cần chọn một vài ví dụ) - có nghĩa là một tệp phông chữ duy nhất có thể cung cấp cho chúng ta quyền truy cập vào hàng trăm hoặc thậm chí hàng ngàn biến thể! Chúng tôi thậm chí có thể làm động các thuộc tính này, cho phép chúng tôi đạt được một số hiệu ứng thực sự tuyệt vời. Mandy Michael ( https://codepen.io/mandymichael. ) có toàn bộ tải của các bản demo sáng tạo thực sự kiểm tra các giới hạn.

Hỗ trợ trình duyệt cho phông chữ biến là khá tốt, và nhiều foundries phông chữ đang tích cực phát triển các phông chữ biến mới mà bạn có thể bắt đầu sử dụng ngay bây giờ - mặc dù chúng thường đến phí bảo hiểm, đặc biệt là đối với các gia đình phông chữ đầy đủ tính năng. Nếu bạn chỉ muốn bắt đầu chơi xung quanh với phông chữ biến để xem những gì họ có thể làm, có một số trang web phông chữ biến đổi:

Hãy cảnh giác, nếu bạn muốn sử dụng phông chữ biến ngay bây giờ, bạn cần đảm bảo rằng bạn đang sử dụng hệ điều hành cập nhật - chúng sẽ không hoạt động trên OSS cũ hơn.

Cài đặt phông chữ-biến thể

Trong khi chúng ta có thể thay đổi trọng lượng phông chữ đủ dễ dàng với Phông chữ Tài sản CSS, Cài đặt phông chữ-biến thể là một tài sản mới cung cấp cho chúng ta quyền truy cập đầy đủ vào một trục khác nhau của một biến thể khác nhau của một phông chữ. Chúng bao gồm cả trục đã đăng ký và trục tùy chỉnh.

Trục đã đăng ký.

Có năm trục đã đăng ký khác nhau, tương ứng với các thuộc tính CSS khác nhau. Mỗi trong số này có những gì được gọi là "thẻ trục". Các trục đã đăng ký là: wght. (trọng lượng phông chữ), wdth. (phông chữ kéo dài), SLNT. (kiểu phông chữ: xiên / góc), tiêu thụ (kiểu phông chữ: italic), opsz. (phông chữ-kích thước quang). Chúng tôi có thể truy cập các trục này bởi thuộc tính CSS hoặc với Cài đặt phông chữ-biến thể .

Những trục này không nhất thiết phải bao gồm trong mỗi phông chữ biến (một số chỉ có thể có một hoặc hai trục), nhưng chúng có khả năng là phổ biến nhất.

Tùy chỉnh trục.

Các trục tùy chỉnh là các trục bespoke được bao gồm bởi trình thiết kế phông chữ, và có thể là bất cứ thứ gì cả. Chúng có thể bao gồm (ví dụ) độ dài serif, chiều cao x, thậm chí một cái gì đó sáng tạo hơn (và ít ty ty điển hình hơn), như xoay.

Cả hai loại trục phải được biểu thị dưới dạng thẻ bốn ký tự. Các trục đã đăng ký phải là chữ thường, trong khi các trục tùy chỉnh là chữ hoa. Cả hai có thể được kết hợp trong thuộc tính Cài đặt phông chữ-Biến đổi. Cài đặt phông chữ-biến thể là hoạt hình, có thể cho phép một số hiệu ứng UI rất tuyệt! Một số thí nghiệm rất thú vị đã được tạo ra bằng phông chữ biểu tượng quá.

05. Hiệu ứng đồ họa

Nếu bạn quen thuộc với các công cụ thiết kế như Photoshop và Illustrator, bạn có thể biết về các chế độ hòa trộn và cách chúng có thể được sử dụng để tạo ra các hiệu ứng khác nhau trên hình ảnh. Cách hoạt động chế độ hòa trộn là kết hợp hai hoặc nhiều lớp lại với nhau bằng cách sử dụng các công thức toán học để tính giá trị kết quả cho mỗi pixel. Các lớp có thể là bất cứ thứ gì - hình ảnh, độ dốc hoặc màu phẳng. Một số chế độ hòa trộn tạo ra kết quả tối (e.g. Multiply, sẽ nhân các giá trị pixel của các lớp), một số một cái nhẹ (e.g. màn hình và lớp phủ). Tuy nhiên, chúng ta không cần phải hiểu môn toán để sử dụng chúng. Chơi xung quanh với các chế độ hòa trộn khác nhau có thể cho chúng ta cảm giác tốt mà trong số chúng tạo ra kết quả mong muốn khi kết hợp với các lớp khác nhau.

Với các thuộc tính CSS Chế độ hỗn hợp và Chế độ kết hợp nền , Chúng ta có thể đạt được hiệu ứng hình ảnh giống như Photoshop trong trình duyệt. Cả hai thuộc tính đều có cùng giá trị, nhưng hoạt động hơi khác nhau.

Chế độ kết hợp nền

Chế độ kết hợp nền kết hợp các lớp nền của phần tử chúng ta đang nhắm mục tiêu. Phần tử của chúng tôi có thể có hình ảnh nền, màu sắc và độ dốc, và tất cả chúng sẽ được pha trộn với nhau mà không ảnh hưởng đến nội dung tiền cảnh. Chúng tôi có thể chỉ định nhiều giá trị cho Chế độ kết hợp nền , một cho mỗi lớp nền.

 .my-phần tử {
Bối cảnh: URL (#myurl),
gradient tuyến tính (45deg, RGBA (65, 68,
244, 1), RGBA (203, 66, 244, 0,5)),
RGBA (244, 65, 106, 1);
Kích thước nền: Che;
Chế độ kết hợp nền: Màn hình,
nhân;
} 

Chế độ hỗn hợp

Chế độ hỗn hợp Ảnh hưởng đến cách các yếu tố hòa trộn với cha mẹ và anh chị em của nó, bao gồm mọi nội dung nền trước và nền và các yếu tố giả. Một số hiệu ứng sáng tạo thú vị có thể đạt được bằng cách trộn các yếu tố giả chồng lên nhau (:: trước và :: sau).

 .my-phần tử {
Bối cảnh: RGB (244, 65, 106);
Mix-Blend-Mode: Multiply;
} 

Bộ lọc CSS

Bộ lọc CSS cũng có thể được sử dụng để tạo hiệu ứng hình ảnh nổi bật, sử dụng bộ lọc. Giá trị chức năng tài sản và bộ lọc. Không giống như các chế độ hòa trộn, chúng áp dụng hiệu ứng đồ họa trực tiếp vào phần tử mà chúng đang nhắm mục tiêu và một phần tử có thể có nhiều bộ lọc được áp dụng.

Chuyển đổi sang thang độ xám

Chúng ta có thể thao tác màu sắc của một yếu tố với mức độ kiểm soát lớn hơn là dựa trên các chế độ pha trộn. Bộ lọc có thể chuyển đổi hình ảnh sang thang độ xám, điều chỉnh độ sáng, độ tương phản và độ bão hòa, làm mờ một phần tử hoặc thêm bóng thả. Chúng cũng có thể được hoạt hình quá, và trông tuyệt vời với hiệu ứng di chuột.

Bộ lọc SVG.

Bộ lọc CSS trên thực tế các phiên bản đơn giản hóa các bộ lọc SVG. CSS. bộ lọc. tài sản cũng có một url () Chức năng, cho phép chúng tôi truyền trong một URL đến bộ lọc SVG. Bộ lọc SVG cực kỳ mạnh mẽ và cho phép một số hiệu ứng hình ảnh đáng kinh ngạc - nhưng chúng cũng phức tạp hơn nhiều so với các chức năng bộ lọc CSS! Sara Soueidan có một loạt bài viết tuyệt vời trên Codrops nếu bạn quan tâm đến việc lặn để mã hóa các bộ lọc SVG tùy chỉnh của riêng bạn. Kiểm tra bài viết tại https://tympanus.net/codrops/2019/01/15/svg-filters-101/

Cắt và che dấu: Ngoài các hình chữ nhật

Chúng tôi đã từng giao dịch vào các hộp trên web, nhưng không phải tất cả mọi thứ phải là hình chữ nhật! Cắt và mặt nạ là hai mặt của cùng một đồng tiền, và là những cách khác nhau để che giấu và hiển thị các phần khác nhau của một yếu tố để nền chiếu qua. Điều này cho chúng ta sức mạnh để giới thiệu các hình dạng thú vị và sáng tạo cho các thiết kế của chúng tôi.

Clip-path.

Các clip-path () Tài sản cho phép chúng ta "cắt ra" một yếu tố bằng cách xác định một đường dẫn. Nó cần một số chức năng hình dạng cơ bản, Inset (), Circle (), Ellipse () hoặc Polygon () , cho phép chúng tôi chế tạo các hình dạng cutout phức tạp hơn bằng cách sử dụng các cặp tọa độ XY để xác định đường dẫn. Ngoài ra, chúng ta cũng có thể truyền vào một đường dẫn SVG bằng cách sử dụng con đường() chức năng, hoặc sử dụng url () để cung cấp id đường dẫn svg.

Không bên trong con đường

Cắt một phần tử clip tất cả mọi thứ bên ngoài đường dẫn bạn xác định, nhưng chính phần tử vẫn là một hình chữ nhật. Nếu bạn có nội dung kéo dài ra khỏi ranh giới của đường dẫn clip, điều đó cũng sẽ được cắt - nó sẽ không bao bọc bên trong hình dạng.

Mặt nạ-hình ảnh.

Mặt nạ-hình ảnh. Cho phép chúng tôi hiển thị và ẩn các phần của hình ảnh bằng cách sử dụng hình ảnh (SVG hoặc PNG trong suốt) hoặc Gradient như một mặt nạ. không giống clip-path. , Chúng ta có thể thêm kết cấu vào hình ảnh của chúng tôi bằng mặt nạ, vì nguồn mặt nạ không cần phải là đường dẫn - nó cho phép độ trong suốt.

06. Hình dạng CSS.

Thông số kỹ thuật hình dạng CSS cho phép chúng tôi bọc văn bản xung quanh các hình dạng hình học nổi, tạo ra một số bố cục giống như tạp chí, giống như tạp chí. Điều này được thực hiện bằng cách sử dụng hình dạng bên ngoài bất động sản. Tương tự như clip-path. , chúng ta có thể cung cấp cho tài sản này một chức năng hình dạng cơ bản vòng tròn (), elip (), interet (), đa giác () , hoặc một URL đến một con đường SVG, và thực tế là hai công việc hài hòa rất tốt! hình dạng bên ngoài sẽ bọc văn bản của chúng tôi một cách hiệu quả, nhưng nó sẽ không ảnh hưởng đến phần tử thả nổi. Nếu chúng ta muốn văn bản trông giống như nó bao quanh hình ảnh hoặc đối tượng nổi, chúng ta có thể sử dụng cùng một giá trị cho clip-path. . Sử dụng hình chữ Để thêm khoảng trắng giữa đường dẫn hình dạng và nội dung gói nó. Hãy nhìn vào Công cụ & amp; Vô lý Trang web để xem cách hình dạng CSS được sử dụng để bọc văn bản xung quanh một hình ảnh trung tâm.

Firefox có A. Biên tập viên hình dạng Trong bảng Dev Tools, đặc biệt hữu ích để làm việc với các hình dạng phức tạp. Tuy nhiên, sử dụng một cách thận trọng. Bao bọc cạnh hàng đầu của một đoạn văn bản là tuyệt vời cho hiệu ứng nghệ thuật, nhưng không phải lúc nào cũng tuyệt vời cho trải nghiệm người dùng. Hình dạng lởm chởm phức tạp có thể làm cho các khối văn bản khó đọc hơn. Đối với nội dung quan trọng, bạn có thể muốn lái rõ ràng.

07. Cuộn Snappt.

Nhiều trang web tận dụng các thư viện JavaScript để cung cấp trải nghiệm cuộn giống như slick, giống như ứng dụng, trong đó nội dung "snaps" để trỏ đến khi người dùng cuộn. Bây giờ, với thông số kỹ thuật Snap Scroll, chúng ta có thể thực hiện điều này ngay trong tệp CSS của chúng tôi - có rất ít nhu cầu nhập trong các mô-đun JS nặng để bám vào trang của bạn!

Để triển khai cuộn cuộn, chúng ta cần một yếu tố để hoạt động như container cuộn của chúng tôi. Những đứa trẻ trực tiếp của container ra lệnh các điểm sẽ bị chộp lấy và có thể được căn chỉnh theo nhiều cách khác nhau trong khu vực Snap.

Cuộn Snoll có thể có hiệu quả hơn nữa khi kết hợp với một giá trị thuộc tính CSS mới - Vị trí: dính . Giá trị vị trí này "Gậy" một phần tử đến một vị trí được chỉ định trong khi cuộn trong vùng chứa của nó - một hành vi khác chỉ có thể xảy ra trước đó với JavaScript. Kiểm tra snap cuộn này với vị trí: Ví dụ dính và giao điểm .

08. Lưới CSS và bố cục

Các nhà phát triển Front-end đã bị hack bố cục với bất kỳ công cụ nào có sẵn để sử dụng tại thời điểm đó - gần đây là Flexbox gần đây, rất nhiều hệ thống lưới hiện đại sử dụng. Nhưng Flexbox không bao giờ được thiết kế để xây dựng lưới nghiêm ngặt - mục đích của nó là tính linh hoạt!

Lưới CSS là thông số kỹ thuật đầu tiên được thiết kế cho bố cục hai chiều, cho phép chúng tôi kiểm soát hoàn toàn để xây dựng bố cục và đặt các mục trên cả hàng và trục cột. Xây dựng bố cục đáp ứng với lưới không yêu cầu calc () hoặc hack xung quanh với tỷ suất lợi nhuận âm. Vũ khí bí mật là FR Unit - một đơn vị mới dành riêng cho lưới điện. Đơn vị FR theo dõi lưới (hàng và cột) là một tỷ lệ của không gian có sẵn. Nó tính đến bất kỳ bản nhạc, máng xối và nội dung cố định nào, sau đó phân phối không gian còn lại cho phù hợp. Jen Simmons đặt ra thuật ngữ "thiết kế web nội tại" để mô tả kỷ nguyên mới của bố cục web mà lưới có trách nhiệm trong.

Cách sử dụng lưới CSS

Lưới yêu cầu một phần tử có giá trị thuộc tính hiển thị được đặt thành lưới, để hoạt động như hộp chứa lưới. Trẻ em trực tiếp của hộp chứa lưới là các vật dụng có thể được đặt trên lưới. Chúng tôi sử dụng các thuộc tính Lưới-Mẫu-Rows và Cột mẫu-Mẫu Để xác định các bản nhạc (hàng và cột) của lưới và Cột Gap. và Row-Gap. để xác định máng xối (khoảng cách giữa các bản nhạc).

 .grid {
Hiển thị: lưới;
Cột lưới-Mẫu: Lặp lại (4, 1fr);
Lưới-Mẫu-Rows: Lặp lại (4, 200px);
Khoảng cách: 20px;
} 

Chúng tôi đang sử dụng. nói lại() chức năng giữ mã ngắn gọn hơn, như là một thay thế cho thời gian dài (ví dụ: Mẫu lưới-Cột: 1fr 1fr 1fr 1fr ). Ví dụ này cũng sử dụng tốc ký lỗ hổng cho Row-Gap. và Cột Gap. .

Đoạn mã trên cung cấp cho chúng ta bốn bài hát hàng, mỗi bản 100px cao và bốn bản nhạc cột mà mỗi bản đều lấp đầy một tỷ lệ bằng nhau của không gian khả dụng, sử dụng đơn vị FR.

Điều đáng chú ý là đây không phải là cách duy nhất để tạo các bản nhạc lưới. Các bài hát ngầm cũng có thể được tạo bằng cách đặt các mục lưới. Thật hữu ích khi đọc một chút về điều này nếu bạn đang sử dụng lưới, vì nó trả tiền để hiểu sâu hơn về cách thức hoạt động của lưới trong các điều kiện khác nhau và có thể làm cho việc mã hóa một bố cục dễ dàng hơn nhiều.

Chúng ta có thể đặt các mục trên lưới bằng cách tham khảo các dòng dòng lưới, là các dòng số nằm giữa mỗi bản nhạc. Ở đây, chúng tôi đang sử dụng tốc ký Cột lưới và Lưới-Row. cho Cột lưới-bắt đầu Cái gì kết thúc cột lưới Cái gì Lưới-Row-start và kết thúc lưới . Chúng cho biết trình duyệt tại dòng nào, mục của chúng ta sẽ bắt đầu và kết thúc trên mỗi trục.

 .Item {
Cột lưới: 1/4;
Lưới: 2;
} 

Lưới cung cấp cho chúng tôi nhiều cách khác nhau để đặt các mục: Thay vào đó chúng tôi có thể đặt tên cho các dòng lưới của chúng tôi:

 .grid {
Hiển thị: lưới;
Lưới-Mẫu-Cột: [Bắt đầu hình ảnh] 1FR
 1fr 1fr [hình ảnh-start] 1fr;
Lưới-Mẫu-Rows: 200px [Bắt đầu hình ảnh]
 200px 200px [hình ảnh-end] 200px;
Khoảng cách: 20px;
} 

Ngoài ra, Mẫu lưới-khu vực Tài sản cho phép chúng tôi "vẽ" một bố cục lưới với văn bản.

 .grid {
Hiển thị: lưới;
Cột lưới-Mẫu: Lặp lại (4, 1fr);
Lưới-Mẫu-Rows: Lặp lại (4, 200px);
Khoảng cách: 20px;
Mẫu lưới-Khu vực:
'. . . . '
'Hình ảnh hình ảnh hình ảnh.'
'Hình ảnh hình ảnh hình ảnh.'
'. . . . ';
} 

Sử dụng một trong các phương thức này, chúng ta chỉ cần tham chiếu vùng lưới tương ứng khi đặt một mục lưới:

 .image {
Lưới: Hình ảnh;
} 

Bài viết này ban đầu được xuất bản trong Tạp chí Thiết kế web sáng tạo Nhà thiết kế web . Mua số phát hành 290 bây giờ.

• 10 khung CSS tốt nhất năm 2019
• Cách thêm hình ảnh động vào SVG bằng CSS
• 52 Công cụ thiết kế web để giúp bạn làm việc thông minh hơn năm 2019