iT邦幫忙

3

關於CSS 偽元素 哪個比較實用

css
.xxx::before
.xxx:before

之前有看過一篇文章說:before的相容性比較好

而::before 動畫&transition IOS不支援(:before有支援嗎?)
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before
VScode預設的快速輸入都是::before

好奇大大們都是用哪個來寫比較多?
兩個寫法差異是?

4
dragonH
iT邦超人 5 級 ‧ 2019-12-24 13:42:44
最佳解答

找到一個應該講得最好的

參考

這篇也不錯

根據這篇

可以推斷

:before 是 css2 的 syntax

::before 是 css3 的 syntax

兩者理論上是指同一個東西

看更多先前的回應...收起先前的回應...
咖咖拉 iT邦研究生 2 級 ‧ 2019-12-24 13:57:45 檢舉

網路上的文章都是說:before 支援IE8 所以相容比較完整
(工作環境不在意IE8 XDD)

不過動畫方面不知道偽類(:before)跟偽元素(::before) 有差異嗎?
上面的docs說::before 不支援IOS的Animation and transition

dragonH iT邦超人 5 級 ‧ 2019-12-24 14:01:59 檢舉

我覺得要分成兩個問題來看

1 .

:before 跟 ::before 是一樣的功能嗎

參考

2 .

如果是的話

ios 不支援

有什麼替代方案嗎?

參考1

參考2

咖咖拉 iT邦研究生 2 級 ‧ 2019-12-24 14:08:51 檢舉

我的話
:before 跟 ::before基本上都差不多
ios 不支援的話只能用js來寫動畫

自答/images/emoticon/emoticon37.gif

因為還沒遇到這方面問題
想先了解可能會遇到的問題
/images/emoticon/emoticon16.gif

dragonH iT邦超人 5 級 ‧ 2019-12-24 14:13:16 檢舉

對阿

看來看去

好像除了支援的問題

不然好像都推薦用 ::before

然後我現在都是寫 vue 跟 react

動畫什麼的

能用 變數控制就用變數控制 /images/emoticon/emoticon37.gif

咖咖拉 iT邦研究生 2 級 ‧ 2019-12-24 14:22:22 檢舉

我的體育老師都說能用CSS來做的
就不要用JS/images/emoticon/emoticon02.gif

dragonH iT邦超人 5 級 ‧ 2019-12-24 14:25:29 檢舉

或許可能有的情況是這樣啦

剛好看到這篇

2
小魚
iT邦大師 1 級 ‧ 2019-12-24 13:29:12

我沒用過 ::before

咖咖拉 iT邦研究生 2 級 ‧ 2019-12-24 13:36:13 檢舉

我也都是用:before
不過我不懂這2個的差異XD

0
majo2013
iT邦新手 4 級 ‧ 2020-01-31 14:56:36

建議你,如果不用考量 ie 8 及其以下的舊版本的話,就用 ::before

2者差別在

:before - 是 css2
::before - 是 css3

是後來為了更細分 偽類 與 偽元素不同 而改的

我要發表回答

立即登入回答