【行動網頁規劃】Responsitive Design 實戰設計(II) Rest CSS

Hi! 各位朋友好,我是小蔡老師,延續上一個單元在這次的教學單元二,我們要稍微了解一下上次教學所提到的Reset CSS的實用性問題‧

首先在一開始我們要先了解為什麼我們需要Reset Css?

網頁設計的標準(HTML & CSS)是由 W3C 協會所制定的,然而,各大瀏覽器為了展現自身的強大,都自行加入一些有的沒有的設定,造成網頁設計師在排版的時候會因為每個瀏覽器的不同呈現效果也會有所不同,所以以目前現狀排版也會因為個別設計師所認定的瀏覽器使用度上的頻率僅製作這幾種常用流覽器為主的排版,也因為 CSS 最令人頭痛的部份就是各家瀏覽器的差異性太多了,舉例來說利用 CSS 寫好的網頁排版明明在舊版IE6 看起來很正常,但是到了 Firefox 卻全變了樣,排版的位置都跑位了…. 更何況還有 IE7、IE8、Safari、Opera、Google Chrome… 造成這樣大差距,主因在於「W3C 所制定的 HTML 標籤在 CSS 中的預設值 」

網站名稱: Appendix D. Default style sheet for HTML 4
網站支援:各類瀏覽器皆可
網站系統: Windows, Mac, Linux
官方網站:官方站點

至於最近幾年因為瀏覽器已經開始漸漸因為行動裝置的統一性需求也開始嚴格要求電腦系統流覽器規格的統一化,所以目前比較常用來比較的以這五大瀏覽器為主IE8-10、Safri、Chrome、Firefox與Opera
目前CSS支援度資料也有專屬的網站統一記錄中


網站名稱: Can I use…
網站支援:各類瀏覽器皆可
網站系統: Windows, Mac, Linux
官方網站:官方站點

步驟1. 如果我們想簡單的判定是否可以使用此語法支援度問題,可利用該網站評估語法的適用性
004
其實這樣一看非常一目了然的了解各種語法在各種瀏覽器支援度情況

步驟2. 所以我們ReSet CSS真正的目的也只是盡量讓各種瀏覽器上網站可以呈現相同的排版情況,尤其是當裝置變動狀況下也能符合我們所謂的行動裝置需求,目前市面上最常使用的Reset Css語法 通常是以 YUI 和 Eric 著名設計師的資料為基準參考可由下面連結直接進入官網

ReSetCSSCode參考
YUI https://yuilibrary.com/yui/docs/cssreset/
Eric Meyer https://meyerweb.com/eric/tools/css/reset/

步驟3. 也因為Reset CSS語法雖然是固定也因為此原故造成整體語法會受制於ReSet CSS語法 例如字體 邊框無法隨心所欲的設定,故有人提出所謂的Global CSS的概念,因為這牽及有點廣,這邊老師的做法則是採取部分ReSet Css語法做為需求性語法,故大部分CSS設計師都有自身的ReSet CSS語法設定表,以下為小蔡老師比較常用設定的設計表僅供參考
001

002

003

以上是這次的HTML5+CSS3 Responsitive Design (II) Rest CSS 總結希望大各位朋友有所幫助 在下個單元我們要討論各種類型排版部局的說明
(BLOG 線上教學皆為雅朵美術工房所有&BLOG作品皆為設計者阿哲類所有 未經同意請勿盜連或者轉帖,違反者依法處理)

我想發問