使用::before 與 ::after來製作可列印的logo圖片

網頁設計一直以來都存在著一個很多人都遇到的問題,就是LOGO圖片究竟該不該放到HTML原始碼中?若是放在HTML中,那麼HTML原始碼就增 加了一段因為「視覺需要」而添加的原始碼,這跟我們希望把結構與視覺分離的目的是悖離的,倘若放置在CSS中並使用背景圖片的設計方式,則在USER列印 畫面時,由於瀏覽器預設是不列印背景影像與色彩的,所以LOGO將無法被列印出來,長久以來設計師不斷的希望能夠將視覺設計與文件結構分離,使用CSS  &HTML技術可以完美的達到此目的,卻因為瀏覽器預設不會列印網頁的背景色彩與圖片的這個問題,導致網頁設計師在設計上總是有此一矛盾現象,將圖片置入 HTML與不置入HTML的設計師則分成了兩派,且爭論仍舊存在,直到現在Amos有了完美的解決方案。

CSS Clear Fix 小技巧

如果一個X元素內的子元素通通 float: left ,則X元素本身會有什麼狀況?如果要在X元素內下背景,卻沒有顯示,該如何解決?

解決方式就是實作本身 clear-fix,或者是在元素後加上 clear: both 的標籤。

Pure CSS - 超輕量化 CSS Framework

Pure 是 YUI 團隊新推出的開源專案,才推出不久就在 Github 上累積了將近 3800 個 Star 。它是一套非常輕量化的 CSS framework,提供了常用的網頁 UI 元件樣式:Base 、GridFormsButtonsTablesMenus,。Pure 的預設樣式正是正流行的 Flat Design ,開發者可以直接引用 Pure 打底 CSS,快速地建構出跨瀏覽器且具備 Responsive Design 的網站。

相較於各種 CSS/Front-end framework (ex, Bootstrap)動輒 100KB 起跳的 CSS 檔案,Pure 走的是極簡輕量化路線,只提供最通用的 CSS 元件,全部的 CSS 加起來只有 18.7KB (v2.0)!

判斷瀏覽器版本的條件式語法

用條件式+註解,判斷出瀏覽器的版本,讀取對應的內容,解決不同瀏覽器對於 CSS、JavaScript 支援不同的相容性問題。

直書顯示的CSS語法

tb-rl 是直書

選擇器 {writing-mode: tb-rl ;}

lr-tb是橫書

選擇器 {writing-mode: lr-tb ;}