CSS缩小的技能与专用工具

2021-01-20 14:52 jianzhan

许多人都有编码洁癖。这并不是件坏事。

本文将梳理集中化你能够用来提升你的CSS的技术性,和1些能够全自动缩小你的编码的线上和桌面上缩小专用工具。

缩小還是不缩小

在大家探讨怎样缩小CSS以前,必须留意1下在缩小和编码的易读性上经常要有个均衡。许多编号者以其CSS机构清楚为傲,并且其实不期待自身的编码被根据缩小器去掉注解和断行。做为1个设计方案师,你应当剖析你所撰写的编码的总体目标。假如你要建立1个小的只必须几行CSS的网站,将会就沒有必要做附加的缩小。一样,假如你在撰写必须和1个对外开放精英团队共享的编码,插进附加的注解和断行能够节约你的朋友的很多時间并得到她们真心实意的谢谢。但是,假如你在设计方案1个必须很多CSS的大中型网站,你毫无疑问要留意你的文档尺寸并进你所能维持其最少。

将会在找寻缩小和将会性之间的完善融合上面必须花1些時间,可是它们都值得发掘并且完成它们的均衡可让你的工作中变得非常容易许多。另外,很显著其实不是说缩小1定会致使可读性的减少。许多能用于缩小编码的技术性都能转化成更好更有机构的编码。

考虑到到这1点儿,让大家刚开始掌握1些技术性已维持CSS文档最少化吧。

空白款式界定

让大家从显著的刚开始。假如你有1个空白款式,丢弃它。不必托词稍后也许会用到,你也了解它们是杂乱无章的。除非你有1个有效的理由,不然不必加上它们。

缩写

CSS缩写是1种将多行CSS合拼到单行的方式。 培养应用你了解的全部缩写技能的习惯性能够显著的降低你最后写出的编码的行数。这里是个事例:

长写版本号:

#container{
    padding-top:5px
    padding-right:10px
    padding-bottom:30px
    padding-left:18px
}

缩写版本号:

#container{
    padding:5px 10px 30px 18px;
}

掌握更多CSS缩写技能,能够浏览下面的文章内容:

强烈推荐阅读文章阿捷的文章内容:《常见CSS缩写英语的语法总结

CSS Sprites

CSS sprites身后的最开始念头是降低HTTP恳求的数量以加速网页页面的载入時间。Sprite完成这个总体目标的方式便是拼合多张照片到1个独立的照片文档中,一般是1个网格文件格式的照片。每一个独立的照片根据切换大的sprite照片的background-position来显示信息。针对CSS编码来讲,应用 sprite技术性能够大大的提升编码的重用度和可维护保养性,这会显著的降低CSS的编码量。

要掌握更多有关CSS Sprites,请查询Chris Coyier在CSS-Tricks上的实例教程:

自然,前端开发观查也是有1些很有使用价值的有关CSS Sprites的文章内容和技能

降低注解

我喜爱在编码里边应用注解。我加上的注解越多,我就可以在视觉效果上更快的精准定位到编码中的不一样的一部分。但是,假如你必须应用少的資源来高宽比提升的CSS,过多的注解就会吃掉珍贵的字节。因此,试着去掉全部无须要的注解并再次文件格式化那些你务必要保存的注解到尽量少的字节。

有效的字体样式种类(font-Family)

当文档尺寸变成1个大难题的情况下,不必将取代字体样式包进你的font-famly中。去掉全部无须要的累坠,并将你的附加选项降低到1到两个。

以前:

#container{font-family:Palatino,Georgia,Times,serif;}

以后:

#container{font-family:Palatino,serif;}

有关字体样式,明显强烈推荐阅读文章1下玉伯写的《3谈 Web 默认设置字体样式》,文中提到的几篇文章内容也都值得大家去阅读文章和思索。

应用16进制颜色

以便降低字节数,将全部RGB色值变换成她们对应的16进制值。这开起来将会沒有太大的实际意义,可是任何字节全是值得的!

以前:

#container{color:rgb(131, 100, 219);}

以后:

#container{color:#8364DB;}

去掉断行

查询每个款式特性,并将不必须的硬回到去掉。你还可以去掉最终1个分号。

以前:

#container{
    margin:5px;
    padding:5px 10px 30px 18px;
}

以前:

#container{margin:5px;padding:5px 10px 30px 18px}

10个线上CSS缩小专用工具

CSS缩小专用工具能够全自动进行清除你的编码的绝大多数工作中。它们中的许多会告知你你的文档被缩小的百分比,因此请多尝试几个以掌握哪一个是最好是的。

CSS Drive

可选项:

  • 缩小方式: 低、一般、高宽比缩小
  • 注解缩小:不缩小、所有、或善于某个特殊值的。

CSS Compressor

可选项 (每一个都可选Yes 或No ):

  • 重排特性
  • 缩小颜色
  • 缩小font-weight
  • 小写化挑选器
  • 除去无须要的室内空间
  • 除去无须要的分号

Arantius

可选项 (每一个都可选Yes 或No ):

  • 除去注解
  • 除去最少x字节长度的注解
  • 每行1个标准

CSS Optimizer

可选项:

  • 不删掉断行(Yes 或 No)
  • 能够解决URL、文档或粘贴的文字等方法的CSS

Lottery Post

可选项:无

Clean CSS

可选项(每一个都可选Yes 或No ):

  • 重排挑选器
  • 重排特性
  • 提升挑选器及其特性(0, 1 or 2)
  • 合拼简写特性
  • 仅有安全性提升
  • 缩小颜色
  • 缩小Font-weight
  • 小写化挑选器
  • 特性字体样式(小写或大写)
  • 除去无须要的反斜杠
  • 变换!important hack
  • 移除最终1个分号”;”
  • 节约注解
  • 剔除失效特性(CSS2.1, CSS2.0 或CSS1.0)
  • 键入为文档

客观事实上,这便是开源系统新项目css tidy的演试网站。CSS tidy汉语版:http://www.isparkle.cn/show/csstidy/

Pingates

可选项 (每一个都可选Yes 或No ):

  • 变换长颜色名为16进制
  • 变换长16进制编码为短16进制编码
  • 变换长16进制编码为颜色姓名
  • 变换RGB为16进制
  • 除去0衡量
  • 合拼同1个标准
  • 合拼同1个挑选器
  • 合拼特性
  • 除去反复的特性
  • 从margin和padding中除去无用的值
  • 显示信息统计分析
  • 以五颜六色文件格式輸出
  • 应用最少规格輸出

PHP Insider

可选项:无

SevenForty

可选项:

  • 断开选项: 500, 1000, 1500 or 2000

该专用工具根据YUI缩小器,可是会全自动将IE的hacks删掉,开发设计者得出的解释是,IE hacks应当以单独文档出現,而并不是杂糅在主CSS文档中,这样会变得难于维护保养。

Page Column

可选项: None

桌面上版CSS缩小专用工具强烈推荐

YUI Compressor与TB Compressor

YUI Compressor是yahoo前端开发精英团队开发设计的1个前端开发编码缩小专用工具,作用很强劲。必须Java运作自然环境,能够用java指令手动式缩小CSS和JS文档,还可以用ant在编译程序的情况下大批量缩小

淘宝前端开发精英团队的玉伯依据YUI compressor封裝的Windows服务平台缩小专用工具,安裝卸载都很简易。正如作用强劲的YUI Compressor,TBCompressor不但能够缩小CSS,还可以缩小JS。

在这里免费下载。掌握更多有关TBCompressor – JS和CSS缩小专用工具

此外,强烈推荐阅读文章屈超同学的《健全 TBCompressor 对 CSS 文档的缩小全过程》。

web 2.0資源提升专用工具

国人用delphi 7开发设计的1款桌面上专用工具,也是能够缩小CSS和JS。强烈推荐1下。此外值得1提的是,作者放出了该新项目的源码。

查询官方详细介绍及免费下载。此外,貌似该专用工具的CSS缩小一部分根据CSS Tidy。

mergeCSS

CSS山林站长鬼哥出品的1个根据AIR的专用工具,有许多很有效的作用,例如多文档合拼、合拼@import导入文档等。查询详尽详细介绍

必须留意的是,该专用工具对缩写和特性合拼的适用其实不太好,假如可以提升这些适用,将会会更好吧。

此外1个十分关键的事儿是,到现阶段为止,鬼哥并未放出该专用工具,假如你想尝试1下,能够联络他。

page speed

page speed实际上是Google开发设计的1个根据Firebug的firefox软件,关键是用来剖析网站前端开发特性的。可是在page speed的剖析結果目录中Minify CSS选项,点开便可看到你的CSS能够缩小的占比,和后边出示1个缩小过的版本号,点一下便可查询。唯1不够的便是不可以自定缩小。

GZIP

不管多么的丑恶的网站,GZIP全是1个对缩小许多种类的编码都确实很有效的专用工具。它也许其实不是最简易的缩小方式,并且对初学者将会还会一些蒙蔽。查询这个实例教程以获得更多有关应用GZIP缩小你的款式的信息内容。

总结

正如我前面说的,这些方式中的1些将会看起来一些过多或没什么实际意义。重要是看大局。尽管这些技能中的任何1个将会的仅有基本上是无足轻重的危害,融合这些技术性中的几个或所有便可以对你的CSS文档的尺寸产生极大的危害。

此外,假如你掌握到有其它的功能强大的缩小专用工具,欢迎与大家共享哦~~
此外附脚本制作之家的css线上缩小专用工具
https://www.jb51.net/tools/cssyasuo.shtml
https://www.jb51.net/csstidy/css_optimiser.php?lang=zh