標籤: CSS 頁1
輕量的前端打包工具 parcel.js 安裝教學
近年前端在開發的時候往往都需要使用一些打包工具，方便我們在使用新的開發方式後可以在瀏覽器正常運作，其中最熱門的就是 webpack，但 webpack 本身很大也很複雜，如果想要感受打包工具威力的話，這邊我們可以先使用 parcel.js 這隻打包工具來幫助我們專案的開發。
用 css 讓超出區塊範圍的字變 ...- text-overflow, line-clamp
排版的時候，若文字的長度不一樣，網頁預設會分行，如果後來的行數有的多有的少，版面可能就看起來不整齊，想要讓文字超過區塊長度就自動省落成 ...，我們可以使用 text-overflow 這個屬性。
在 amp-img 使用 object-fit
之前有提過要在 AMP 裡面使用圖片必須要使用 amp-img 的標籤，而且需要給定寬跟高，但在現在很常需要用到裡用把圖片塞入某個區塊內的 object-fit 的方式，就沒辦法直接用了，但還好官方也有提供方法讓我們可以去使用 object-fit，只要在 amp-img 的標籤內加上 layout=fill。
[SCSS] 用預處理器來讓你的 CSS 更好維護
CSS 雖然嚴格說不能是程式，但如果在開發的時候加入一些程式的撰寫方式，是可以讓你的 CSS 更好維護的，而所謂的 CSS preprocessor(預處理器)就是幫我們來做這件事情的，寫起來會跟 CSS 有滿大的不同的，但如果習慣後開發速度跟維護都可以比原本的 CSS 更好，如果原本寫 CSS 就有好習慣的話，用起預處理器就會更加如虎添翼。
CSS 的圖層混合效果- mix-blend-mode 與 background-blend-mode
會 photoshop 的朋友應該都知道我們可以利用圖層混合效果讓圖片疊加的時候更多變化，這個以往需要靠繪圖軟體才能完成的效果，現在利用 CSS3 的 mix-blend-mode 也可以做到囉，要使用這個效果前我們需要先讓東西可以疊在一起，可以使用 html 的巢狀結構或是利用 position 來讓東西疊在一起都可以。
CSS3 的 Grid Layout 介紹與使用範例
CSS 的 grid layout 其實滿有趣的，不同於以往的排版方式是一排排完後接著往下繼續安排內容，grid layout 可以讓你把區塊分配完後，直接把內容填入就好了。
CSS3 的濾鏡效果- filter
CSS3 在有了 filter 這個屬性後，我們就可以很簡單地透過設定來替圖片加上濾鏡效果，也就是不用每次都仰賴像 photoshop 這樣的影像繪圖軟體了。
把 CSS 效能優化- will-change
css3 有一個屬性 will-change，是用來增加 CSS 變化時的效能的，但須注意不要過度使用，可以搭配 js 在適當的時刻使用這個屬性。