Điểm mới trong Chrome 118

Dưới đây là những gì bạn cần phải biết:

Tôi là Adriana Jara. Hãy cùng tìm hiểu những tính năng 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; }

Hai đường liên kết, đường liên kết đầu tiên có nội dung &quot;I&#39;m lightpink!&quot; (Tôi là màu hồng nhạt!), đường liên kết thứ hai có nội dung &quot;Different pink&quot; (Màu hồng khác), cả hai đường liên kết đều có màu hồng nhạt, bên dưới văn bản đường liên kết có nội dung sources order declaration style (kiểu khai báo thứ tự nguồn).

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.

Với @scope
@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme){
    a {
        color: lightpink;
    }
}

Hai đường liên kết, đường liên kết đầu tiên có nội dung &quot;I&#39;m lightpink!&quot; (&quot;Tôi là màu hồng nhạt!&quot;), đường liên kết thứ hai có nội dung &quot;Different pink&quot; (&quot;Màu hồng khác&quot;), đường liên kết thứ hai có màu hồng đậm hơn, nằm bên dưới kiểu gốc gần nhất của văn bản đường liên kết và có dấu kiểm màu xanh lục bên cạnh.

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ố thành phần nhất định đượ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.

nội dung đại diện cho html ở trên, với các từ trong phạm vi bên cạnh div đầu tiên và thứ ba, và từ bị loại trừ bên cạnh div thứ hai và thứ tư.

<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 đến trải nghiệm phù hợp với lựa chọn ưu tiên và tình trạng 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ử bằng truy vấn nội dung đa phương tiện là prefers-reduced-transparency. Giá trị này cho phép nhà phát triển điều chỉnh nội dung web theo lựa chọn ưu tiên của người dùng để 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;
  }
}

Ngoài ra, bạn có thể kiểm tra giao diện của trang bằng Công cụ cho nhà phát triển:

Để biết thêm thông tin, hãy xem 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 của bảng điều khiển Sources (Nguồn) bằng cách kéo và thả. Đồng thời, bảng điều khiển Sources (Nguồn) hiện có thể in đẹp JavaScript nội tuyến trong các loại tập lệnh sau: module, importmap, speculationrules và làm nổi bật cú pháp của các loại tập lệnh importmapspeculationrules, cả hai đều chứa JSON.

Trước và sau khi in đẹp và làm nổi bật cú pháp của loại tập lệnh quy tắc suy đoán.

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 còn nhiều tính năng khác.

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.

Đă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.

Tôi là Adriana Jara. Ngay khi Chrome 119 được phát hành, tôi sẽ ở đây để giới thiệu cho bạn những tính năng mới trong Chrome!