关于CSS Reset那一个事(2):Normalize.css 源码解读

2015/08/02 · CSS · CSS
Reset,
Normalize.css

初稿出处: Alsiso   

解耦 HTML、CSS 和 JavaScript

2013/06/22 · CSS,
JavaScript · 2
评论 ·
CSS,
Javascript

本文由 伯乐在线 –
蝈蝈
翻译。未经许可,禁绝转发!
俄语出处:Philip
Walton。迎接参加翻译组。

现阶段在互联英特网,任何二个稍稍复杂的网址照旧应用程序都会含有众多HTML、CSS和JavaScript。随着网络接纳的向上以及我们对它的正视日益增加,设定四个关于组织和掩护您的前端代码的安顿是绝对需求的。

如今的局地特大型互连网厂家,由于越多的人会接触到逐步扩大的前端代码,它们会妄图去坚持不渝代码的模块化。这样改造程序的一对代码,并不会毫不知觉中过多地震慑再三再四不相干部分的施行进程。

严防意外的结果不是一个轻易化解的标题,越发是HTML,CSS和JavaScript本质上是相互正视的。更糟糕的是,当提到到前面一个代码时,一些观念Computer科学规范,举个例子关切分离,这一时期久远使用在服务端开垦中,比较少交涉谈到。

在本文中,小编将会讲讲本身所学到的怎么去解耦作者的HTML,CSS和JavaScript代码。从个体以及外人经验所得,这种的最佳办法并不是那么肯定,而平时是不直观的,而且不经常还只怕会与众多所谓的最好施行相背离。

10 款实用的 CSS 开采帮手推荐

2012/02/24 · CSS · 2
评论 ·
CSS

保加利亚共和国语原稿: jQuery4u,翻译:iteye

正文整理了10款极其实用的CSS工具,那些工具得以帮您管理局地干燥重复性的办事,大大提升了Web开辟工效,简化了办事流程。

1.  Animatable

该工具用于创制CSS3动画片,创立的动画片能够在任何平台或设施(包蕴Android、中兴、iOS
和WebOS等)中的今世浏览器中运营。固然你不熟练CSS,该工具也能协理您成立多现象的CSS3动画。

图片 1

2.  CSS3 Buttonize Framework

那是多少个轻量级、灵活、即时开关框架。只需轻易选择按键样式示例,然后依照提供的链接下载CSS代码就可以。该框架还或然会告诉您哪些使用这一个代码。

图片 2

3.  Patternify

那是多少个轻便易行的CSS图案生成器。你可以在依照Web的图形化分界面中绘制你想要的水墨画,然后该工具将自动生成CSS代码。

图片 3

4.  CSS3 Patterns Gallery

正如该工具的名字,那是三个CSS图案画廊,网页中体现了各个图案的预览,单击你须要的图画,就可以展现该美术的CSS代码。

图片 4

5.  Columnal

那是三个CSS网格系统,整合了两套自定义CSS代码。Elastic网格系统来自cssgrid.net,其余一些源于960.gs。

图片 5

6.  Spritemapper

该工具得以将多少个图片合併成二个,并生成对应切块的CSS配置代码。那样,既节省了您写代码的时刻,又巩固了网页加载时间。

图片 6

7.  The Web Font Combinator

该工具通过示范,令你直观地试验、预览页面中各部分(标题、副标题、正文)字体的功能。

图片 7

8.  Layer Styles

那是八个依照浏览器的图片编辑器,你能够在二个对话框(类似于Photoshop图层样式对话框)中装置图形的样式,然后该工具会自动生成CSS代码。

图片 8

9.  Sencha Animator

这是一个桌面应用,允许你创设可在今世浏览器和触屏移动器械中运维的CSS3卡通。

图片 9

10.  Holmes

那是贰个CSS样式会诊工具,通过丰裕三个类,就能够在页面中高亮展现一些荒谬或无效的HTML/HTML5标志,如选拔淡雪青边框展现错误音信、中酱色边框展现警告音讯、玉绿边框展现不支持选拔的样式,还足以出色体现可改良的标志、非W3C成分和品质等。

图片 10

赞 收藏 2
评论

图片 11

前言

上一章节牵线了CSS
Reset的野史,最终对Normalize.css做了简便易行的询问,所以从那节开头对源码举办表明翻译与解读,尽大概从最根性格的标题询问它在帮我们做什么?

回顾:至于CSS Reset 那多少个事(一)之
历史演变与Normalize.css

目标

HTML,CSS和JavaScript之间总会存在耦合关联。不管怎么样,那些能力与生俱来正是要和任何实行互相。比如,一种飞闪调换职能兴许会在样式表中用富含类选取器定义,但它平日由HTML初阶化,并通过顾客交互,如编写JavaScript,来触发。由于前端代码的某个耦合是不可逆袭的,你的指标就不应有是简轻巧单地排除之间的耦合,而应该是缩减代码间不供给的依赖耦合关系。二个后端开辟者应该能力所能达到对HTML模板中的标识举行转移,而不需求担忧意外破坏CSS准则或许部分JavaScript功效。由于先天的web团队日渐增大且职业化,那些指标比往年更甚。

Normalize 源码解读

前方讲到的分模块解读,正是先黏贴一段源码,然后依照官方提供的笺注实行翻译整理,尽或许提供案例分析,然后再一次开展整治总结,假诺您有疑难,可以留言一齐调换。

源码地址:https://github.com/necolas/normalize.css/blob/master/normalize.css
源码版本:v3.0.3

反模式

后面一个代码的紧耦合现象并不总是很醒目。事实上复杂的是,一方面看起来似乎松耦合,但从一边则是紧耦合。以下是本身早就数十四次做过还是看过,以及吸收小编的谬误中,总计的有所的反情势。对每八个情势,作者会尝试去解释为啥耦合这么不佳,何况指出什么去幸免它。

超负荷复杂的选取器

CSS Zen
Garden向世界体现了你能够完全改造总体网址的外观而不须要改动放肆三个的HTML标识。那是语义网运动的超人代表,重要原则之一就是去幸免选择表象类。乍一看,CSS
Zen
Garden或许看起来疑似贰个很好的解耦合例子,终归,把体制从标记语言中分离出来是它的显要所在。不过,若根据那样做,难点就来了,你会有时要求在你的样式表里有那般的选择器,如下:

JavaScript

#sidebar section:first-child h3 + p { }

1
#sidebar section:first-child h3 + p { }

CSS Zen
Garden中,就算HTML大约与CSS完全分开,但CSS会强耦合到HTML中去,此时就要求你对标志语言的布局有深档案的次序的知道。那大概看起来仿佛并非相当不好,越发是有些人珍贵着CSS,相同的时候须要爱抚HTML,但万一你增添了重重职员进去,这种景观就变得不可能调节了。要是有些开采者在某种情状下在首先个<section>前增加了<div>,上边的平整就无法生效,然则他也不亮堂里边原因。

一经你网址的记号非常少改动,CSS Zen
Garden就是三个那几个不错的呼吁。然则那和当今的Web应用不尽然都是这种场地。与冗长而又繁杂的CSS选用器相比较,最佳的艺术是在可视化组件自身的根成分扩张贰个或三个类选拔器。比方,假若侧面栏有子菜单,只必要为各类子菜单成分扩展submenu类选择器,而毫不用如此的花样:

CSS

ul.sidebar > li > ul { /* submenu styles */ }

1
2
3
ul.sidebar > li > ul {
  /* submenu styles */
}

这种情势的结果是在HTML中供给更加多的类采取器,但从遥远来看,那又下落了耦合度,以及让代码更可选用和可珍贵,并且还能够令你的标志自文档化。若是HTML里不曾类选取器,那个对CSS素不相识的开拓者就不清楚HTML的改观怎样影响了别样代码。另一方面,在HTML中使用类选拔器能很清楚地看出这几个体制或然成效被采纳到了。

html与body 元素

CSS

/** * 1. Set default font family to sans-serif. * 2. Prevent iOS and
IE text size adjust after device orientation change, * without
disabling user zoom. */ html { font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%;
/* 2 */ }

1
2
3
4
5
6
7
8
9
10
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS and IE text size adjust after device orientation change,
*    without disabling user zoom.
*/
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
  1. 设置全局的书体为sans-serif,关于中文字体的装置可参照他事他说加以考察 Amaze
    UI
  2. 防备 iOS 横屏字号放大,相同的时候确定保障在PC上 zoom 功效符合规律

第一个难点场景是这么,苹果IOS设备调节后会自动调度文字的大大小小,遵照苹果的图谋是为了升高客商体验,举例竖屏状态下是14px,转变为横屏时就改为了20px,把text-size-adjust:100%就不会调度字体大小了。

假设把值设置为'text-size-adjust:none',那么就能够导致客商不或许松手收缩字体了。

CSS

/** * Remove default margin. */ body { margin: 0; }

1
2
3
4
5
6
7
/**
* Remove default margin.
*/
 
body {
  margin: 0;
}
  • 修补浏览器默许边距,统一效果

四个类选用器的义务

八个类采取器往往是用来还要作为样式和JavaScript的钩。即使那看起来就如很节省(因为起码压缩了三个类标识),但骨子里,那是把成分的变现和效应耦合起来了。

XHTML

<button class=”add-item”>Add to Cart</button>

1
<button class="add-item">Add to Cart</button>

如上例子描述了二个带有add-item类样式的”增添到购物车”按键。

只要开采者想为此因素加多二个单击事件监听器,用早就存在的类接纳器作为钩子极其的容易。小编的情趣是,既然已经存在了一个,为啥要增加另四个呢?
然则想想看,有好些个像这么的按钮,分布了总体网站,都调用了同样的JavaScript作用。再想想看,如若市集协会想要在那之中叁个和别的看起来完全两样但功能雷同的开关呢。恐怕那样就须要越多显明的情调了。

标题就来了,因为监听单击事件的JavaScript代码希望add-item类采用器被使用到,可是你新的按键又力所不及利用那些样式(或许它必得破除全体宣称的,然后再重新载入参数新的体裁)。还应该有,如果您测量检验的代码同期也期望利用add-item类接纳器,那么你不得不要去创新那么代码应用的地点。更不佳的是,如若那几个”加多到购物车”成效不只有是当前利用使用的话,也正是说,把那份代码抽象出来作为二个单身的模块,那么就算贰个简便的样式修改,可能会在一丝一毫两样的采用中迷惑难点。

行使javaScript钩子最佳的(事实上也是相比鼓舞的)做法是,倘令你要求这么做,使用一种格局来制止样式和行为类选择器之间的耦合。

自己的个体提议是让JavaScript钩子使用前缀,比方:js-*。那样的话,当开采者在HTML源代码中看见这样的类选用器,他就全盘通晓当中缘由了。所以,上述的”增多到购物车”的事例能够重写成这么:

XHTML

<button class=”js-add-to-cart add-item”>Add to Cart</button>

1
<button class="js-add-to-cart add-item">Add to Cart</button>

现行反革命,假诺急需一个看起来不一致的开关,你能够很轻松地修改下样式类选用器,而不管行为的类选用器。

XHTML

<button class=”js-add-to-cart add-item-special”>Add to
Cart</button>

1
<button class="js-add-to-cart add-item-special">Add to Cart</button>

发表评论

电子邮件地址不会被公开。 必填项已用*标注