Tag: css
All the articles with the tag "css".
textarea 的 placeholder 未在畫面上正常顯示
Posted on:2024/03/17 01:25:00textarea 的 placeholder 未在畫面上正常顯示,原因是因為 textarea 的內容有換行或者是空白,所以 placeholder 未正常顯示。
ul 預設的樣式被 reset.css 取消,補上 list-style 也沒用
Posted on:2024/03/07 21:00:00ul 的預設樣式被 reset.css 所覆蓋,導致無法顯示項目符號,將 list-style:disc 補上後仍沒有出現,最後發現是 padding 的問題
Nesting CSS - 可以不用預處理器了嗎
Posted on:2023/12/08 08:40:00近期又看到了 Safari 的 Preview 支援了 Nesting CSS 的功能,所以再次比較一下 Nesting CSS 和 SCSS 的差異。但因為瀏覽器的支援截至 2023 年底還不夠完整,所以在短期之內,還是沒辦法完全取代 SCSS 的地位。
object-fit 在 safari 失效問題
Posted on:2023/11/23 18:17:00最近在專案上圖片使用了 object-fit cover 來設定圖片,讓圖片能夠固定尺寸不會導致跑版,從電腦上去 debug 也沒有問題結果被反應了從 safari 上看卻意外的變形,但了一些支援度 can i use 是支援 object-fit 的,後來發現是因為無法取得高度,所以改使用min-height 解決。
瀏覽器上的合成動畫及非同合成動畫
Posted on:2023/04/13 09:17:00合成動畫和非合成動畫對於網頁性能有著不同的影響。在低階手機或執行效能較重任務時,非合成動畫可能會出現卡頓情況,增加頁面的 Cumulative Layout Shift (CLS),進而降低 Lighthouse Performance 的分數。為了避免這種情況,建議使用合成動畫來改變元素的位置、旋轉、縮放或透明度等屬性,並且不會觸發佈局和繪製階段。常用的合成動畫屬性包括 transform、opacity、filter、animation、transition、perspective 和 backface-visibility。此外,可以使用 will-change 屬性來提前告知瀏覽器將要改變的屬性,以減少重新觸發佈局和繪製階段,從而提高效能。然而,過度使用 will-change 屬性可能會降低瀏覽器效能,因此需要注意使用時機和移除不使用的情況。