Tagged

css3

A collection of 58 posts

css3

css3新增3大背景属性 clip, size, origin

前言 本篇文章有点长,假如你没有耐心看完请直接点击浏览器右上角按钮,要么就是静下来慢慢看完,假如有理解不到位的地方或者我说得不好的地方,那么问题就不要来了,直接丢砖过来。谢谢!O(∩_∩)O 好了,最近进度有点慢了,继续来发css3的教程,写完css3背景属性之后我去研究下Google 开发者调试工具之webapp调试工具栏。智能手机的出现让HTML5+CSS3有了一个全新的舞台去演绎。很多的单页面都应用到了css3的酷炫效果,所以捣腾一下webapp开发工具应该可以帮助自己了解一下相关知识。算是一个加分项么。。。 前面的几篇文章已经介绍了边框属性,那么今天我们正式来入手这个背景属性,css3中新增了3大属性,分别是背景裁剪(background-clip)、背景尺寸(background-size)、背景起点(background-origin),因为涉及到的知识点不是很多,所以在这里一一写出来,算是整合吧。 背景裁剪 background-clip 先来说说背景裁剪属性clip,假如你看过前面的文章的话,那么你就会对裁剪属性有一丝了解。不过边框图片属性中是切片属性slice而非clip,对于其含义,前者是用刀子随便切,后者是为了某个区域而裁剪额外的区域,比如说桌布,想把尺寸为1.2M1M桌布正正方方地码在尺寸为1M1M的书桌上,那么必须用剪刀把多余的0.2M卡擦掉!而slice可不管你这么多,使出十八般武艺一道乱剪。先来看看clip的语法 属性名:

border-image

css3:border-image边框图像详解

自我介绍 hello,大家好,我叫小黑,也叫xiaoho,目前喜欢并从事写页面。因为不喜欢在那些类似BBS型的论坛上发帖,所以之前在html-js上发表几篇戳文,现在申请了前端观察打字员,在这里谢谢神飞童鞋,虽然我不懂他是干嘛的~不过为什么选择在这里发表文章的缘由就是下面这句话: 向来中国的前端开发领域,就像一盘散沙一样,每个人每个站都各自为营,高手就像就像天空的星星一样多,但是他们的成就却很少广为传播,初学者却苦于在大海一样的设计中寻找自己的参考。 我非圣人,我只是把我自己所学所想的表达出来,毕竟个人想法有限,假如有悖论或者冒犯之处,还请拍砖,大家一起在争论中提高。还有,也许你们可能也会奇怪,为什么网上有这么一大把的学习的文章,类似的文章还要自己写出来,我的个人想法是:只有自己亲自去实践过才有发言权。 那么问题来了:怎么对我的言语进行反驳呢?在评论中猛戳! 前言 对于这个border-image属性已经不是什么新奇的事情了,也是一个老生长谈的话题。这是属性从很多年前已经出现了,但一直形单影只的,似乎不被看好,但是假如你对此深入研究之,想必其用处还是多多,不过很可惜到目前为止对于浏览器支持还不比其他css3属性多,特别是IE,只有IE11以上才支持,详情请移步 border-image兼容性。不过很好,对于纯正的现代浏览器和移动浏览器支持度还是非常牛逼哄哄的,所以今天就来详解一下这个属性的各个值。 border-image摘要

css3

css@supports

基于浏览器的特性检测大家应该已经很熟悉了,特别是modernizr.js推出来之后。其实w3c也出了规范,可以基于css来做一些特性检测,也就是@supports,这个特性已经有两年多了,之前浏览器支持度不够,现在webkit nightly也开始支持了,也就是说safari 9会支持到,这样的话,Blink+webKit+gecko都支持了,只剩下IE浏览器不支持了,嗯,这样更方便对IE差异化处理了。 但是@supports并不能完全替代JS的特性检测方法,它只支持对CSS属性的检测,其它HTML5 api以及webP等技术的检测还是需要JS来完成。 用法: @supports就像media query一样简单: @supports(prop:value) { /* more styles */ } @supports也允许你用各种复杂的组合来进行特性检测。 基本用法: @supports (display: flex) { div { display: flex; } } 你可以用这种方法来检测各种基本的CSS属性。 not关键词 就像这样: @supports not (display: flex) { div { float:

css3

前端实现:Medium(一)

大家好,我是新人kalasoo,现在还处在“试用期”,作为一个自学出来的前端新手,能够加入前端观察实在是异常兴奋。既然要一起来维护这个关于前端的博客,我一定会努力争取我所写的内容可以追上这里文章的质量水平。作为开始,我会做一个小小的系列来分析那些有名、特别、设计感十足或是交互体验出众的网站。同时我还会认真阅读其前端代码,为大家重现那些神奇的效果是如何实现的,当然也会尽我所知引用更多的资源来丰富内容。希望这个系列可以让大家更加了解前端技术,同时也可以锻炼我自己。 我们就从Medium开始 决定第一个来做这个网站的原因很简单,那就是好看啊!由于Medium的出现严重影响改变了博客、发布平台的风格以及编辑器等前端组建的设计,我们会分多期来分析各种细节是如何实现的。我们尤整体走向局部,所以我们先从整体布局来分析: 首页布局以及大背景图 网站背景 Medium是由Twitter的联合创始人:Evan Williams和Biz Stone创办于2012年8月创办的一个文章写作、阅读平台。注意,我这里并没有用很多网站上援引的博客平台是因为Medium的出现塑造了一种新的社会化自我营销渠道。在首页引入的Welcome to Medium里,我们看到它的初衷是为了让人们更好地写作,但是作为Twitter的一个延伸,它依旧搭载在一个社交性很强的平台之上。这也让在Medium中写作的人更愿意去分享、营销、推广自己的写作内容,甚至成为一些知名Developers, Designers and even Managers的发布渠道。例如:Facebook的Product

css3

高性能 CSS3 动画

注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览。请尊重版权,转载请注明来源,多谢~~ 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况。 关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画。 JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案。 而在移动端,我们选择性能更优浏览器原生实现方案:CSS3动画。 然而,CSS3动画在移动多终端设备场景下,相比PC会面对更多的性能问题,主要体现在动画的卡顿与闪烁。 目前对提升移动端CSS3动画体验的主要方法有几点: 尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0,

css3

iAnimator-CSS3动画制作工具

基于CSS3的动画越来越火爆,各大网站都开始尝试使用CSS3来达到更炫的用户体验,Google的logo也一次次吸引着大家的眼球,但光鲜的CSS3动画后面,可能是前端攻城师不断修改查看修改查看反复的一个过程,对时间、位置的精确把控,意味着巨大的工作量,于是,iAnimator来了! 简介 动画制作软件一般为本地客户端软件,如Sencha Animator 、EDGE等,功能非常强大,但是生成的代码过于庞大臃肿,并且收费,而iAnimator采用WEB方式来实现可视化的CSS3动画制作,轻巧、快速,可扩展性强 基于iAnimator制作动画,因为可视化,及预置的特效,及众多属性面板,可以大大提高动画制作的精确性,减轻前端开发人员工作量 体验 http://ianimator.kundy.net/ 主界面 特色 1. 批量上传图片素材 2. 丰富的属性面板 3. 图层、帧的灵活控制 4. 可视化图层编辑 5. 丰富的特效库 6. 快速预览 7. 快速集成

css3

position:sticky介绍

整理自:STICK YOUR LANDINGS! POSITION: STICKY LANDS IN WEBKIT 中文原文:position:sticky介绍 请尊重版权,转载请注明来源,多谢~~ 用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如,侧边栏的部分区域。position:sticky为此而生。 position:sticky用法 position:sticky是一个新的css3属性,它的表现类似position:relative和position:fixed的合体,在目标区域在屏幕中可见时,它的行为就像position:relative; 而当页面滚动超出目标区域时,它的表现就像position:fixed,它会固定在目标位置。 使用起来也非常简单: .sticky { position: -webkit-sticky; position:sticky; top: 15px; } 目前来说还需要用私有前缀~~ 浏览器兼容性: 由于这是一个全新的属性,以至于到现在都没有一个规范,

css3

CSS3实现四叶草、水母与玻璃瓶

以下为纯CSS制作,闲话不说,上个效果图先: 玻璃瓶质感、四叶草漂浮于水面,荡起涟漪、摇摆上升的气泡…很美的意境,然而你也许会说你喜欢瓶子不喜欢四叶草,那可以把四叶草给none掉,不喜欢植物的话,那你喜不喜欢动物呢: 应该看得懂这只萌物是什么生物吧..没错,水母 一只…众生皆平等,不能只有植物没有动物哈… 然而你也许不喜欢蓝色的水,那我写几套多彩的玻璃瓶: 如果你感兴趣的话,可以通过这个链接,下载我的源代码:《四叶草、水母与玻璃瓶》 为方便下载,提供本人网盘帐号密码,请不要弄乱里面的页面,以方便其它人下载,谢谢。 帐号:287019674@qq.com 密码:123456 下面是对代码的分析: 一、四叶草 四叶草的代码结构如下: 一个leaves挂着叶子,叶瓣用四个I标签表示,一个branch代表叶茎 1) 叶瓣 每 个叶瓣都是一个leave,然后用angle控制它们的旋转,然而一个leave的话是画不出一个心形的,所以我用多了一个leave:

css3

理解css中的长度单位

很基础的一个问题,但是,其实看起来很复杂的样子~~我们来捋一捋吧~~ css3中也对css中用到的单位进行了改进,单位也就是那几个,所以我们要搞清楚再用。 %——百分比 in——寸 cm——厘米 mm——毫米 pt——point,大约1/72寸; pc——pica,大约6pt,1/6寸; px——屏幕的一个像素点; em——元素的font-size; ex——font-size的x-height值,为小写字母x的高度,通常相当于font-size的一半。 我们常用的有px、%、em,px就不多说了,em和%多说点儿: .box{ line-height:1.3em; } 元素的行高是当前元素继承的font-size的1.3倍, .box{ font-size:1.3em; } 当前元素的字体大小是其继承的font-size的1.3倍。 .box{ line-height:

css3

css3 calc()功能小窥

之前,我们想要实现一个完美的宽度自适应的输入框好麻烦,曾经也被作为对前端技术的一个挑战。类似的常见场景还有100%宽+边框的容器等。遇到这些情况,我们不得不分外小心,因为各个浏览器的表现可能不一致。 现在,firefox和webkit相继支持calc()功能了,我们也可以学习下了。 calc()是干嘛的? calc()是单词calculate(计算)的缩写,是css3的一个新的长度单位功能,可以使用简单的数学运算。 嗯,CSS3越来越高级了。 运算规则 calc()使用通用的数学运算规则,但是也提供更智能的功能: 使用“+”“-”“*”“/”四则运算; 可以使用百分比、px、em、rem等单位; 可以混合使用各种单位进行计算。 实例: 我们来看几个小例子来理解下calc()功能吧: .box{ border:1px solid #ddd; width:calc(100%-2px) } 容器宽度加上边框宽度正好100%。 .box{ width:

css3

CSS3 icon font完全指南

大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon,我们就可以尝试使用font来实现,本文将详细讲解这种用法。 为什么要将icon做成字体? 在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式,比如png8 alpha透明或者png8 index透明等。 比如,twitter用到的各种小icon: 这种情况下,使用字体来实现图标就有很多优势: 字体文件小,一般20-50kb; 容易编辑和维护,尺寸和颜色可以用css来控制; 透明完全兼容IE6; 如何将icon变成字体? 最关键的是要将设计稿中的icon(要有矢量路径,位图没法转化)完美还原成字体,这并不是很麻烦。 我们要用到一些字体编辑软件,比如FontCreator、FontLab等,这里我们用FontLab来演示。 还原步骤很简单: PSD–>eps–>FontLab,即将PSD转换为illustrator的eps格式,然后将某个字符复制到FontLab中即可。 具体步骤: 打开设计稿psd,将其保存为Photoshop eps格式,我们这里以Qzone中说说发表框的表情icon为例:

css3

user-select介绍

之前在《CSS的未来:一些试验性CSS属性》中有提到user-select这个属性,最近整理的时候有遇到,所以详细的了解了下,这里简单的介绍下。 这是在css3 UI规范中新增的一个功能,用来控制内容的可选择性。 用法: user-select:value; 值: auto——默认值,用户可以选中元素中的内容 none——用户不能选择元素中的任何内容 text——用户可以选择元素中的文本 element——文本可选,但仅限元素的边界内(只有IE和FF支持) all——在编辑器内,如果双击/上下文点击发生在子元素上,改值的最高级祖先元素将被选中。 -moz-none——firefox私有,元素和子元素的文本将不可选,但是,子元素可以通过text重设回可选。 .selectDemo{ background-color:#eee; padding:20px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .selectDemo{ background-color:#eee; padding:

before

一些上流的CSS3图片样式

译自:CSS3 Image Styles 中文:一些上流的CSS3图片样式 请尊重版权,转载请注明来源,多谢~~ 直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们。不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器也会很好地渲染。Darcy Clarke和我做了一个简单的教程,讲解如何使用jQuery来动态地制作完美的圆角图片。今天我将重温这个主题然后向你展示使用background-image的方法可以实现多少效果。我将向你展示如何使用box-shadow、border-radius 和 transition 来创作不同的图片风格。 先看下demo 问题 (见 demo) 看一下demo,请注意在第一行的图片中使用了border-radius和inset box-shadow。Firefox会直接在图片元素上渲染border-radius,但不会渲染inset box-shadow。chrome/safari则两者都不渲染。 解决方案 要让 border-radius 和 inset box-shadow 正常工作,解决方案就是将实际图片变作background-image. 动态方法 要想动态实现,

css3

IE10将增强对HTML5和CSS3的支持

Windows 8 终于发布了,虽然现在可用的只是开发者预览版,好消息是,IE 10 也随着发了,虽然现在还只有Windows 8可用。我们来看下IE10都有哪些新特性吧。 IE开发者中心给到了一份详细的针对前端开发者的文档,列出了IE10支持的HTML5和CSS3新特性。嗯,它终于跟上了: CSS3 css region css3多列 Flexbox grid 定位浮动(positioned float) 3D变换(3D transfrom) 动画(animation) 渐变(gradient) text-shadow 去掉样式表限制——在IE9之前的版本中,每个页面最多只能加载31个样式表文件,@import也只能最多嵌套4层,IE10中去掉了这些限制。 HTML5 - 脚本同步——script标签的async属性,用来定义脚本是否异步执行 - File API - History - Parsing -

css3

CSS3 pointer-events介绍

其实早知道这个属性,但是一直没有去研究过。今天正好在twitter看到这个词,就去研究了下,正好解决了目前遇到的一个小难题,所以分享下。嗯,其实这是个比较简单的CSS3属性。 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样的话,这些浮在上面的div或者其它元素一般都会给个宽高,或者relative的元素可以不给宽高,这个时候,这些元素就会盖住下面的地图层,以至于地图层无法操作。。。 然后正好在Google map见到了类似的问题,拿来当例子来说: Google map中左上角的操作区域占位是挺大的,如红色框区域,然后在这个区域是无法操作地图层的。那么我们就可以给这个div设置 pointer-events:none,然后你就会发现下面的地图就可以拖动和点击了。 但是悲剧的是,操作区域本身却无法操作了,直接被无视掉了。不过不用担心,我们可以给里面的元素重新设置为 pointer-events:auto,当然,只给需要操作的元素区域设置。 貌似有点儿纠结,不过这样可以保证地图本身的可操作区域最大化。 嗯,上面只是个简单的例子,来看下具体用法: pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted

css3

纯CSS3透明水晶盒

相信大家有看过这个例子:3D盒子,在书《CSS3 实战》上第282页有个综合实战“设计动态立体盒子”的例子,实现方式跟它一样,我的盒子也是以它为原型来设计的,不过在实现方面有做修改、优化,以及增添了一些细节,下面是我的盒子Firefox截图: 透明化了盒子,通透性强了,因为透明了,所以背部的三个面也就要做出来了,所以总共6个面,比原作多3个; 投影镜像,让盒子的立体感更强烈; 边角线的处理,让盒子面与面之间过渡和谐。 你可以点击这里下载 源代码(只是写了moz下的效果,webkit的就没写了) 盒子的HTML结构很简单,如下: 前 后 左 右 上 下 一个大盒子包住“前、后、左、右、上、下”6个面,因为定位产生层高的关系,所以它的顺序其实是“后、下、左、前、

css3

纯CSS3文字 渐变内发光投影效果

前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考。发个效果图大家看先: 投影shadow box-shadow 一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影,box-shadow设置方型盒子投影,用raidus的话可以让盒子产生圆角,看起来就很圆滑舒服,一般的写法是这样的: -moz-box-shadow:1px 1px 5px #000; 1px(水平方向偏移)  1px(垂直方向偏移)  5px(阴影羽化)  #000(颜色); 当偏移量为负数时就向反方向偏移,试试就明白了,这里不贴图。 这个是一般的投影效果,如果是内阴影,那么就加个inset属性,写法如下: -moz-box-shadow:**inset** 1px 1px 5px #000; 这样就变成了PS里面的内阴影,效果很赞,很实用,如果需要内发光效果,则背景底色深,投影颜色浅,这样就会感觉是发光,而背景颜色深,

css3

CSS3 Region:基于HTML和CSS3的富页面布局

译自:CSS3 regions: Rich page layout with HTML and CSS3 中文:CSS3 Region:基于HTML和CSS3的富页面布局 请尊重版权,转载请注明来源,多谢! 互联网已经成为一个提供参考、教材、新闻、文章和交互应用的大宝库了。然而,当为印刷设计内容时,一些功能显然仍然不可能或者很难使用Web标准来实现。 印刷出版物正在探索更好的方法来转换或者改变他们的内容以适应富数字格式。我们也看到这是一个让网页更富于表现和支持更复杂布局的好机会。 Adobe通过增强CSS进行了一些实验来展示一些传统杂志使用的复杂布局。我们也提交了一些建议到W3C CSS工作组,并构建了一个原型来通过webkit实现这些提案。你可以从Adobe Labs下载这些原型体验下。 然后你也可以在CSS Regions Module和这个W3C网站上的CSS Exclusions Module 页面找到W3C编写的草案。你也可以订阅W3C CSS 邮件列表来讨论这个问题。欢迎在邮件标题中加入”[css3-regions]”或者”[css3-exclusions]”来在这个邮件组中讨论这个问题。当然也可以通过Adobe Labs的CSS Regions 论坛反馈问题。

css3

有用的:nth-child秘方

译自:Useful :nth-child Recipies 中文:有用的:nth-child秘方 请尊重版权,转载请注明来源,多谢! 当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们,就能写出越好的CSS规则! 在这些简单的”秘方”(实际上是表达式)中我将重复的使用一个简单的列表并随即选择数字。但是很明显很容易改变它们以获得类似的选择器。 只选择第五个元素 li:nth-child(5){ color: green; } 要选择第一个元素,你可以使用:first-child,或者我相信你也可以改下上面的例子来实现。 选择除了前面的五个之外的所有元素 li:nth-child(n+6){ color: green; } 如果有超过10个元素,它将会选中超过5个。 只选择前面的5个 li:nth-child(-n+5){ color: green; } 从开始的那个,选择每第四个 li:nth-child(

css

CSS的未来:一些试验性CSS属性

原文:CSS的未来:一些试验性CSS属性 译自:The Future Of CSS: Experimental CSS Properties 请尊重版权,转载请注明来源,多谢! 尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius、box-shadow或者transform等。它们有良好的文档、很好的测试并且最常用到,所以如果你最近在设计网站,你很难能脱离它们。 但是,隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性,但是它们并没有得到太多的关注。或许它们中的一些应该这样(被无视),但是其它的属性应该得到更多的认可。最伟大的财富隐藏在 Webkit 的下面,而且在 iPhone 、 iPad 和 Android apps 的时代,开始了解它们会灰常有用。就连 Firefox 等使用的 Gecko 引擎,也提供了一些独特的属性。在本文中,我们将看一下鲜为人知的

css3

Opera 11.10正式版以及IE10 pre版本发布

前几天发了篇文章预告Opera 11.10版本的发布,Opera效率还是很高的,两三天一个 snapshot版本,昨天正式版终于发出来了。差不多同时,IE10 预览版也发了。我们简单的看一下吧。 Opera 11.10对HTML5和CSS3的支持,和前一篇文章中提到的基本一样,不再多说,值得注意的是,正式版增加了对HTML5 File Api的支持,详情请查看Opera官方的文档。 IE团队貌似也想发力了,IE9刚发布不久就搞下一个版本的IE了,是想让人看到一点点希望么?但是IE的作风是,从来不会让前端开发人员省心的。 IE10 pre中的新特性列表: 支持兼容模式(x-ua-compatible) 支持ECMAScript 5 strict模式 支持渐变,支持此背景,而且引入了-ms-linear-gradient和-ms-radial-gradient以及-ms-repeating-linear-gradient和-ms-repeating-radial-gradient等私有属性。 支持CSS3多列(multi-column) 支持CSS3 Flexbox,悲催的,又是私有的display:-ms-box,以及-ms-box-xxx属性 支持CSS3 格栅(grid),嗯,还是私有的属性,display:

css3

Opera 11.10 增强对CSS3等的支持

Opera 11.10在beta中,据说快要发布了,然后Presto升级到了2.8版本,有一些新的特性,值得我们关注。 Opera还是很给力的,更新的内容让人看到了些希望: 支持CSS3 多列(multiple columns) 支持CSS3线性渐变,不过要加上-o-前缀,但是不支持放射渐变 viewport meta属性增加target-densityDpi 增加媒体查询类型 -o-device-pixel-ratio 为cursor属性添加-o-zoom-out和-o-zoom-in类型(嗯,现在只有IE不支持了,IE要通过加载cur文件实现,然后IE6/7还会造成超大量请求的bug) 支持WebP图片格式 更详细的更新信息请看这里,从下面的信息可以看到Opera目前对HTML5和CSS3的支持还是走在前面的,和Webkit不像上下,而且对HTML5表单的支持是最好的。 期待正式版。

css3

IE9正式发布

无论你是否期待,也无论你支持或者反对,IE9正式版如期发布了。嗯,这一点儿比Mozilla好,Firefox 4正式版不知道要跳票到什么时候了。 下载地址:http://windows.microsoft.com/en-US/internet-explorer/products/ie/home 以我个人来说,对IE9怨念太深,所以不再发表什么评论了,这里贴一些关于HTML5和CSS3的测试数据: IE9对CSS3新特性的支持: IE9对CSS3 选择器的支持 IE9对HTML5特性的支持 IE9对HTML5表单的支持 这些测试数据来自于 Findmebyip.com,这个网站基于modernizr项目,可以快速检测出浏览器对于HTML5新特性的支持。有Windows 7的同学可以自行访问测试下。 另外一个测试是在HTML5test.com的: 当然,这里还有一个其它浏览器的测试数据对比: 第二列是版本好,第三列是得分,最后一列是所谓的亮点。 值得一提的是,IE9终于完整支持CSS2选择器并支持绝大部分CSS3选择器了!!!

css3

webkit对于CSS3渐变样式语法的更新

之前,我在前端观察发表了一篇《理解CSS3线性渐变》,相信很多同学都有研究过CSS3的渐变,大部分人都会感到纠结吧,webkit和firefox的语法有很大的不同啊。事实上,对比W3C规范,可以发现Firefox的语法更规范一些。现在好消息来了,Webkit开始优化CSS3渐变的语法了。真搞不懂当年(08年)webkit为什么采用那种写法。 具体哪种写法更优秀就不讨论了,近日webkit在其博客中介绍了渐变的新写法,新写法采用了W3C和Firefox所用的语法,即,将-webkit-gradient拆分为-webkit-linear-gradient和-webkit-radial-gradient。 让我们直接看一下具体的代码如何: .selector{ background:-moz-linear-gradient(left, white, black);/gradient for firefox/ background:-webkit-linear-gradient(left, white, black);/*new gradient for webkit */ background:-webkit-gradient(linear, 0 0, 0 100%, from(#white), to(#black));/the