Boggy's blog

月份: 2021 年 6 月

關於CSS權重的筆記

關於權重的計算,在W3C的網頁上的介紹是:

A selector’s specificity is calculated as follows

  • count the number of ID selectors in the selector (= a)
  • count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
  • count the number of type selectors and pseudo-elements in the selector (= c)
  • ignore the universal selector

翻譯一下

  • ID selector的數量為a
  • class, attr, 偽類別為b
  • tag跟偽元素為c
  • 星號直接無視
Continue reading

CSS :is, :where Selector

:is() 跟 :where() 是什麼?

常常在一些情況之下,css selector有可能會需要寫很長,尤其是剛開始在寫sass, scss時,巢狀寫的很開心,結果compile出來的東西有可能會像下面這樣:

而 :is() 跟 :where() 就是用來解決這個問題。在is:() or :where() 中可以帶入逗點分格的selector,讓原本多行且重複的結構簡化為一行:

Continue reading

Nuxt asyncData與fetch的不同

首先是關於this的使用,fetch 中的 this 指的就是component本身,asyncData 的this則是undefined。且fetch可以被component本身用 this.$fetch() 再次呼叫,而asyncData不行。

再來是顯示的效果。server-side render時感覺不出來,不過在client side render時,就有明顯差異。使用asyncData的話,會先取資料,取完資料才換頁。使用fetch的話,取資料前就會先換頁,等到資料取完後,才會填入資料。

Continue reading

Nuxt Server-Middleware

前陣子需要利用server middleware做fb oauth功能,於是我就在middleware資料夾新增了fbauth.js,內容:

結果build完之後,發現clientSecret竟然也一起打包進client端的js裡!!

於是我查了關於如何不將code打包進client side的資料後,就在外面包了一層 if (process.env.VUE_ENV === ‘server’) 如下:

Continue reading

© 2021 Bloggy

Theme by Anders NorenUp ↑