Hoang  Kim

Hoang Kim

1657224000

Các Tính Năng CSS ít được Biết đến Và Ít được Sử Dụng Hơn Vào Năm 2022

CSS không ngừng phát triển và một số thuộc tính hữu ích và thú vị hoặc hoàn toàn không được chú ý hoặc không được nói đến nhiều như những thuộc tính khác vì lý do này hay lý do khác. Trong bài viết này, chúng tôi sẽ đề cập đến một phần nhỏ các thuộc tính và bộ chọn CSS đó.

Sau khi đọc bài viết sâu sắc của Louis Lazaris “ Những thuộc tính HTML mà bạn không bao giờ sử dụng ”, tôi đã tự hỏi bản thân ( và cộng đồng ) những thuộc tính và bộ chọn nào ít được biết đến hơn hoặc nên được sử dụng thường xuyên hơn. Một số câu trả lời từ cộng đồng đã làm tôi ngạc nhiên, vì chúng đã bao gồm một số tính năng CSS rất hữu ích và thường được yêu cầu đã được cung cấp trong một hoặc hai năm qua.

Danh sách sau đây được tạo ra với các yêu cầu của cộng đồng và các lựa chọn của cá nhân tôi. Vậy hãy bắt đầu!

allThuộc tính  #

Đây là một thuộc tính viết tắt thường được sử dụng để đặt lại tất cả các thuộc tính về giá trị ban đầu tương ứng của chúng bằng cách dừng kế thừa một cách hiệu quả hoặc để thực thi kế thừa cho tất cả các thuộc tính.

  • initial
    Đặt tất cả các thuộc tính thành các giá trị ban đầu tương ứng của chúng.
  • inherit
    Đặt tất cả các thuộc tính thành giá trị kế thừa của chúng.
  • unset
    Thay đổi tất cả các giá trị thành giá trị mặc định tương ứng của chúng, là inherithoặc initial.
  • revert
    Giá trị kết quả phụ thuộc vào nguồn gốc biểu định kiểu nơi đặt thuộc tính này.
  • revert-layer
    Các giá trị kết quả sẽ khớp với lớp tầng trước đó hoặc quy tắc khớp tiếp theo.

Thuộc tính này có thể được sử dụng hiệu quả để đặt lại các kiểu hoặc khi cấu trúc lại CSS để dừng kế thừa và ngăn các kiểu không mong muốn bị rò rỉ vào.

https://codepen.io/smashingmag/pen/NWyRvZL

h2 {
   color: var(--color-primary);
   font-size: var(--font-size-large);
   line-height: 1.5;
   text-decoration: underline;
   margin-bottom: 2rem;
}

.article h2 {
  padding: 2em;
  border-bottom: 2px solid currentColor;
}

.article__title {
  /* We don't want styles from previous selector. We only need a margin and a font size. */
  all: unset;
  margin-bottom: 2rem;
  font-size: var(--font-size-medium);
}

Với revert-layerchúng ta có thể bỏ qua một lớp thác tiếp theo, để kế thừa các kiểu từ một bộ chọn khác nhưng để ngăn các kiểu từ bộ chọn gần nhất trong tầng bị rò rỉ vào.

Trong khi xem xét thuộc tính này, tôi đã phát hiện ra một hành vi thú vị - màu gạch chân sẽ không cập nhật thành màu hiện được chỉ định trừ khi text-decoration: underline;được áp dụng lại cho .titlebộ chọn chứa thuộc alltính.

https://codepen.io/smashingmag/pen/bGLwoGx

currentColor 

Thường được gọi là "biến CSS đầu tiên", currentColorlà một giá trị bằng thuộc tính của phần tử color. Nó có thể được sử dụng để gán giá trị bằng giá trị của thuộc colortính cho bất kỳ thuộc tính CSS nào chấp nhận giá trị màu. Nó buộc một thuộc tính CSS kế thừa giá trị của thuộc colortính.

Giá trị này có thể rất hữu ích để tránh gán cùng một giá trị cho nhiều thuộc tính CSS chấp nhận màu như ,, border-colorv.v. trong cùng một bộ chọn.backgroundbox-shadow

https://codepen.io/smashingmag/pen/MWQjEYN

Theo tôi, một trong những trường hợp sử dụng tốt nhất currentColorlà tạo kiểu các phần tử SVG nội tuyến. Bất cứ khi nào chúng tôi xuất một biểu tượng từ một công cụ thiết kế, nó sẽ đi kèm với một fillgiá trị màu cụ thể và khác được xác định trong thiết kế. Chúng tôi có thể thay thế tất cả các giá trị màu đó theo cách thủ công currentColorvà bằng cách đó, chúng tôi có thể dễ dàng tùy chỉnh màu của SVG mà không cần phải đi vào đánh dấu SVG và ghi đè fillhoặc các thuộc tính dựa trên màu khác cho một cá nhân pathhoặc các phần tử SVG khác và làm cho Bộ chọn CSS phức tạp và phức tạp.

<!-- Before -->
<path fill="#bbdb44" d="..."/>

<!-- After -->
<path fill="currentColor" d="..."/>
/* Before */
.icon:hover path {
  fill: #112244;
}

/* After */
.icon {
  color: #bbdb44;
}

.icon:hover {
  color: #112244;
}

https://codepen.io/smashingmag/pen/MWQjEKN

Giá trị dự phòng thuộc tính tùy chỉnh 

Thuộc tính tùy chỉnh đã mang lại những cải tiến đáng kể cho CSS bằng cách cho phép các nhà phát triển tạo các giá trị có thể sử dụng lại trong biểu định kiểu của họ mà không cần bộ xử lý trước CSS như SASS. Các thuộc tính tùy chỉnh ngay lập tức được chấp nhận và ngày nay được sử dụng rộng rãi với hiệu quả tuyệt vời, đặc biệt là về chủ đề và tương tác với JavaScript.

Tuy nhiên, tôi cảm thấy như giá trị dự phòng đã bị bỏ qua. Nếu bạn không quen với giá trị dự phòng, thì đó là giá trị thứ hai có thể được gán cho varhàm được áp dụng nếu giá trị đầu tiên không được đặt.

color: var(--color-icon, #9eeb34);

Chúng tôi cũng có thể đặt một biến khác làm dự phòng.

color: var(--color-icon-primary, var(--color-icon-default));

Bạn có thể đã thấy cách giá trị này có thể được sử dụng để cung cấp một dự phòng đáng tin cậy cho các kiểu mặc định trong khi vẫn cho phép tùy chỉnh.

Giá trị phụ này cũng cho phép một cách trang nhã để ghi đè các màu chủ đề mà không làm tăng tính cụ thể.

Chúng tôi có thể dễ dàng thay đổi các giá trị biến tùy chỉnh bằng cách ghi đè chúng.

:root {
  --theme-color-background: #f5f5f5;
  --theme-color-text: #111111;
}

/* Global override on a parent class on <body> or <html> element */
.theme--dark {
  --theme-color-background: #111111;
  --theme-color-text: #f5f5f5;
}

Nhưng còn những trường hợp ghi đè toàn cục này không lý tưởng cho tất cả các thành phần và chúng tôi muốn tinh chỉnh các thuộc tính cho các thành phần riêng lẻ thì sao? Trong những trường hợp như vậy, chúng tôi sẽ phải ghi đè các kiểu.

.box {
    color: var(--color-theme-default);
}

.theme--dark .box {
  color: var(--color-component-override);
}

Kết quả là chúng tôi đã tăng độ đặc hiệu, điều này không lý tưởng và có thể gây ra vấn đề trong những trường hợp phức tạp hơn hoặc trong những trường hợp không quản lý được độ đặc hiệu. Thay vào đó, những gì chúng ta có thể làm là sử dụng giá trị dự phòng để áp dụng chúng mà không làm tăng tính cụ thể bên trong thành phần. Điều này làm cho thành phần trở nên hữu ích và di động hơn, vì nó không giới thiệu bất kỳ tên lớp cha nào cho thành phần và các phụ thuộc tương tự khác.

:nguồn gốc {

--theme-color-default: darkgoldenrod;
--color-some-other-color: cyan;
}

.theme--dark {
/* Dark theme */
  --color-component-override: var(--color-some-other-color);
}

.box {
  color: var(--color-component-override, var(--theme-color-default));
}

https://codepen.io/smashingmag/pen/wvyzroQ

Bộ đếm

CSS cho phép các nhà phát triển xác định các bộ đếm được đặt tên có thể tăng, giảm và hiển thị bằng cách sử dụng thuộc contenttính CSS.

  • counter-reset
    Thuộc tính này được sử dụng để khởi tạo bộ đếm đơn hoặc nhiều bộ đếm. Giá trị bắt đầu mặc định cũng có thể được chỉ định.
  • reversed
    Hàm được sử dụng khi xác định bộ đếm với counter-resetđể làm cho bộ đếm đếm ngược thay vì lên.
  • counter-increment
    Chỉ định một bộ đếm để tăng (hoặc giảm nếu bộ đếm được xác định là reversedhoặc nếu một giá trị âm được chuyển đến counter-increment). Giá trị gia tăng mặc định là 1, nhưng giá trị giá trị tùy chỉnh cũng có thể được chuyển cho thuộc tính này.
  • counter
    Được sử dụng để truy cập giá trị bộ đếm. Thường được sử dụng trong contenttài sản.

https://codepen.io/smashingmag/pen/RwQGLpQ

Trong ví dụ sau, chúng tôi đang khởi tạo hai bộ đếm articlesgiữ số lượng các phần chính và bộ notesđếm giữ số lượng ghi chú trên trang. Một phần mục đơn lẻ có thể có nhiều ghi chú.

Điều gì xảy ra nếu chúng ta muốn dễ dàng xác định ghi chú nào thuộc bài viết nào trên trang? Chúng tôi cần thêm một số bài báo vào mỗi ghi chú. Ví dụ, ghi chú thứ hai của bài báo thứ ba - “Lưu ý 3.2.”.

https://codepen.io/smashingmag/pen/vYdXemd

Chúng ta có thể dễ dàng điều chỉnh cách khởi tạo và hiển thị bộ đếm ghi chú. Chúng ta có thể sử dụng nhiều giá trị bộ đếm trong một thuộc contenttính.

Sử dụng bộ đếm CSS, cho phép chúng tôi dễ dàng thêm, xóa và sắp xếp lại các phần tử này mà không cần phải lo lắng về việc cập nhật các giá trị bộ đếm theo cách thủ công và không cần sử dụng JavaScript.

Truy vấn phương tiện tương tác

Cristian Díaz đã đề cập đến chủ đề này trong bài báo gần đây của anh ấy . Khi tạo các trang web đáp ứng, chúng tôi thường đưa ra các giả định về cơ chế đầu vào dựa trên kích thước màn hình của chúng. Chúng tôi giả định rằng kích thước màn hình 1920pxthuộc về máy tính để bàn hoặc máy tính xách tay và người dùng đang tương tác với trang web bằng chuột và bàn phím, nhưng đối với máy tính xách tay có màn hình cảm ứng hoặc màn hình TV thông minh thì sao?

Đây là lúc các Tính năng phương tiện tương tác xuất hiện và cho phép chúng tôi tinh chỉnh khả năng sử dụng của các thành phần của chúng tôi mà người dùng có thể tương tác (đầu vào, menu offcanvas, trình đơn thả xuống, phương thức, v.v.) tùy thuộc vào cơ chế nhập chính - cảm ứng, bút stylus, chuột con trỏ, v.v.

@media (pointer: fine) {
  /* using a mouse or stylus */
}
@media (pointer: coarse) {
  /* using touch */
}
@media (hover: hover) {
  /* can be hovered */
}
@media (hover: none) {
  /* can't be hovered */
}

Bảng từ bài báo 'Hướng dẫn Truy vấn Phương tiện Di chuột và Con trỏ' của Cristian Diaz. ( Bản xem trước lớn )

aspect-ratiocho Kiểm soát kích thước  #

Khi aspect-ratiođược phát hành lần đầu, tôi nghĩ rằng tôi sẽ không sử dụng nó bên ngoài các yếu tố hình ảnh và video và trong các trường hợp sử dụng rất hẹp. Tôi rất ngạc nhiên khi thấy mình sử dụng nó theo cách tương tự mà tôi sẽ sử dụng currentColor- để tránh việc đặt nhiều thuộc tính có cùng giá trị một cách không cần thiết.

Với aspect-ratio, chúng ta có thể dễ dàng kiểm soát kích thước của một phần tử. Ví dụ: các nút chiều rộng và chiều cao bằng nhau sẽ có tỷ lệ khung hình là 1. Bằng cách đó, chúng ta có thể dễ dàng tạo các nút thích ứng với nội dung của chúng và các kích thước biểu tượng khác nhau, trong khi vẫn duy trì hình dạng cần thiết.

https://codepen.io/smashingmag/pen/qBxaPoX

Tốt hơn Gradients 

Chúng tôi đã sử dụng gradient trên Web được một thời gian và chúng đã trở thành một yếu tố quan trọng trong thiết kế. Tuy nhiên, như Josh W. Comeau đã chỉ ra , phần giữa của gradient đôi khi có thể trông xám và bị trôi đi, tùy thuộc vào màu sắc bạn đang sử dụng.

Trong ví dụ sau, chúng tôi đang đặt hai gradient giữa hai giá trị giống nhau (xanh lá cây và đỏ). Lưu ý trong ví dụ đầu tiên về cách các màu ở phần giữa trông có vẻ mờ và bị trôi đi, bởi vì trình duyệt đang sử dụng phép nội suy màu RGB theo mặc định. Chúng tôi không thể thay đổi điều đó vào lúc này, nhưng chúng tôi có thể trong tương lai với các tính năng CSS mới. Tuy nhiên, chúng ta có thể khắc phục điều đó bằng cách thêm một số điểm giữa vào gradient.

Ví dụ thứ hai sử dụng kỹ thuật nội suy với nhiều điểm giữa, được tạo bằng công cụ tạo Gradient của Josh W. Comeau . Lưu ý rằng phần giữa bây giờ có màu vàng và cam đậm hơn, và nó trông rực rỡ và đẹp hơn nhiều so với trong ví dụ đầu tiên.

https://codepen.io/smashingmag/pen/BaYLwxM

:where:isPseudo-selectors 

Hai bộ chọn giả này đã được hỗ trợ trình duyệt rộng rãi hơn vào năm ngoái và mặc dù có nhiều cuộc thảo luận xung quanh chúng, nhưng tôi chưa thấy tất cả những công dụng đó trên Web. Stephanie Epris đã nói sâu về hai bộ chọn giả này trong bài viết của cô ấy .

Cả hai bộ chọn này đều xử lý nhóm và tính cụ thể, vì vậy hãy bắt đầu với :isbộ chọn giả.

Hãy xem ví dụ sau. Chúng tôi muốn đặt các kiểu mặc định sau cho các mục danh sách và danh sách lồng nhau. Chúng ta cần bao gồm cả danh sách có thứ tự và không có thứ tự và sự kết hợp của chúng.

ol li,
ul li {
  margin-bottom: 0.25em;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin: 0.25em 0 1em;
}

Với :isbộ chọn giả, chúng ta có thể dễ dàng biến các bộ chọn này thành một biểu thức duy nhất.

:is(ol,ul) li {
  margin-bottom: 0.25em;
}

:is(ol,ul) :is(ol,ul) {
  margin: 0.25em 0 1em;
}

https://codepen.io/smashingmag/pen/jOZMGvO

:wherehoạt động giống như :is, nhưng nó làm giảm tính cụ thể của biểu thức xuống 0. Bây giờ, tại sao điều này lại quan trọng? Hãy quay lại ví dụ của chúng tôi và thay đổi đánh dấu một chút. Hãy thêm một .listbộ chọn, để chúng ta có thể thêm các kiểu vào danh sách bằng cách gán một lớp. Hãy thêm một lớp bổ sung cho danh sách lồng nhau .list-highlightđể thêm màu nền và điều chỉnh phần đệm và lề, để danh sách lồng nhau trông nổi bật hơn.

/* Default styles for nested lists */
.list :is(ol,ul) {
  margin: 0.25em 0 1em;
}

/* Utility class for a nested list */
.list-highlight  {
  background: #eeeeee;
  padding: 1em 1em 1em 2em;
  margin: 0.5em 0;
}

Tuy nhiên, khi chúng tôi áp dụng list-highlightlớp cho bất kỳ danh sách lồng nhau nào, các lề sẽ bị tắt, bởi vì kiểu đó không áp dụng. Điều gì đang xảy ra?

Độ đặc hiệu của kết quả cho :isbộ chọn khớp với bộ chọn cao nhất trong danh sách. Vì vậy, các kiểu ký quỹ từ .list-highlightlớp sử dụng của chúng tôi sẽ không bao giờ thắng được nó.

Chúng tôi muốn tránh tăng tính cụ thể và thêm phụ thuộc cho các lớp tiện ích của chúng tôi, vì vậy hãy chuyển đổi :is:wherexem điều gì sẽ xảy ra.

.list :where(ol,ul) {
  /* ... */
}

https://codepen.io/smashingmag/pen/mdXrBzz

Lớp tiện ích của chúng tôi hoạt động mà không cần độ đặc hiệu cao hơn hoặc các ghi đè khác! :wheređặt tính cụ thể của các bộ chọn trong danh sách thành 0 và cho phép chúng tôi ghi đè các kiểu mặc định.

Chúng ta có thể sử dụng :is:wherenhóm nhiều bộ chọn vào một biểu thức duy nhất. Với :where, chúng ta có thể đặt các kiểu mặc định an toàn với các bộ chọn phức tạp có thể dễ dàng ghi đè bằng các lớp tiện ích đơn giản mà không cần tăng tính đặc hiệu.

scroll-padding 

Một trong những kẻ trộm thú cưng của tôi, khi triển khai tiêu đề trang cố định, đã từng là cách các liên kết cuộn trên trang khiến tiêu đề trang cố định che một phần nội dung. Chúng tôi đã phải sử dụng JavaScript để khắc phục sự cố này và triển khai logic cuộn tùy chỉnh để tính đến độ lệch tiêu đề cố định. Và mọi thứ sẽ chỉ trở nên phức tạp hơn nếu chiều cao tiêu đề thay đổi trên các điểm ngắt, vì vậy chúng tôi cũng cần phải bao gồm các trường hợp đó bằng JavaScript.

May mắn thay, chúng ta không phải dựa vào JavaScript để làm điều đó nữa. Chúng tôi có thể chỉ định scroll-padding-topvà thay đổi giá trị của nó bằng cách sử dụng các truy vấn phương tiện CSS chuẩn.

html {
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
}

https://codepen.io/smashingmag/pen/QWQKqzW

Chúng ta cũng có thể đặt các hướng khác hoặc sử dụng bàn tay dài scroll-padding.

scroll-padding: /* ... */;

scroll-padding-top: /* ... */;
scroll-padding-right: /* ... */;
scroll-padding-bottom: /* ... */;
scroll-padding-left: /* ... */;

Tùy chọn kết xuất phông chữ 

Gần đây tôi đã làm việc để tạo hoạt ảnh các giá trị số trên một dự án trong đó giá trị sẽ tăng từ 0 đến giá trị cuối cùng. Tôi nhận thấy rằng văn bản liên tục nhảy sang trái và phải trong suốt hoạt ảnh do các ký tự riêng lẻ có độ rộng khác nhau.

Giá trị số trong phông chữ Fira Sans

Lưu ý cách phông chữ Fira Sans có các độ rộng ký tự khác nhau cho các giá trị số. (Hàng thứ hai có thêm một ký tự) ( Bản xem trước lớn )

Tôi cho rằng vấn đề này không thể được khắc phục và tôi đã tiếp tục. Một trong những tweet từ cuộc thăm dò cộng đồng gợi ý rằng tôi nên xem xét font-variant-numeric: tabular-numsvà tôi đã rất ngạc nhiên khi tìm thấy rất nhiều tùy chọn ảnh hưởng đến kết xuất phông chữ.

Ví dụ: tabular-numsđã khắc phục sự cố nói trên bằng cách đặt chiều rộng bằng nhau cho tất cả các ký tự số.

https://codepen.io/smashingmag/pen/ZErpayJ

Xin lưu ý rằng các tính năng có sẵn phụ thuộc vào chính phông chữ và một số tính năng có thể không được hỗ trợ. Để có danh sách đầy đủ các tùy chọn, hãy tham khảo tài liệu . Ngoài ra còn có một font-variant thuộc tính CSS cho phép chúng tôi kích hoạt nhiều tính năng hơn nữa cho tất cả các ký tự, không chỉ là số.

Dưới đây là một số ví dụ font-variant-numerickhác có sẵn trong phông chữ Source Sans 3.

https://codepen.io/smashingmag/pen/ExQgbvE

Tạo bối cảnh xếp chồng vớiisolate 

Thuộc tính này có thể gây nhầm lẫn cho các nhà phát triển và tôi đã không biết về nó cho đến khi tôi đọc bài viết tuyệt vời của Josh W. Comeau về chủ đề z-indexvà xếp chồng các ngữ cảnh. Nói tóm lại, nó cho phép chúng ta chia ngăn các z-indexngăn xếp của mình.

Có thể bạn đã gặp phải trường hợp, ví dụ, bạn đã thêm thành phần chú giải công cụ có thể sử dụng lại vào trang của mình, chỉ để phát hiện ra rằng phần tử chú giải công cụ có điểm z-indexthấp hơn một số phần tử liền kề khác trên trang, khiến chú giải công cụ hiển thị bên dưới nó. Chúng tôi thường giải quyết nó bằng cách tăng z-indexgiá trị của chú giải công cụ, nhưng điều đó có thể gây ra sự thụt lùi và các vấn đề tương tự ở nơi khác trong các dự án.

Đây chính xác là những gì xảy ra trong ví dụ dưới đây. Chú giải công cụ bị khóa ở trạng thái di chuột cho mục đích demo.

https://codepen.io/smashingmag/pen/ZErpaXX

Hãy xem những gì đang xảy ra ở đây. Một nhà phát triển đã tạo một thành phần tiêu đề theo kiểu có một phần tử trang trí đằng sau nó, như được định nghĩa trong một thiết kế. Nhưng họ đã đi quá đà với z-indexcác giá trị:

  • tiêu đề văn bản có z-index: 2;
  • yếu tố nền trang trí có a z-index: 1.

Thành phần này hoạt động như mong đợi và đã được hợp nhất với một cơ sở mã chính. Sau một thời gian trôi qua, một người khác đã tạo một thành phần chú giải công cụ với một z-index: 1. Không có lý do gì để gán giá trị cao hơn z-index: 1, vì chú giải công cụ cần phải nằm ngay phía trên văn bản. Sau một thời gian, một trường hợp cạnh đã xảy ra khi văn bản tiêu đề cuối cùng ở phía trên chú giải công cụ.

Chúng tôi có thể lộn xộn với z-indexcác giá trị cho thành phần tiêu đề và thành phần chú giải công cụ hoặc gán một z-indexcho các phần tử mẹ tương ứng của chúng position: relativeđể tạo bối cảnh xếp chồng mới, nhưng chúng tôi đang dựa vào các con số kỳ diệu!

Hãy suy nghĩ về vấn đề theo cách khác - điều gì sẽ xảy ra nếu chúng ta có thể tạo ra một bối cảnh xếp chồng mới mà không cần dựa vào z-indexnhững con số kỳ diệu? Đây chính xác là những gì isolation: isolatelàm! Nó tạo ra một bối cảnh xếp chồng mới hoặc một nhóm. Nó yêu cầu trình duyệt không trộn lẫn hai nhóm xếp chồng này, ngay cả khi chúng tôi tăng giá trị tiêu đề lên z-indexgiá trị cao nhất có thể. Vì vậy, chúng tôi có thể giữ các z-indexgiá trị thấp và không phải lo lắng nếu giá trị phải là 2, 10, 50, 100, 999999, v.v.

Hãy tạo một bối cảnh xếp chồng mới ở gốc của thành phần tiêu đề của chúng ta và ở gốc của thành phần chú giải công cụ của chúng ta và xem điều gì sẽ xảy ra.

.title {
  isolation: isolate;
  /* ... */
}

.tooltip-root {
  isolation: isolate;
  /* ... */
}

https://codepen.io/smashingmag/pen/oNEzooJ

Và chúng tôi đã khắc phục sự cố bằng cách cô lập bối cảnh xếp chồng cho hai thành phần xung đột của chúng tôi mà không làm rối tung các con số kỳ diệu cho z-indexcác giá trị.

Ngay cả khi chúng tôi chỉ định một giá trị cao không cần thiết như 99999 cho văn bản tiêu đề, giá trị này sẽ không ảnh hưởng đến một nhóm biệt lập khác - chú giải công cụ vẫn kết thúc phía trên tiêu đề, điều này làm cho các thành phần của chúng tôi thậm chí còn mạnh mẽ hơn và có thể tái sử dụng. ( Bản xem trước lớn )

  • Belmont Uni

Hiển thị Tối ưu hóa Hiệu suất 

Khi nói đến hiệu suất hiển thị, rất hiếm khi gặp phải những vấn đề này khi làm việc với các dự án thông thường. Tuy nhiên, trong trường hợp cây DOM lớn với hàng nghìn phần tử hoặc các trường hợp cạnh tương tự khác, chúng ta có thể gặp một số vấn đề về hiệu suất liên quan đến CSS và kết xuất. May mắn thay, chúng tôi có một cách trực tiếp để giải quyết các vấn đề hiệu suất này gây ra độ trễ, không phản hồi với đầu vào của người dùng, FPS thấp, v.v.

Đây là nơi containthuộc tính xuất hiện. Nó cho trình duyệt biết những gì sẽ không thay đổi trong chu kỳ hiển thị, vì vậy trình duyệt có thể bỏ qua nó một cách an toàn. Điều này có thể gây ra hậu quả về bố cục và phong cách, vì vậy hãy đảm bảo kiểm tra xem thuộc tính này không gây ra bất kỳ lỗi trực quan nào.

.container {
  /* child elements won't display outside of this container so only the contents of this container should be rendered*/
  contain: paint;
{

Tính chất này khá phức tạp và Rachel Andrew đã trình bày rất chi tiết trong bài viết của mình. Tính chất này hơi khó chứng minh, vì nó hữu ích nhất trong những trường hợp cạnh rất cụ thể. Ví dụ: Johan Isaksson đã đề cập đến một trong những ví dụ đó trong bài viết của mình , nơi ông nhận thấy độ trễ cuộn lớn trên Google Search Console. Nguyên nhân là do có hơn 38 000 phần tử trên một trang và đã được khắc phục bằng cách chứa thuộc tính!

Như bạn có thể thấy, containdựa vào việc nhà phát triển biết chính xác các thuộc tính nào sẽ không thay đổi và biết cách tránh các sự thụt lùi tiềm ẩn. Vì vậy, có một chút khó khăn để sử dụng tài sản này một cách an toàn.

Tuy nhiên, có một tùy chọn mà chúng tôi có thể báo hiệu trình duyệt containtự động áp dụng giá trị cần thiết. Chúng tôi có thể sử dụng content-visibilitytài sản. Với thuộc tính này , chúng tôi có thể trì hoãn việc hiển thị nội dung ngoài màn hình và dưới màn hình đầu tiên. Một số thậm chí còn gọi đây là "kết xuất lười biếng".

Una Kravets và Vladimir Levin đã đề cập đến tài sản này trong ví dụ về blog du lịch của họ . Họ áp dụng tên lớp sau cho các phần blog dưới màn hình đầu tiên.

.story {
  content-visibility: auto; /* Behaves like overflow: hidden; */
  contain-intrinsic-size: 100px 1000px;
}

Với contain-intrinsic-size, chúng tôi có thể ước tính kích thước của phần sẽ được hiển thị. Nếu không có thuộc tính này, kích thước của nội dung sẽ là 0và kích thước trang sẽ tiếp tục tăng khi nội dung được tải.

Trở lại với ví dụ về blog du lịch của Una Kravets và Vladimir Levin. Lưu ý cách thanh cuộn nhảy xung quanh khi bạn cuộn hoặc kéo thanh cuộn. Điều này là do sự khác biệt giữa kích thước trình giữ chỗ (ước tính) được đặt với contain-intrinsic-sizevà kích thước hiển thị thực tế. Nếu chúng ta bỏ qua thuộc tính này, các bước nhảy cuộn sẽ thậm chí còn chói tai hơn.

https://codepen.io/smashingmag/pen/jOZMapm

Thijs Terluin đề cập đến một số cách tính toán giá trị này bao gồm PHP và JavaScript. Tính toán phía máy chủ bằng cách sử dụng PHP đặc biệt ấn tượng, vì nó có thể tự động hóa ước tính giá trị trên tập hợp lớn hơn của các trang khác nhau và làm cho nó chính xác hơn đối với một tập hợp con kích thước màn hình.

Hãy nhớ rằng các thuộc tính này nên được sử dụng để khắc phục các sự cố khi chúng xảy ra , vì vậy có thể an toàn bỏ qua chúng cho đến khi bạn gặp phải các vấn đề về hiệu suất hiển thị.

Sự kết luận 

CSS phát triển không ngừng, với nhiều tính năng hơn được thêm vào mỗi năm. Điều quan trọng là phải cập nhật các tính năng mới nhất và các phương pháp hay nhất, nhưng cũng cần chú ý đến hỗ trợ của trình duyệt và sử dụng tính năng nâng cao liên tục.

Tôi chắc chắn rằng có nhiều thuộc tính CSS và bộ chọn không được bao gồm ở đây. Vui lòng cho chúng tôi biết trong phần nhận xét những thuộc tính hoặc bộ chọn nào ít được biết đến hơn hoặc nên được sử dụng thường xuyên hơn, nhưng có thể hơi phức tạp hoặc không có đủ thông tin xung quanh chúng. 

Nguồn: https://www.smashingmagazine.com/2022/05/lesser-known-underused-css-features-2022/

#css 

What is GEEK

Buddha Community

Các Tính Năng CSS ít được Biết đến Và Ít được Sử Dụng Hơn Vào Năm 2022
Hoang  Kim

Hoang Kim

1657224000

Các Tính Năng CSS ít được Biết đến Và Ít được Sử Dụng Hơn Vào Năm 2022

CSS không ngừng phát triển và một số thuộc tính hữu ích và thú vị hoặc hoàn toàn không được chú ý hoặc không được nói đến nhiều như những thuộc tính khác vì lý do này hay lý do khác. Trong bài viết này, chúng tôi sẽ đề cập đến một phần nhỏ các thuộc tính và bộ chọn CSS đó.

Sau khi đọc bài viết sâu sắc của Louis Lazaris “ Những thuộc tính HTML mà bạn không bao giờ sử dụng ”, tôi đã tự hỏi bản thân ( và cộng đồng ) những thuộc tính và bộ chọn nào ít được biết đến hơn hoặc nên được sử dụng thường xuyên hơn. Một số câu trả lời từ cộng đồng đã làm tôi ngạc nhiên, vì chúng đã bao gồm một số tính năng CSS rất hữu ích và thường được yêu cầu đã được cung cấp trong một hoặc hai năm qua.

Danh sách sau đây được tạo ra với các yêu cầu của cộng đồng và các lựa chọn của cá nhân tôi. Vậy hãy bắt đầu!

allThuộc tính  #

Đây là một thuộc tính viết tắt thường được sử dụng để đặt lại tất cả các thuộc tính về giá trị ban đầu tương ứng của chúng bằng cách dừng kế thừa một cách hiệu quả hoặc để thực thi kế thừa cho tất cả các thuộc tính.

  • initial
    Đặt tất cả các thuộc tính thành các giá trị ban đầu tương ứng của chúng.
  • inherit
    Đặt tất cả các thuộc tính thành giá trị kế thừa của chúng.
  • unset
    Thay đổi tất cả các giá trị thành giá trị mặc định tương ứng của chúng, là inherithoặc initial.
  • revert
    Giá trị kết quả phụ thuộc vào nguồn gốc biểu định kiểu nơi đặt thuộc tính này.
  • revert-layer
    Các giá trị kết quả sẽ khớp với lớp tầng trước đó hoặc quy tắc khớp tiếp theo.

Thuộc tính này có thể được sử dụng hiệu quả để đặt lại các kiểu hoặc khi cấu trúc lại CSS để dừng kế thừa và ngăn các kiểu không mong muốn bị rò rỉ vào.

https://codepen.io/smashingmag/pen/NWyRvZL

h2 {
   color: var(--color-primary);
   font-size: var(--font-size-large);
   line-height: 1.5;
   text-decoration: underline;
   margin-bottom: 2rem;
}

.article h2 {
  padding: 2em;
  border-bottom: 2px solid currentColor;
}

.article__title {
  /* We don't want styles from previous selector. We only need a margin and a font size. */
  all: unset;
  margin-bottom: 2rem;
  font-size: var(--font-size-medium);
}

Với revert-layerchúng ta có thể bỏ qua một lớp thác tiếp theo, để kế thừa các kiểu từ một bộ chọn khác nhưng để ngăn các kiểu từ bộ chọn gần nhất trong tầng bị rò rỉ vào.

Trong khi xem xét thuộc tính này, tôi đã phát hiện ra một hành vi thú vị - màu gạch chân sẽ không cập nhật thành màu hiện được chỉ định trừ khi text-decoration: underline;được áp dụng lại cho .titlebộ chọn chứa thuộc alltính.

https://codepen.io/smashingmag/pen/bGLwoGx

currentColor 

Thường được gọi là "biến CSS đầu tiên", currentColorlà một giá trị bằng thuộc tính của phần tử color. Nó có thể được sử dụng để gán giá trị bằng giá trị của thuộc colortính cho bất kỳ thuộc tính CSS nào chấp nhận giá trị màu. Nó buộc một thuộc tính CSS kế thừa giá trị của thuộc colortính.

Giá trị này có thể rất hữu ích để tránh gán cùng một giá trị cho nhiều thuộc tính CSS chấp nhận màu như ,, border-colorv.v. trong cùng một bộ chọn.backgroundbox-shadow

https://codepen.io/smashingmag/pen/MWQjEYN

Theo tôi, một trong những trường hợp sử dụng tốt nhất currentColorlà tạo kiểu các phần tử SVG nội tuyến. Bất cứ khi nào chúng tôi xuất một biểu tượng từ một công cụ thiết kế, nó sẽ đi kèm với một fillgiá trị màu cụ thể và khác được xác định trong thiết kế. Chúng tôi có thể thay thế tất cả các giá trị màu đó theo cách thủ công currentColorvà bằng cách đó, chúng tôi có thể dễ dàng tùy chỉnh màu của SVG mà không cần phải đi vào đánh dấu SVG và ghi đè fillhoặc các thuộc tính dựa trên màu khác cho một cá nhân pathhoặc các phần tử SVG khác và làm cho Bộ chọn CSS phức tạp và phức tạp.

<!-- Before -->
<path fill="#bbdb44" d="..."/>

<!-- After -->
<path fill="currentColor" d="..."/>
/* Before */
.icon:hover path {
  fill: #112244;
}

/* After */
.icon {
  color: #bbdb44;
}

.icon:hover {
  color: #112244;
}

https://codepen.io/smashingmag/pen/MWQjEKN

Giá trị dự phòng thuộc tính tùy chỉnh 

Thuộc tính tùy chỉnh đã mang lại những cải tiến đáng kể cho CSS bằng cách cho phép các nhà phát triển tạo các giá trị có thể sử dụng lại trong biểu định kiểu của họ mà không cần bộ xử lý trước CSS như SASS. Các thuộc tính tùy chỉnh ngay lập tức được chấp nhận và ngày nay được sử dụng rộng rãi với hiệu quả tuyệt vời, đặc biệt là về chủ đề và tương tác với JavaScript.

Tuy nhiên, tôi cảm thấy như giá trị dự phòng đã bị bỏ qua. Nếu bạn không quen với giá trị dự phòng, thì đó là giá trị thứ hai có thể được gán cho varhàm được áp dụng nếu giá trị đầu tiên không được đặt.

color: var(--color-icon, #9eeb34);

Chúng tôi cũng có thể đặt một biến khác làm dự phòng.

color: var(--color-icon-primary, var(--color-icon-default));

Bạn có thể đã thấy cách giá trị này có thể được sử dụng để cung cấp một dự phòng đáng tin cậy cho các kiểu mặc định trong khi vẫn cho phép tùy chỉnh.

Giá trị phụ này cũng cho phép một cách trang nhã để ghi đè các màu chủ đề mà không làm tăng tính cụ thể.

Chúng tôi có thể dễ dàng thay đổi các giá trị biến tùy chỉnh bằng cách ghi đè chúng.

:root {
  --theme-color-background: #f5f5f5;
  --theme-color-text: #111111;
}

/* Global override on a parent class on <body> or <html> element */
.theme--dark {
  --theme-color-background: #111111;
  --theme-color-text: #f5f5f5;
}

Nhưng còn những trường hợp ghi đè toàn cục này không lý tưởng cho tất cả các thành phần và chúng tôi muốn tinh chỉnh các thuộc tính cho các thành phần riêng lẻ thì sao? Trong những trường hợp như vậy, chúng tôi sẽ phải ghi đè các kiểu.

.box {
    color: var(--color-theme-default);
}

.theme--dark .box {
  color: var(--color-component-override);
}

Kết quả là chúng tôi đã tăng độ đặc hiệu, điều này không lý tưởng và có thể gây ra vấn đề trong những trường hợp phức tạp hơn hoặc trong những trường hợp không quản lý được độ đặc hiệu. Thay vào đó, những gì chúng ta có thể làm là sử dụng giá trị dự phòng để áp dụng chúng mà không làm tăng tính cụ thể bên trong thành phần. Điều này làm cho thành phần trở nên hữu ích và di động hơn, vì nó không giới thiệu bất kỳ tên lớp cha nào cho thành phần và các phụ thuộc tương tự khác.

:nguồn gốc {

--theme-color-default: darkgoldenrod;
--color-some-other-color: cyan;
}

.theme--dark {
/* Dark theme */
  --color-component-override: var(--color-some-other-color);
}

.box {
  color: var(--color-component-override, var(--theme-color-default));
}

https://codepen.io/smashingmag/pen/wvyzroQ

Bộ đếm

CSS cho phép các nhà phát triển xác định các bộ đếm được đặt tên có thể tăng, giảm và hiển thị bằng cách sử dụng thuộc contenttính CSS.

  • counter-reset
    Thuộc tính này được sử dụng để khởi tạo bộ đếm đơn hoặc nhiều bộ đếm. Giá trị bắt đầu mặc định cũng có thể được chỉ định.
  • reversed
    Hàm được sử dụng khi xác định bộ đếm với counter-resetđể làm cho bộ đếm đếm ngược thay vì lên.
  • counter-increment
    Chỉ định một bộ đếm để tăng (hoặc giảm nếu bộ đếm được xác định là reversedhoặc nếu một giá trị âm được chuyển đến counter-increment). Giá trị gia tăng mặc định là 1, nhưng giá trị giá trị tùy chỉnh cũng có thể được chuyển cho thuộc tính này.
  • counter
    Được sử dụng để truy cập giá trị bộ đếm. Thường được sử dụng trong contenttài sản.

https://codepen.io/smashingmag/pen/RwQGLpQ

Trong ví dụ sau, chúng tôi đang khởi tạo hai bộ đếm articlesgiữ số lượng các phần chính và bộ notesđếm giữ số lượng ghi chú trên trang. Một phần mục đơn lẻ có thể có nhiều ghi chú.

Điều gì xảy ra nếu chúng ta muốn dễ dàng xác định ghi chú nào thuộc bài viết nào trên trang? Chúng tôi cần thêm một số bài báo vào mỗi ghi chú. Ví dụ, ghi chú thứ hai của bài báo thứ ba - “Lưu ý 3.2.”.

https://codepen.io/smashingmag/pen/vYdXemd

Chúng ta có thể dễ dàng điều chỉnh cách khởi tạo và hiển thị bộ đếm ghi chú. Chúng ta có thể sử dụng nhiều giá trị bộ đếm trong một thuộc contenttính.

Sử dụng bộ đếm CSS, cho phép chúng tôi dễ dàng thêm, xóa và sắp xếp lại các phần tử này mà không cần phải lo lắng về việc cập nhật các giá trị bộ đếm theo cách thủ công và không cần sử dụng JavaScript.

Truy vấn phương tiện tương tác

Cristian Díaz đã đề cập đến chủ đề này trong bài báo gần đây của anh ấy . Khi tạo các trang web đáp ứng, chúng tôi thường đưa ra các giả định về cơ chế đầu vào dựa trên kích thước màn hình của chúng. Chúng tôi giả định rằng kích thước màn hình 1920pxthuộc về máy tính để bàn hoặc máy tính xách tay và người dùng đang tương tác với trang web bằng chuột và bàn phím, nhưng đối với máy tính xách tay có màn hình cảm ứng hoặc màn hình TV thông minh thì sao?

Đây là lúc các Tính năng phương tiện tương tác xuất hiện và cho phép chúng tôi tinh chỉnh khả năng sử dụng của các thành phần của chúng tôi mà người dùng có thể tương tác (đầu vào, menu offcanvas, trình đơn thả xuống, phương thức, v.v.) tùy thuộc vào cơ chế nhập chính - cảm ứng, bút stylus, chuột con trỏ, v.v.

@media (pointer: fine) {
  /* using a mouse or stylus */
}
@media (pointer: coarse) {
  /* using touch */
}
@media (hover: hover) {
  /* can be hovered */
}
@media (hover: none) {
  /* can't be hovered */
}

Bảng từ bài báo 'Hướng dẫn Truy vấn Phương tiện Di chuột và Con trỏ' của Cristian Diaz. ( Bản xem trước lớn )

aspect-ratiocho Kiểm soát kích thước  #

Khi aspect-ratiođược phát hành lần đầu, tôi nghĩ rằng tôi sẽ không sử dụng nó bên ngoài các yếu tố hình ảnh và video và trong các trường hợp sử dụng rất hẹp. Tôi rất ngạc nhiên khi thấy mình sử dụng nó theo cách tương tự mà tôi sẽ sử dụng currentColor- để tránh việc đặt nhiều thuộc tính có cùng giá trị một cách không cần thiết.

Với aspect-ratio, chúng ta có thể dễ dàng kiểm soát kích thước của một phần tử. Ví dụ: các nút chiều rộng và chiều cao bằng nhau sẽ có tỷ lệ khung hình là 1. Bằng cách đó, chúng ta có thể dễ dàng tạo các nút thích ứng với nội dung của chúng và các kích thước biểu tượng khác nhau, trong khi vẫn duy trì hình dạng cần thiết.

https://codepen.io/smashingmag/pen/qBxaPoX

Tốt hơn Gradients 

Chúng tôi đã sử dụng gradient trên Web được một thời gian và chúng đã trở thành một yếu tố quan trọng trong thiết kế. Tuy nhiên, như Josh W. Comeau đã chỉ ra , phần giữa của gradient đôi khi có thể trông xám và bị trôi đi, tùy thuộc vào màu sắc bạn đang sử dụng.

Trong ví dụ sau, chúng tôi đang đặt hai gradient giữa hai giá trị giống nhau (xanh lá cây và đỏ). Lưu ý trong ví dụ đầu tiên về cách các màu ở phần giữa trông có vẻ mờ và bị trôi đi, bởi vì trình duyệt đang sử dụng phép nội suy màu RGB theo mặc định. Chúng tôi không thể thay đổi điều đó vào lúc này, nhưng chúng tôi có thể trong tương lai với các tính năng CSS mới. Tuy nhiên, chúng ta có thể khắc phục điều đó bằng cách thêm một số điểm giữa vào gradient.

Ví dụ thứ hai sử dụng kỹ thuật nội suy với nhiều điểm giữa, được tạo bằng công cụ tạo Gradient của Josh W. Comeau . Lưu ý rằng phần giữa bây giờ có màu vàng và cam đậm hơn, và nó trông rực rỡ và đẹp hơn nhiều so với trong ví dụ đầu tiên.

https://codepen.io/smashingmag/pen/BaYLwxM

:where:isPseudo-selectors 

Hai bộ chọn giả này đã được hỗ trợ trình duyệt rộng rãi hơn vào năm ngoái và mặc dù có nhiều cuộc thảo luận xung quanh chúng, nhưng tôi chưa thấy tất cả những công dụng đó trên Web. Stephanie Epris đã nói sâu về hai bộ chọn giả này trong bài viết của cô ấy .

Cả hai bộ chọn này đều xử lý nhóm và tính cụ thể, vì vậy hãy bắt đầu với :isbộ chọn giả.

Hãy xem ví dụ sau. Chúng tôi muốn đặt các kiểu mặc định sau cho các mục danh sách và danh sách lồng nhau. Chúng ta cần bao gồm cả danh sách có thứ tự và không có thứ tự và sự kết hợp của chúng.

ol li,
ul li {
  margin-bottom: 0.25em;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin: 0.25em 0 1em;
}

Với :isbộ chọn giả, chúng ta có thể dễ dàng biến các bộ chọn này thành một biểu thức duy nhất.

:is(ol,ul) li {
  margin-bottom: 0.25em;
}

:is(ol,ul) :is(ol,ul) {
  margin: 0.25em 0 1em;
}

https://codepen.io/smashingmag/pen/jOZMGvO

:wherehoạt động giống như :is, nhưng nó làm giảm tính cụ thể của biểu thức xuống 0. Bây giờ, tại sao điều này lại quan trọng? Hãy quay lại ví dụ của chúng tôi và thay đổi đánh dấu một chút. Hãy thêm một .listbộ chọn, để chúng ta có thể thêm các kiểu vào danh sách bằng cách gán một lớp. Hãy thêm một lớp bổ sung cho danh sách lồng nhau .list-highlightđể thêm màu nền và điều chỉnh phần đệm và lề, để danh sách lồng nhau trông nổi bật hơn.

/* Default styles for nested lists */
.list :is(ol,ul) {
  margin: 0.25em 0 1em;
}

/* Utility class for a nested list */
.list-highlight  {
  background: #eeeeee;
  padding: 1em 1em 1em 2em;
  margin: 0.5em 0;
}

Tuy nhiên, khi chúng tôi áp dụng list-highlightlớp cho bất kỳ danh sách lồng nhau nào, các lề sẽ bị tắt, bởi vì kiểu đó không áp dụng. Điều gì đang xảy ra?

Độ đặc hiệu của kết quả cho :isbộ chọn khớp với bộ chọn cao nhất trong danh sách. Vì vậy, các kiểu ký quỹ từ .list-highlightlớp sử dụng của chúng tôi sẽ không bao giờ thắng được nó.

Chúng tôi muốn tránh tăng tính cụ thể và thêm phụ thuộc cho các lớp tiện ích của chúng tôi, vì vậy hãy chuyển đổi :is:wherexem điều gì sẽ xảy ra.

.list :where(ol,ul) {
  /* ... */
}

https://codepen.io/smashingmag/pen/mdXrBzz

Lớp tiện ích của chúng tôi hoạt động mà không cần độ đặc hiệu cao hơn hoặc các ghi đè khác! :wheređặt tính cụ thể của các bộ chọn trong danh sách thành 0 và cho phép chúng tôi ghi đè các kiểu mặc định.

Chúng ta có thể sử dụng :is:wherenhóm nhiều bộ chọn vào một biểu thức duy nhất. Với :where, chúng ta có thể đặt các kiểu mặc định an toàn với các bộ chọn phức tạp có thể dễ dàng ghi đè bằng các lớp tiện ích đơn giản mà không cần tăng tính đặc hiệu.

scroll-padding 

Một trong những kẻ trộm thú cưng của tôi, khi triển khai tiêu đề trang cố định, đã từng là cách các liên kết cuộn trên trang khiến tiêu đề trang cố định che một phần nội dung. Chúng tôi đã phải sử dụng JavaScript để khắc phục sự cố này và triển khai logic cuộn tùy chỉnh để tính đến độ lệch tiêu đề cố định. Và mọi thứ sẽ chỉ trở nên phức tạp hơn nếu chiều cao tiêu đề thay đổi trên các điểm ngắt, vì vậy chúng tôi cũng cần phải bao gồm các trường hợp đó bằng JavaScript.

May mắn thay, chúng ta không phải dựa vào JavaScript để làm điều đó nữa. Chúng tôi có thể chỉ định scroll-padding-topvà thay đổi giá trị của nó bằng cách sử dụng các truy vấn phương tiện CSS chuẩn.

html {
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
}

https://codepen.io/smashingmag/pen/QWQKqzW

Chúng ta cũng có thể đặt các hướng khác hoặc sử dụng bàn tay dài scroll-padding.

scroll-padding: /* ... */;

scroll-padding-top: /* ... */;
scroll-padding-right: /* ... */;
scroll-padding-bottom: /* ... */;
scroll-padding-left: /* ... */;

Tùy chọn kết xuất phông chữ 

Gần đây tôi đã làm việc để tạo hoạt ảnh các giá trị số trên một dự án trong đó giá trị sẽ tăng từ 0 đến giá trị cuối cùng. Tôi nhận thấy rằng văn bản liên tục nhảy sang trái và phải trong suốt hoạt ảnh do các ký tự riêng lẻ có độ rộng khác nhau.

Giá trị số trong phông chữ Fira Sans

Lưu ý cách phông chữ Fira Sans có các độ rộng ký tự khác nhau cho các giá trị số. (Hàng thứ hai có thêm một ký tự) ( Bản xem trước lớn )

Tôi cho rằng vấn đề này không thể được khắc phục và tôi đã tiếp tục. Một trong những tweet từ cuộc thăm dò cộng đồng gợi ý rằng tôi nên xem xét font-variant-numeric: tabular-numsvà tôi đã rất ngạc nhiên khi tìm thấy rất nhiều tùy chọn ảnh hưởng đến kết xuất phông chữ.

Ví dụ: tabular-numsđã khắc phục sự cố nói trên bằng cách đặt chiều rộng bằng nhau cho tất cả các ký tự số.

https://codepen.io/smashingmag/pen/ZErpayJ

Xin lưu ý rằng các tính năng có sẵn phụ thuộc vào chính phông chữ và một số tính năng có thể không được hỗ trợ. Để có danh sách đầy đủ các tùy chọn, hãy tham khảo tài liệu . Ngoài ra còn có một font-variant thuộc tính CSS cho phép chúng tôi kích hoạt nhiều tính năng hơn nữa cho tất cả các ký tự, không chỉ là số.

Dưới đây là một số ví dụ font-variant-numerickhác có sẵn trong phông chữ Source Sans 3.

https://codepen.io/smashingmag/pen/ExQgbvE

Tạo bối cảnh xếp chồng vớiisolate 

Thuộc tính này có thể gây nhầm lẫn cho các nhà phát triển và tôi đã không biết về nó cho đến khi tôi đọc bài viết tuyệt vời của Josh W. Comeau về chủ đề z-indexvà xếp chồng các ngữ cảnh. Nói tóm lại, nó cho phép chúng ta chia ngăn các z-indexngăn xếp của mình.

Có thể bạn đã gặp phải trường hợp, ví dụ, bạn đã thêm thành phần chú giải công cụ có thể sử dụng lại vào trang của mình, chỉ để phát hiện ra rằng phần tử chú giải công cụ có điểm z-indexthấp hơn một số phần tử liền kề khác trên trang, khiến chú giải công cụ hiển thị bên dưới nó. Chúng tôi thường giải quyết nó bằng cách tăng z-indexgiá trị của chú giải công cụ, nhưng điều đó có thể gây ra sự thụt lùi và các vấn đề tương tự ở nơi khác trong các dự án.

Đây chính xác là những gì xảy ra trong ví dụ dưới đây. Chú giải công cụ bị khóa ở trạng thái di chuột cho mục đích demo.

https://codepen.io/smashingmag/pen/ZErpaXX

Hãy xem những gì đang xảy ra ở đây. Một nhà phát triển đã tạo một thành phần tiêu đề theo kiểu có một phần tử trang trí đằng sau nó, như được định nghĩa trong một thiết kế. Nhưng họ đã đi quá đà với z-indexcác giá trị:

  • tiêu đề văn bản có z-index: 2;
  • yếu tố nền trang trí có a z-index: 1.

Thành phần này hoạt động như mong đợi và đã được hợp nhất với một cơ sở mã chính. Sau một thời gian trôi qua, một người khác đã tạo một thành phần chú giải công cụ với một z-index: 1. Không có lý do gì để gán giá trị cao hơn z-index: 1, vì chú giải công cụ cần phải nằm ngay phía trên văn bản. Sau một thời gian, một trường hợp cạnh đã xảy ra khi văn bản tiêu đề cuối cùng ở phía trên chú giải công cụ.

Chúng tôi có thể lộn xộn với z-indexcác giá trị cho thành phần tiêu đề và thành phần chú giải công cụ hoặc gán một z-indexcho các phần tử mẹ tương ứng của chúng position: relativeđể tạo bối cảnh xếp chồng mới, nhưng chúng tôi đang dựa vào các con số kỳ diệu!

Hãy suy nghĩ về vấn đề theo cách khác - điều gì sẽ xảy ra nếu chúng ta có thể tạo ra một bối cảnh xếp chồng mới mà không cần dựa vào z-indexnhững con số kỳ diệu? Đây chính xác là những gì isolation: isolatelàm! Nó tạo ra một bối cảnh xếp chồng mới hoặc một nhóm. Nó yêu cầu trình duyệt không trộn lẫn hai nhóm xếp chồng này, ngay cả khi chúng tôi tăng giá trị tiêu đề lên z-indexgiá trị cao nhất có thể. Vì vậy, chúng tôi có thể giữ các z-indexgiá trị thấp và không phải lo lắng nếu giá trị phải là 2, 10, 50, 100, 999999, v.v.

Hãy tạo một bối cảnh xếp chồng mới ở gốc của thành phần tiêu đề của chúng ta và ở gốc của thành phần chú giải công cụ của chúng ta và xem điều gì sẽ xảy ra.

.title {
  isolation: isolate;
  /* ... */
}

.tooltip-root {
  isolation: isolate;
  /* ... */
}

https://codepen.io/smashingmag/pen/oNEzooJ

Và chúng tôi đã khắc phục sự cố bằng cách cô lập bối cảnh xếp chồng cho hai thành phần xung đột của chúng tôi mà không làm rối tung các con số kỳ diệu cho z-indexcác giá trị.

Ngay cả khi chúng tôi chỉ định một giá trị cao không cần thiết như 99999 cho văn bản tiêu đề, giá trị này sẽ không ảnh hưởng đến một nhóm biệt lập khác - chú giải công cụ vẫn kết thúc phía trên tiêu đề, điều này làm cho các thành phần của chúng tôi thậm chí còn mạnh mẽ hơn và có thể tái sử dụng. ( Bản xem trước lớn )

  • Belmont Uni

Hiển thị Tối ưu hóa Hiệu suất 

Khi nói đến hiệu suất hiển thị, rất hiếm khi gặp phải những vấn đề này khi làm việc với các dự án thông thường. Tuy nhiên, trong trường hợp cây DOM lớn với hàng nghìn phần tử hoặc các trường hợp cạnh tương tự khác, chúng ta có thể gặp một số vấn đề về hiệu suất liên quan đến CSS và kết xuất. May mắn thay, chúng tôi có một cách trực tiếp để giải quyết các vấn đề hiệu suất này gây ra độ trễ, không phản hồi với đầu vào của người dùng, FPS thấp, v.v.

Đây là nơi containthuộc tính xuất hiện. Nó cho trình duyệt biết những gì sẽ không thay đổi trong chu kỳ hiển thị, vì vậy trình duyệt có thể bỏ qua nó một cách an toàn. Điều này có thể gây ra hậu quả về bố cục và phong cách, vì vậy hãy đảm bảo kiểm tra xem thuộc tính này không gây ra bất kỳ lỗi trực quan nào.

.container {
  /* child elements won't display outside of this container so only the contents of this container should be rendered*/
  contain: paint;
{

Tính chất này khá phức tạp và Rachel Andrew đã trình bày rất chi tiết trong bài viết của mình. Tính chất này hơi khó chứng minh, vì nó hữu ích nhất trong những trường hợp cạnh rất cụ thể. Ví dụ: Johan Isaksson đã đề cập đến một trong những ví dụ đó trong bài viết của mình , nơi ông nhận thấy độ trễ cuộn lớn trên Google Search Console. Nguyên nhân là do có hơn 38 000 phần tử trên một trang và đã được khắc phục bằng cách chứa thuộc tính!

Như bạn có thể thấy, containdựa vào việc nhà phát triển biết chính xác các thuộc tính nào sẽ không thay đổi và biết cách tránh các sự thụt lùi tiềm ẩn. Vì vậy, có một chút khó khăn để sử dụng tài sản này một cách an toàn.

Tuy nhiên, có một tùy chọn mà chúng tôi có thể báo hiệu trình duyệt containtự động áp dụng giá trị cần thiết. Chúng tôi có thể sử dụng content-visibilitytài sản. Với thuộc tính này , chúng tôi có thể trì hoãn việc hiển thị nội dung ngoài màn hình và dưới màn hình đầu tiên. Một số thậm chí còn gọi đây là "kết xuất lười biếng".

Una Kravets và Vladimir Levin đã đề cập đến tài sản này trong ví dụ về blog du lịch của họ . Họ áp dụng tên lớp sau cho các phần blog dưới màn hình đầu tiên.

.story {
  content-visibility: auto; /* Behaves like overflow: hidden; */
  contain-intrinsic-size: 100px 1000px;
}

Với contain-intrinsic-size, chúng tôi có thể ước tính kích thước của phần sẽ được hiển thị. Nếu không có thuộc tính này, kích thước của nội dung sẽ là 0và kích thước trang sẽ tiếp tục tăng khi nội dung được tải.

Trở lại với ví dụ về blog du lịch của Una Kravets và Vladimir Levin. Lưu ý cách thanh cuộn nhảy xung quanh khi bạn cuộn hoặc kéo thanh cuộn. Điều này là do sự khác biệt giữa kích thước trình giữ chỗ (ước tính) được đặt với contain-intrinsic-sizevà kích thước hiển thị thực tế. Nếu chúng ta bỏ qua thuộc tính này, các bước nhảy cuộn sẽ thậm chí còn chói tai hơn.

https://codepen.io/smashingmag/pen/jOZMapm

Thijs Terluin đề cập đến một số cách tính toán giá trị này bao gồm PHP và JavaScript. Tính toán phía máy chủ bằng cách sử dụng PHP đặc biệt ấn tượng, vì nó có thể tự động hóa ước tính giá trị trên tập hợp lớn hơn của các trang khác nhau và làm cho nó chính xác hơn đối với một tập hợp con kích thước màn hình.

Hãy nhớ rằng các thuộc tính này nên được sử dụng để khắc phục các sự cố khi chúng xảy ra , vì vậy có thể an toàn bỏ qua chúng cho đến khi bạn gặp phải các vấn đề về hiệu suất hiển thị.

Sự kết luận 

CSS phát triển không ngừng, với nhiều tính năng hơn được thêm vào mỗi năm. Điều quan trọng là phải cập nhật các tính năng mới nhất và các phương pháp hay nhất, nhưng cũng cần chú ý đến hỗ trợ của trình duyệt và sử dụng tính năng nâng cao liên tục.

Tôi chắc chắn rằng có nhiều thuộc tính CSS và bộ chọn không được bao gồm ở đây. Vui lòng cho chúng tôi biết trong phần nhận xét những thuộc tính hoặc bộ chọn nào ít được biết đến hơn hoặc nên được sử dụng thường xuyên hơn, nhưng có thể hơi phức tạp hoặc không có đủ thông tin xung quanh chúng. 

Nguồn: https://www.smashingmagazine.com/2022/05/lesser-known-underused-css-features-2022/

#css 

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Alayna  Rippin

Alayna Rippin

1603188000

Creating a CSS Visual Cheatsheet

The other day one of our students asked about possibility of having a CSS cheatsheet to help to decide on the best suited approach when doing this or that layout.

This evolved into the idea of making a visual CSS cheatsheet with all (most) of the common patterns we see everyday and one of the best possible conceptual implementation for them.

In the end any layout could and should be split into parts/blocks and we see every block separately.

Here is our first take on that and we would be happy to keep extending it to help us all.

Please, send you suggestions in the comments in community or via gitlab for the repeated CSS patterns with your favourite implementation for that so that we will all together make this as useful as it can be.

#css #css3 #cascading-style-sheets #web-development #html-css #css-grids #learning-css #html-css-basics

Aisu  Joesph

Aisu Joesph

1618024175

CSS Alignment Made Simple

CSS is seen as an impediment in web development for many of us. Most of the time it looks like even when you follow the rules and everything seems clear, it still doesn’t work the way you want it to.

Therefore, the purpose of this article is to make some features of CSS much easier to understand.

The thing I want to address now is the alignment of the elements.

Without further ado, here are some of the most common scenarios one might encounter when it comes to this topic and how they can be approached.

#css-center #css-position #css-flexbox #css-center-image-in-a-div #css

This CSS Cut Out Effect is Guaranteed to Blow Your Mind 🤯

This effect is so cool and just fun to see. What it comes down to is having a background image show through the text.

How it works is that we will have a div that will have the image as a background. On that, we put our text element, using blend-mode it will show through the image.

The result you can see and touch on this Codepen.

#css #css3 #html-css #css-grids #learning-css #html-css-basics