in

Darkthread

黑暗執行緒
All Tags » CSS (RSS)

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="mode-2" 可切換顯示不同區塊內容;下方 <div> 則示範...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 05-21-2018
  • CSS 左右貼齊樣式在 IE 產生大段空白

    講到 CSS 我充其量只算是票友,但專案遇到問題還是得面對... Orz 本次的案例如下: 使用者回報某網頁用 Chrome 看正常,改在 IE 卻有部分段落的句子前方出現一大段空白,檢視 HTML 原始碼,發現編寫者輸入文字內容時,將段落裡的不同句子拆成多行,前方還加上 Tab 與上方對齊以求美觀。一般來說,HTML 文字出現的空白會被壓縮,接連的換行與空白符號只會被當成一個空白處理(要留白需改用 &nbsp; &ensp; &emsp;),但由於套用 text-align: justify 左右貼齊,這些換行與 Tab 便在 IE 上產生非預期的結果。例如以下範例:...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 05-03-2018
  • 使用 CSS 實現標題單行置中多行靠左

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

    我習慣將 Chrome 標準字型設成 思源黑體字型 , 除非網頁硬將 font-family 指定成細明體(例如: Mobile01),換了字型讓網頁質感變好,比新細明體賞心悅目許多。 Pocket 是我慣用的稍後再讀服務,在 FB 或爬文時看到不急著看但值得花時間讀的相關文章,我會先丟進 Queue 裡收藏,有空再讀。在使用 Pocket 網頁介面閱讀文章時我注意到一件事 – 文字閱讀模式(不開啟原始網頁,改用 Pocket 自訂樣式呈現文章內容) 下,標題字型是 Chrome 預設的思源黑體沒錯,但內文部分中文變得很醜,但不是新細明體。 原以為是 CSS 被設成某種特殊中文字型,但使用 F12...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 11-18-2017
  • 小技巧-為text-overflow: ellipsis增加完整文字顯示

    CSS 的 text-overflow: ellipsis 刪節號效果 可讓長度不一的文字等寬顯示,遇到版面空間有限又必須整齊排列時很好用,但套用刪節號樣式後看不到完整文字,尤其遇上文字前半截相同時更是難以區別,是一大困擾。為此,我的慣用解法是為套用 ellipsis 的文字元素加上 title Attribute 存入完整文字,將滑鼠移到文字上停留就能看到原始文字,問題迎刃而解。 每次套用 ellipsis 還要額外加 title 有點囉嗦,我寫了一小段  jQuery 讓程序自動化,範例如下提供大家參考: Live Demo <! DOCTYPE html > <...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 02-03-2016
  • 行動瀏覽效果將影響Google搜尋排名

    不久前接到Google Webmaster Tool通知,說我的網站有超過2000個網頁不利行動瀏覽,造成智慧型手機使用者閱讀困難。登入網站管理員工具一看,冒出一個行動裝置可用性報表。嘖,幾乎所有的網頁都不及格!問題包括字型過小、觸控元素距離太近不易點擊、未設定檢視點(ViewPort)、未依檢視點調整內容大小(不需橫向捲動就能看到完整內容)… 等。 部落格的CSS Style是八年前定稿的,當初做夢也想不到,時代演變到人手一機成天滑。另一方面,許多因應行動裝置的HTML、CSS規格都是近幾年才制定的。在自動步槍已是基本配備的時代,還拿著抗戰時期的盒子炮跟人火拼,下場當然不是慘字可以形容的。嗯...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 04-24-2015
  • Font Awesome,果然厲害!

    在同事專案發現好物- FontAwesome ! 用字型檔配合CSS顯示圖示已非新鮮事(例如: Kendo UI 、 Bootstrap ),但看過Font Awesome的威力展示,還是不禁讚嘆,真的好厲害! 除了圖示數量多(完整圖示清單可參考 官網 ),Font Awesome最強大之處,在於只用CSS樣式就實現尺寸放大、旋轉、鏡像、360度旋轉動畫、疊圖組合新圖示等神奇效果。(所以,Font Awesome的CSS設定檔也是偷學CSS技巧的好地方呢!) 先來個簡單的威力展示:(完整程式碼及線上展示附於文末) 怎麼安裝到專案裡呢?到官網下載解壓縮再自行複製到專案裡?不好不好,這年頭還鑽木取火會被人笑...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 04-01-2015
  • 【笨問題】在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等含糊訊息,右方預覽視窗則停留在前次成功編譯的結果,連怎麼死的都不知道,令人氣餒。 面對這種情境,我之前用的笨笨解法,是按Ctrl-Z取消所有修改,還原到上次成功編譯的狀態,再一點一點把修改加回去...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 02-05-2015
  • TIPS-為網頁加掛CSS動態更新鈕

    改用SCSS後,我在本機測試調整CSS的流程變成:瀏覽器F12開發者工具檢視CSS樣式 –> 回Visual Studio 2013調整SCSS –> SCSS存檔(VS2013編譯產生CSS)—> 瀏覽器重新載入網頁檢視修改結果。由於SPA(Single Page Application)專案每次載入後有一連串起始作業,只為了更新CSS重新載入HTML、重頭執行JavaScript嚴重拖慢開發節奏,做完動作要等半天才能看結果,對急驚風而言宛如酷刑,不另謀改善之道,遲早心臟病發。 Visual Studio 2013的 BrowserLink 功能強大,能將HTML、JavaScript及CSS修改後...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 01-02-2015
  • 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: both宣告,如下: demo 不過,此種設計邏輯並不算乾淨俐落...
    公佈在 黑暗執行緒 (Weblog)Jeffrey 發表於 11-02-2014
第1頁,共5頁 (41個項目) 1 2 3 4 5 下一頁 >
Powered by Community Server (Non-Commercial Edition), by Telligent Systems