Quy tắc CSS mới nóng để thử ngay bây giờ

Tạo bố cục kiểu in với ít mã hơn trước đây & nbsp;

Khi web đã phát triển nhanh chóng, nó gần như dường như CSS xin lỗi đã bị bỏ lại phía sau. Mỗi tuần điều gì đó xảy ra, nhưng hiếm khi nó quan trọng – giao diện. Internet theo một mô hình hội tụ, sau đó biến đổi và hội tụ gần như vĩnh cửu trong các ứng dụng, và bây giờ đến lượt CSS.

Khi nhiều khuôn khổ, ý tưởng và tiêu chuẩn đã xuất hiện, sự phức tạp đã tăng vọt với ngày càng nhiều công nghệ trợ giúp được phát minh từ sự cần thiết. Mọi thứ trở nên phức tạp hơn nhiều đối với các nhà phát triển khi mọi người mong đợi nhiều hơn, nhưng bây giờ chúng đang dần được sáp nhập vào CSS như các tiêu chuẩn chính thức. CSS đã trở nên không thể nhận ra từ khi thành lập vào những năm 1990.

Và điều gì cho tương lai? Có lẽ chúng ta có thể nói rằng CSS của tương lai sẽ thấy sự phân kỳ khác khi các thiết bị và kênh kỹ thuật số và kỹ thuật số khác nhau xuất hiện, thậm chí với một công nghệ hoàn toàn mới. Có lẽ chúng ta cũng có thể đoán rằng CSS sẽ cung cấp truy cập đơn giản tới các giao diện phong phú hơn và rằng đường cong ‘S’ trong các tính năng phát triển phức tạp và sẽ thu hẹp và dốc.

Nhưng bây giờ thì sao? Đây là lựa chọn của chúng tôi cho các bản cập nhật mới nhất, lớn nhất và hữu ích nhất cho CSS. Đọc tiếp để tìm hiểu cách sử dụng các truy vấn tính năng để kiểm tra xem một tính năng có được hỗ trợ hay không trước khi bạn bắt đầu dựa vào nó; xây dựng bố cục tùy chỉnh, kiểu in với CSS Grid; DRY ra mã của bạn với các biến CSS; kiểm soát hình nền với hai Bối cảnh Lặp lại tùy chọn (TrònKhông gian); khám phá các truy vấn phương tiện dựa trên khía cạnh tỷ lệ; tạo hình ảnh độc đáo với chế độ hòa trộn; và điều chỉnh hình ảnh để điền vào các hộp nội dung Đối tượng vừa vặn; và hơn thế nữa. Sử dụng hộp liên kết nhanh đối diện để chuyển đến phần bạn muốn.

Truy vấn tính năng (@supports)

Khi xây dựng các thành phần sử dụng các tính năng mới và có khả năng không được hỗ trợ, điều quan trọng là phải bao gồm dự phòng. Cho đến gần đây, điều này đã đạt được bằng cách sử dụng tính năng phát hiện thông qua JavaScript với các plugin như Modernizr. Bây giờ, có thể trực tiếp bên trong CSS bằng cách sử dụng cú pháp @supports mới (còn được gọi là truy vấn tính năng).

Với việc bổ sung @supports, chúng tôi có thể kiểm tra xem mã chúng tôi muốn sử dụng hay không được hỗ trợ:

@supports (display: flex) {
 .hagrid {display: flex; }
}

Khi trang được tải, một kiểm tra sẽ được thực hiện để xem liệu trình duyệt đang sử dụng có hỗ trợ tính năng flex hay không. Nếu có, kiểu dáng bên trong dấu ngoặc hỗ trợ sẽ được trình duyệt áp dụng.

Nếu không, nó sẽ bị bỏ qua – nó là giá trị có một tùy chọn dự phòng khi tính năng được truy vấn không được hỗ trợ.

Cách thích hợp nhất để bao gồm mã dự phòng sẽ phụ thuộc vào dự án và những gì đang được thay đổi vì có thể có @supports mã ghi đè kiểu dáng mặc định. Trong các trường hợp khác, có thể thích hợp để bao gồm một trường hợp khác @supports kiểm tra xem mã có được hỗ trợ không. Điều này đạt được bằng cách phủ nhận truy vấn tính năng:

@supports not (display: flex) {
 .dobby {display: block; }
}

Nhiều kiểm tra có thể được kết hợp để xem liệu tất cả các tính năng được yêu cầu có được hỗ trợ cùng một lúc hay không, để áp dụng một cách toàn bộ hoặc không có quy tắc kiểu nào. Cú pháp cho điều này rất giống với kết hợp các truy vấn phương tiện, chẳng hạn như áp dụng kiểu trên các thiết bị giữa các kích thước cụ thể. Điều này đạt được bằng cách sử dụng toán tử ‘và’ và nhiều truy vấn tính năng:

@supports (hiển thị: flex)
và (transform: scaleY (3)) {
 .fluffy {
hiển thị: flex;
transform: scaleY (3);
}
}

Truy vấn kết hợp đối tác cho toán tử là hoặc là toán tử, kiểm tra xem một trong hai truy vấn tính năng có phù hợp và áp dụng kiểu này nếu ít nhất một được hỗ trợ:

@supports (display: flex) hoặc (transform: scaleY (1.5)) {
 .grawp {
hiển thị: flex;
transform: scaleY (1.5);
}
}

Một cái gì đó hữu ích cho rằng chúng tôi đã bao phủ các biến CSS là với @supports bạn cũng có thể kiểm tra xem liệu thuộc tính tùy chỉnh có được hỗ trợ hay không, có thể thực hiện bằng phương pháp sau:

@supports (--ron: cam) {
 thân hình {
 màu sắc: var (- ron);
 }
}

Với ví dụ trên, kiểm tra sẽ được thực hiện để xem liệu điều kiện thuộc tính tùy chỉnh có được hỗ trợ hay không và khi nào cơ thể sẽ có màu phông chữ của màu cam được áp dụng. @supports có sẵn để sử dụng trong tất cả các trình duyệt ngoại trừ IE 11 trở xuống, mặc dù một số polyfills có sẵn nếu bạn cần hỗ trợ từ xa như Internet Explorer 9.

Lưu ý cuối cùng: Đây là một cách tuyệt vời để xây dựng trong các quy tắc tạo kiểu tóc mới, nhưng nó cũng hữu ích trong việc đảm bảo bạn xây dựng các trang web làm suy giảm một cách duyên dáng. Nếu bạn dùng @supports sau đó cũng sử dụng nó để kiểm tra xem trình duyệt có hỗ trợ các quy tắc CSS của bạn hay không. Điều này có thể tăng gấp đôi khối lượng công việc của bạn, nhưng nó cũng đảm bảo bạn tạo ra một cái gì đó mà downscales trình duyệt thanh lịch hơn.

Lưới CSS

Tạo bố cục kiểu in với ít mã hơn trước đây & nbsp;

Tạo bố cục kiểu in với ít mã hơn trước đây

Sự xuất hiện của Flexbox đã cho phép chúng tôi dành ít thời gian làm ô nhiễm mã của chúng tôi với các bản sửa lỗi rõ ràng, hack và giải pháp, và tập trung hơn vào việc viết CSS và HTML ngắn gọn. Trong khi Flexbox là điều cần thiết cho bất kỳ hộp công cụ của nhà phát triển UI nào, thì nó phù hợp nhất để làm việc theo một hướng duy nhất tại một thời điểm. Điều này thường là đủ, vì chúng ta thường chỉ bị giới hạn trên một trục tại một thời điểm (ví dụ, chiều rộng của trang bị giới hạn, nhưng không bị giới hạn chiều cao).

Tuy nhiên, trong trường hợp chúng ta bị hạn chế ở cả hai chiều, nói một ứng dụng kiểu bảng điều khiển, thì CSS Grid chắc chắn là một bóng. Bắt đầu với lưới điện có thể gây khó khăn lúc đầu, nhưng đó là chuyến đi suôn sẻ khi bạn nắm bắt được cú pháp. Giả sử chúng ta có cấu trúc HTML sau:

Gryffindor
Slytherin
Ravenclaw
Hufflepuff

Chúng ta có thể định nghĩa lưới, thiết lập các kích thước, và sau đó xác định các khu vực được đặt tên cho các ô lưới của chúng ta:

.thùng đựng hàng {
 hiển thị: lưới;
 chiều rộng: 100vw;
 chiều cao: 100vh;
}
.container> div {
 border: 2px solid # 000;
}
.gryffindor {
 vùng lưới: gryffindor;
 màu nền: # C91018;
}
.slytherin {
 vùng lưới: slytherin;
 màu nền: # 26A147;
}
.ravenclaw {
 vùng lưới: ravenclaw;
 màu nền: # 005782;
}
.hufflepuff {
 vùng lưới: hufflepuff;
 màu nền: # FFD63C;
}

Cuối cùng, trên .thùng đựng hàng chúng ta có thể tận dụng lưới-mẫu-khu vực tài sản để đặt ra những gì chúng ta muốn lưới trông giống như:

.thùng đựng hàng {
 hiển thị: lưới;
 chiều rộng: 100vw;
 chiều cao: 100vh;
 lưới-mẫu-khu vực:
 "gryffindor slytherin slytherin ravenclaw"
 "gryffindor slytherin slytherin ravenclaw"
 "gryffindor hufflepuff hufflepuff ravenclaw"
}

Ngoài ra còn có một loạt các thuộc tính bổ sung để tinh chỉnh việc trình bày lưới. Đến tên một vài:

lưới-cột-khoảng cách: ; Máng xối giữa các cột

lưới-hàng-khoảng cách: ; Máng xối giữa các hàng

grid-template-columns: ; Chiều rộng của các cột, khoảng trắng được phân cách cho nhiều

grid-template-rows: ; Chiều rộng của hàng, khoảng trắng được phân cách cho nhiều

align-items:

;
Sắp thẳng hàng nội dung của mỗi ô lưới

align-items: ; Theo chiều dọc điền vào ô hoàn toàn

justify-items:

;
Như trên, dọc theo trục ngang

địa điểm: / ; Ký pháp viết tắt, kết hợp align-itemsjustify-items

Vì vậy, trong thực tế, chúng tôi có thể cập nhật lưới trước đây của mình:

.thùng đựng hàng {
 hiển thị: lưới;
 chiều rộng: 100vw;
 chiều cao: 100vh;
 lưới-mẫu-khu vực:
 "gryffindor slytherin slytherin ravenclaw"
 "gryffindor slytherin slytherin ravenclaw"
 "gryffindor hufflepuff hufflepuff ravenclaw";
 lưới-cột-khoảng cách: 10px;
 lưới-hàng-khoảng cách: 15px;
 grid-template-columns: 200px tự động tự động 200px;
 align-items: stretch;
 justify-items: stretch;
}

Tất cả điều này hầu như không làm xước bề mặt của các khả năng của CSS Grid – có nhiều thứ hơn có thể được thực hiện. Hiện tại, điều này được hỗ trợ trong tất cả các trình duyệt hiện đại, với IE11 là ngoại lệ, trong khi nó hỗ trợ cú pháp cũ hơn.

Nhưng xin chờ chút nữa! Với việc sử dụng CSS Grid, cuối cùng chúng tôi có thể căn giữa nội dung mà không bị căng thẳng:

.thùng đựng hàng {
 hiển thị: lưới;
 chiều cao: 100vh;
 place-items: trung tâm trung tâm;
}

Trang tiếp theo: Bộ lọc CSS và biến CSS

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *