Category: css

0 14,057
跟同事討論到一個需求，要在顯示文章的網頁實現「標題只有一行時置中顯示；若文字較多折行時則靠左對齊」的效果。起初程序員大腦想到的做法是用 JavaScript 依文字長度動態調整 text-align 樣式，但由於折行與否是瀏覽器依字型大小、容器寬度自行裁量，難以依據字數直接推算，於是我開始揣摩由...

3 18,267
我習慣將 Chrome 標準字型設成思源黑體字型， 除非網頁硬將 font-family 指定成細明體(例如: Mobile01)，換了字型讓網頁質感變好，比新細明體賞心悅目許多。 Pocket 是我慣用的稍後再讀服務，在 FB 或爬文時看到不急著看但值得花時間讀的相關文章，我會先丟進 Q...

2 11,108
CSS 的 text-overflow: ellipsis 刪節號效果可讓長度不一的文字等寬顯示，遇到版面空間有限又必須整齊排列時很好用，但套用刪節號樣式後看不到完整文字，尤其遇上文字前半截相同時更是難以區別，是一大困擾。為此，我的慣用解法是為套用 ellipsis 的文字元素加上 title ...

4 8,822
不久前接到Google Webmaster Tool通知，說我的網站有超過2000個網頁不利行動瀏覽，造成智慧型手機使用者閱讀困難。登入網站管理員工具一看，冒出一個行動裝置可用性報表。嘖，幾乎所有的網頁都不及格！問題包括字型過小、觸控元素距離太近不易點擊、未設定檢視點（ViewPort）、未依檢...

0 23,866
在同事專案發現好物－FontAwesome！ 用字型檔配合CSS顯示圖示已非新鮮事（例如：Kendo UI、Bootstrap），但看過Font Awesome的威力展示，還是不禁讚嘆，真的好厲害！ 除了圖示數量多（完整圖示清單可參考官網），Font Awesome最強大之處，在於只用CSS...

0 5,339
在WebEssentials套件加持之下，Visual Studio 2013可以直接編修SCSS，每次存檔自動編譯出css、min.css及.map，非常方便。但初心者如我，寫錯語法在所難免，一旦造成SCSS無法編譯，Output視窗只會看到somethine went wrong、compi...

4 8,339
改用SCSS後，我在本機測試調整CSS的流程變成：瀏覽器F12開發者工具檢視CSS樣式 –> 回Visual Studio 2013調整SCSS –> SCSS存檔（VS2013編譯產生CSS）—> 瀏覽器重新載入網頁檢視修改結果。由於SPA（Single Page Appli...

0 6,636
前篇文章提到用float: left解決inline-block元素間隙問題，感謝保哥提醒，發現我忘了提到它的副作用，設定float: left或float:right之後，後方元素必須明確宣告clear:float/right/both清除浮動設定以免繼續受影響。例如，沿用前文範例，後方再加一...

0 5,046
接獲同事報案，在 Visual Studio 2013 發生修改 SCSS 後未更新 CSS 的狀況，檢查確認 WebEssentials 已設定成存檔後編譯（如下），重啟 VS2013 問題未排除。 最後想到一個可能，SCSS 有錯導致編譯失敗，因而沒更新 CSS。回頭檢視 SCSS，果...

0 19,647
終於，CSS麻瓜也走到這一步! 專案進入網頁排版配置微調階段，陸續加進各式CSS巧門，例如: 依視窗寬度自動隱藏、多語系按鈕圖檔切換、依父容器Class切換顯示效果... 東西愈加愈多的下場是style.css愈來愈肥，充斥錯綜複雜的樣式語法，更要命的是因技巧生硬搞出一堆複製貼上、寫死的尺寸數...

4 9,748
網友小黑提問: 網頁配置分為上下兩欄，上欄高度固定，下欄佔滿剩餘空間。當上欄隱藏時下欄佔滿全部版面，上欄顯示時恢復原有版面配置，應如何實作? 一時技癢，順便也想測驗自己的CSS技巧，拿來當家庭作業暖暖手指。 在頁面放入兩個<div>當成上下欄容器，上欄<div c...

2 18,914
專案需求，需實現以下效果: 資訊列有三個元素，藍色部分為主要顯示內容，綠色區塊(Block 1)及紅色區塊(Block 2)靠緊右側為次要資訊。當視窗寬度不足，綠色及紅色區塊需自動隱藏，避免遮蔽藍色區塊的文字。 JavaScript熟手會優先想到攔截window.onresize事件，再依...

0 22,934
最近處理到網頁多語系動態切換，部分按鈕採圖檔形式(需為每個語系分別製作圖檔，愛美得多付出些代價)，因此切換語系時需變更按鈕圖檔來源，切換效果如下: 若是以前，遇到這類需求不多思索，抄起jQuery上就對了! 訂閱切換選項click事件，取得要切換語系，改變<img> src指向...

0 5,688
日前曾遇此蟲，爬文解決而未寫KB。今日同事再遇，腦中只餘殘存印象，戳力苦思蒐羅，方復拾回，嗔甚，為文誌之以杜後患。 網友Brian Richards對這個問題做了清楚的分析，也提交到MS Connect，其發生條件包含: DIV設為overflow: auto且指定寬度 DIV...

0 33,006
為了解決padding影響寬度造成破版的問題，新學會一個CSS屬性: Box-Sizing。 Box-Sizing只決定一事件: 矩型元素在計算寬度及高度時，border及padding為內含還是外加? (參考: Box Model) 而其設定值有三種: content-box、border-b...