今天心血來潮, 用 Google 查了如何在網頁中敘述按鍵組合. 結果意外在 stackoverflow 上看到這組漂亮的按鍵 CSS, 就順手記錄下來.
使用 <kbd> tag 將按鍵文字括住即可. 例如: <kbd>Ctrl</kbd> 就變成 Ctrl, <kbd>Shift</kbd> 就變成 Shift. 如果按鍵為圖示, 或者還想加入代表該按鍵的圖示, 則以 HTML 格式插入代表該圖示 unicode 編碼, 或是直接插入該 unicode 字元均可. 例如: <kbd>⊞ Win</kbd>+<kbd>Tab↹</kbd> 就變成 ⊞ Win+Tab ↹, <kbd>⌘</kbd> 就變成 ⌘.
這二天在整理一個系統前端時, 發現需要一個可拉動位置的彈出視窗. 最初一直卡在拉動時移動量非常大. 網路上貼的例子雖然都可以正常動作, 可是都沒有明確的說明重點, 套到自己的程式時就是不正常. 最後經過大半天的測試修正, 總算找到問題點, 搞定! 故特記下一點心得.
這是前端系統的 HTML 框架. 只寫到 myDiv 這一層, 前端 JS 程式執行了之後 myDiv 裡會再填入一個輸入用的表格 (form). 完成之後, 我希望可拉動的部份就是整個輸入表格 (含 myDiv).
這一篇是 High Performance Web Sites 的作者 Steve Souders 在 2009 年寫的一篇部落格, 我在 2014 年時研究網站效能時找到的. 原本只記下 URL, 但是隔年回頭查閱時發現圖片都不見了, 幾經辛苦查找, 終於找到有圖片的轉載, 於是複製了圖片, 並把原部落格的整份文章也複製下來作為備份 (原備份貼文時間戳記是 2015-10-08 12:06:56)
今日得空, 便重新整理翻譯, 也分享給大家. 本篇雖然有點久遠 (09~21 有 12 年之久了). 但所陳述的大部份依然是正確無誤. 現下 MS IE (至 IE11) 已經沒了後續的更新, 彼時 MS 要大家都改用 Win10 和 Edge. 現在更是連後繼的 MS Edge 也放棄了原有的核心轉向使用 Chromium 核心了.
十二月初小空閒了幾天, 把我的 pixnet 部落格小小的改造了一下. 順便把以前改的和這一次更動的部份記錄一下作為備忘.
整體來說大概完成了以下幾樣工作:
CSS v3 之前 (CSS v1, CSS v2) 沒有在語法上明確的區分 pseudo-class 和 pseudo-element 之間的不同. 二個都是以單一個 : 字元開頭.
但 CSS v3 的語法有明確的區分 pseudo-class 和 pseudo-element. 不過現行的 browser 為了相容性的原故並沒有嚴格區分此二者的語法.
一開始, 你或許會以為我瘋了: 沒事幹嘛硬要用 flex 來做原本 <table> 做的事. 但是如果你想要弄一個可以自動依畫面寬度 (或設備的寬度) 彈性調整的表格模組; 或者你也寫過微信小程序, 那你肯定就不會那麼說了. 以微信小程序來說: <table> <tr> <th> <td> ... 這些 HTML tag 在小程序中都無法正常展現在畫面上. 唯一可用的就只有一種 tag 叫做 <view>. 即使我們強制把這些 HTML tag 的 CSS 設成:
table { display: table }
tr { display: table-row }
th, td { display: table-cell }
也只能展現原本的沒有 rowspan 和 colspan 的狀況. 無奈之下, 我們只好死馬當活馬醫.
最近經常用到 flex box, 但又常常看完把問題解決了, 過幾天要用時又忘了. 雖然網路上也有其他人整理的, 但總是這篇少這個, 那篇又有些設定沒說清楚, 最慘的是有些還弄錯了, 最後只好自己花時間整理.
目前相容性較高的 flex 語法大約是依據 2012 年的 "CSS Flexible Box Layout Module W3C Candidate Recommendation" 這一份文件. 比這個新的文件當然還有好幾份, 但是當中大部份的新設定目前 (2020/03) 幾乎都只有 1 個 browser 支援 (FireFox, 一小部份功能 Chrome 也有支援). 因此, 這裡還是以 2012 版的功能為主, 至少絕大部份 browser 都支援的, 用戶端不至於出現大問題.
在網頁中使用 Font Awesome 加一些圖形字元 (icon) 大概很多人都會: 下載 font awesome 提供的壓縮檔 (內含 fonts, CSS ...), 並放到 web server 上, 然後在網頁的前頭加上 <link> tag 來下載就完成了必要的準備工作.
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
或者是直接使用 font awesome 提供的 cdn 連結也行.
今天回頭看了一下自己的部落格貼文, 發現有些地方寫錯了. 原本想要直接修改, 後來想了想, 覺得不妥, 於是改用刪除線把錯的地方槓掉, 再用不同的顏色標明新增的修正. 但是刪除線在原本的文章中很不明顯, 於是想到用雙刪除線, 查了一下 W3School 卻發現 CSS 中沒有雙刪除線這東東...
於是又花了半天, 好不容易才試出來.
<style type='text/css'>
...
.article-content-inner span.add { color:navy; }
.article-content-inner del {
padding:0; margin:0;
position: relative;
text-decoration:none;
display: inline;
top: 0.8em;
left: 0;
border-top: 5px double red;
}
.article-content-inner del > span.del {
padding:0; margin:0;
position: relative;
top: -0.8em;
left: 0;
width:100%;
color: black;
}
...
</style>
<body>
<p>原來的本文<del><span class='del'>這一小段要刪除</span></del>繼續原來的本文</p>
</body>
正常狀況下網頁中的 <sub> 和 <sup> 應該都是可以正確顯示為上標字及下標字. 不過偶而也會有不正常的時候, 例如: 痞客邦部落格的手機模式頁面, 預設的樣式不小心就把 <sub> 和 <sup> 的字高和其他所有的元素都設成一樣了, 所以就看不出上下標字了.
上下標字最基本的樣式設定是:
下面這一段是我加在自己部落格的樣式檔中. (裡面的 !important 是為了要強制覆蓋掉痞客邦預設的設定)
設定 CSS, 總會要查一下手冊, 下面列的是個人經常參考的 CSS 手冊及標準文件
網頁作者的設定是 CSS style 中最重要的部份, 網頁作者可以運用的 CSS 設定有多種來源:
自己寫的網頁掛在別的網頁框架上的時候 (如部落格網站...), 或者是自己用的 CSS 設定的列表一長, 偶而會有樣式跑掉了的狀況發生, 但常常不是很容易找出到底是被哪一條 (或者是哪幾條) css rule 蓋掉.
下面是如何用最簡單的工具: browser 內建的除錯工具來找出問題所在: 不必特別設定什麼或安裝什麼外掛, 只要按 F12 就對了:
IE 11 按下 F12 之後, 跳出來的除錯畫面如下, 它可能併在和原本的頁面的下方, 你可以按下黑色 Menu Bar 右手邊倒數第二個的 取消釘選 (Ctrl+P) 把它和原始的 IE 頁面分離開來:
常見的 CSS(v1) selector 設定套用的次序如下:
<style type="text/css">
div { color: black ; ... } /* 1st level */
.nClass { color: green ; ... } /* +this 2nd level */
#nId { color: blue ; ... } /* +this 3rd level */
...
</style>
...
<div style="color: red; ... "><!-- /* +this 4th level */ -->
以往寫網頁都是把 CSS Style 在 <head></head> 區段中載入, 今天發現在 <body></body> 區段中載入也是可以的.
另外如果不是要載入 CSS 檔, 而是要把 CSS Style 插入在 <body></body> 區段中, 則需要用 <div></div> 區段把 <style></style> 區段包住.
<head>
...
</head>
<body>
...
<!-- 可以在 <body></body> 區段中另外再載入 CSS 檔 -->
<link rel="stylesheet" href="mystyle.css" />
...
<div>
<style type="text/css">
/* local style sheet 要放在 <div></div> 區段中 */
.alt0 { backbround-color:#FCFCFC; }
.alt1 { background-color:#E8E8E8; }
...
</style>
</div>
...
</body>
程式 (4)
