- Published on
Những tính năng mới của CSS
- Authors
- Name
- Nguyen Pham
Tổng quan
Quay trở lại những năm 2000 thì CSS chỉ đơn giản là một ngôn ngữ dùng để thiết kế giao diện người dùng cho trang web. Nó đơn giản chỉ là một tập hợp các thuộc tính, bộ chọn và giá trị. Dần dần, CSS đã phát triển rất nhiều với nhiều tính năng hơn như animation, transition, grid, flexbox, custom properties, variables...
Trong những năm gần đây, do nhu cầu thiết kế giao diện người dùng ngày càng phức tạp, cùng với sự phát triển của các trình duyệt web, CSS đã dẫn thoát ra khỏi những giới hạn tĩnh, nó trở nên uyển chuyển và đa dạng hơn bao giờ hết.
Trong bài viết này, tại hạ sẽ giới thiệu với quý vị một số tính năng mới của CSS mà chắc chắn sẽ mang đến cho quý vị những trải nghiệm mới mẻ khi thiết kế giao diện người dùng.
Container Queries
Thay vì truớc đây chúng ta chỉ có thể sử dụng Media Queries để điều chỉnh bố cục đưa trên độ rộng của thiết bị như @media (max-width: 600px), thì Container Queries cho phép chúng ta điều chỉnh bố cục dựa trên kích thước của khối nội dung chứa nó.
Ví dụ về Media Queries:
@media (max-width: 600px) {
.container {
display: block;
}
}Ví dụ về Container Queries:
.hero {
container-name: hero-banner;
container-type: inline-size;
}
@container hero-banner (width > 60ch) {
/* 60ch là kích thước của 60 ký tự */
.hero {
display: block;
}
}Cascade Layers
Cascade Layers cho phép chúng ta xác định thứ tự ưu tiên của các quy tắc CSS, giúp chúng ta kiểm soát được việc áp dụng các quy tắc CSS trong trường hợp xảy ra xung đột.
Ví dụ:
/* Layer 1 */
.hero {
color: red;
}
/* Layer 2 */
.hero {
color: blue;
}.hero {
color: red;
@layer 1; /* Layer 1 */
}Qua ví dụ trên, quy tắc CSS trong Layer 1 sẽ được ưu tiên hơn so với Layer 2.
Has() selector
Has() selector cho phép chúng ta chọn các phần tử chứa một phần tử khác. Hay nói cách khác nó giúp chúng ta kiểm tra xem một phần tử có chứa một phần tử khác hay không.
Ví dụ:
/* Chọn tất cả các thẻ div chứa thẻ p */
div:has(p) {
background-color: yellow;
}:is() và :where() selector
:is() và :where() selector giúp chúng ta viết ngắn gọn hơn các quy tắc CSS.
Ví dụ:
/* Viết ngắn gọn hơn */
:is(h1, h2, h3, h4, h5, h6) {
color: red;
}
/* Viết ngắn gọn hơn */
:where(h1, h2, h3, h4, h5, h6) {
color: red;
}Scroll-snap
Scroll-snap giúp chúng ta tạo ra hiệu ứng cuộn trang mượt mà hơn. Hay thậm chí chúng ta có thể tạo ra các carousel mà không cần sử dụng JavaScript.
Ví dụ:
<div class="slider">
<section style="background: rgb(247, 145, 151);">
<h1>Section One</h1>
</section>
<section style="background: rgb(247, 133, 171);">
<h1>Section Two</h1>
</section>
<section style="background: rgb(233, 244, 132);">
<h1>Section Three</h1>
</section>
<section style="background: rgb(146, 220, 252);">
<h1>Section Four</h1>
</section>
<section style="background: rgb(138, 242, 153);">
<h1>Section Five</h1>
</section>
</div>.slider {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overflow-x: scroll;
display: flex;
}
section {
border-right: 1px solid white;
padding: 1rem;
min-width: 100vw;
height: 100vh;
scroll-snap-align: start;
text-align: center;
position: relative;
}CSS subgrid
Đây có lẽ là một trong những tính năng mà chúng ta rất mong chờ. CSS subgrid cho phép chúng ta tạo ra các lưới con, căn chỉnh chúng với lưới cha một cách dễ dàng. Hầu hết khi làm layout chúng ta đều không khỏi vất vả với việc căn chỉnh các phần tử ngang hàng nhau trong lưới cha.
Hãy xem ảnh ví dụ dưới đây:
- Trước khi sử dụng CSS subgrid:
- Sau khi sử dụng CSS subgrid:
Hãy chú ý các title, content, link đã được căn chỉnh ngang hàng nhau một cách dễ dàng.
Viết CSS subgrid:
<div class="container">
<div class="item">
<h2>Lorem ipsum dolor sit amet</h2>
<img src="https://picsum.photos/300/200?random=2" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, voluptate, quod, quibusdam, doloremque voluptatem quae quia quos nemo voluptatum autem repellendus aperiam. Quisquam, voluptate, quod, quibusdam, doloremque voluptatem quae quia quos nemo voluptatum autem repellendus aperiam.</p>
<ul>
<li><a href="#">#Lorem</a></li>
<li><a href="#">#ipsum</a></li>
<li><a href="#">#dolor</a></li>
</ul>
</div>
<div class="item">
<h2>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, necessitatibus doloremque soluta quae deserunt aliquid, placeat vero cum aut fugiat commodi neque deleniti, accusantium magnam aliquam voluptates hic? Ipsa, soluta.</h2>
<img src="https://picsum.photos/300/200?random=3" width="400" height="300" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ipsa necessitatibus natus eius quo ducimus possimus officia, non, expedita debitis hic velit ullam! Dicta numquam in nemo suscipit omnis ullam.</p>
<ul>
<li><a href="#">#Lorem</a></li>
<li><a href="#">#ipsum</a></li>
<li><a href="#">#dolor</a></li>
</ul>
</div>
<div class="item">
<h2>Accusamus ipsa necessitatibus lorem ipsum dolor sit amet</h2>
<img src="https://picsum.photos/300/200?random=4" width="400" height="300" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ipsa necessitatibus natus eius quo ducimus possimus officia, non, expedita debitis hic velit ullam! Dicta numquam in nemo suscipit omnis ullam.</p>
<ul>
<li><a href="#">#Lorem</a></li>
<li><a href="#">#ipsum</a></li>
</ul>
</div>
<div class="item">
<h2>lorem ipsum dolor sit amet</h2>
<img src="https://picsum.photos/300/200?random=5" width="400" height="300" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ipsa necessitatibus natus eius quo ducimus possimus officia, non, expedita debitis hic velit ullam! Dicta numquam in nemo suscipit omnis ullam.</p>
<ul>
<li><a href="#">#Lorem</a></li>
<li><a href="#">#dolor</a></li>
</ul>
</div>
<div class="item">
<h2>lorem ipsum dolor sit amet</h2>
<img src="https://picsum.photos/300/200?random=6" width="400" height="300" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ipsa necessitatibus natus eius quo ducimus possimus officia, non, expedita debitis hic velit ullam! Dicta numquam in nemo suscipit omnis ullam.</p>
<ul>
<li><a href="#">#dolor</a></li>
</ul>
</div>
</div>.container {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
justify-content: center;
}
.item {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
gap: 16px;
padding-top: 16px;
padding-bottom: 16px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}Nesting
Nesting cho phép chúng ta lồng các quy tắc CSS vào nhau, giúp chúng ta viết CSS dễ dàng hơn. Cách viết này trước đây chúng ta chỉ thấy trong các Preprocessor như Sass, Less. Nhưng giờ đây chúng ta có thể sử dụng nó trong CSS.
Ví dụ:
Thay vì trước đây chúng ta phải viết như sau:
.container {
display: block;
}
.container .item {
display: grid;
}
.container .item p {
color: red;
}
.container .item::before {
content: '';
}Bây giờ chúng ta có thể viết ngắn gọn hơn:
.container {
display: block;
.item {
display: grid;
&:before {
content: '';
}
p {
color: red;
}
}
}Kết luận
CSS ngày nay đã thoát ra khỏi những giới hạn ngày trước, giờ đây nó đang trở nên như một ngôn ngữ lập trình vậy, trong tương lai chắc chắn chúng ta sẽ thấy nhiều tính năng mới hơn nữa. Điều này sẽ giúp cho những nhà thiết web có thêm nhiều cơ hội để sáng tạo hơn trong việc thiết kế giao diện người dùng.
Nguyen Pham
Làm việc tại phòng thí nghiệm MADE, Texas, USA. Là một người đam mê với công nghệ và thích chia sẻ kiến thức với mọi người.
