Điểm mới trong Chrome 118

Adriana Jara

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

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;Tôi sáng màu!&quot;, đường liên kết thứ hai có nội dung &quot;Màu hồng khác&quot;, cả hai đường liên kết đều có màu hồng nhạt, bên dưới văn bản liên kết đọc kiểu khai báo đơn đặt hàng nguồn.

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.

Bằng @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;. Đường liên kết thứ hai có nội dung &quot;Màu hồng khác&quot;, đường liên kết thứ hai có màu hồng đậm hơn, bên dưới đường liên kết có văn bản kiểu đối tượng cấp trên gần nhấ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à 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.

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;
}
Bằng @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 đị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.

phần trình bày 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 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.

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

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.

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