Điểm mới trong Chrome 118

Adriana Jara

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 xem có gì mới dành cho nhà phát triển trong Chrome 118.

Quy tắc @scope CSS.

Quy tắc tại @scope cho phép nhà phát triển đặt phạm vi cho các quy tắc kiểu cho một gốc phạm vi nhất định và các phần tử kiểu theo khoảng cách 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 khoảng cách, khác với các kiểu CSS thông thường chỉ áp dụng dựa trên thứ tự nguồn và mức độ cụ thể. Trong ví dụ sau, có hai giao diện.

<div class="lightpink-theme">
  <a href="#">I'm lightpink!</a>
  <div class="pink-theme">
    <a href="#">Different pink!</a>
  </div>
</div>

nếu không có phạm vi, kiểu được áp dụng là kiểu được khai báo gần đây nhất.

Không có @scope

.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 áp dụng là kiểu cho phần tử cấp trên gần nhất.

Có @scope

@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à rối rắm, đồ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ên.

Không có @scope

<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;
}

Với @scope

<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 tạo kiểu cho một số nội dung được lồng trong đó. Nói cách khác, bạn có thể có "lỗ" mà kiểu trong phạm vi không áp dụ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 của bộ chọn bằng quy tắc @scope CSS để biết thêm thông tin.

Tính năng nội dung nghe nhìn prefers-reduced-transparency

Chúng tôi sử dụng truy vấn nội dung nghe nhìn để mang lại 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 thiết bị của người dùng. 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ể kiểm thử với các truy vấn nội dung đa phương tiện là prefers-reduced-transparency, cho phép nhà phát triển điều chỉnh nội dung trên web cho phù hợp với 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 tuỳ chọn hợp lệ là reduce hoặc no-preference.

.translucent {
  opacity: 0.4;
}

@media (prefers-reduced-transparency) {
  .translucent {
    opacity: 0.8;
  }
}

Đồng thời, bạn có thể kiểm tra giao diện của công cụ 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.

Sửa lỗi: 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 scripting mới có trong bản phát hành này. Tính năng này sẽ có trong phiên bản 120.

Các điểm cải tiến về bảng điều khiển Nguồn trong Công cụ cho nhà phát triển

DevTools có các điểm cải tiến sau trong bảng điều khiển Sources (Nguồn): tính năng workspace (không gian làm việc) đã cải thiện tính nhất quán, đáng chú ý nhất là bằng cách đổi tên ngăn Sources > Filesystem (Nguồn > Hệ thống tệp) thành Workspace (Không gian làm việc) cùng với văn bản giao diện người dùng khác, Sources > Workspace cũng cho phép bạn đồng bộ hoá trực tiếp các thay đổi bạn thực hiện trong DevTools với các tệp nguồn.

Ngoài ra, 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 Sources (Nguồn) bằng cách kéo và thả, và bảng điều khiển Sources (Nguồn) hiện có thể in JavaScript cùng dòng theo các loại tập lệnh sau: module, importmap, speculationrules và đánh dấu cú pháp của các 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 DevTools để biết thêm thông tin về các bản cập nhật DevTools của Chrome 118.

Và nhiều tính năng khác!

Tất nhiên là còn nhiều tính năng khác nữa.

• WebUSB API hiện được hiển thị cho các Worker dịch vụ do tiện ích trình duyệt đăng ký, cho phép nhà phát triển sử dụng API này khi phản hồi các sự kiện tiện ích.

• Để giúp nhà phát triển giảm thiểu rào cản trong 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 trở nên ngắn hơn, các phiên bản ổn định sẽ được phát hành 3 tuần một lần, bắt đầu từ Chrome 119 sẽ ra mắt sau 3 tuần nữa.

Tài liệu đọc thêm

Nội dung này chỉ đề cập đến một số điểm nổi bật chính. Hãy xem các đường liên kết bên dưới để biết thêm các thay đổi trong Chrome 118.

• Tính năng mới trong Công cụ dành cho nhà phát triển của Chrome (118)
• Các tính năng ngừng hoạt động và bị xoá trong Chrome 118
• ChromeStatus.com cập nhật cho Chrome 118
• Danh sách thay đổi về kho lưu trữ nguồn Chromium
• Lịch phát hành của Chrome

Đăng ký

Để luôn 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.

Xin chào Adriana Jara! Ngay sau khi Chrome 119 được phát hành, tôi sẽ cho bạn biết về những tính năng mới trong Chrome!