10 Web Tools you need

Here are a few of the tools you'll find online, you don't need to install them on your computer, and you can use them if you're connected. Most of these tools are very simple to use, but there are also areas where skills are needed.

CSS problem checking tool:CSS Lint

CSS Lint is an open source check CSS File Quality tool that was originally made by Nicholas C. Zakas and Nicole Sullivan written, the initial version was released at the Velocity meeting in 6 months. CSS Lint detection rules include errors and warnings, when the selector or property is not written correctly, missing curly braces, write a semicolon, etc., will prompt parsing errors, parsing error priority prompt.

CSS Code Analysis Statistics Tool:CSS Stats

CSS Stats is an online CSS Code analysis tool, enter the Web site css url can be CSS code analysis. CSS Stats is the front page designer to analyze the website CSS Code of the tool, you can count the CSS code in the rules, font size , width height, number of colors, and so on.

For web designers to share Web page CSS code is necessary to do, statistics on how many types of fonts used in the design of the site, how many font size, how many colors, the background color of how many, only the CSS The code has a detailed statistics in order to analyze the overall design of the site after the effect. CSS Stats also provides CSS analysis data for popular websites, such as Google, Yahoo,Twitter, FaceBook,Tumblr and other websites. Java

CSS Code optimization compression tool:CSS shrinks

CSS shrinks can significantly compress the size of your CSS volume. Many Web Programmers write CSS code with a lot of redundant syntax, blank space, etc., this tool can not affect the correctness of your CSS , the case, Optimize the syntax of CSS, remove useless spaces and empty lines, significantly compress the submission of CSS , a lot of reduce bandwidth waste.

CSS Code grooming tool:procssor

Procssor provides a number of customization options in addition to the basic optimization of CSS code functionality. For example, let you set CSS rules,CSS properties,CSS syntax optimization options. It also provides an incompatible alternative to the new CSS3 Properties and the various browsers in the rules.

Codrops CSS Syntax Reference

Codrops CSS reference content is rich and comprehensive, and the interface is refreshing and straightforward, you can use this tool to master The most important and comprehensive knowledge of CSS. Its CSS Knowledge Base is divided into several categories, including pseudo-classes, attributes, functions, data types, concepts, rules, and so on.

CSS3 Browser-compatible support query tool:Can I use

“Can I use"Here you can find allWebThe new features are compatible across brand browsers and different versions of each brand browser, and when you know what browser your target users are using, this writesTableWill be a great help to build your website. Opencaniuse.com, the homepage of the site will allHTML5,CSS3waitWebThe new features are listed, if you want to see a feature in different browser type compatibility, click on it. For example, take a look@font-face Web fontscompatibility in each browser, clickCSSthe first item in the area, you will see a table listing all the browser versions, with different colors representing each browser@font face Web fontsSupport , which is identified as a red representative, is not supported, and light green stands for partial support. The browsers listed in the figure also include some mobile phone tablet browsers, such asAndroidSystem Browser. So comprehensive, the design of the site, according to the site for the user to have the choice of useCSSand theJavascriptadvanced features to improve the user experience.

Check if your code conforms to the CSS standard:css Validation Service

This tool is used to check whether your CSS syntax is correct and conforms to the CSS standard. We know from the earliest IE , the various browsers have implemented some of their own dialects, these dialects in a variety of browsers are not connected. However, when we develop Web pages, we must consider the compatibility of various browsers to the fullest extent, and the best way is to comply with the CSS Standard specification. the css Validation Service is used to verify your css problems, it will remind you of those syntax, which attributes, those rules are problematic.

Codepad

Codepad.org is a very interesting site, its homepage is very simple, the left is can compile and execute the program language, the right is to let you enter the program input box, the input box below is a "Run Code" Check button and a " submit button.

It is also very simple to operate, first select the program language you want to compile and run, and then paste or enter the original code of the program in the input box, and then, click Submit, you can see your program compile error prompts, or the results of the execution.

Maybe, you will feel very boring days, but I think this will be very useful at some point, especially if you can not find the compiler and want to verify a piece of code, this time is still more. In particular, it's hard to have a computer that can run all languages, and if so, it must be your own personal computer, and you'll be worried when you don't use your own. And I think the service is very interesting because, in this way, you can even write programs in any language on your phone.

Currently this website supports the following languages-C,C + +,D,Haskell,Lua,OCaml,PHP,Perl,Plain Text,Python,Ruby,Scheme,TCL.

CSS Animation Generation tool:Gradient Animator

This is a dynamic background generation tool that is implemented using CSS Gradient and CSS Animation techniques. The tool is easy to use, with a few mouse clicks, and a modern, dynamic background code is generated. It allows the CSS gradient background to move smoothly, we can set the moving angle, the speed of movement, the angle of the gradient. Support all modern browsers and ie+ +. Perfect for web-open backgrounds.

Web Color tool:CSS Colours

Therefore the name Incredibles, this tool is used to facilitate the Web Designer to find color, it provides a variety of colors of the visual effect, for the color of the English name,RGB value,the value of the binary , which is very convenient to use.

10 Web Tools you need