標籤彙整: html

搬家公告。

新部落格網址:

http://fredchu.github.io

搬家公告。

上禮拜幫公司研究目前比較流行的靜態網站生產器,發現用 Octopress 加上 GitHub Pages 可以快速的架站、GitHub host 完全免費,而且可以完全掌握 HTML、 CSS,還可以用 Markdown 寫作,預設版型具備 Responsive Design,而且還可以用 Git 做版本控管,簡直完全打中身為 progarmmer 的我啊~~~二話不說立馬就架了一個,版型先用預設的之後再自己設計,先求有,再求好。

新的部落格當然也是什麼文章都會有,會有生活記錄、程式分享、攝影分享…等。不過會以程式分享為主。

這邊的文章會挑一些或是完全不挑全部搬過去又或者完全不搬。(這人有病嗎)

感謝各位(哪來的各位)長久以來的收看。 <(_ _)>

CSS And SEO Small Tips

CSS

  • 只出現一次的就要用 ID。
  • double class 是指同一個 DOM element 下了兩個 class,應該改用 sass mixin。
  • 會有 id 恐懼症表示對目前的網頁結構沒有概念,應該是實作不夠,什麼東西該出現一次應該是在寫 html 時就想好的。寫網頁,應該是在腦中已經有了個概念,一次將 html 架構出來再用 css 來調版面。
  • 記得所有用文字的 img 一定要再加文字上去,舉例來說,地址可以用 img,但是其實他是文字說明公司地址,所以應該是用 p+內文 然後隱藏。 最後用背景圖片顯示比較漂亮的字型。

SEO

  • 不要忘了 html 只是文件結構而不是讓你好排版的架構。 想想你這份文件想表達的是什麼東西。 最簡單的方法就是當你 css 拿掉時這份文件對人們來說是否還有意義。
  • 基本上在前端命名統一都用 dash。其實 dash, underscore, camel case 都是合法的使用方式。 有一說法是老舊的瀏覽器不支援 underscore as css selector。 不過現在市面上常見的瀏覽器都有支援了。 但你看看各大 library 的命名方法。 都是用 dash(hyphen),這背後一定有他的設計理念。至於 url、img、css、js 等等的檔案命名用 dash 對 seo 有幫助。this-is-an-img 對搜尋引擎來說是 this is an image,this_is_an_image –> thisisanimage。

增進 CSS 效能、解 IE hack 的 Tips

最近又開始重新練習純用 HTML 跟 CSS clone 簡單的網頁,但過程當中遇到一些問題,以下是整理出來的筆記,感謝 Ben 過程當中的指導。

CSS 屬性排列, 一致, Reset, 效能, id 與 class 標記原則

  1. css 屬性先後基本上沒差, 除非重複宣告, 後面的就會複寫掉前面的, 但有些公司會要求要按照字母順序排列, 以方便查找屬性跟方便多人維護, 看公司要求或是個人習慣
  2. 為了讓 css code 好看好維護, 括號, 空格要一致
  3. 如果顏色要用三個數字, 就統用三個數字, 不要一些用三個一些用六個 ex. 不要有些用 #555 有些用 #555555
  4. css 一定要 reset, 不然跨瀏覽器會死人, 記得用 HTML5 的版本(因為 HTML5 有些新標籤)
  5. reset 裡的東西要仔細看. 很多不是標準的東西要刪掉, 或是和 reset 沒相關東西放在別的檔案, 如果 clearfix 已經在 reset 裡面了, style 裡就不要重複
  6. header 裡一定要有 h1, style 不要直接下在 header
  7. 盡量下 id, class, 不要用 div > div 這種東西, 不好了解效能也差
  8. id, class 前不要加 tag ex. h1.logo –> .logo, div#main li .subtitle –> .subtitle, 能短盡量短 ex. div#main li a –> #main a –> .main_list_link
  9. 頁面上應該唯一存在的東西就用 id 標記, 一個網頁應該只會有一個 logo, logo 就可以用 #logo 標記, nav current 只會有一個所以改用 id
  10. 要注意一個 element 不要下超過一個 class, ie6 吃不到. 應該是用 sass mixin 寫法比較好

url 的絕對路徑與相對路徑, 加引號與不加引號

  1. img, css, js 用絕對路徑不要用相對路徑 ( 要完成這些請愛用 Middleman )
  2. background img 的 url 要加雙引號, 為了安全

Float, Inline Elements and Block Elements

  1. float 一定要跟著 display: inline, 不然在 ie 會有 double margin 問題
  2. 別在 inline element 下 margin, padding, 除非有下 float
  3. li 用 float 比較好調整 style, inline element (display: inline;) 要調整 style 會比較麻煩(float 會把 inline element 轉成 block element)
  4. a 轉成 display: block; 點擊區域比較大, 也比較好下 style. 總之 inline element 就是個邪惡的東西. 非常不好調整 style.
  5. a 裡面只能有 inline element, 所以不能放 h2 (block element), 要 h2 > a
  6. img (預設是 inline element)跟下面的有一個小縫隙, 這會隨著瀏覽器不同改變. display 改成 block 就不會有縫隙了
  7. display: block 比較常用在解一些 bug, 像是 img bug 等等. 也有因為要讓 link 變大一點比較好點到(nav menu 之類). 要在 inline element 裡面用 line element 偽裝成 block element, 主要也是要撐開 element 作 styling, ex. ul > li > a > span <— 這時 span 就可以用 display:block 來撐開. 因為你不能放 div 在 a 裡. display:inline 基本上只用在 float element hack. 或是你真的像讓某 block element 偽裝成 inline, 不過非常少見.

Padding, Margin

  1. 能用 padding 就不要用 margin, margin 在 ie 比較會有無法預期的錯誤. 基本上 margin 拿來置中就好
  2. 同一個 element 盡量不要同時用 margin 和 padding
  3. margin, padding 盡量用 margin: 8px 0 0 10px 這種寫法, 四個數字分別代表 “上, 右, 下, 左”, 能用 0 表示的時候不要用 0px

Cross Browser

  1. 盡量不要用 :first-child, :last-child 是因為不是所有瀏覽器都支援, 不用 .first-child 是因為 server-side 要 generate content 要下判段式, 所以如果能用簡單的 css 解決, 當然最好

其他

html5 ie hack 請加上下面這段(加在 head, 而且為了更好的效能請加在 css 檔的後面)

<!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

有用 Zen Coding 嗎? 沒有的話一定要用一下! 可以讓寫 code 的效率大增!

另外記得用 .gitignore 把不想 commit 進去的東西列出來.gitignore 要放在 project 根目錄