CSS Selector Priority

CSS

在套用的時候，是有優先順序的。

沒研究前我以為是程式碼先後或最靠近的element

<table id='table'>
 <tr>
  <td><table class='subtable'>...</table></td>
  <td><table class='subtable'>...</table></td>
  <td><table class='subtable'>...</table></td>
 </tr>
</table>

我在將上面的 HTML 套用 CSS

#table {
 XXX
}
.subtable {
 YYY
}

所有的 table 都照著 XXX 顯示，所以在設計時，要盡量避免 id selector 的使用當你的 element 還包含很多 elements 的時候。以下為 CSS Selector 的 Priority

參考資料 : http://qnimate.com/dive-into-css-specificity/Colum

Read More

IE CSS 失效

CSS 在 IE 瀏覽器下失效

在網站開發時，總會發現 IE 瀏覽器跟別人不太一樣
最常出事就是 CSS，CSS 在 IE 瀏覽器下失效
提供幾個從 stackoverflow 找的方法能影響下面

Do not code CSS on the HTML file

    這裡應該是指 CSS Code 有很多 HTML Code 不一樣，舉個最常出現的例子就是註解。

 <style type ="text/css"> 
  <!-- You need this in order to have CSS, it has --> 
  p {color: blue; font-family:arial;}
 </style>

    沒意外上面這段註解會失效，且很可能影響下面的程式碼

Make a separate CSfile and link to it

 <link rel="stylesheet" href="css/style.css">

Always add <!DOCTYPE> tag to every HTML page

    其中最有效的就是第三點，在每個 HTML 頁面開頭都要加上所謂的 DOCTYPE 「文件類型」，DOCTYPE 的功能主要是標準化網頁，如果沒有這個 Tag，瀏覽器會依照自己的意思去解釋，而其中 IE 最怪，所以常常失效!

請把指定版本的<meta>放在第一位

    原話 : Make <meta http-equiv="X-UA-Compatible" content="IE=edge">, is the first <meta> tag on your page, otherwise IE may not respect it     上面這個指定 IE 用 Edge 去讀取這段 Code，不放第一個還真的會失效，你可以用 F12 去檢查當前瀏覽頁面用的 IE 版本，如果你沒有指定 DOCTYPE，不意外會變成 IE5，很慘的...

參考資料 :
1. https://stackoverflow.com/questions/595768/css-not-working-in-ie
2. http://www.flycan.com/article/css/html-doctype-97.html
3. http://www.webpage.idv.tw/maillist/maillist4/new/02/02.htm
4. https://www.itread01.com/p/648379.html
5. https://stackoverflow.com/questions/25557299/internet-explorer-11-disable-display-intranet-sites-in-compatibility-view-via

Read More

CSS vertical-align

有時候 Input 的 text 或 textarea 有時候預設的對齊可能不盡理想

這時候可以用 vertical-align，這主要是用來對齊圖片的

但有時候你會想讓 textarea 對齊隔壁的物件，因為沒有此參數的話他會對齊 textarea 的底線

textarea {
  vertical-align:25px; // 向上修正 25px
}

也有支援其他參數，但 w3schools 已有列表這邊不在贅述

這裡再列個w3沒列到的參數

// for firefox
textarea {
  vertical-align: -moz-middle-with-baseline;
}
// for chrome
textarea {
  vertical-align: -webkit-baseline-middle
}

效果為對齊text的底線

參考資料 :
1) https://www.w3schools.com/cssref/pr_pos_vertical-align.asp
2) https://stackoverflow.com/questions/45852388/webkit-baseline-middle-and-moz-middle-with-baseline

Read More