现代 CSS

Airen的博客

如何处理CSS3属性前缀

今天闲来无聊,重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。姐姐说:"为什么还要用mixin呢?为什么不使用Autoprefixer?使用Autoprefixer,只需要输入一行代码,编译器帮你做了一切,还纠结个毛mixin。"姐姐的一句话让我汗颜,我还在思考着如何让Sass来写Gradient,或者类似这样需要带前缀的CSS3属性。也这样让我在思考,那么有了Autoprefixer这样的后处理,Sass中有关于CSS3的mixins是不是已失去了他存在的意义。带着这样的为什么?我们一起来开启今天有关于CSS3前缀的探讨。

使用Sass编写CSS Blend Modes

CSS Blend Modes是CSS的一个新功能,可以将一个层和元素的背景层混合在一些。常见的是将背景图像和背景颜色混合在一起。在这篇文章中,我们将来体验一上在几个项目中使用Sass编写的一个简单的混合模式的mixin。从而学习如何使用Sass创建混合模式的mixin,并且怎么使用。

2014年CSS报告——考察如何使用CSS

很少有人针对CSS的使用做一份详细的报告,今天看到Alex McPherson的《The 2014 CSS Report:Examining how CSS is being used in the wild》一篇文章,作者通过近万个网站的CSS样式文件做分析,得出这份2014年CSS使用报告。觉得很有意义,特意将其整理到站上,让大家也了解这份报告说了哪些东西。希望对大家有所帮助。

解决Flexbox跨浏览器兼容Bug

Flexbox是CSS3新增的一个功能特性,对于布局有很大方便之处。但浏览器支持力度各异,而且其规范也还在不断更新之中,也造成很多同学还不敢在实际项目中使用Flexbox的缘故。Philip Walton在他的Github中创建了Flexbugs库,用来回收Flexbox相关的Bug。主要宗旨是收集Flexbox跨浏览器存在的问题和解决方案。目标是让你使用Flexobx构建一个网站能得到你想要的效果,并且能在这里找到相应的解决方案。而这篇文章就是以创建Sticky footer布局为例,介绍了如何解决Flexbox在浏览器兼容的解决方案。

2015年CSS的几大亮点

CSS是一门不断在发展的“语言”。在这篇文章中,我们一起来看看我们可以先玩起来的一些新特性。在本文中提到的一些新特性,在个别浏览器中已得到支持。但这些功能并不一定可以立即用于生产,甚至有些还是在实验阶段。但在这里你会发现很多东西,你可以开始玩——即使仅在实验阶段。其实有好几个特性在2014年的时候W3cplus就曾有介绍过,比如CSS Shapes、calc()、CSS混合模式等。

辞旧迎新,更上一层

随着2015年的跨年钟声的响起,2014已成为我们的过去。即将要为之奋斗的是2015。其实想在2014年写这篇总结文章,但由于最近很多事情给耽搁了,其实也有点不知道做什么样的一个总结,因为总感觉2014年就这样匆匆离我而去。有些许的伤感,或许是因为年纪越来越大的缘故吧。不过跟着一群比自己小一轮甚至更多岁数的年轻人在一起共事、一起学习,还是让自己觉得,我也还是很年轻的(可以叫我叔,但别喷我)。

今天可算是执笔开始写这篇文章了。在继续写下去之前,我要先感谢@娜姐@裕波@林毅一直以来让W3cplus能在社区活动中露脸。同时也要非常感谢@w3cplus的爱好者,支持者一路以来的支持与鼓励,正因为有了你们,她才能走到现在,才能成长,才能美丽动人。

[转载]设计师的DPI指南

本文是为“初学者”或者作为从一开始就想要学习更多跨DPI和跨平台设计知识的中级设计师准备的序言读物。没有复杂的计算和不可分析的图表,只是按照划分直截了当地将内容呈献给读者,便于读者理解或是直接运用到设计过程中。如果你发现有错误的地方,需要了解更多细节或者有任何问题或建议,请联系sgabriel.contact@gmail.com Twitter, G+ 或者 Facebook

SVG系列教程:坐标系统

SVG其实相当于一块画板,然后在这块画板上绘图形,而每个画板都会有一个坐标系统。比如说画板的原始起点,绘制图形的起始点坐标,终点坐标等。这一切的一切都离开不坐标,而这些坐标就组成了一个坐标系统。在这篇文章的所要介绍就是SVG中一个关键知识点——SVG坐标。简单点理解SVG坐标就是屏幕坐标点(从技术上讲,最初的viewport坐标系统)与任何SVG元素相关联的坐标点系统(当前用户坐标系统)。例如,一个<svg>中使用<circle>绘制的一个圆,他就使用了一个标准的笛卡尔坐标系统(Cartesian Coordinate System)。

[转载]利用 HTML5 美化表单

对表单感兴趣的人并不多,但 HTML5 引入的一些重大改进却同时方便了创建表单的开发人员和填写表单的用户。全新的表单元素、属性、输入类型、基于浏览器的验证、CSS3 样式技术以及 FormData 对象让创建表单变得更轻松,甚至可能更富有趣味性。

[转载]理解SVG的viewport,viewBox,preserveAspectRatio

viewportviewBoxpreserveAspectRatio是SVG中基础而且必须了解的几个部分,如果这几个部分没有理解清楚,对大家今后学习SVG相关知识以及使用会带来很大障碍。这几日看到张大师(@张鑫旭)写了一篇与此相关的文章《理解SVG的viewport,viewBox,preserveAspectRatio》,特意将此文转载致此。

页面

返回顶部