Browse by Tags

Email 客戶端之 CSS 支援問題

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

Posted 21 May 2018 10:30 PM 由 Jeffrey | 4 comment(s) 6,382

Filed under: CSS

CSS 左右貼齊樣式在 IE 產生大段空白

講到 CSS 我充其量只算是票友，但專案遇到問題還是得面對... Orz 本次的案例如下： 使用者回報某網頁用 Chrome 看正常，改在 IE 卻有部分段落的句子前方出現一大段空白，檢視 HTML 原始碼，發現編寫者輸入文字內容時，將段落裡的不同句子拆成多行，前方還加上 Tab 與上方對齊以求美觀。一般來說，HTML 文字出現的空白會被壓縮，接連的換行與空白符號只會被當成一個空白處理(要留白需改用      )，但由於套用 text-align...

Posted 03 May 2018 09:34 PM 由 Jeffrey | with no comments 4,272

Filed under: CSS, IE

使用 CSS 實現標題單行置中多行靠左

跟同事討論到一個需求，要在顯示文章的網頁實現「標題只有一行時置中顯示；若文字較多折行時則靠左對齊」的效果。起初程序員大腦想到的做法是用 JavaScript 依文字長度動態調整 text-align 樣式，但由於折行與否是瀏覽器依字型大小、容器寬度自行裁量，難以依據字數直接推算，於是我開始揣摩由文字元素高度偵測行數的雞鳴狗盜招術... 爬文 後才發現我把事情想得太複雜了，這個需求用 CSS 就能搞定，一行程式都不用寫。做法是用 <div> 包住 display: inline-block...

Posted 30 November 2017 08:40 PM 由 Jeffrey | with no comments 7,121

Filed under: CSS

Chrome 網頁中文變醜之謎

我習慣將 Chrome 標準字型設成 思源黑體字型 ， 除非網頁硬將 font-family 指定成細明體(例如: Mobile01)，換了字型讓網頁質感變好，比新細明體賞心悅目許多。 Pocket 是我慣用的稍後再讀服務，在 FB 或爬文時看到不急著看但值得花時間讀的相關文章，我會先丟進 Queue 裡收藏，有空再讀。在使用 Pocket 網頁介面閱讀文章時我注意到一件事 – 文字閱讀模式(不開啟原始網頁，改用 Pocket 自訂樣式呈現文章內容) 下，標題字型是 Chrome 預設的思源黑體沒錯...

Posted 19 November 2017 10:51 AM 由 Jeffrey | 2 comment(s) 11,496

Filed under: CSS

小技巧－為text-overflow: ellipsis增加完整文字顯示

CSS 的 text-overflow: ellipsis 刪節號效果 可讓長度不一的文字等寬顯示，遇到版面空間有限又必須整齊排列時很好用，但套用刪節號樣式後看不到完整文字，尤其遇上文字前半截相同時更是難以區別，是一大困擾。為此，我的慣用解法是為套用 ellipsis 的文字元素加上 title Attribute 存入完整文字，將滑鼠移到文字上停留就能看到原始文字，問題迎刃而解。 每次套用 ellipsis 還要額外加 title 有點囉嗦，我寫了一小段  jQuery 讓程序自動化...

Posted 03 February 2016 10:44 PM 由 Jeffrey | 2 comment(s) 6,464

Filed under: CSS, jQuery

行動瀏覽效果將影響Google搜尋排名

不久前接到Google Webmaster Tool通知，說我的網站有超過2000個網頁不利行動瀏覽，造成智慧型手機使用者閱讀困難。登入網站管理員工具一看，冒出一個行動裝置可用性報表。嘖，幾乎所有的網頁都不及格！問題包括字型過小、觸控元素距離太近不易點擊、未設定檢視點（ViewPort）、未依檢視點調整內容大小（不需橫向捲動就能看到完整內容）… 等。 部落格的CSS Style是八年前定稿的，當初做夢也想不到，時代演變到人手一機成天滑。另一方面，許多因應行動裝置的HTML、CSS規格都是近幾年才制定的...

Posted 25 April 2015 09:47 AM 由 Jeffrey | 4 comment(s) 9,893

Filed under: CSS, Mobile

Font Awesome，果然厲害！

在同事專案發現好物－ FontAwesome ！ 用字型檔配合CSS顯示圖示已非新鮮事（例如： Kendo UI 、 Bootstrap ），但看過Font Awesome的威力展示，還是不禁讚嘆，真的好厲害！ 除了圖示數量多（完整圖示清單可參考 官網 ），Font Awesome最強大之處，在於只用CSS樣式就實現尺寸放大、旋轉、鏡像、360度旋轉動畫、疊圖組合新圖示等神奇效果。（所以，Font Awesome的CSS設定檔也是偷學CSS技巧的好地方呢！） 先來個簡單的威力展示：（完整程式碼及線上展示附於文末...

Posted 01 April 2015 10:01 PM 由 Jeffrey | with no comments 20,074

Filed under: CSS

【笨問題】在Visual Studio 2013顯示SCSS詳細錯誤訊息

在 WebEssentials套件 加持之下，Visual Studio 2013可以直接編修 SCSS ，每次存檔自動編譯出css、min.css及.map，非常方便。但初心者如我，寫錯語法在所難免，一旦造成SCSS無法編譯，Output視窗只會看到somethine went wrong、compilation failed: The service failed to response to this request等含糊訊息，右方預覽視窗則停留在前次成功編譯的結果，連怎麼死的都不知道，令人氣餒...

Posted 05 February 2015 10:49 PM 由 Jeffrey | with no comments 5,402

Filed under: CSS

TIPS-為網頁加掛CSS動態更新鈕

改用SCSS後，我在本機測試調整CSS的流程變成：瀏覽器F12開發者工具檢視CSS樣式 –> 回Visual Studio 2013調整SCSS –> SCSS存檔（VS2013編譯產生CSS）—> 瀏覽器重新載入網頁檢視修改結果。由於SPA（Single Page Application）專案每次載入後有一連串起始作業，只為了更新CSS重新載入HTML、重頭執行JavaScript嚴重拖慢開發節奏，做完動作要等半天才能看結果，對急驚風而言宛如酷刑，不另謀改善之道，遲早心臟病發...

Posted 02 January 2015 06:54 PM 由 Jeffrey | 4 comment(s) 8,307

Filed under: CSS

TIPS-清除CSS float設定

前篇文章 提到用float: left解決inline-block元素間隙問題，感謝保哥提醒，發現我忘了提到它的副作用，設定float: left或float:right之後，後方元素必須明確宣告clear:float/right/both清除浮動設定以免繼續受影響。例如，沿用前文範例，後方再加一個<div>（顯示模式為display:block），將繼續套用float: left被接在A、B、C後方。 demo 要解決問題，最直接的做法是為<div class="another">加上clear...

Posted 02 November 2014 10:48 PM 由 Jeffrey | with no comments 6,106

Filed under: CSS

【笨問題】Inline-Block元素多出來的間隙

一個很初級但常見的HTML問題 － 已將margin設為零，但兩個inline-block元素間存在消不掉的空隙。 實例如下： <! DOCTYPE html > < html > < head > < meta charset ="utf-8" > < title > Inline-Block Test </ title > < style > .layout > span { display...

Posted 01 November 2014 11:35 PM 由 Jeffrey | 5 comment(s) 16,164

Filed under: CSS

【茶包射手日記】在VS2013修改SCSS後未產生CSS

接獲同事報案，在 Visual Studio 2013 發生修改 SCSS 後未更新 CSS 的狀況，檢查確認 WebEssentials 已設定成存檔後編譯（如下），重啟 VS2013 問題未排除。 最後想到一個可能，SCSS 有錯導致編譯失敗，因而沒更新 CSS。回頭檢視 SCSS，果然找到一處宣告變數寫在呼叫處後方的錯誤，修正後 SCSS 就順利編譯產生 CSS了。 回頭檢討，一開始未考量語法錯誤是因為SCSS 語法出錯時預覽視窗應有明顯提示，很難被忽略，下方 Error List 也會有錯誤項目...

Posted 22 September 2014 10:28 PM 由 Jeffrey | with no comments 5,042

Filed under: CSS, VS2013

SCSS初體驗

終於，CSS麻瓜也走到這一步! 專案進入網頁排版配置微調階段，陸續加進各式CSS巧門，例如: 依視窗寬度自動隱藏 、 多語系按鈕圖檔切換 、依父容器Class切換顯示效果... 東西愈加愈多的下場是style.css愈來愈肥，充斥錯綜複雜的樣式語法，更要命的是因技巧生硬搞出一堆複製貼上、寫死的尺寸數字，依照寫C#、JavaScript的習慣，搞到如此複雜又難以維護，讓人如坐針氈~ 每天打開醜陋的CSS修修改改，終於搞到自己都受不了，想起之前聽過的 Sass /SCSS，透過巢狀結構、變數、運算、函式等技巧降低CSS的複雜度...

Posted 07 May 2014 11:11 PM 由 Jeffrey | with no comments 17,566

Filed under: CSS

【答客問】用CSS實現上下欄排版切換

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

Posted 06 March 2014 09:29 PM 由 Jeffrey | 4 comment(s) 9,076

Filed under: CSS

CSS筆記-依視窗寬度自動隱藏

專案需求，需實現以下效果: 資訊列有三個元素，藍色部分為主要顯示內容，綠色區塊(Block 1)及紅色區塊(Block 2)靠緊右側為次要資訊。當視窗寬度不足，綠色及紅色區塊需自動隱藏，避免遮蔽藍色區塊的文字。 JavaScript熟手會優先想到攔截 window.onresize事件 ，再依視窗寬度決定Block1或Block2是否隱藏，其實CSS也有武器應付這類情境，不用寫半行程式，靠瀏覽器內建功能就搞定。 過去 介紹 過的 CSS @media ，其支援max-width、min-width條件參數...

Posted 24 February 2014 08:10 PM 由 Jeffrey | 2 comment(s) 13,556

Filed under: CSS

搜尋