偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

CSS錨點定位終于來了!

開發(fā) 前端
最近 ??Chrome 125???終于迎來了??CSS?? 錨點定位的正式支持。這是一個和 ??CSS?? 滾動驅(qū)動動畫一樣,足以顛覆整個 ??Web?? 開發(fā)領(lǐng)域的新特性。有了這個特性,很多以前強依賴?? JS?? 的方式,都可以純 ??CSS??解決,并且實現(xiàn)起來更加簡單、更加靈活,一起看看吧

盼了好久,最近 Chrome 125終于迎來了CSS 錨點定位的正式支持。這是一個和 CSS 滾動驅(qū)動動畫一樣,足以顛覆整個 Web 開發(fā)領(lǐng)域的新特性。有了這個特性,很多以前強依賴 JS 的方式,都可以純 CSS解決,并且實現(xiàn)起來更加簡單、更加靈活,一起看看吧!

一、快速了解 CSS 錨點定位

在過去,要實現(xiàn)一個元素定位,通常需要一個相對定位。比如這樣一個 tooltip。

如果不借助 JS,讓這個氣泡位于按鈕的正上方,就只能約束HTML結(jié)構(gòu),讓這個氣泡位于按鈕內(nèi)部。

<button>
  BUTTON
  <tooltip>我是tooltip</tooltip>
</button>

并且設(shè)置按鈕為相對定位,才能通過絕對定位實現(xiàn)氣泡位于按鈕的正上方。

button{
  position: relative;
}
tooltip{
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%)
}

雖然可以實現(xiàn),但是局限性很多。比如HTML要求嚴格,只能是嵌套結(jié)構(gòu),換種結(jié)構(gòu)就不行了,還有,如果父級有超出隱藏的樣式,這個氣泡也會被裁剪掉。因此,一般框架里不會采用這種 CSS實現(xiàn),都是通過JS動態(tài)去獲取位置來實現(xiàn)的。

現(xiàn)在有了CSS錨點定位特性,一切都好辦了。

首先是對結(jié)構(gòu)無任何要求,可以是頁面上的任意地方的元素。

<button>BUTTON</button>
<tooltip>我是tooltip</tooltip>

由于沒有嵌套關(guān)系,所以我們要手動的指定一下(不然誰知道該怎么定位呢?),這里是通過anchor-name和position-anchor將兩個元素關(guān)聯(lián)(錨定)起來,如下:

button{
  anchor-name: --anchor-el;
}
tooltip{
  position: absolute;
  position-anchor: --anchor-el;
}

最后,再設(shè)置定位就行了,關(guān)鍵實現(xiàn)如下:

tooltip{
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%)
}

這樣就能實現(xiàn)任意兩個元素的錨定了。

你也可以訪問以下在線鏈接(Chrome 125+)

  • CSS anchor (codepen.io)[1]

是不是非常靈活呢?不過這里出現(xiàn)了一些從未見過的屬性和方法,下面再來具體介紹。

二、CSS 錨點定位語法詳解

為了實現(xiàn)這樣一個功能,CSS新推出了很多屬性和方法,如下:

1. 錨點的設(shè)置與引用 anchor-name、position-anchor

這個前面已經(jīng)用到了,主要是anchor-name和position-anchor兩個屬性,他們倆用一個唯一的標識符鏈接起來。需要注意的是,這個標識符必須要以雙短橫線開頭,和 CSS 變量名是一樣的,其他的則無效。

button{
  anchor-name: anchor-el; /*屬性值無效*/
}
button{
  anchor-name: --anchor-el;
}
tooltip{
  position: absolute;
  position-anchor: --anchor-el;
}

你可以理解為把設(shè)置anchor-name的元素當做是以前的相對定位元素(錨點元素),而設(shè)置position-anchor的元素就當成普通絕對定位元素就行了。

另外,如果標識符有重復(fù),比如有多個button,都是相同的anchor-name,那么會以最后一個為準。

2.錨點的位置表示 anchor()

前面說了,設(shè)置position-anchor的元素可以當做是普通的絕對定位。既然是定位,那就需要設(shè)置坐標,比如left和top值。由于不是固定的值,為了,這里又推出了一系列定位函數(shù),如下:

anchor(left)
anchor(center)
anchor(right)
anchor(top)
anchor(bottom)

比如anchor(left)表示錨定元素的最左側(cè),anchor(top)表示錨定元素的最上側(cè),依次類推,下面是一張示意圖。

值得注意的是,anchor(center)表示既可以表示水平居中,也可以表示垂直居中,這是由使用方式?jīng)Q定的。

top: anchor(center); /*垂直居中*/
left: anchor(center); /*水平居中*/

回到上一章的例子,我們要實現(xiàn)一個朝上居中的氣泡,所以定位元素的bottom要剛好處于錨定元素的上方,然后水平方向上是常用的居中方式,先定位到中間,然后反向位移自身的一半,具體實現(xiàn)如下:

tooltip{
  bottom: anchor(top);
  left: anchor(center);
  transform: translateX(-50%)
}

水平方向的居中看著不是特別優(yōu)雅,而且還占用了transform,可能不是特別靈活,下面來看另一個實現(xiàn)。

3. 錨定居中 anchor-center

上面水平居中用到了left和transform來實現(xiàn),其實還有新的實現(xiàn)方式,那就是anchor-center,不過這需要配合justify-self和align-self使用。

比如要水平居中,可以直接使用。

tooltip{
  bottom: anchor(top);
  justify-self: anchor-center;
}

如果要垂直居中,可以用align-self。

tooltip{
  right: anchor(left);
  align-self: anchor-center;
}

示意如下:

4. 更人性化的定位方式 inset-area

你可能在大部分組件庫都用過類似這樣的定位方式,例如Ant Design,一般是12個方位。

是不是比較好理解?一看就懂,比前面的left、top方式要簡單的多了。

沒錯,錨點定位也支持類似的定位方式,引入了一種新型的定位系統(tǒng)叫做:inset-area。

這個方式比前面的實現(xiàn)更加便捷、更加靈活,它將錨定元素分成九宮格,并且考慮了各個位置的可擴展性,一共有 20 種可能組合,如下:

inset-area: top; /* 居上,無尺寸限制 */
inset-area: top center; /* 居上并且不超過錨定元素尺寸 */
inset-area: top span-left;  /* 居上并且左邊可以擴展 */
inset-area: top span-right;  /* 居上并且右邊可以擴展 */
inset-area: left;
inset-area: left center;
inset-area: left span-top;
inset-area: left span-bottom;
inset-area: bottom center;
inset-area: bottom span-left;
inset-area: bottom span-right;
inset-area: bottom;
inset-area: right center;
inset-area: right span-top;
inset-area: right span-bottom;
inset-area: right;
inset-area: top left; /* 左上角 */
inset-area: top right; /* 右上角 */
inset-area: bottom left; /* 右下角 */
inset-area: bottom right; /* 右下角 */

看著是不是有點太多了,也有點暈,其實這里多了 8 種不常用的,下面做了一個示意圖,可以很清楚的看到每種方位的具體位置(虛線部分就是常見的12種方位)。

以上截圖修改來源于:https://anchor-tool.com。

回到前面第一章的例子,要實現(xiàn)居上垂直居中,其實可以一行代碼搞定。

tooltip{
  inset-area: top;
}

是不是又精簡了許多呢?

5. 錨點尺寸 anchor-size

有時候,我們可能還需要知道錨定元素的尺寸,比如這樣的場景

可以看到,在切換tab時,底下的背景是可以無縫過渡的。在以前,我們要實現(xiàn)這樣的功能,必須要借助 JS來獲取當前點擊元素的尺寸和位置,但現(xiàn)在,只需要借助 CSS 錨點定位就能輕松實現(xiàn)了。

位置信息前面以及提到了,用anchor(left)和anchor(top)就可以了,那尺寸呢,需要用到anchor-size。

anchor-size(width) /*錨點元素寬度*/
anchor-size(height)  /*錨點元素高度*/

利用這個特性,我們可以很輕松的實現(xiàn)這樣一個效果,結(jié)構(gòu)如下:

<nav class="tab">
  <a class="item" href="#HTML" name="HTML">HTML</a>
  <a class="item" href="#CSS" name="CSS">CSS</a>
  <a class="item" href="#JavaScript" name="JavaScript">JavaScript</a>
  <a class="item" href="#React" name="React">React</a>
  <a class="item" href="#Vue" name="Vue">Vue</a>
</nav>

我們用偽元素來當做tab高亮背景,關(guān)鍵實現(xiàn)如下:

.tab::after{
  content: '';
  position: absolute;
  border-radius: 100px;
  background-color: rgba(65, 105, 225, 0.2);
  position-anchor: --anchor-el;
  width: anchor-size(width);
  height: anchor-size(height);
  left: anchor(left);
  top: anchor(top);
  transition: .3s;
  pointer-events: none;
}
.item:target{
  anchor-name: --anchor-el;
}

這樣就能輕松實現(xiàn)這個效果了,你也可以訪問以下在線鏈接(Chrome 125+)

  • CSS anchor nav (codepen.io)[2]


6. 動態(tài)調(diào)整位置 position-try-options

有時候定位元素會處于屏幕邊緣,當沒有足夠空間顯示時,可以通過position-try-options來設(shè)置一個備用位置。

舉個例子,比如一個氣泡,默認是朝上的,當滾動到屏幕邊緣時會自動朝下,示意如下:

這種情況就可以用@position-try來實現(xiàn)了,具體做法是這樣的。

先通過position-try-options指定一個變量名,比如--bottom。

tooltip{
      position: fixed;
      position-anchor: --anchor-el;
      inset-area: top;
      position-try-options: --bottom;
}

然后通過@position-try來定義規(guī)則。

@position-try --bottom {
  inset-area: bottom;
}

這樣就實現(xiàn)定位元素位置自動調(diào)整了。

除此之外,還有一種便捷寫法,直接給position-try-options指定以下關(guān)鍵字。

position-try-options: flip-block; /*垂直翻轉(zhuǎn)*/
position-try-options: flip-inline; /*水平翻轉(zhuǎn)*/

這樣就無需@position-try定義了,實現(xiàn)更簡單。

  • CSS anchor position-try-options (codepen.io)[3]

當然,我覺得這個功能還是稍顯不足的,比如當氣泡帶有箭頭時,雖然也能翻轉(zhuǎn),但是卻無法改變箭頭的位置,也就是無法查詢到當前是否已經(jīng)翻轉(zhuǎn)了,就像這樣。

希望盡快解決吧~

三、和 popover 配合使用

畢竟popover只是解決了層級的問題,而錨點定位解決了定位問題。兩者結(jié)合,我們可以很輕松的實現(xiàn)各種常見的效果,已經(jīng)可以說能夠完全替代主流框架中的popover組件了。

下面是一個功能完善的多級菜單,完全無需 JS即可實現(xiàn)。

首先是點擊出現(xiàn),這個就是popover的功能了,通過popovertarget和popover屬性,將兩者結(jié)合起來,就能輕松實現(xiàn)點擊出現(xiàn)菜單的功能。

<button class="btn" popovertarget="more"></button>
<div class="menu" id="more" popover>
  <button class="item">編輯</button>
  <button class="item">刪除</button>
</div>

然后就定位,利用CSS錨點定位,將菜單定位到按鈕的右下方,也就兩三行代碼的事。

.btn{
  anchor-name: --menu;
}
.menu{
  position-anchor: --menu;
  inset-area: bottom span-right;
}

這樣就能輕易實現(xiàn)懸浮菜單了,你也可以訪問以下在線鏈接(Chrome 125+)

  • CSS anchor menu (codepen.io)[4]

在codepen上找到了一個更完善的多級菜單案例。

https://codepen.io/jh3y/pen/dyLjbwG

四、總結(jié)和其他

介紹了這么多,一下子肯定難以接受,多回顧幾遍就明白了,至少可以知道錨點定位是干嘛的,如果以后有類似的需求也有一定的方向,下面總結(jié)一下本文要點

  • CSS 錨點定位是一個顛覆性的新特性,一定要學會
  • CSS 錨點定位可以設(shè)置任意元素相對任意元素做定位
  • 主要是通過anchor-name和position-anchor兩個屬性關(guān)聯(lián)
  • 錨點的位置用anchor()來定義,比如anchor(left)表示錨定元素的最左側(cè),anchor(top)表示錨定元素的最上側(cè)
  • anchor-center可以實現(xiàn)居中定位,水平居中justify-self: anchor-center,垂直居中align-self: anchor-center
  • inset-area是一種更人性化的定位方式,和常見的組件庫表示方位比較類似
  • 還可以通過 anchor-size來錨點元素的尺寸,anchor-size(width)表示寬度,anchor-size(height)表示高度
  • position-try-options可以根據(jù)定位元素是否處于屏幕邊緣而自適應(yīng)定位方向
  • 實際中更推薦和popover相互配合,可以輕松實現(xiàn)各類懸浮層效果
  • 兼容性要求 Chrome 125+,期待早日使用吧

最近幾年CSS更新的確實有點太快了,很多以往的疑難雜癥都有了新的解決方式。但是很多時候?qū)W這些好像暫時沒啥用,畢竟可能 5 年以后才用得上。但是原生特性不像其他,一個框架兩三年就有可能被淘汰,或者有新的替代品出現(xiàn),原生的學到了就學到了,只要web存在的一天,就永遠都不會過時,所以也不虧是吧。

[1]CSS anchor (codepen.io): https://codepen.io/xboxyan/pen/dyEVVPb。

[2]CSS anchor nav (codepen.io): https://codepen.io/xboxyan/pen/zYQpvqg。

[3]CSS anchor position-try-options (codepen.io): https://codepen.io/xboxyan/pen/dyEJYRO。

[4]CSS anchor menu (codepen.io): https://codepen.io/xboxyan/pen/qBGpOKq。

責任編輯:姜華 來源: 前端偵探
相關(guān)推薦

2023-02-13 09:31:07

CSS前端

2025-02-26 09:18:43

2024-05-23 10:34:15

CSS 3CSS技術(shù)

2022-09-29 12:20:48

CSS容器查詢

2025-06-06 08:13:47

2009-10-22 08:50:33

Windows 7上市新聞

2013-07-12 09:59:58

Android 5.0

2017-04-17 09:01:39

科技新聞早報

2023-05-29 08:38:56

popover控制懸浮層

2024-08-15 11:37:05

2021-04-20 08:03:26

單播協(xié)議TCP

2021-10-22 15:45:32

開發(fā)技能React

2013-08-28 10:27:14

騰訊云百度云

2019-05-14 09:00:54

Linux 系統(tǒng) 數(shù)據(jù)

2023-10-25 16:06:29

iOS 18ChatGPT

2024-01-30 00:09:29

iOS 17.3蘋果

2024-04-03 14:53:05

iOS 17.5側(cè)載

2023-03-03 07:34:05

2024-04-28 09:01:06

React 19更新前端

2009-10-19 14:15:24

TreeView節(jié)點定
點贊
收藏

51CTO技術(shù)棧公眾號