Bài viết này sẽ giới thiệu tới các bạn Anchor Định vị mới nhất trong đặc tả CSS, tạm dịch là định vị neo.

Sự xuất hiện của Vị trí neo đã làm phong phú đáng kể khả năng của CSS. Mặc dù cú pháp hơi phức tạp nhưng với nó, nhiều chức năng trước đây rất khó triển khai hoặc không thể triển khai bằng CSS thuần túy có thể được thực hiện.

Vị trí neo vẫn là một tính năng trong phòng thí nghiệm và phiên bản Chrome mới sẽ kích hoạt tính năng này:

1. Nhập vào ô nhập URL của trình duyệt: chrome://flags/
2. Tìm tùy chọn tính năng Nền tảng web thử nghiệm và bật tính năng này

Định vị neo là gì?

Vậy Định vị Neo là gì?

Định vị neo được xác định bởi đặc tả Định vị neo CSS.

Xem thêm: Định vị tuyệt đối của CSS cho phép tác giả đặt các phần tử ở bất kỳ đâu trên trang, mà không cần quan tâm đến bố cục của các phần tử khác ngoài khối chứa chúng. Tính linh hoạt này có thể rất hữu ích, nhưng cũng rất hạn chế—thường thì bạn muốn định vị tương đối với một số phần tử khác. Định vị neo (thông qua các hàm neo anchor() và anchor-size()) cho phép tác giả đạt được điều này, "neo" một phần tử được định vị tuyệt đối vào một hoặc nhiều phần tử khác trên trang, đồng thời cho phép họ thử một số vị trí có thể để tìm vị trí "tốt nhất" tránh chồng chéo/tràn.

Nói một cách ngắn gọn thì cốt lõi nằm ở khả năng Định vị neo để nâng cao khả năng định vị tuyệt đối của các phần tử. Định vị neo cho phép chúng ta định vị bối cảnh dựa trên vị trí và kích thước của các phần tử neo khác, thay vì định vị tuyệt đối truyền thống dựa trên phần tử gốc.

Toàn bộ nội dung Định vị mỏ neo là gì? Những điểm chính được tóm tắt như sau:

1. Đầu tiên, định vị neo yêu cầu chúng ta chuyển tên neo mới ( tên neo ) để đánh dấu các phần tử, cho phép chúng tôi sử dụng các phần tử được đánh dấu này làm mục tiêu cơ bản để định vị tuyệt đối;
2. Thứ hai, chúng ta có thể sử dụng cú pháp mới trên các phần tử được định vị tuyệt đối neo() hoặc kích thước neo() Để neo các phần tử được đánh dấu ở trên và bạn có thể sử dụng các thuộc tính tương ứng của các phần tử được đánh dấu (như trên, trái, phải, dưới, v.v. của các phần tử được đánh dấu)
3. Ngoài ra, còn có một số cách sử dụng nâng cao hơn, chẳng hạn như cơ chế Dự phòng của định vị neo, nghĩa là có thể đặt nhiều bộ quy tắc định vị neo khác nhau để thích ứng với các bố cục trang phức tạp hơn.

Dưới đây, chúng tôi sử dụng ví dụ đơn giản nhất để nhanh chóng hiểu định vị điểm neo là gì.

Giả sử chúng ta có cấu trúc mã sau:

                        
                          .g-container { vị trí: tương đối; chiều rộng: 50vw; chiều cao: 50vh; đường viền: 2px solid #666; hiển thị: flex; .g-anchor-element { chiều rộng: 25vw; chiều cao: 25vh; đường viền: 2px đứt nét #333; lề: tự động; } .g-use-anchor { vị trí: tuyệt đối; chiều rộng: 20px; chiều cao: 20px; nền: #fc0; bán kính đường viền: 50%; } }

                        
                      

Toàn bộ hiệu ứng sẽ như thế này:

Chúng ta cần giải thích ngắn gọn cấu trúc này:

Điều này rất dễ hiểu. Lưu ý rằng tại thời điểm này, .g-use-anchor được định vị so với vùng chứa .g-container chính của nó vì nó được định vị tuyệt đối.

Trong trường hợp trên, Định vị neo cho phép chúng ta thay đổi phần tử tham chiếu định vị tuyệt đối của .g-use-anchor, cho phép nó không còn được định vị tương đối với vùng chứa chính trong định vị tuyệt đối mà liên quan đến cài đặt Phần tử neo. với tên neo được xác định để định vị.

Vì vậy, bên dưới, chúng tôi cố gắng biến .g-anchor-element thành phần tử neo.

Mã này như sau:

                        
                          .g-container { vị trí: tương đối; chiều rộng: 50vw; chiều cao: 50vh; đường viền: 2px solid #666; hiển thị: flex; .g-anchor-element { chiều rộng: 25vw; chiều cao: 25vh; đường viền: 2px đứt nét #333; lề: tự động; tên neo: --target; } .g-use-anchor { vị trí: tuyệt đối; chiều rộng: 20px; chiều cao: 20px; nền: #fc0; bán kính đường viền: 50%; trên cùng: neo(--target trên cùng); bên trái: neo(--target bên trái); } }

                        
                      

Những thay đổi nào đã được thực hiện đối với đoạn mã trên?

1. chúng tôi cho .g-phần tử neo Đã thêm mã CSS, tên neo: --target , có nghĩa là đặt phần tử này làm phần tử neo và tên của nó là --mục tiêu 。
2. hiện hữu .g-sử dụng-neo , hai dòng mã mới đã được thêm vào

• trên cùng: neo(--mục tiêu trên cùng) : Điều này có nghĩa là gì, hãy sử dụng tên làm --mục tiêu Phần tử neo được sử dụng làm tham chiếu định vị và phần trên cùng (trên cùng) của phần tử được căn chỉnh với phần trên cùng (trên cùng) của phần tử neo
• trái: neo(--mục tiêu bên trái) :Tương tự, sử dụng tên như --mục tiêu Phần tử neo được sử dụng làm tham chiếu định vị và phía bên trái (trái) của phần tử được căn chỉnh về phía bên trái (trái) của phần tử neo.

Bằng cách này, chúng ta có được hiệu ứng như vậy:

Tức là có mối quan hệ như sau:

Để có mã hoàn chỉnh, bạn có thể nhấp vào đây: CodePen Demo - Anchor Định vị Demo.

Đến đây, nếu thông minh, bạn sẽ có thể hiểu sâu sắc ý nghĩa của câu chúng tôi nói ở trên:

Định vị neo Khả năng nâng cao vị trí tuyệt đối của các phần tử. Định vị neo cho phép chúng ta định vị bối cảnh dựa trên vị trí và kích thước của các phần tử neo khác, thay vì định vị tuyệt đối truyền thống dựa trên phần tử gốc.

Định vị mỏ neo Thực hành định vị mỏ neo--định vị hộp bật lên

Có thể nói, nhiều chức năng trước đây không thể đạt được bằng CSS đã mở ra một bước ngoặt mới nhờ Anchor Định vị.

Đầu tiên, hãy xem xét một điểm chức năng như vậy Trang của chúng tôi có nhiều Cửa sổ bật lên hoặc Chú giải công cụ bật lên khi cần Di chuột, như thế này:

Mỗi khi bạn di chuột, vị trí của hộp bật lên thực sự cần được tính toán theo thời gian thực thông qua JavaScript. Nhưng với Định vị neo, chúng ta có thể đặt mọi phần tử cần bật lên hộp bật lên khi di chuột đến phần tử neo và hộp bật lên của chúng ta chỉ cần dựa trên phần tử neo hiện tại khi di chuột.

Nghe có vẻ phức tạp, hãy thử xem:

                        
                          
 Điều quan trọng là khách hàng phải tuân thủ quy trình hấp thụ. Hơn nữa, phải làm, và họ mắc phải một số lỗi nào đó, họ đã cố gắng thoát khỏi chúng với niềm vui từ chối lựa chọn phạm tội nặng nề, chứ không phải của những người tố cáo! Ai, vất vả. Khách hàng rất thông minh, anh ta sẽ được công ty quảng cáo theo dõi. Nếu bạn thấy lỗi của việc làm theo lợi ích, thì đó chính là sự tha thứ, hoặc, như thể một số trưởng lão nhất định bị phát hiện, bằng cách chối bỏ nỗi đau, có những người không nỗ lực mở ra bất cứ điều gì. 

                        
                      

Trong phần tử

, văn bản được gói trong là phần tử hiển thị nội dung khi cần Di chuột.

                        
                          
p { vị trí: tương đối; khoảng { màu: hồng đậm; } &::trước, &::sau { vị trí: tuyệt đối; chuyển tiếp: 0; độ mờ đục: 0; } &::trước { nội dung: ""; trên cùng: calc(anchor(var(--target) top) + 10px); bên trái: calc(anchor(var(--target) left) + 5px); đường viền: 8px solid trong suốt; đường viền dưới cùng: 8px solid #000; } &::sau { nội dung: "Mẹo cảnh báo!"; chiều rộng: 80px; đệm: 2px 4px; cỡ chữ: 14px; nền: #fff; đường viền: 2px solid #000; trên cùng: calc(anchor(var(--target) top) + 24px); bên trái: anchor(var(--target) left); bên phải: anchor(var(--target) right); } } p span:nth-child(1) { tên neo: --anchor-1; } p span:nth-child(2) { tên neo: --anchor-2; } p span:nth-child(3) { tên neo: --anchor-3; } p span:nth-child(4) { tên neo: --anchor-4; } p:has(span:nth-child(1):hover) { --target: --anchor-1; } p:has(span:nth-child(2):hover) { --target: --anchor-2; } p:has(span:nth-child(3):hover) { --target: --anchor-3; } p:has(span:nth-child(4):hover) { --target: --anchor-4; } p:has(span:hover)::before, p:has(span:hover)::after{ độ mờ đục: 1; }

                        
                      

Code ở đây hơi dài, mình giải thích ngắn gọn nhé:

1. vượt qua

   Hai phần tử giả của phần tử ::trước Và ::sau đó , nhận ra khung của hộp bật lên và một hình tam giác nhỏ

2. cho mỗi người Tất cả chúng đều được thiết lập dưới dạng điểm neo, đó là đoạn mã sau: p span:nth-child(1) {tên-neo: --anchor-1;}
3. Chìa khóa ở đây, hãy tận dụng nó :có Bộ chọn, thực hiện khi được di chuột, sau đó thiết lập --mục tiêu Biến là phần tử hiện tại tên neo , nghĩa là sự biến đổi động của phần tử neo được thực hiện
4. Cuối cùng, chúng ta chỉ cần tạo hộp bật lên (tức là hai phần tử giả) dựa trên --mục tiêu Chỉ cần định vị nó và --mục tiêu Phần tử là phần tử văn bản mà chúng ta di chuột mỗi lần nên hộp bật lên cũng đạt được khả năng định vị động.

Để bổ sung kiến ​​thức, bộ chọn :has cung cấp cho CSS khả năng ngụy trang bộ chọn cha. Bộ chọn này được sử dụng để chọn các phần tử cha có chứa các phần tử con được chỉ định. có chứa trạng thái lớp giả được chỉ định Khả năng thực hiện chuyển đổi động của --target.

Bằng cách này, chúng tôi đã thực hiện thành công các chức năng trên:

Tất nhiên ở đây chúng ta cần tiếp tục bổ sung thêm những kiến ​​thức cơ bản dựa trên phương thức Anchor(). Giá trị của phương thức Anchor() cũng có thể được sử dụng với calc.

• trên cùng: calc(anchor(var(--target) top) + 10px) : Căn chỉnh phần trên cùng (trên cùng) của phần tử bật lên với phần trên cùng (trên cùng) của phần tử neo, cộng thêm 10px khoảng cách hướng lên trên
• bên trái: calc(anchor(var(--target) bên trái) + 5px) : Căn chỉnh cạnh trái (trái) của phần tử bật lên với cạnh trái (trái) của phần tử neo, cộng thêm 5px khoảng cách trái

Ngoài ra, nếu có 100 trong trang, đoạn mã sau sẽ là cơn ác mộng khi phải làm việc lặp đi lặp lại:

                        
                          p span:nth-child(1) { tên-neo: --anchor-1; } p span:nth-child(2) { tên-neo: --anchor-2; } p span:nth-child(3) { tên-neo: --anchor-3; } p span:nth-child(4) { tên-neo: --anchor-4; } p:has(span:nth-child(1):hover) { --target: --anchor-1; } p:has(span:nth-child(2):hover) { --target: --anchor-2; } p:has(span:nth-child(3):hover) { --target: --anchor-3; } p:has(span:nth-child(4):hover) { --target: --anchor-4; }

                        
                      

Do đó, chúng ta cần đơn giản hóa mã với sự trợ giúp của SCSS/SASS/LESS và các quá trình tiền xử lý khác, ví dụ:

                        
                          @for $i từ 1 đến 100 { p:has(span:nth-child(#{$i}):hover) { --target: --anchor-#{$i}; } p span:nth-child(#{$i}) { anchor-name: --anchor-#{$i}; } }

                        
                      

Việc sử dụng đúng các chức năng như vòng lặp tiền xử lý có thể cải thiện hiệu quả mã hóa của chúng tôi một cách hiệu quả.

OK, để có mã hoàn chỉnh, bạn có thể nhấp vào đây:

Bản demo CodePen -- Bản demo định vị neo.

Định vị neo Thực hành định vị neo--Hiệu ứng theo sau chuyển đổi tab

Được rồi, chúng ta hãy tiếp tục với một bài tập thực tế thú vị khác.

Dựa trên Định vị neo, liệu chúng ta có thể đạt được hiệu ứng gạch chân sau như vậy khi chuyển TAB không?

Loại hiệu ứng này trước đây chắc chắn phải có sự can thiệp của JavaScript. Cách đây rất lâu, tôi đã thử sử dụng CSS để đạt được hiệu ứng tương tự: hiệu ứng gạch dưới thanh điều hướng CSS đáng kinh ngạc, nhưng có nhiều sai sót trong hiệu ứng:

Với Định vị neo, chúng ta sẽ có thể nhận ra một cách hoàn hảo hiệu ứng gạch chân theo sau trong quá trình chuyển đổi Tab.

Giả sử cấu trúc TAB của chúng ta như sau:

                        
                          
 
下
 
划
 
线
 
跟
 
随
 
动
 
画
 

                        
                      

Quy trình cốt lõi của nó rất giống với quy trình hộp bật lên ở trên:

1. Gạch chân qua
   Triển khai phần tử giả của phần tử
2. cho mỗi người
Tất cả được đặt làm điểm neo
4. lợi dụng :có Bộ chọn, được triển khai khi có bất kỳ
được di chuột, sau đó thiết lập --mục tiêu Biến neo là hiện tại
phần tử, thực hiện chuyển đổi động của các phần tử neo
7. Cuối cùng, chúng ta chỉ cần định vị phần gạch chân dựa trên điểm neo động, là phần tử li của Hover mỗi lần. Sau đó, hộp bật lên cũng sẽ nhận ra vị trí động của phần gạch chân.
8. gạch chân bên trái Đặt hiệu ứng chuyển tiếp chuyển tiếp , để đạt được hiệu ứng hoạt hình sau

Chúng ta hãy xem mã có vẻ phức tạp và số lượng mã rất nhỏ:

                        
                          ul { vị trí: tương đối; chiều rộng: 700px; hiển thị: flex; li { flex-grow: 1; } &::before { vị trí: tuyệt đối; nội dung: ""; chiều cao: 5px; nền: trong suốt; dưới cùng: 0; trái: neo(var(--target) trái); phải: neo(var(--target) phải); chuyển tiếp: .3s tất cả; biến đổi: scaleX(5); } } ul:hover::before { nền: #000; biến đổi: scaleX(1); } @for $i từ 1 đến 8 { ul:has(li:nth-child(#{$i}):hover) { --target: --anchor-#{$i}; } li:nth-child(#{$i}) { tên neo: --anchor-#{$i}; } }

                        
                      

Bạn cần hiểu mã này một cách cẩn thận. Bản chất của nó là khi di chuột, hãy sử dụng :has để thay đổi linh hoạt phần tử neo --target, sao cho độ rộng của phần gạch chân do phần tử giả triển khai được đặt thành chiều rộng của điểm neo.

Hơn nữa, một thay đổi từ Transform:scaleX(5) đến Transform:scaleX(1) trong quá trình di chuột cũng được thêm vào đây, tức là việc xóa nó sẽ không ảnh hưởng đến hiệu ứng cuối cùng.

Tất nhiên, vòng lặp SCSS cũng được sử dụng để giảm số lượng mã. Hiệu ứng cuối cùng như trong ảnh Gif ở trên:

Hơn nữa, nó có thể thích ứng với nhiều tình huống khác nhau của bố cục đàn hồi Flex.

Bằng cách này, chúng tôi đã đạt được một chức năng mà chúng tôi chưa bao giờ tưởng tượng có thể được triển khai độc lập bằng CSS. Để có mã hoàn chỉnh, bạn có thể nhấp vào đây: CodePen Demo - Anchor Định vị Demo.

khả năng tương thích

OK, chắc hẳn mọi người rất quan tâm đến khả năng tương thích của một tính năng mạnh mẽ như vậy.

Hiện tại, Định vị neo vẫn đang ở phiên bản đầu tiên và tôi thậm chí không thể kiểm tra tính tương thích của nó trên mục Tôi có thể sử dụng không:

Tuy nhiên, Chrome 115.0.5790.102 tôi hiện đang sử dụng có thể chạy qua tất cả các mã trên.

Vị trí neo vẫn là một tính năng trong phòng thí nghiệm và phiên bản Chrome mới sẽ kích hoạt tính năng này:

1. Nhập vào ô nhập URL của trình duyệt: chrome://flags/
2. Tìm tùy chọn tính năng Nền tảng web thử nghiệm và bật tính năng này

Hơn nữa, Anchor Định vị còn có rất nhiều ngữ pháp và kỹ năng thực hành thú vị chưa được đề cập trong bài viết này. Tôi sẽ bổ sung thêm một bài viết hướng dẫn chi tiết hơn sau khi khả năng tương thích của Anchor Định vị trở nên rõ ràng hơn. Tất cả những gì tôi có thể nói là tương lai đầy hứa hẹn.

cuối cùng

Thôi, bài viết này kết thúc ở đây, hy vọng nó có ích cho bạn.

Các bài viết kỹ thuật CSS thú vị hơn được tóm tắt trong Github của tôi -- iCSS, sẽ được cập nhật liên tục. Vui lòng nhấp vào một ngôi sao để đăng ký và thu thập nó.

Nếu còn thắc mắc hay góp ý gì các bạn có thể trao đổi thêm. Đây là bài viết gốc, lối viết còn hạn chế, kiến ​​thức còn nông cạn. Nếu có gì sai sót mong các bạn thông cảm.

Bài viết cuối cùng là về quyền truy cập sớm! Đó là nội dung của bài viết này về định vị neo AnchorPositioning siêu mạnh nếu bạn muốn biết thêm về quyền truy cập sớm! Để có nội dung AnchorPositioning siêu mạnh, vui lòng tìm kiếm các bài viết của CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .