Những năm gần đây đã trêu chọc chúng ta với các tính năng CSS đáng kinh ngạc như Flexbox và các phông chữ biến đổi, nhưng thời điểm thú vị nhất để trở thành một nhà phát triển web là ngay bây giờ vì rất nhiều tính năng mới thú vị đang hướng tới hỗ trợ gần như 100% trong các trình duyệt web ngày nay.
Ban đầu, chúng tôi đã xuất bản phần này vào năm 2019, vì chúng tôi đang tìm kiếm các kỹ thuật CSS mới, nhưng bây giờ rất nhiều thuộc tính và thông số kỹ thuật CSS này đã thực sự hoạt động, hãy cùng xem xét những gì có sẵn.
Nếu bạn muốn có nhiều công cụ hơn, hãy xem tổng hợp các công cụ thiết kế web của chúng tôi và nếu bạn cần trợ giúp để duy trì trang web của mình, dịch vụ lưu trữ web thực hành sẽ làm nên điều kỳ diệu cho bạn.
01. Gutters cho Grid Layout và Flexbox
CSS Grid Layout đã giới thiệu lưới-cột-khoảng cách và lưới-hàng-khoảng cách thuộc tính (ngoài tốc ký khoảng cách lưới thuộc tính) như một cách để tạo rãnh giữa các mục lưới. Vì Bố cục nhiều cột đã có cột-khoảng cách (hoàn thành điều tương tự), các thuộc tính CSS này hiện đã được cấu trúc lại thành cột-khoảng cách, khoảng cách hàng và lỗ hổng để có tính đồng nhất, bổ sung hỗ trợ Flexbox trong quá trình này.
Thuộc tính Gap hiện được hỗ trợ trong phần lớn các trình duyệt web và được coi là một giải pháp thay thế an toàn cho lề khi sử dụng Bố cục lưới, Bố cục nhiều cột hoặc Flexbox.
selector {
display: flex; /* or display: grid; */
row-gap: 20px; column-gap: 10px; /* or gap: 20px 10px; */
}02. Định cỡ hợp lý
Các thuộc tính và giá trị CSS theo truyền thống được ánh xạ tới các thuộc tính vật lý của màn hình. Ví dụ, chúng tôi sử dụng chiều rộng và chiều cao và chúng tôi đặt lề ở trên cùng, bên phải, dưới cùng và bên trái của một phần tử. Những đặc tính vật lý này có vẻ lạ khi làm việc với bất kỳ chế độ viết nào khác ngoài chiều ngang và từ trên xuống dưới. Ví dụ đơn giản, hãy nghĩ về một hộp có cả chiều rộng và chiều cao.
.box {
width: 250px;
height: 150px;
}Hộp này rộng 250 pixel và cao 150 pixel. Ngay cả khi chúng ta thay đổi chế độ ghi thành chế độ thẳng đứng, hộp sẽ vẫn gắn liền với các kích thước vật lý này.
Tuy nhiên, định cỡ hợp lý cho phép chúng tôi định kích thước các phần tử hoặc tham chiếu đến lề, phần đệm và đường viền của chúng theo cách có ý nghĩa ngay cả khi chế độ ghi thay đổi. Nếu chúng ta quay lại ví dụ trước, chúng ta có thể muốn hộp của mình luôn có chiều dài 250 pixel trong kích thước nội tuyến bất kể hướng nào.
Kích thước nội dòng là cách một câu chạy trong chế độ viết đó (theo chiều ngang trong tiếng Anh và chiều dọc trong bất kỳ chế độ viết dọc nào). Sau đó, chúng tôi muốn nó có chiều dài 150 pixel trong kích thước khối, đó là cách mà các khối như đoạn văn được hiển thị trong chế độ viết cụ thể đó.
Để thực hiện điều này, định cỡ hợp lý là câu trả lời:
.box {
block-size: 150px;
inline-size: 250px;
}Có các thuộc tính và giá trị logic khác liên quan đến lề, khoảng đệm và đường viền – những thuộc tính này thường được trình duyệt web hỗ trợ và được coi là an toàn khi sử dụng.
03. Mạng con
Công việc trên đặc tả CSS Grid Layout Level 2 vẫn đang được tiến hành, nhưng bạn nên tìm hiểu về nó ngay bây giờ. Grid Layout Level 2 là tất cả về tính năng lưới con. Các mục con sẽ có nghĩa là ngoài các phần tử con trực tiếp của một vùng chứa lưới trở thành các mục lưới, chúng tôi sẽ có thể tạo một lưới ở trong một mục lưới và có mục này sử dụng các rãnh cột và hàng của vùng chứa lưới chính. Ví dụ: điều này có nghĩa là chúng ta có thể tạo một lưới nhiều cột và sử dụng nó để sắp xếp các mục được lồng trong đánh dấu.
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr 2fr;
}
.grid-item {
display: grid;
grid-column: 2 / 5;
grid-template-columns: subgrid;
}Trong ví dụ CSS ở trên, chúng ta có một phần tử cha với hiển thị: lưới, xác định lưới bốn cột. Mục con có lớp lưới-mục được đặt trên lưới từ cột dòng 2 đến cột dòng 5, trải dài ba rãnh của lưới mẹ. Bằng cách sử dụng giá trị mạng con thay cho một danh sách theo dõi cho lưới-mẫu-cột, chúng tôi yêu cầu lưới của nó sử dụng các bản nhạc từ chính. Do đó, bất kỳ mục con nào của grid-item sẽ sử dụng kích thước của các rãnh cột như được xác định trên lưới mẹ.
04. Màu nhấn
Như nhiều nhà phát triển front-end đã biết, việc tạo kiểu các phần tử biểu mẫu nhất định (hoặc tạo kiểu cho chúng theo những cách nhất định) có thể khó khăn. Việc tạo kiểu cho thanh trượt hoặc ngón tay cái của các đầu vào phạm vi đặc biệt khó và nhìn chung quá trình này có thể dài dòng hơn nhiều. Một trong những cách mà điều này đang được cải thiện là việc bổ sung màu nhấnmột thuộc tính CSS tự động cung cấp màu bạn chọn cho hộp kiểm, radio, dải ô và các phần tử / loại phần tử tiến trình cùng một lúc.
Nó được xác định trên thư mục gốc, như được hiển thị bên dưới:
:root {
accent-color: red;
}05. Phông chữ biến đổi
Nếu bạn đã từng sử dụng phông chữ web, bạn sẽ hiểu vấn đề cần thêm các biến thể phông chữ bổ sung. Đối với hầu hết các phông chữ, bạn sẽ muốn có các phiên bản phông chữ thường, đậm và nghiêng – đó là bốn yêu cầu để trình duyệt web xử lý cộng với một lượng dữ liệu hợp lý để người dùng tải xuống. Tuy nhiên, một phông chữ có thể thay đổi là một tệp phông chữ duy nhất chứa tất cả các biến thể ở trên và nhiều biến thể khác.
Để sử dụng các phông chữ có thể thay đổi, chúng tôi sẽ cần sử dụng một phông chữ hỗ trợ nó và một trình duyệt đã triển khai phông chữ-biến thể-cài đặt , cho phép chúng tôi kiểm soát các trục khác nhau của phông chữ đã chọn. Hỗ trợ trong các trình duyệt hiện đại là tuyệt vời và đang cải thiện. Để biết phông chữ có thể kiểm soát được như thế nào, hãy xem trang web Axis Praxis (mở trong tab mới) nơi bạn có thể chơi với nhiều phông chữ khác nhau và sao chép / dán CSS được sử dụng cho biến thể phông chữ bạn đã tạo.
Để tìm và kiểm tra các phông chữ có thể thay đổi, hãy truy cập v-fonts.com. Tài khoản Twitter của Variable Fonts (mở trong tab mới) rất đáng theo dõi để khám phá các bản phát hành phông chữ mới và các tin tức khác.
Chụp cuộn CSS cho phép chúng tôi tạo giao diện gắn vào các điểm cuộn được xác định trước. Điều này hữu ích cho các giao diện toàn trang mà chúng tôi muốn hoạt động theo cách tương tự như một ứng dụng dành cho thiết bị di động, chuyển từ trang này sang trang khác.
Đoạn mã dưới đây tạo danh sách các mục mà mục gốc có chiều cao cố định và phần tràn được đặt để cuộn. Khi người dùng nhả cuộn của họ, trang sẽ bắt kịp điểm gần nhất.
Trên phần tử mẹ, chúng tôi thêm thuộc tính kiểu cuộn-snapcó giá trị của trục mà chúng ta đang cuộn trên (x hoặc y) và sau đó là một từ khóa của bắt buộc hoặc sự gần gũi. Các bắt buộc từ khóa sẽ lực lượng bắt kịp các điểm, do đó chúng ta nên đề phòng việc gây ra tình huống người dùng không thể cuộn đến một số nội dung do cuộn bị giật.
Trên các điểm snap, chúng tôi chỉ định cuộn-snap-căn chỉnhcó thể được đặt thành bắt đầu, Trung tâm hoặc chấm dứt.
ul {
list-style: none;
border: 5px solid rgb(126,63,222);
border-radius: .5em;
height: 300px;
padding: 0;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
li {
background-color: rgba(126,63,222,.3);
padding: 40px 20px ;
border-bottom: 1px solid rgb(126,63,222);
min-height: 150px;
scroll-snap-align: start;
scroll-snap-stop: always; /* optionally prevents skipping */
}Các cách mà mọi người tương tác với một trang web hoặc ứng dụng đang thay đổi. Người dùng có thể đang truy cập trên thiết bị hỗ trợ màn hình cảm ứng, sử dụng bàn phím và chuột hoặc – với các thiết bị như Microsoft Surface Book hoạt động giống như máy tính xách tay truyền thống cũng có màn hình cảm ứng – cả hai cùng một lúc. Do đó, nhìn vào kích thước màn hình không phải là cách tốt để tìm ra loại thiết bị mà người dùng của bạn thực sự có. Truy vấn phương tiện cấp 4 (mở trong tab mới) giới thiệu Tính năng phương tiện tương tác, cho phép chúng tôi tìm ra loại con trỏ mà người dùng có và kiểm tra các thuộc tính chẳng hạn như khả năng di chuột.
@media (pointer:coarse) {
/* target touch screens */
}
@media (hover) {
/* target mice with the ability to hover */
}Các truy vấn phương tiện này cung cấp một cách khác để kiểm tra khả năng của thiết bị nhằm mang lại trải nghiệm tuyệt vời cho tất cả khách truy cập trang web. Chúng thường được hỗ trợ trong tất cả các trình duyệt hiện đại.
08. Truy vấn tính năng
CSS thậm chí đã phát triển một cách để chúng tôi kiểm tra sự hỗ trợ của trình duyệt đối với các tính năng CSS mới – với Truy vấn tính năng. Truy vấn tính năng hoạt động giống như Truy vấn phương tiện, ngoại trừ việc thay vì hỏi trình duyệt điều gì đó về thiết bị được sử dụng để xem trang web, Truy vấn tính năng sẽ hỏi trình duyệt xem nó có hỗ trợ một tính năng CSS cụ thể nào không. Điều này giúp bạn dễ dàng sử dụng các tính năng mới theo cách an toàn, nâng cao dần dần.
@supports (display:grid) {
/* target browsers that support display:grid */
}Hỗ trợ của trình duyệt cho Truy vấn tính năng là rất tốt, tuy nhiên chúng không được hỗ trợ trong Internet Explorer 11 trở xuống. Đây ít vấn đề hơn bạn có thể nghĩ: miễn là bạn kiểm tra hỗ trợ và sau đó viết mã cho các trình duyệt hỗ trợ, bạn có thể ghi đè bất kỳ thứ gì bạn cần làm trước đó trong CSS của mình cho các trình duyệt cũ hơn đó.
Bất kỳ điều gì mới có trong CSS bạn đều có thể sử dụng Truy vấn tính năng để kiểm tra. Tôi nghĩ chúng là một trong những thứ tốt nhất để đưa vào CSS gần đây vì chúng cho phép chúng tôi bắt đầu sử dụng các tính năng mới nhanh hơn và như bạn đã thấy trong bài viết này, có rất nhiều thứ để bắt đầu!
Bạn muốn tìm hiểu về UX và UI? Đừng bỏ lỡ của chúng tôi Khóa học về cơ sở thiết kế UX.
Đọc thêm:
Leave a Reply
You must be logged in to post a comment.