simonallen 技術部落格

Sign in Subscribe

CSS

改善網站效能：將 icon 轉為 font 字型

改善網站效能：將 icon 轉為 font 字型

現代網站設計中充滿了各式各樣的 icon，若是自有品牌或產品，設計師更常會為了強化視覺一致性而客製一整套的 icon 圖示。而從我們工程師的角度來看，icon 本質上就是一種圖片，既然是圖片的一種形式，當 icon 使用量一多，自然就會牽涉到與圖片相同的效能問題。為什麼 icon 太多會影響效能？為什麼 icon 太多會影響效能？通常 icon 是以圖片檔案（例如： SVG 或 PNG ）呈現，若網站載入時每個 icon 圖示都會觸發一個 HTTP Request，不僅延長載入時間，一次大量圖片載入會增加 Render 渲染時間或主執行緒負擔。別忘了，Client Browser 的 JavaScript 執行是單執行緒，無論是同步或非同步操作，本質上都還是在爭奪主執行緒資源。如果沒有另外開啟 Web Worker，圖片的下載、解析與渲染過程都會壓在主執行緒上，

用 HTML br 替換 ↵ 換行前先想一想

這篇算是一個隨手紀錄，不要輕易用 <br/> 替換換行 ↵，先想想有沒有其他的方式。起因前陣子在處理前人的 Legacy code，有個情境是使用者在後台頁面輸入文章，前端把其 show 在前台頁面上。當然後端會在需顯示的前台頁面 API 將其(字串)發過來，這個字串不包含 HTML 標籤，可能包含換行符號，為了處理這個狀況，前人寫了個共用 function 來將換行符號替換成 HTML <br/> 標籤，例如： const setTextLineFeed = text => text.replace(/\n/g,'<br/>'); 將後端傳來包含換行符號的字串，先丟進這個 function

React v14 和 v16 Style 行內樣式的雷

昨天在公司遇到 React Style 行內樣式的雷，害我 dubug 了老半天。是這樣的我們公司有兩個 B2C 的網站平台長得很像，差異只在顏色與風格不同，一個網站前端是 React v14，另一個相對新是用 React v16，而兩個網站很多功能都要一樣，所以一個前端元件寫好後要想辦法讓 React 的 14 版和 16 版共用，要到各自不同的專案複製貼上元件程式碼接著微調。通常是舊的不支援新的，於是先改 React v14 的網站，按照該元件既有寫法，行內樣是這樣寫： <div style={{ width: "820", height: "360" }} ></div> 改完後將這個元件貼給 React

IE 議題

前陣子與到各種 IE 問題真的有夠痛苦，實在不理解為什麼都 2019 年了還要支援到 IE9？IE11 就算了，IE9 欸？？IE 有多少使用量不就 GA 報表一看就知道了嗎？主事 PM 不理解 RD 處理 IE 9 的時間都能做其他新功能了，哀抱怨歸抱怨，這裡紀錄一下遇到的問題：問題：HTML 5 的 input placeholder 這個屬性 attribute，要在 IE10 才支援解決：在與 PO 討論後、請資深 RD 與 PO 討論後，請 RD Leader 再和

解決 CSS 困境的 scoped style

在使用Vue Cli開發時，Vue是將每個組件(副檔名.vue)拆封成HTML、CSS、JavaScript三個部分，也就是如下： <template> //這裡寫HTML </template> <script> //這裡寫JavaScript </script> <style> //這裡寫CSS </style> 但這樣就產生了一個問題，假如我在a.vue檔(a組件)寫了一段CSS <style> h2 { color:red; } </style> b.vue檔(b組件)、c.vue檔(c組件)

CSS 重置 resetting 和標準化normalizing 的區別是什麼？

重置 resetting CSS 和 normalizing CSS 的區別是什麼？因為每個瀏覽器預設的樣式都不一樣，也許A瀏覽器預設body是padding 2px、B瀏覽器預設body是padding 4px，但是我需要的是瀏覽器顯示：body的padding 0px，這時就可以使用resetting、normalizing來讓各瀏覽器的css效果，表面上看起來變得相同。當然嚴格來說不是真的變相同，而是把resetting與normalizing作為第一個引入的css，他們覆蓋並統一瀏覽器預設樣式，好讓網頁設計師做其他覆蓋的樣式，在各瀏覽器預設也會相同。先引入resetting、normalizing，在引入自己的CSS，這麼一來個瀏覽器都會相同樣式。 * 重置（Resetting）：重置意味著除去所有的瀏覽器默認樣式。對於頁面所有的元素，像margin、padding、font-size這些樣式全部置成一樣。你將必須重新定義各種元素的樣式。 * 標準化（Normalizing）：標準化沒有去掉所有的默認樣式，而是保留了有用的一部分，同時還糾正了一些常見

block、inline 和 inline-block 有什麼區別？

block、inlineblock和inline這兩個概念是簡略的說法完整的說法應該是block-level elements（塊級元素）和inline elements（內聯元素.block元素通常被現實為獨立的一塊，會單獨換一行內聯元素則前後不會產生換行，一系列內嵌元素都在一行內顯示，直到該行排滿。 * 常見block元素：div，form，table，p，pre，h1〜h6，dl，ol，ul，li等 * 常見inline元素有span，a，i，strong，em，lable，input，select，textarea，img，br等注意：inline不該作為父元素包住block、inline-block。 inline-block 設置了內聯塊屬性的元素既擁有了block元素可以設置寬度和高度的特性，又保持了inline元素不換行的特性。例如圖片<img>標籤 display:block 1. block元素會獨占一行，多個block元素會各自新起一行。