5 tính năng CSS mới nóng và cách sử dụng chúng

Trong bài viết này, chúng tôi sẽ khám phá năm tài sản mới đến CSS, hãy xem những gì họ làm và cách đưa họ sử dụng thực tế trong các dự án của bạn. Chúng ta sẽ tạo ra một Bố trí trang web Đối với một trang bao gồm một tin tức và một hộp trò chuyện nhỏ trong góc. Đối với nhiều thủ thuật CSS, hãy xem bài viết của chúng tôi Khám phá khác nhau Ví dụ hoạt hình CSS . Nếu bạn đang tạo một trang web hoàn toàn mới, hãy thử một người tạo ra trang web và hãy chắc chắn để duyệt của bạn web hosting Tùy chọn ở đây.

Đối với hướng dẫn này, bạn sẽ cần Chrome 65+ hoặc Firefox 59+. Hãy nhìn vào kèm theo github repo. cho mã từng bước. Chúng tôi sẽ tận dụng các tính năng sau để tạo trải nghiệm tốt hơn và làm việc xung quanh một số vấn đề. Và nếu bạn đang thiết kế cùng một đội, hãy tận dụng tốt nhất lưu trữ đám mây để giữ cho mọi thứ gắn kết.

Mô-đun hiển thị CSS (Cấp 3)

• Hiển thị: Nội dung;
• Tình trạng W3C. - Dự thảo làm việc
• Hỗ trợ trình duyệt

Mô-đun quy tắc có điều kiện CSS (Cấp 3)

• @ủng hộ(...) {...}
• Tình trạng W3C. - Khuyến nghị ứng viên
• Đọc thêm: Tài liệu web MDN.

Mô-đun hành vi quá khổ của CSS (Cấp 1)

• hành vi quá mức: chứa;
• Tình trạng W3C. - Không chính thức
• Hỗ trợ trình duyệt
• Đọc thêm: Kiểm soát cuộn của bạn

Mô-đun bộ chọn CSS (Cấp 4)

• : tập trung vào trong
• Tình trạng W3C. - Dự thảo làm việc
• Hỗ trợ trình duyệt
• Đọc thêm: MDN Web Docs : tập trung vào trong Cái gì : Trình giữ chỗ-hiển thị

Mô-đun ngăn chặn CSS (Cấp 1)

• Chứa: Sơn;
• Tình trạng W3C. - Khuyến nghị ứng viên
• Hỗ trợ trình duyệt
• Đọc thêm: Ngăn chặn css trong chrome 52

01. Thiết lập HTML cho Newsfeed

Đầu tiên chúng ta cần thiết lập một số siêu đơn giản, lặp lại đánh dấu cho newsfeed của chúng tôi. Hãy tạo một .thùng đựng hàng div với một danh sách không có thứ tự bên trong. Đưa ra & lt; ul & gt; lớp của .cho ăn , sau đó tạo 10 mục danh sách mỗi mục chứa một div với .Thẻ lớp và thẻ văn bản 1, thẻ 2, vv

Cuối cùng tạo ra một cái khác Danh sách-mục trong từ 5 đến 6 với một lớp .nested. - Điều này sẽ hữu ích sau - và thêm một & lt; ul & gt; Bên trong với ba mục danh sách bằng thẻ văn bản a, thẻ B, v.v.

 & lt; body & gt;
 & lt; div class = "container" & gt;
 & lt; ul class = "feed" & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ 1 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ 2 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ 3 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ 4 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ 5 & lt; / div & gt; & lt; / li & gt;
    & lt; li class = "lồng" & gt;
 & lt; ul & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ a & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ b & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ c & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / li & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ 6 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ 7 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ 8 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ 9 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "thẻ" & gt; thẻ 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
& lt; / div & gt;
& lt; / body & gt; 

02. Phong cách Newsfeed

Bây giờ chúng ta cần thêm một số kiểu nhanh để điều này bắt đầu trông giống như một tờ báo. Đầu tiên chúng ta có thể cho & lt; body & gt; một màu nền xám tinh tế. Sau đó cho đi .thùng đựng hàng chiều rộng tối đa 800px và sử dụng KHAI THÁC: 0 AUTO; để trung tâm căn chỉnh nó.

Cũng cho .Thẻ một nền trắng, 10px đệm và lề và cuối cùng là một Tối thiểu chiều cao 300px - Điều này sẽ cung cấp cho chúng tôi đủ để làm cho trang có thể cuộn. Cuối cùng, chúng ta sẽ rắc một số ma thuật Flexbox trên .cho ăn Để làm cho các mục chảy độc đáo, với hai thẻ mỗi hàng.

 .eed {
Hiển thị: Flex;
Flex-Wrap: Wrap;
Không thể
.eed li {
Flex: 1 0 50%;
} 

03. Khắc phục sự cố bố trí

Nếu bạn cuộn xuống danh sách, bạn sẽ nhận thấy rằng các thẻ của chúng tôi trong danh sách lồng nhau, thẻ A - C, đang gây ra một số vấn đề về bố cục. Lý tưởng nhất là chúng ta muốn họ chảy vào với phần còn lại của các thẻ nhưng tất cả chúng đều bị mắc kẹt với nhau trong một khối. Lý do cho điều này là một container flex - được tạo bằng cách sử dụng Hiển thị: Flex. - Chỉ làm cho trẻ em ngay lập tức (I.E. Các mục danh sách) thành các mục Flex.

Bây giờ, thông thường cách duy nhất để khắc phục điều này là thay đổi đánh dấu, nhưng hãy giả vờ rằng bạn không có sự sang trọng đó. Có lẽ đánh dấu Newsfeed được tạo ra bởi một kịch bản của bên thứ ba hoặc mã di sản của nó mà bạn chỉ đang cố gắng reskin. Vậy làm thế nào chúng ta có thể khắc phục điều này?

Gặp Hiển thị: Nội dung . Một lớp lót nhỏ này về cơ bản làm cho một nguyên tố hoạt động như thể nó không có ở đó. Bạn vẫn thấy hậu duệ của nguyên tố nhưng bản thân yếu tố không ảnh hưởng đến bố cục.

Bởi vì chúng tôi đang giả vờ rằng chúng tôi không thể thay đổi đánh dấu (chỉ cho bước này), chúng tôi có thể hơi thông minh về điều này và thực hiện .Thẻ Các yếu tố các mục Flex và gần như hoàn toàn bỏ qua đánh dấu danh sách.

Đầu tiên loại bỏ hiện tại .eed li. lớp và sau đó sử dụng Hiển thị: Nội dung cho cả hai & lt; ul & gt; và & lt; li & gt; Các yếu tố:

 .feed ul,
.eed li {
Hiển thị: Nội dung;
} 

Bây giờ bạn sẽ thấy các thẻ chảy theo thứ tự, nhưng chúng tôi đã mất kích thước. Sửa lỗi đó bằng cách thêm thuộc tính flex vào .Thẻ thay thế:

 .Card {
Flex: 1 0 40%;
} 

TA-DA! Thẻ của chúng tôi hiện đang sử dụng kỳ diệu của Flexbox như thể đánh dấu danh sách không có cấu trúc của chúng không tồn tại.

Như một lưu ý phụ bạn có thể tự hỏi tại sao cơ sở uốn cong Giá trị được đặt thành 40%. Điều này là do .Thẻ lớp có lề, không được bao gồm trong tính toán chiều rộng như bạn mong đợi khi sử dụng Kích thước hộp: Hộp biên giới . Để làm việc xung quanh điều này, chúng ta chỉ cần thiết lập cơ sở uốn cong Đủ cao để kích hoạt gói ở điểm cần thiết và Flexbox sẽ tự động điền vào không gian còn lại.

04. Khám phá các truy vấn tính năng

Mặc du Hiển thị: Nội dung Làm chính xác những gì chúng ta cần, nó vẫn chỉ ở trạng thái dự thảo làm việc với W3C. Và trong hỗ trợ Chrome chỉ đến phiên bản 65 phát hành vào tháng 3 năm 2018. Firefox vô cùng đã hỗ trợ kể từ tháng 4 năm 2015!

Nếu bạn vô hiệu hóa phong cách trong devtool, bạn sẽ thấy rằng những thay đổi của chúng tôi đã tạo ra một chút lộn xộn với bố cục khi Hiển thị: Nội dung không được áp dụng. vậy chúng ta có thể làm gì? Thời gian cho tính năng mới tiếp theo của chúng tôi - Truy vấn tính năng.

Những công việc này giống như các truy vấn truyền thông nhưng chúng cho phép bạn yêu cầu trình duyệt - sử dụng CSS một mình - nếu hỗ trợ một thuộc tính và giá trị. Nếu chúng là, các kiểu chứa trong truy vấn sẽ được áp dụng. Bây giờ, hãy di chuyển Hiển thị: Nội dung phong cách vào một truy vấn tính năng.

 @supports (Hiển thị: Nội dung) {
.eed ul,
.eed li {
  Hiển thị: Nội dung;
Không thể
.Thẻ {
  Flex: 1 0 40%;
Không thể
} 

05. Sử dụng 'không' cho kết quả sạch hơn

Thông thường trong trường hợp nâng cao tiến bộ này, chúng tôi sẽ sử dụng truy vấn để thêm các kiểu mới, nhưng nó cũng phải vô hiệu hóa một số kiểu gốc cần thiết cho bố cục dự phòng.

Tuy nhiên, bạn có thể quyết định rằng vì hỗ trợ cho các truy vấn tính năng khá tốt (nếu bạn bỏ qua IE), bạn thực sự muốn sử dụng truy vấn tính năng không phải nhà điều hành. Nó hoạt động giống như bạn mong đợi, vì vậy chúng ta có thể áp dụng lại bản gốc của chúng tôi flex. tài sản vào danh sách các mục khi Hiển thị: Nội dung không được hỗ trợ:

 @supports không (hiển thị: nội dung) {
.eed li {
  Flex: 1 0 50%;
Không thể
} 

Bên trong không phải truy vấn chúng ta có thể thêm một số kiểu để .nested. các mục về cơ bản áp dụng lại những gì đang được thừa hưởng bằng cách sử dụng Hiển thị: Nội dung .

 Nguồn cấp dữ liệu Li.nested {
cơ sở uốn cong: 100%;
Không thể
.eed li.nested ul {
 Hiển thị: Flex;
 Flex-Wrap: Wrap;
} 

06. Lấy thêm một bước

Bạn đã có thể thấy tiềm năng của các truy vấn tính năng, nhưng điều thực sự thú vị là bạn có thể kết hợp các biểu thức bằng ba toán tử có sẵn: và Cái gì hoặc là và không phải . Có lẽ chúng ta cũng có thể kiểm tra Hiển thị: Flex. hỗ trợ và sau đó thêm một dự phòng dựa trên float.

Chúng tôi sẽ không làm điều đó ở đây, nhưng nếu trước tiên chúng tôi sẽ sửa đổi hai truy vấn tính năng như vậy:

 @supports (hiển thị: flex) và (hiển thị: nội dung) {
...
Không thể
@supports (hiển thị: flex) và (không (hiển thị: nội dung)) {
...
} 

Là một phần thưởng, bạn cũng có thể kiểm tra hỗ trợ thuộc tính tùy chỉnh như thế này:

 @supports (--foo: Green) {
...
} 

07. Thêm một hộp trò chuyện

Bây giờ chúng tôi có một newsfeed đẹp, hãy thêm một hộp trò chuyện nhỏ được cố định vào phía dưới bên phải của màn hình. Chúng tôi sẽ cần một danh sách các tin nhắn và trường văn bản để người dùng nhập tin nhắn của họ. Thêm khối này ngay sau khi mở & lt; body & gt; nhãn:

 & lt; div class = "chat" & gt;
 & lt; div class = "tin nhắn" & gt;
 & lt; ul & gt;
& lt; li & gt; & lt; div class = "tin nhắn" & gt; tin nhắn 1 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "tin nhắn" & gt; tin nhắn 2 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "tin nhắn" & gt; tin nhắn 3 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "tin nhắn" & gt; tin nhắn 4 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "tin nhắn" & gt; tin nhắn 5 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "tin nhắn" & gt; tin nhắn 6 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "tin nhắn" & gt; tin nhắn 7 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "tin nhắn" & gt; tin nhắn 8 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "tin nhắn" & gt; tin nhắn 9 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "tin nhắn" & gt; tin nhắn 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / div & gt;
 & lt; loại đầu vào = "văn bản" lớp = "đầu vào" & gt;
& lt; / div & gt; 

08. Kiểu hộp trò chuyện

Thời gian để nhanh chóng thêm một số kiểu dáng để nó trông một nửa tốt.

 .chat {
 Bối cảnh: #fff;
 Biên giới: 10px Solid # 000;
 Đáy: 0;
 Kích thước phông chữ: 10px;
 Vị trí: Đã sửa;
 Phải: 0;
 Chiều rộng: 300px;
 Z-Index: 10;
Không thể
.messages {
 Border-Dưới: 5px Solid # 000;
 tràn: Tự động;
 Đệm: 10px;
 chiều cao tối đa: 300px;
Không thể
.thông điệp {
 Bối cảnh: # 000;
 Border-Radius: 5px;
 Màu sắc: #fff;
 Biên độ: 0 20% 10px 0;
 Đệm: 10px;
Không thể
.messages li: đứa trẻ cuối cùng .Message {
 Biển dưới đáy: 0;
Không thể
.đầu vào {
 Biên giới: Không có;
 Hiển thị: Khối;
 Đệm: 10px;
 Chiều rộng: 100%;
} 

09. Chuỗi cuộn

Hy vọng bây giờ bạn sẽ có một hộp trò chuyện nhỏ với danh sách các tin nhắn có thể cuộn trên đầu trang web của bạn. Tuyệt quá. Nhưng bạn đã nhận thấy những gì xảy ra khi bạn cuộn bên trong một khu vực lồng nhau và bạn đạt đến kết thúc của phạm vi có thể cuộn của nó? Thử nó. Cuộn tất cả các cách đến cuối tin nhắn và bạn sẽ thấy chính trang sẽ bắt đầu cuộn thay thế. Điều này được gọi là xích cuộn.

Đó không phải là một vấn đề lớn trong ví dụ của chúng tôi nhưng trong một số trường hợp nó có thể. Chúng ta đã phải làm việc xung quanh tính năng này trước đây khi tạo các khu vực có thể cuộn bên trong Modals hoặc Menu bối cảnh.

Khắc phục bẩn là để đặt & lt; body & gt; đến tràn: ẩn , nhưng có một tài sản CSS mới, sáng bóng, khắc phục tất cả những thứ này và đó là một lớp đơn giản. Gửi lời chào đến hành vi quá mức . Có ba giá trị có thể xảy ra:

• Tự động - Mặc định, cho phép cuộn cuộn
• Lưu trữ - Vô hiệu hóa chuỗi cuộn
• không ai - Vô hiệu hóa chuỗi cuộn và các hiệu ứng quá mức khác (ví dụ: dây cao su)

Chúng ta có thể sử dụng tốc ký hành vi quá mức hoặc chúng ta có thể nhắm mục tiêu một hướng cụ thể với overcroll-hành vi-x (hoặc là -chỉ ). Hãy thêm nó vào chúng tôi .messages. lớp học:

 .Messages {
...
overcroll-hành vi-y: chứa;
...} 

Bây giờ hãy thử cuộn một lần nữa và bạn sẽ thấy rằng nó không còn ảnh hưởng đến việc cuộn của trang khi bạn đến cuối nội dung.

Khách sạn này cũng khá tiện dụng nếu bạn muốn triển khai một tính năng kéo để làm mới trong PWA của mình, hãy nói để làm mới Newsfeed. Một số trình duyệt, chẳng hạn như Chrome cho Android, tự động thêm riêng của họ và cho đến bây giờ không có cách nào dễ dàng để vô hiệu hóa nó mà không cần sử dụng các sự kiện để hủy các sự kiện bằng cách sử dụng các trình xử lý không thụ động hiệu suất.

Bây giờ bạn chỉ cần thêm Hành vi quá mức: chứa đến yếu tố có chứa viewport, có lẽ & lt; body & gt; hoặc là & lt; html & gt; .

Điều đáng chú ý là tài sản này không phải là một tiêu chuẩn W3C, thay vì một đề xuất của nhóm cộng đồng ươm tạo web (WICG). Các đề xuất phổ biến, ổn định và trưởng thành của WICG được xem xét để di chuyển đến một nhóm làm việc W3C ở giai đoạn sau.

10. Thu gọn hộp trò chuyện khi không sử dụng

Hiện tại, hộp trò chuyện chiếm khá nhiều không gian, trừ khi chúng ta đang tương tác với nó hơi mất tập trung. May mắn thay, chúng ta có thể làm một cái gì đó về điều này với một phép thuật CSS nhỏ.

Nhưng trước hết chúng ta cần phải sửa đổi một chút kiểu hiện có của chúng tôi. Theo mặc định, chúng tôi muốn hộp trò chuyện bị sập, vì vậy chúng tôi cần giảm Tối đa chiều cao giá trị trong .messages. lớp học. Trong khi chúng tôi ở đó, chúng tôi cũng có thể thêm một sự chuyển đổi sang Tối đa chiều cao bất động sản:

 .Messages {
 ...
 chiều cao tối đa: 25px;
Chuyển đổi: Tối đa 500ms; } 

Trang tiếp theo: Tiếp tục khám phá các tính năng CSS mới trong các bước 11-20

• 1.
• 2.

Trang hiện tại: Khám phá 5 tính năng CSS mới: Các bước 01-10