Dưới đây là những gì bạn cần phải biết:
- Khai báo các kiểu cụ thể trong một thành phần bằng quy tắc css
@scope
. - Có một tính năng nghe nhìn mới:
prefers-reduced-transparency
. Công cụ cho nhà phát triển có các điểm cải tiến trong bảng điều khiển Nguồn.
Và còn nhiều tính năng khác.
Tôi là Adriana Jara. Hãy cùng tìm hiểu sâu hơn và xem những tính năng mới dành cho nhà phát triển trong Chrome 118.
Quy tắc @scope
của CSS.
Với quy tắc @scope
tại quy tắc, nhà phát triển có thể đặt phạm vi các quy tắc kiểu ở một gốc phạm vi nhất định và tạo kiểu cho các phần tử theo mức độ gần của gốc phạm vi đó.
Với @scope
, bạn có thể ghi đè các kiểu dựa trên độ gần, khác với các kiểu CSS thông thường được áp dụng chỉ dựa trên thứ tự nguồn và tính đặc trưng. Trong ví dụ sau, có 2 giao diện.
<div class="lightpink-theme">
<a href="#">I'm lightpink!</a>
<div class="pink-theme">
<a href="#">Different pink!</a>
</div>
</div>
không có phạm vi, thì kiểu được áp dụng là kiểu cuối cùng được khai báo.
.pink-theme a { color: hotpink; } .lightpink-theme a { color: lightpink; }
Với phạm vi, bạn có thể có các phần tử lồng nhau và kiểu được áp dụng là kiểu dành cho đối tượng cấp trên gần nhất.
@scope (.pink-theme) { a { color: hotpink; } } @scope (.lightpink-theme){ a { color: lightpink; } }
Phạm vi cũng giúp bạn không phải viết tên lớp dài và phức tạp, đồng thời giúp bạn dễ dàng quản lý các dự án lớn hơn và tránh xung đột đặt tên.
<div class="first-container"> <h1 class="first-container__main-title"> I'm the main title</h1> </div> <div class="second-container"> <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1> </div>
.first-container__main-title { color: grey; } .second-container__main-title { color: mediumturquoise; }
<div class="first-container"> <h1 class="main-title"> I'm the main title</h1> </div> <div class="second-container"> <h1 class="main-title"> I'm the main title, but somewhere else</h1> </div>
@scope(.first-container){ .main-title { color: grey; } } @scope(.second-container){ .main-title { color: mediumturquoise; } }
Với phạm vi, bạn cũng có thể tạo kiểu cho một thành phần mà không cần định kiểu cho một số mục được lồng trong đó. Bằng cách này, bạn có thể có "lỗ hổng" mà kiểu theo phạm vi không áp dụng được.
Giống như trong ví dụ sau, chúng ta có thể áp dụng kiểu cho văn bản và loại trừ các thành phần điều khiển hoặc ngược lại.
<div class="component">
<div class="purple">
<h1>Drink water</h1>
<p class="purple">hydration is important</p>
</div>
<div class="click-here">
<p>not in scope</p>
<button>click here</button>
</div>
<div class="purple">
<h1 class="purple">Exercise</h1>
<p class="purple">move it move it</p>
</div>
<div class="link-here">
<p>Excluded from scope</p>
<a href="#"> link here </a>
</div>
</div>
@scope (.component) to (.click-here, .link-here) {
div {
color: purple;
text-align: center;
font-family: sans-serif;
}
}
Hãy xem bài viết Giới hạn phạm vi tiếp cận của bộ chọn bằng thuộc tính CSS @scope at-Rule để biết thêm thông tin.
prefers-reduced-transparency
tính năng đa phương tiện
Chúng tôi sử dụng các truy vấn về nội dung nghe nhìn để mang đến trải nghiệm người dùng phù hợp với lựa chọn ưu tiên và điều kiện của thiết bị. Phiên bản Chrome này thêm một giá trị mới có thể dùng để điều chỉnh trải nghiệm người dùng: prefers-reduced-transparency
.
Một giá trị mới mà bạn có thể thử nghiệm bằng các truy vấn nội dung nghe nhìn là prefers-reduced-transparency
. Giá trị này cho phép nhà phát triển điều chỉnh nội dung trên web theo lựa chọn ưu tiên do người dùng chọn để giảm độ trong suốt trong hệ điều hành, chẳng hạn như chế độ cài đặt Giảm độ trong suốt trên macOS. Các lựa chọn hợp lệ là reduce
hoặc no-preference
.
.translucent {
opacity: 0.4;
}
@media (prefers-reduced-transparency) {
.translucent {
opacity: 0.8;
}
}
Bạn có thể kiểm tra xem công cụ này trông như thế nào bằng Công cụ cho nhà phát triển:
Để biết thêm thông tin, hãy tham khảo tài liệu về prefers-reduced-transparency.
Đính chính: Phiên bản trước của bài viết này đề cập đến một tính năng đa phương tiện mới của scripting
trong bản phát hành này. Thực tế là chúng sẽ có phiên bản 120.
Cải thiện bảng điều khiển nguồn trong Công cụ cho nhà phát triển
Công cụ cho nhà phát triển có những điểm cải tiến sau trong bảng điều khiển Nguồn: tính năng không gian làm việc giúp cải thiện tính nhất quán, đáng chú ý nhất là bằng cách đổi tên ngăn Nguồn > Hệ thống tệp thành Không gian làm việc cùng với văn bản giao diện người dùng khác, Nguồn > Không gian làm việc cũng cho phép bạn đồng bộ hóa trực tiếp các thay đổi bạn thực hiện trong Công cụ cho tệp nguồn.
Giờ đây, bạn có thể sắp xếp lại các ngăn ở bên trái bảng điều khiển Nguồn bằng cách kéo và thả. Giờ đây, bảng điều khiển Nguồn có thể in JavaScript cùng dòng rất đẹp trong các loại tập lệnh sau: module
, importmap
, speculationrules
và đánh dấu cú pháp của loại tập lệnh importmap
và speculationrules
, cả hai đều chứa JSON.
Hãy xem bài viết Tính năng mới trong Công cụ cho nhà phát triển để tìm hiểu thêm về bản cập nhật Công cụ cho nhà phát triển Chrome 118.
Và nhiều kiến thức khác!
Tất nhiên, vẫn còn nhiều lý do khác.
WebUSB API hiện được cấp cho Service Worker đã đăng ký bởi các tiện ích của trình duyệt. Điều này cho phép các nhà phát triển sử dụng API khi phản hồi các sự kiện của tiện ích.
Để giúp nhà phát triển giảm thiểu rào cản trong các Quy trình yêu cầu thanh toán, chúng tôi sẽ loại bỏ yêu cầu kích hoạt người dùng trong
Payment Request
vàSecure Payment Confirmation
.Chu kỳ phát hành của Chrome đang rút ngắn, các phiên bản ổn định sẽ được phát hành ba tuần một lần, bắt đầu từ Chrome 119 sẽ ra mắt sau ba tuần nữa.
Tài liệu đọc thêm
Bài viết này chỉ bao gồm một số điểm nổi bật chính. Hãy truy cập vào các đường liên kết bên dưới để biết thêm những thay đổi khác trong Chrome 118.
- Tính năng mới trong Công cụ của Chrome cho nhà phát triển (118)
- Ngừng sử dụng và xoá Chrome 118
- Thông tin cập nhật về ChromeStatus.com cho Chrome 118
- Danh sách thay đổi kho lưu trữ nguồn Chromium
- Lịch phát hành Chrome
Đăng ký
Để nắm bắt thông tin mới nhất, hãy đăng ký kênh YouTube dành cho Nhà phát triển Chrome. Bạn sẽ nhận được thông báo qua email mỗi khi chúng tôi ra mắt video mới.
Chào Adriana Jara! Ngay sau khi Chrome 119 được phát hành, tôi sẽ sẵn sàng cho bạn biết các tính năng mới của Chrome!