目錄
CSS3在哪些方面进行了改进
选择器
边框
背景
文本
颜色
渐变
盒模型定义
布局盒模型
变形、过渡、动画
媒体特性
font-face和图标字体
渐进增强和优雅降级
渐进增强
优雅降级
引用一段stack overflow大神对渐进增强和优雅降级方式的解释
首頁 web前端 html教學 图解CSS3 读书笔记--前言_html/css_WEB-ITnose

图解CSS3 读书笔记--前言_html/css_WEB-ITnose

Jun 21, 2016 am 09:04 AM

注:本文来自本人阅读大漠前辈的图解CSS3后的个人总结。
登入後複製

CSS3在哪些方面进行了改进

选择器

新增:关系选择器(只有E~F,用于匹配E后的所有兄弟元素F);属性选择器、结构伪类选择器:顾名思义,用于dom节点结构关系的选择器如E:first-child等;ui元素状态伪类选择器:主要用于表单元素状态的选择器;其他新增选择器。

边框

新增:border-radius(圆角)、border-image、box-shadow。
改进:border-color。

背景

新增:background-origin(背景原点);background-clip(背景裁切)、background-size(背景尺寸);多背景属性和内联元素背景图像平铺循环方式。

文本

新增:text-shadow(文本阴影);text-overflow(文本溢出处理方式):一般会配合white-space:nowrap和overflow使用;word-wrap、word-break、white-space(文本换行)

颜色

改进:CSS颜色模式(新增HSLA、RGBA模式);新增:opacity属性。

渐变

新增gradients属性实习元素颜色渐变效果。

盒模型定义

新增:box-sizing属性,重新定义盒子模型;overflow-x、overflow-y内容溢出处理方式;resize自由缩放;outline轮廓属性。

布局盒模型

运用Flexbox模型进行布局。新增columns属性进行多列布局。

变形、过渡、动画

新增2D、3D变换特性;transition元素状态过渡效果;@keyframes和animation配合使用实现复杂动画效果。

媒体特性

主要是提供媒体识别和匹配相应样式的方法。

font-face和图标字体

新增@font-face模块,从新定义图标方式。减少图片的引入。

渐进增强和优雅降级

渐进增强和优雅降级是两种不同的网站实现方式。

渐进增强

保证最核心功能的实现,让任何低端浏览器都能看到站点内容,然后考虑使用高级但非必要的CSS和js等增强功能。
这种方式可能会让领先的浏览器的优势无法充分显示出来。

优雅降级

先考虑低端设备用户能否看到所有内容,然后再此基础之上为高端用户进行设计。
为高端设备用户提供一个完美的应用,也为不同性能级别的设备用户设计不同级别的不那么完美的应用。

引用一段stack overflow大神对渐进增强和优雅降级方式的解释

They ARE almost exactly the same thing, but they differ in
context.There is a class of browsers called "A Grade Browsers". These
are your typical audience members that (probably) make up the majority
of your visitors. You'll start with a baseline of these users. Call
this best modern practices.

If you want to enhance the experience for anyone happening to use
FF3.6 or Safari 4 or some other whizbang developer nightly webkit
whathaveyou, you'll want to do awesome things like rounded corners via
css shadowed text (but please god, not TOO much) drop shadows (see
above parenthetical) These make your site kick-ass looking, but won't
break it. This is progressive enhancement.Embracing the future from
the point of best practices.

On the other hand, your niche Nintendo site attracts a fair number of
IE5 users.Poor you, but you also want to make sure they keep coming
back. You might provide an alternative to your ajax behavior by
including the ajax script in an external file and if their JS isn't
turned on, maybe your links update the whole page. Etc. From the point
of view of best modern practices, you're making sure that certain
historical markets are being catered by some semblance of a functional
site. This is graceful degradation.

自己大概翻译一下:

其实这两种方式都是同一个概念,只是他们运用的背景不同。有一种浏览器叫做一级浏览器,这些大概会是你网站受众多数使用的浏览器,你将基于这一类比较高级的浏览器进行网站的设计制作。这种方式称为最佳现代实现。

现在举个栗子:如果你想提高如FF3.6或safari 4浏览器用户们访问你网站时的用户体验,你可能会加这些效果:css圆角、文字阴影等。这些特性会让你的网页看起来很眩酷,但是不会破坏原有的基础功能。这就是渐进增强。

但是这个时候你的网页有相当一部分的ie5用户。。你不想失去他们,你可以为你的网页添加额外的文件来解决ie5下js打不开ajax脚本的问题,来为实现ajax行为提供另一种选择。或者直接用链接的方式打开整个页面。从现代最佳实践方式的角度来说,你要确保你的网页有类似功能来兼容拥有一定历史市场的低端浏览器。这就是优雅降级。

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1325
25
PHP教程
1272
29
C# 教程
1252
24
了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML,CSS和JavaScript的未來:網絡開發趨勢 HTML,CSS和JavaScript的未來:網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述 HTML與CSS vs. JavaScript:比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:建立網頁的結構 HTML:建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML與CSS和JavaScript:比較Web技術 HTML與CSS和JavaScript:比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML:是編程語言還是其他? HTML:是編程語言還是其他? Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

See all articles