译文

CSS架构

CSS架构,听名称够霸气的了,当然这也是很多CSSer想做的事情,也是一些团队的想做的事情,因为谁都想让自己的工作变得轻松,国内有很多大公司都有自己的前端架构,而且有些成员在维护,但对于小公司或者一些同学想学习写CSS架构却是件很困难的事,困难到都不知道从何处下手,要怎么写,要写到什么程度。由于这一系列的为什么,让很多同学只是想想,却不敢动手一试,就算是试着写的同学都半路夭折了,我就是属于这一类型,但我始终没有放弃,我一直在积累这方面的知识,也在开始构思如何写一个CSS方面的东西让自己的工作变得更轻松,让更多的同学受益。今天D姐根据Philip Walton的《CSS Architecture》一文译了一篇有关于CSS架构的文章,这篇文章从结构到样式进行了详细介绍,更详细介绍了写CSS架构时会碰到的一些坑,又是如何的来填这些坑。通过这篇文章的学习,让我认清了当初的失败之处,同时让我的思想与视野都更开阔了,个人认为是很值得阅读的一篇文章。感兴趣的同学,或者想做这样一件事情的同学,不仿花几分钟阅读一下。

你应该知道的一些事情——CSS权重

CSS的选择器对于一个前端人员来说是一个很熟悉的东西,她是CSS中很重要的一部分,早前在整理CSS3系列教程时,特意将CSS3的选择器CSS的选择器做了一个总结,《CSS3基本选择器》《CSS3属性选择器》《CSS3伪类选择器》《CSS选择器优化》。这样一来对选择器算是做了一个系统的学习与整理,但是对于CSS选择器权重一直没有做过太多的深究,总认为他是一个难啃的骨头。这次99根据的《CSS Specificity: Things You Should Know 》文章整理了一篇译文,值得大家认真阅读。文章中对CSS选择器权重做了深入的介绍,并且附上很多相关的文章介绍。感兴趣的同学可以花点时间看看,你不会后悔的。

使用css sprites来优化你的网站在Retina屏幕下显示

CSS Sprites技术在Web页面上的运用是相当的广泛,早在八年前就已开始流行,他不但让可以减少http的请求数量,还可以减少你的代码量,易于维护。但是今天并不是来说CSS Sprites如何使用,因为如何制作CSS Sprites图,怎么运用到Web页面中,做为前端人员来说并不陌生。这篇文章想和大家借助Maykel的《Using CSS Sprites to optimize your website for Retina Displays》文章来学习Retina下如何使用CSS Sprites图片,或者说使用CSS Sprites能给Retina屏幕设备下的Web页面带来什么好处?如果你对这个话题也感兴趣的话,不仿花几分钟时间看看,因为这篇 文章就是用了一个简单的实例,阐述了如何在Retina屏幕下使用CSS Sprites图片,希望对您有所帮助。

Web设计师如何制作Retina图像

最近一直在想法设法的了解和学习有关于Retina方面的知识,几天下来,稍有些许的了解,知道了他是一个什么东东,当我译完《走向视网膜(Retina)的Web时代》后,让我知道了前端有这么一个新概念的知识,也让我感觉到自己了解行内新知识太慢,不得不感到鸭梨山大,同时译完《移动Web——CSS为Retian屏幕替换图片》后,我知道了怎么在移动端(iPhone/iPod/IPad等苹果移动终端)上控制Retina图像。但问题也同时延伸出来了,做为一名\Web前端从业者来说,仅知道怎么使用还不行呀,如果需要适合于Retina设备的图像怎么处理呢?还好,在网上看到了Chris Spooner写的《How to Create Retina Graphics for your Web Designs》,这篇文章虽然介绍的简单,但对我们Web前端人员很实用,简单的告诉了我们要如何制作图片,同时还告诉我们如何处理Retina设备下所需的图片。有兴趣的同学可以花几分钟过一回。

移动Web——CSS为Retina屏幕替换图片

移动端的Web开发是一个热门的话题,由于移动端的普及,以后互联网上她将是会是主流,取代PC端的霸主之位。做为前端开发人员,很有必要的去了解并掌握移动Web的开发与制作。今天这篇教程主要是介绍Retina设备下的图片处理技术,正如《走向视网膜(Retina)的Web时代》一文所言,普通图片在Retina设备下显示将会变得模糊(图片在Retina设备下像素放大了两倍),所以为了能让用户在Retina设备(如iPhone 5, New iPad,Galaxy Nexus等设备)浏览的图片能清晰,满足用户的体验,Web前端人员需要学习并掌握如何处理这些问题,这对于Web前端人员来说是一个新的课题,也是一个新的挑战。今天跟着的《The Mobile Web: CSS Image Replacement for Retina Display Devices》一文学习了几种在移动端的Retina屏幕下处理图片的方法,觉得蛮好的,特意花了一个晚上时间将其转译为中文,希望对有着同样爱好与兴趣的同学有所帮助,如果有译的不对之处,烦请指正,或者大家可以阅读原文,你会有更深的体会(因为本人的EN是三脚毛功夫,莫怪(^_^))。

面向对象的CSS(OOCSS)

OOCSS,第一次接触的时候觉得他很神奇,根本没有想到,在CSS中也会有一个面向对象的概念。因为面向对象是那些程序员的产物,怎么就和CSS挂上关系了。后来进行了解,知道OOCSS更趋向于一种思想。于是自己也学了一些这方面的思想,并做了些许的读书笔记(《OOCSS——概念篇》和《OOCSS——核心篇》),可还是没有领会到其中神的层面,今天D姐的译文,让我再次了解了OOCSS,真心不错的一种思想,很值得每一个前端人员去思考。

应不应该使用inline-block代替float

inline-block和float这样的基础问题总是有太多的争论,大到专业从业人员的讨论和争锋,小到我们这样的菜鸟也拿他们来对比。不过我更关注的是我们什么时候使用inline-block来实际些,什么时候使用float又方便些。必竟有太多的理论与原由我们找不清楚(一时整不明白,或者说直到你退休也整不明白,至少我是这么认为的),与其花时间去争论他们哪个好哪个坏,还不如了解一下哪个用在什么场合适当些,这样或许能帮你解决很多实际性的问题。如果你感兴趣,就看看99为大家翻译的这篇文章《应该不应该使用inline-block代替float》。

随时可用的基础样式

非常高兴,w3cplus今天迎来了一位新成员enggirl(朋友们口中的“D姐”),今后她将主要负责一些优秀外文的翻译,也就是说,D姐今天开始会不间断的为大家翻译一些国外优秀的前端技术博文,希望大家喜欢,同时更希望这些译文能帮助大家学到国外一些新的前端技术,好的前端技术。在这里我也特别感谢D姐对w3cplus的大力支持,给您道一声“辛苦了”,希望您能伴随着“w3cplus”一起成长,一起进步。

css背景图片的运用

这篇文章是99翻译Nicolas GallagherCSS background image hacks一文。大家都知道,目前有很多浏览器无法实现背景裁切背景透明度背景变换复杂背景定位等效果。那么这篇文章将详细介绍了这几种背景图片的处理方法。

页面

返回顶部