Category: css

1 3,407
部落格被 Google Search Console 糾正部分排版不適合行動裝置閱讀。 檢視問題頁面研判是文章出現過長英文字串超出邊框，造成文章區塊變窄造成。導致問題的文字通常是 Namespace 加型別名稱，URL、檔案路徑等，共同特色是長度長且其中不包含空白或標點符號： 解決這類問題，腦海中...

4 15,057
活到老學到老，今天又學到新知 - 雖然顯示 HTML 格式已是當今 Email 軟體或線上信箱的必要條件，但許多被視為基本的 CSS 功能卻不一定在支援範圍內。 用以下範例展示，我設計一段 HTML 當作 Email 內文。先將 .dynamic 設成 display: none，再指定 .m...

0 5,085
講到 CSS 我充其量只算是票友，但專案遇到問題還是得面對... Orz 本次的案例如下： 使用者回報某網頁用 Chrome 看正常，改在 IE 卻有部分段落的句子前方出現一大段空白，檢視 HTML 原始碼，發現編寫者輸入文字內容時，將段落裡的不同句子拆成多行，前方還加上 Tab 與上方對齊以求...

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

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

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

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

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

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

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

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

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

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

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

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