探索網站設計與配置的新概念

由於 Windows Internet Explorer 10 和 Internet Explorer 9 強力支援階層式樣式表層級 3 (CSS3),因此您可以確定您網站的設計在所有常用的瀏覽器中都可以正常運作。Windows Internet Explorer 開發人員中心的這個部分,說明階層式樣式表 (CSS) 標準的增強支援對您網站的內容設計與配置所創造的一些可能性。本主題包含以下幾節:

Internet Explorer 10 How-To 主題

下列主題著重於 Internet Explorer 10 的數個新 CSS 功能:

主題說明

如何使用 CSS 防止 (或啟用) 網頁上的文字選取

-ms-user-select 屬性是新的 CSS 屬性,能夠讓網頁及應用程式的開發人員控制使用者能夠在網頁或使用 JavaScript 的 Windows 市集應用程式的何處選取文字。

如何使用 CSS 格線建立調適型配置

我們會在此處逐步為您講解如何建立一個簡單的「燈箱」網頁,以用於瀏覽影像中心中的相片。我們使用格線配置編排網頁的內容,並利用媒體查詢來最佳化以直向或橫向檢視時的配置。

如何使用 CSS 轉換、轉場和動畫讓網頁變得更生動

Internet Explorer 10 (以及使用 JavaScript 的 Windows 市集應用程式) 新增 Internet Explorer 9 中引入的 CSS 2D 轉換的支援,方法是透過支援 CSS 3D 轉換、CSS 轉場以及 CSS 動畫。

如何使用 CSS 加入有趣的文字效果

Internet Explorer 10 使用 text-shadow CSS 屬性來引入硬體加速文字陰影的支援。

 

Internet Explorer 9 How-To 主題

下列主題強調從 Internet Explorer 9 開始支援的數個 CSS 功能:

主題說明

使用 CSS3 新增圓角

您可以使用 CSS3 將配置元素的邊角變圓,以美化網站的外觀。在這裡會學到一些基本方法,以使用 Internet Explorer 9 中新的內建圓角支援,讓網站版面配置更加引人注目。

使用 CSS3 新增陰影

您可以使用 Internet Explorer 9 和 CSS3,在您版面配置元素的外部或內部加上陰影。您甚至還可以為 Internet Explorer 9 新增的圓角支援所建立的圓角添加陰影。

使用 CSS3 建立特色按鈕

使用 CSS3 和 Internet Explorer 9,您只需使用少量的標記,便可以建立引人注目的按鈕。您會在這裡學到如何透過 CSS,將簡單的超連結完全轉換成按鈕樣式。

使用 CSS3 增強網站的字型設計

本主題將為您示範如何將新的 CSS3 字型功能合併到網站,如此就可在 Internet Explorer 9 與其他現代瀏覽器中強調您的字型設計。

 

新 CSS 功能的設計人員指南

如果您是經驗豐富的網頁設計人員,您就知道當不同的瀏覽器對您要使用的最新功能所提供的支援層級參差不一時,是多麼令人沮喪的事。Microsoft 已經致力於和標準制訂組織及其他瀏覽器廠商共同合作,希望能解決這個功能上的隔閡。我們身為 CSS 工作小組 (CSSWG) 的成員,我們深深了解與全球資訊網協會 (W3C)、其他瀏覽器廠商、規格修訂人員以及從更廣大社群邀請來的專家定期聚會,對於推動所有使用者的 Web 進展狀況來說是必要的。

最終成果就是我們在 Internet Explorer 9 中新增了許多 CSS3 功能支援,而在 Internet Explorer 10 提供更多支援。您可以從 Internet Explorer 10 開發人員指南Internet Explorer 9 開發人員指南中看到完整的新功能清單。

以下是 Internet Explorer 10 的一些重點:

以下是 Internet Explorer 9 的重點:

Internet Explorer 小組部落格文章

IEBlog 是您聯繫 Microsoft Internet Explorer 小組的專線。您可以檢視含 "CSS" 標記的文章,尋找有關內容設計與配置的最新發展。

以下是幾個可能對您有用的最新部落格文章:

標題說明

使用 CSS 產生全頁動畫

Internet Explorer 9 引入對 CSS 2D 轉換的支援。Internet Explorer 10 新增對 CSS 3D 轉換和 CSS 動畫的支援。

IE10 中的不加首碼 CSS3 漸層

Internet Explorer 10 支援 W3C 候選建議的不加首碼形式的 CSS 漸層。

IE10 中的 CSS3 3D 轉換

CSS3 功能讓您更容易建立豐富的沈浸式網站體驗。

使用 CSS user-select 控制選擇項目

Internet Explorer 10 包含對新 CSS 屬性 (-ms-user-select) 的支援,讓 Web 開發人員更容易精確控制網站上可選取的文字。

CSS 角落:使用整體字型

隨著對 CSS3 @font-face 規則及 Web 開放字型格式 (WOFF) 字型封裝格式的跨瀏覽器支援,最新的 Web 印刷樣式已經擴充成遠超出「Web 安全字型」的範圍。

使用 CSS3 轉場和動畫增加特質

Internet Explorer 9 和 Internet Explorer 10 中的一些先進功能 (例如以高效能方式編譯 JavaScript 和以硬體加速方式呈現 HTML5 與 CSS3),讓 Web 開發人員能夠創造出比先前更豐富的使用者體驗。CSS3 轉場和 CSS3 動畫這兩個相關的功能,讓 Web 開發人員可以用宣告的方式輕鬆地為網頁賦予特色。

在 IE10 中建立以 RTF 為中心的網頁

Internet Explorer 10 引入兩項新的 CSS 功能,用意是讓開發人員能夠更輕鬆地建立以 Rich Text 為中心的網頁和應用程式。CSS3 區域提供一種可以讓內容通過多個不連續區域的輕量型機制。Internet Explorer 10 的 CSS3 斷字支援提供一個簡單的機制,讓開發人員可以在眾多語言中以連字號連結文字。

IE10 中的 CSS3 文字陰影

Internet Explorer 10 引入了硬體加速 CSS3 text-shadow 支援。text-shadow 屬性是 Web 開發人員要求的熱門功能之一。它可以用貼近標準的方式達成先前很難或無法表現的文字效果,而不需借助於文字內嵌影像。

Internet Explorer 10 和 CSS 的調適性版面配置功能

Internet Explorer 10 包含許多新的 CSS3 功能,這些功能都開發成推展 Web 標準的實作。本文主要探討其中三項 CSS 功能—CSS3 格線配置、彈性方塊配置以及多欄版面配置。

 

Internet Explorer 範例庫

Internet Explorer 範例庫可以激發您在 Internet Explorer 中實作一些新設計和配置功能的靈感。

以下是一些範例:

範例說明

CSS 彈性方塊

CSS 彈性方塊可以讓您建立當使用者變更瀏覽器視窗大小時,所含元素、控制項、表單、工具列以及功能表可以自行調整大小和重新定位的網頁。

CSS 多欄版面配置

雖然印刷版的報紙逐漸被電子報取代,但在線上仍正常保有及使用欄位。CSS 多欄版面配置可以讓您以一些不同的變化建立吸引人的文字配置。

CSS 格線重疊

CSS 格線可以讓您建立配置中的元素會重疊並隨視窗大小變更,而且不需複雜像素計算的網頁。

CSS 排除範圍

CSS 排除範圍可以讓您建立文字及其他內容可以繞特定元素換行的網頁。本範例顯示如何使用排除範圍建立元素絕對置於容器相對位置的複雜配置。

 

Internet Explorer Test Drive 示範

Internet Explorer Test Drive 是探索 Internet Explorer 9 和 Internet Explorer 10 中內容設計之可能性和呈現方式的絕佳方式。如需可參考示範的完整清單,請參閱 Test Drive 網站地圖。 下列是一些常用的 CSS 示範:

其他重要資源

 

 

顯示:
© 2014 Microsoft