2020-02-17 06:17 AM 1 27,125
網頁介面的複選選項,大家第一個想到的都是 <input type="checkbox">,配合 <label> 能做到點選文字或勾選方塊都能選取的效果 (用 <label> 包住 <input type="checkbox&qu...
2019-11-27 06:49 AM 1 3,491
部落格被 Google Search Console 糾正部分排版不適合行動裝置閱讀。 檢視問題頁面研判是文章出現過長英文字串超出邊框,造成文章區塊變窄造成。導致問題的文字通常是 Namespace 加型別名稱,URL、檔案路徑等,共同特色是長度長且其中不包含空白或標點符號: 解決這類問題,腦海中...
2018-05-21 10:30 PM 4 15,368
活到老學到老,今天又學到新知 - 雖然顯示 HTML 格式已是當今 Email 軟體或線上信箱的必要條件,但許多被視為基本的 CSS 功能卻不一定在支援範圍內。 用以下範例展示,我設計一段 HTML 當作 Email 內文。先將 .dynamic 設成 display: none,再指定 .m...
2018-05-03 09:34 PM 0 5,161
講到 CSS 我充其量只算是票友,但專案遇到問題還是得面對... Orz 本次的案例如下: 使用者回報某網頁用 Chrome 看正常,改在 IE 卻有部分段落的句子前方出現一大段空白,檢視 HTML 原始碼,發現編寫者輸入文字內容時,將段落裡的不同句子拆成多行,前方還加上 Tab 與上方對齊以求...
2017-11-30 08:40 PM 0 14,827
跟同事討論到一個需求,要在顯示文章的網頁實現「標題只有一行時置中顯示;若文字較多折行時則靠左對齊」的效果。起初程序員大腦想到的做法是用 JavaScript 依文字長度動態調整 text-align 樣式,但由於折行與否是瀏覽器依字型大小、容器寬度自行裁量,難以依據字數直接推算,於是我開始揣摩由...
2017-11-19 10:51 AM 3 19,303
我習慣將 Chrome 標準字型設成思源黑體字型, 除非網頁硬將 font-family 指定成細明體(例如: Mobile01),換了字型讓網頁質感變好,比新細明體賞心悅目許多。 Pocket 是我慣用的稍後再讀服務,在 FB 或爬文時看到不急著看但值得花時間讀的相關文章,我會先丟進 Q...
2016-02-03 10:44 PM 2 11,524
CSS 的 text-overflow: ellipsis 刪節號效果可讓長度不一的文字等寬顯示,遇到版面空間有限又必須整齊排列時很好用,但套用刪節號樣式後看不到完整文字,尤其遇上文字前半截相同時更是難以區別,是一大困擾。為此,我的慣用解法是為套用 ellipsis 的文字元素加上 title ...
2015-04-25 09:47 AM 4 8,902
不久前接到Google Webmaster Tool通知,說我的網站有超過2000個網頁不利行動瀏覽,造成智慧型手機使用者閱讀困難。登入網站管理員工具一看,冒出一個行動裝置可用性報表。嘖,幾乎所有的網頁都不及格!問題包括字型過小、觸控元素距離太近不易點擊、未設定檢視點(ViewPort)、未依檢...
2015-04-01 10:01 PM 0 24,300
在同事專案發現好物-FontAwesome! 用字型檔配合CSS顯示圖示已非新鮮事(例如:Kendo UI、Bootstrap),但看過Font Awesome的威力展示,還是不禁讚嘆,真的好厲害! 除了圖示數量多(完整圖示清單可參考官網),Font Awesome最強大之處,在於只用CSS...
2015-02-05 10:49 PM 0 5,520
在WebEssentials套件加持之下,Visual Studio 2013可以直接編修SCSS,每次存檔自動編譯出css、min.css及.map,非常方便。但初心者如我,寫錯語法在所難免,一旦造成SCSS無法編譯,Output視窗只會看到somethine went wrong、compi...
2015-01-02 06:54 PM 4 8,587
改用SCSS後,我在本機測試調整CSS的流程變成:瀏覽器F12開發者工具檢視CSS樣式 –> 回Visual Studio 2013調整SCSS –> SCSS存檔(VS2013編譯產生CSS)—> 瀏覽器重新載入網頁檢視修改結果。由於SPA(Single Page Appli...
2014-11-02 10:48 PM 0 6,853
前篇文章提到用float: left解決inline-block元素間隙問題,感謝保哥提醒,發現我忘了提到它的副作用,設定float: left或float:right之後,後方元素必須明確宣告clear:float/right/both清除浮動設定以免繼續受影響。例如,沿用前文範例,後方再加一...
2014-11-01 11:35 PM 5 23,672
一個很初級但常見的HTML問題 - 已將margin設為零,但兩個inline-block元素間存在消不掉的空隙。 實例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8">...
2014-09-22 10:28 PM 0 5,229
接獲同事報案,在 Visual Studio 2013 發生修改 SCSS 後未更新 CSS 的狀況,檢查確認 WebEssentials 已設定成存檔後編譯(如下),重啟 VS2013 問題未排除。 最後想到一個可能,SCSS 有錯導致編譯失敗,因而沒更新 CSS。回頭檢視 SCSS,果...
2014-05-07 11:11 PM 0 20,029
終於,CSS麻瓜也走到這一步! 專案進入網頁排版配置微調階段,陸續加進各式CSS巧門,例如: 依視窗寬度自動隱藏、多語系按鈕圖檔切換、依父容器Class切換顯示效果... 東西愈加愈多的下場是style.css愈來愈肥,充斥錯綜複雜的樣式語法,更要命的是因技巧生硬搞出一堆複製貼上、寫死的尺寸數...
2014-03-06 09:29 PM 4 10,051
網友小黑提問: 網頁配置分為上下兩欄,上欄高度固定,下欄佔滿剩餘空間。當上欄隱藏時下欄佔滿全部版面,上欄顯示時恢復原有版面配置,應如何實作? 一時技癢,順便也想測驗自己的CSS技巧,拿來當家庭作業暖暖手指。 在頁面放入兩個<div>當成上下欄容器,上欄<div c...