可點選QR code
ARTICLE
1
穿透的Div－CSS的pointer-events屬性
當有兩個div重疊時，可以發現當滑鼠滑到重疊的區域時，會無法對下層的div進行點擊或hover的動作。
如下圖範例，藍色區塊(box01)設定了hover，只要滑入該div就會變色，但是當滑到重疊區塊時，壓在底下的box01設置的hover屬性會無法實現。
See the Pen KEeXqK by Ya
(@bok770) on CodePen.
此時可以應用CSS的屬性「pointer-events」，它是針對滑鼠事件的屬性，預設值為auto，若設定值為none時，則可以穿越該元素。也就是說，原本滑鼠無法點擊的下層div，設定為pointer-event: none的話，可以讓鼠標直接穿越上層div，對下層div進行動作。
範例：
See the Pen ywEzxO by Ya
(@bok770) on CodePen.
我們可以發現，原本壓在底下的box01，就算鼠標滑到重疊區域內，也可以觸發hover了。
ARTICLE
2
meta robots的使用規則
先前在meta robots 與 Robots.txt 的差別與使用時機介紹中提到過， Robots.txt 的使用會使尋引擎在讀取網站內容資訊時，直接不檢查跳過忽略相關的設定頁面，甚至認定並不屬於網站架構內容，這樣雖然能夠幫助搜尋引擎排除不需要的收錄，但在 Robots.txt 的應用來說比較偏向於未設計製作完成還不便上線的頁面，然而其實大多數的重複諮詢頁面、管理員的登入介面等資訊，只是內容篇幅上偏向於功能取向、較無閱讀性、不符合訪客查看應用，嚴格來說，還是整體網站架構的一部份，反觀搜尋引擎在對整體查核時，也會對內容架構進行瞭解，內容架構的豐富度與完整性也有利於排名收錄，因此我們其實並不能一杆打翻全歸類於不屬於網頁內容。
在顧及完整性收錄與重複功能頁面排除的情況之下，我們便可以透過 meta robots 的應用，來明確的告訴搜尋引擎，那些內容算是網站的一部分可以進行檢索，但無須索引提供給訪客進行搜尋便可，至於 meta robots 的應用格式與使用辦法，我們將在以下進行說明舉例：
meta robots 主要是應用在頁面編碼當中的 head 區塊裡，可以自由的針對每個個別頁面提出只需要"檢索"或"索引"的設定，也因為可以個別針對每個頁面進行權限設定，就意味著"每個"需要不同權限的頁面都需要置入相關設定。
在 meta robots 當中，我們使用
index、noindex 代表 索引 或 不索引
follow、nofollow 代表 檢索 或 不檢索
所以我們只需要請搜尋引擎"檢索"理解，不需要"索引"提供搜尋的範例便能設定為：
<head>
<meta name=”robots” content=”noindex , follow“>
</head>
不過 meta robots 有兩項設定值，個別兩種的狀態，所以也可以組合成以下的設定權限：
1.<meta name=”robots” content=”noindex , nofollow“> 不要檢索、不要索引，等同 Robots.txt 應用
2.<meta name=”robots” content=”index , nofollow“> 不需要檢索、但需要提供索引
3.<meta name=”robots” content=”index , follow“> 需要檢索、需要索引，等同於搜尋引擎正常預設值(形同虛設)
ARTICLE
3
meta robots 與 Robots.txt 的差別與使用時機
在網站排除檢索的部分，先前本站淺談過 Robots.txt 主要是應用在提交給搜尋引擎不需要檢索的頁面名單，也介紹過 Robots.txt 的實際應用與設定，因此瞭解排除"檢索"的部分後，我們將要更進階的介紹排除"索引"部分，反觀由開始淺談部分時，我們曾提到搜尋引擎其實是透過的"檢索"與"索引"兩種功能來將網站網頁資訊進行收錄並提供使用者查詢，所以淺談 Robots.txt主要是針對檢索這項功能進行排除。
而檢索與索引這兩項功能雖然有極大的關聯性，但實質上在網頁上進行的動作並不相同，這邊我們用更白話的敘述就是
檢索 = 檢查
索引 = 收藏
所以搜尋引擎在實際上的運作順序是先透過檢查頁面內容與連結後，才決定是否要收藏，因此 Robots.txt 的作用就是在搜尋引擎來訪時，藉由直接提出不需要檢查的資訊，想當然爾就更不可能會被收藏，達到不檢查、不收錄的效果。
在更明確的知道搜尋引擎的收錄原理後，我們將要介紹的部分是 透過 meta robots 進行"索引"的排除，這時相信大家將會些疑惑，Robots.txt不就能達到不檢查、不收錄的效果了，為什麼還需要 meta robots 進行"索引"的排除呢?這部分主要原因就是 Robots.txt 會使尋引擎直接在不檢查這個步驟中就會忽略相關的內容，甚至不認為這是網站的內容；但是 meta robots 的應用，可以使搜尋引擎先進行"檢查"也仍然會將內容視為網站的一部份，但不要收藏提供使用者搜尋，所以這部分差異也會引響網站的總體完整性，因此在非必要的情況下，並不建議使用 Robots.txt的使用，而是推薦 meta robots 的使用。
ARTICLE
4
Robots.txt 實際應用與設定
由淺談 Robots.txt 是什麼?能瞭解，Robots.txt 主要是應用在提交給搜尋引擎不需要檢索的頁面名單，先前我們說明過，大部分不需要的檢索的頁面可能是：管理員的登入介面、重複的諮詢頁面、尚未完成或修改調整中的頁面等。這些頁面都包含在網站頁面資訊當中，擁有很重要的使用操作功能，但站在使用者搜詢需求上，卻相較無查閱內容，因此減少相關的頁面檢索能夠提升搜尋引擎對網站內容的精確性。
瞭解了Robots.txt的應用時機後，我們便能著手開始設定提交內容。
在網站中建立一個名稱為：Robots 的 .txt 檔案，在檔案內容中設定需要排除檢索檢索的頁面檔案與路徑。
以下為常見的設定規則：
1.User-agent：宣告設定規則對那些搜尋引擎爬蟲有效，可能是：Google、Yahoo、Bing、Baidu等...另外*號代表全部搜尋引擎適用。(必要宣告規則)
2.Disallow：用來指定不需要被檢索的目錄或檔案，需注意檔案路徑的完整明確性。(與 Allow 為選擇性宣告規則)
3.Allow：用來指定可以被檢索的目錄或檔案，需注意檔案路徑的完整明確性。(與 Disallow 為選擇性宣告規則，且 Allow 可以與 Disallow 同時應用，但 Allow 的優先權大於 Disallow)
4.Sitemap：指定網站內的 sitemap 檔案存放位置，需使用絕對路徑。(非必要宣告規則)
使用範例一：整個網站不要被所有收尋引擎爬蟲檢索
User-agent: * (適用所有搜尋引擎爬蟲)
Disallow: / (Disallow用來指定不需要被檢索的資訊，/代表全站根目錄)
使用範例二：只允許特定搜尋引擎爬蟲檢索特定內容 (Allow 可以與 Disallow 同時應用，但 Allow 的優先權大於 Disallow)
User-agent: Googlebot (適用 Goole 搜尋引擎爬蟲)
Allow:/classA/pageA.html (Allow用來指定需要被檢索的資訊)
User-agent: * (因為先宣告了 Google 可以檢索，因此除了 Google 以外的皆不檢索)
Disallo:/classA/pageA.html ( Disallow 用來指定不需要被檢索的資訊，)
使用範例三：針對特定搜尋引擎爬蟲不需要檢索特定檔案類型
User-agent: Bingbot (適用 Bingbot 搜尋引擎爬蟲)
Disallow: /*.htm$ (不論檔案名稱與參數值，只要是.htm皆不檢索)
ARTICLE
5
淺談Robots.txt 是什麼?
在SEO搜尋引擎優化當中，大家都會非常在意自己經營的網站是不是有被各家搜尋引擎完整的收錄頁面資訊，原因當然是網站頁面有被收錄索引，才能夠被使用者找到並增加網站的搜尋能見度，但其實管理人員也必須思考注意的部分是，假設：尚未完成或修改調整中的頁面、管理員的登入介面、重複的諮詢頁面等...，這些網站內容並不全然適合被搜尋引擎收錄、並提供搜尋呈現給外在搜尋者查看。
因此瞭解搜尋引擎的運作原理，主要是透過程式進行多方網狀連結"檢索"與"索引"來對進行網頁資訊收錄，而網頁站台在長期經營的同時，難以避免會有些頁面"不需要被搜尋引擎檢索與索引"，因此管理人員們便能透過提交 Robots.txt 這個檔案，將無須收錄的頁面資訊載明提出給搜尋引擎檢索參照，便能明確的有效排除無須收錄的網站頁面。
ARTICLE
6
UTM行動裝置廣告應用
從網站廣告行銷中，我們瞭解可以透過 UTM 參數設定與 Analytics 查看UTM應用成效，能夠明確達到追蹤和解析網站廣告的應用成效，隨著大眾行動裝置應用程度遠超越了桌上裝置的習慣，在 Android、ios 系統下，APP的廣告連結也成為了網站推廣行銷的重要管道，因此UTM的應用也針對行動裝置系統有了專屬的"Google Play URL Builder"、"iOS Campaign Tracking URL Builder"延伸。
以 Android Google Play URL Builder 為例，我們也是需要根據先介紹過UTM參數進行相似的設定，較為不同的地方是在Ad Network需要選擇不同廣告平台的選項進行對應追蹤。
在填寫 UTM 參數 時，同樣需要注意
※字與字的間距，盡量使用 _ 或 + 號 ，勿使用空白與特殊符號，因為網址在編譯產生的過程，空白與特殊符號將會以網址用法代碼額外編入，造成網址過為冗長。
※如果需要使用同個活動多個項目連結時，要注意所有餐數大小寫都要一致，因為大小寫的誤差，數據將會導向到不同的連結，將會造成錯誤的追蹤。
按照注意事項與參數欄位在產生與安裝好連結後，便同樣能透過"Analytics查看UTM應用成效"。
ARTICLE
7
如何在Analytics中查看UTM應用成效?
由"最簡單的UTM參數說明、設定教學"中，我們能瞭解，在產生完成UTM連結後，我們便能將連結複製加以應用在需要推廣的平台上，當使用者們透過此連結進入後，Google Analytics將會自動為我們統計各項應用資訊，達到有效的追蹤、統計總和。
透過UTM產生連結進入的使用數據存主要被歸類存放在 Analytics 當中的"廣告活動"中，我們經由介面分類中的：「客戶開發→廣告活動→所有廣告活動」便能查看統計的相關資訊。
根據先前我們產生UTM範例連結時填寫的層級資訊，我們能在廣告活動欄位中看見活動名稱：Brand_Promotion
進一步我們能夠經由"來源與媒介"更清楚的知道造訪者的相關資訊，達到分析與瞭解的目的
ARTICLE
8
瀏覽器支援度檢測－[email protected]的用法
近來CSS有不少新增的屬性，然而各個兼容性不一，我們可以用@support標記來檢測該瀏覽器是否有支援。
基本用法：
@supports (該CSS屬性規則) {
div {該CSS屬性規則}
}
範例：
@supports (display: flex) {
div { display: flex; }
}
意思是當瀏覽器支援display: flex時，即套用該屬性。
我們可以用not來設定該屬性不支援時的替換CSS，來應付不支援時的情況。
範例：
@supports not(display: flex) {
div { display: inline-block; }
}
意思是當瀏覽器不支援display: flex時，改為display: inline-block
你也可以使用or或and串接多個CSS設定
範例：
@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex){
div{
display: -webkit-flex;
display: -moz-flex;
display: flex
}
}
@support可以針對舊型和新型瀏覽器設定不同的CSS規則，大多時候用來支援較舊式的瀏覽器，並在使用更新的瀏覽器時，套用新屬性，提升用戶體驗。
ARTICLE
9
不用再清除float浮動了！CSS的display:flow-root屬性
在網頁設計上，用float排版若不清除浮動，會造成父元素塌陷的問題，不然就是改用display:inline-block或flexbox解決。
而現在CSS有一個新屬性display:flow-root，可以讓你不用再特地清除浮動囉！
範例：
See the Pen rozENw by Ya (@bok770) on CodePen.
display:flow-root 的生效條件
1. float的值不是none
2. overflow的使用值不是visible
3. display的值為table-cell、table-caption、inline-block或inline-table
4. position的值既不是static也不是relative
5. block-progression的值為lr或rl，其父框的block-progression 的值為tb
6. block-progression ' tb的值為' '，其父框的block-progression的值為 lr或 rl
由於是新屬性的關係，在瀏覽器的兼容性尚有待加強，只可支援firfox 53+、chrome58+、opera45+
而可以使用@supports功能來進行增強漸進處理或是優雅降級處理
@supports(display:flow-root){}
@supports not (display:flow-root){}
範例：
@supports(display:flow-root){
display: flow-root;
}
若瀏覽器支援display:flow-root，會啟用該屬性
@supports not (display:flow-root){
display: inline-block; clear:both;
}
若瀏覽器不支援，則會啟用display: inline-block; clear:both;
ARTICLE
10
幫網頁標題欄title加上logo(icon)圖示
我們在瀏覽網站時，時常可以看到網頁的網址列上附有該品牌或是該公司企業的logo圖示，那麼該如何才能將icon加上去呢？
有兩個方法如下：
1.將圖片轉成ico格式，然後命名為favicon.ico，尺寸設16X16px，因為只是放在title上，占的範圍很小，所以圖檔不宜過大。
有不少將png、jpg等圖檔線上轉成ico的網站，可以直接將圖片上傳轉檔。
png轉ico：https://www.convertico.com/
原始圖片支援jpg、png、gif：http://tw.faviconico.org/
之後再將圖片放在網站的根目錄下即可。
第二個方法是在網頁的head裡放入
標題欄：
< link rel="icon" href="/favicon.ico" type="image/x-icon" / >
收藏夾：
< link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" / >
href裡可以放圖片的相對路徑或絕對路徑，所以不需放在網站的根目錄下，圖片名稱也不一定要取favicon.ico，可以自由命名。
例如：
< link rel="icon" href="images/logo.ico" type="image/x-icon" / >
< link rel="icon" href="https://www.webdesigns.com.tw/images/logo.ico" type="image/x-icon" / >
但還是建議使用ico檔案，因為相較於png、jpg等圖片，ico在瀏覽器的支援度更廣。
