最常使用的css 工具_使用这些非常有用CSS工具更快地实施网站设计

最常使用的css 工具

CSS is great for creating beautiful websites, but making sure that it works and looks the same across all browsers and devices is a real pain. Developers spend more time fixing bugs for various browsers than actually implementing the design in CSS. Here are some of the most useful utilities that will help you create a consistent experience for all your visitors and customers.

CSS非常适合创建漂亮的网站，但是要确保它在所有浏览器和设备上都能正常工作并且看起来一样，这确实是一个痛苦。 与在CSS中实际实现设计相比，开发人员花费更多的时间来修复各种浏览器的错误。 以下是一些最有用的实用程序，它们将帮助您为所有访客和客户创建一致的体验。

自动CSS内衬工具 (Automatic CSS Inliner Tool)

This tool is geared specifically towards those designing email campaigns. When you create HTML emails, you design them with CSS, but often mail programs strip out the CSS files from the HTML, making your emails look like nothing but garbled text.

该工具专门针对那些设计电子邮件活动的人。 创建HTML电子邮件时，可以使用CSS进行设计，但是邮件程序通常会从HTML中剥离CSS文件，从而使电子邮件看起来像乱码一样。

Automatic CSS Inliner Tool will put your CSS next to their appropriate HTML tags, rather than a separate file. This will ensure that the email you designed is what your recipients see. It is developed by MailChimp which is one of the biggest email providers on the web.

自动CSS Inliner工具会将您CSS置于其相应HTML标记旁边，而不是单独的文件。 这将确保您设计的电子邮件是收件人所看到的。 它由MailChimp开发，后者是网络上最大的电子邮件提供商之一。

CSS Sprite Generator (CSS sprite generator)

This tool will help you put all your background images for a webpage into a single image. You can then use CSS positioning to display the right image at the right place. If your page has dozens of background images, the browser needs to make many more HTTP requests to fetch them all from the server.

该工具将帮助您将网页的所有背景图像放入单个图像中。 然后，您可以使用CSS定位在正确的位置显示正确的图像。 如果您的页面有几十个背景图像，则浏览器需要发出更多HTTP请求才能从服务器获取所有这些图像。

A sprite image has all the images, so it needs to be downloaded only once. Moreover, if the user opens another page, the file will not need to be downloaded again. CSS sprite generator can dramatically improve your page load times. More importantly, you will not need to master yet another photo editing tool just to create sprites.

Sprite图片包含所有图片，因此只需下载一次。 此外，如果用户打开另一个页面，则无需再次下载文件。 CSS Sprite Generator可以大大缩短页面加载时间。 更重要的是，您将不需要掌握其他照片编辑工具即可创建精灵。

现代化 (Modernizr)

You see the many snazzy features that CSS3 offers over CSS 2.1 and want to implement them on your website. However, if many of your users are using browsers earlier than Internet Explorer 9, which is a lot, you don’t want your site to look broken because they don’t support CSS3.

您会看到CSS3在CSS 2.1之上提供的许多令人讨厌的功能，并希望在您的网站上实现它们。 但是，如果许多用户使用的浏览器早于Internet Explorer 9（这很多），则您不希望您的网站看起来不完整，因为它们不支持CSS3。

Modernizr helps you write conditional JavaScript, so that your website always looks the same no matter what the browser is. You do not need to worry about the underlying boilerplate for working around different browser limitations because Modernizr does that for you.

Modernizr可帮助您编写条件JavaScript，因此无论浏览器是什么，您的网站始终看起来相同。 您无需担心用于解决不同浏览器限制的底层样板，因为Modernizr会为您执行此操作。

前缀 (Prefixr)

If you like to try out new CSS3 features, but are tired of adding vendor prefixes for hundreds of properties, Prefixr adds them for you. Not only is it difficult to keep track of hundreds of new CSS3 properties, but adding vendor prefixes is just too time consuming. Moreover, when the prefixes change, you have to change them at hundreds of places too.

如果您想尝试CSS3的新功能，但又厌倦了为数百个属性添加供应商前缀，那么Prefixr会为您添加它们。 不仅很难跟踪数百个CSS3新属性，而且添加供应商前缀也非常耗时。 此外，当前缀更改时，您也必须在数百个位置进行更改。

The problem of vendor prefixes is slowing going away, but it is still and issue. With Prefixr, you write one property and it will fill up the rest of the prefixes, so you don’t have too. You can now test your website on all browsers quite easily.

供应商前缀的问题正在逐渐消失，但这仍然是问题。 使用Prefixr，您可以编写一个属性，该属性将填充其余的前缀，因此您不需要。 现在，您可以轻松地在所有浏览器上测试您的网站。

YAML (YAML)

This is a high quality CSS framework that lets you create grid layouts with a lot less work. You can create:

这是一个高质量CSS框架，可让您以较少的工作创建网格布局。 您可以创建：

• Customizable layouts
  可定制的布局
• Flexible grids
  灵活的网格
• Use presets
  使用预设

By using YAML, you can bypass a lot of work that has to be done to make your website look good on all types of devices. Of course, you do need to know your CSS well to make good use of this tool, but once you know it, you will be creating layouts at amazing speeds.

通过使用YAML，您可以绕开大量工作才能使您的网站在所有类型的设备上都看起来不错。 当然，您确实需要充分了解CSS才能充分利用此工具，但是一旦知道了它，您将以惊人的速度创建布局。

配色方案设计师 (Color scheme designer)

If you are a developer, but do not have in-depth knowledge of how different colors work together for a website design, color scheme designer can make your job easier. You pick a color and it will tell you which other colors would go well with it for various design elements.

如果您是开发人员，但对网站设计中不同颜色如何协同工作没有深入的了解，则配色方案设计师可以使您的工作更轻松。 您选择一种颜色，它将告诉您哪些其他颜色适合各种设计元素。

It uses the classic color wheel to accomplish the job. You can specify what color scheme you want and how many colors you want to use. Color scheme designer will give you that many colors that will gel quite well to create a good design.

它使用经典的色轮来完成这项工作。 您可以指定所需的配色方案以及要使用的几种颜色。 配色方案设计师将为您提供很多可以很好地胶凝的彩色，以创建一个不错的设计。

结论 (Conclusion)

In order to write high quality CSS, you do need to understand about how browsers work and why some features are more difficult to implement. Once you understand it completely, you can use the above tools and even more advanced ones to speed up your work by automating repetitive tasks. If you think some other tools should be listed here, please let us know through comments and we will add it.

为了编写高质量CSS，您确实需要了解浏览器如何工作以及为什么某些功能难以实现。 一旦完全理解它，就可以使用上述工具，甚至更高级的工具，通过自动执行重复的任务来加快工作速度。 如果您认为其他工具应在此处列出，请通过评论告知我们，我们将对其进行添加。

关于作者 (About the Author)

Beth Cruz, a content outreach expert who loves to write on technology and latest web trends. She works for RushEssay and regularly provides content for many successful companies.

内容拓展专家贝丝·克鲁兹（Beth Cruz），他喜欢撰写有关技术和最新网络趋势的文章。 她为RushEssay工作，并定期为许多成功的公司提供内容。

翻译自: https://www.journaldev.com/6260/implement-website-designs-faster-with-these-amazingly-useful-css-tools

最常使用的css 工具