Organized from: List of Really useful Tools for CSS3 developers
Chinese: CSS3 development Tool Collection
Generally speaking, CSS is very simple. But when browser vendors start implementing CSS3 features, the problem begins to get a little complicated. It's not difficult, it's just a little complicated. This may include two aspects: first, some CSS3 attributes (e.g., transition, gradients, transform, etc.) are not so simple, and secondly we have to use the browser vendor to specify the extension.
Until your favorite IDE native support CSS3, your best partner will be CSS3 generators, manuals, reference guides, and JS based scenarios. This is what this article is recommending, and it will gather the really useful tools that can help you learn and use CSS3.
Build device
- CSS3 please! Cross-browser CSS Rule Builder, support: Border-radius, Box-shadow, gradient (linear), Rgba color, transform (rotate), transition, and @font-face. The
- CSS3 generator supports border radius, box shadow, Text Shadow, RGBA, @font-face, multiple columns, box resize, box sizing and outline.
- CSS3 Sandbox CSS3 generators for some columns: linear gradient , radial gradient , text shadow , box shadow , Transforms and text strokes . The
- @font-face Generator is a very useful CSS3 @font-face generator from the font squirrel. The
- CSS3 gradient builder generates a linear gradient for Firefox and WebKit browsers. The
- css rounded corners generates the "CSS3" attribute for Firefox, WebKit, and standard Border-radius syntax. The
- webkit CSS3 generator Simply helps you understand the Webkit features introduced by CSS3. The
- CSS3 learning tool dynamically obtains a private prefix for your browser and detects whether the property is supported by it.
JavaScript scenarios
- Modernizr is a really useful JavaScript library that detects native support for HTML5/CSS3 and provides you with a way to maintain a good level of control, regardless of the browser's capabilities. If you prefer to use MooTools, you can use moomodernizr (MooTools version of Modernizr)
- The sizzle–javascript Selector Library is a pure JavaScript selector engine designed for easy insertion into a master library. Sizzle actually supports all the CSS3 selectors-it even includes some very infrequently used selectors, such as ignoring the selector (escaped selectors) (". Foo\\+bar"), the Unicode selector, and the results returned in the document sequence. This is also the selector engine that jquery uses.
- YUI Selector Components YUI CSS3 Selector component provides a shorthand way to collect, filter, and test the stability of HTML elements.
- Ie7-js a JavaScript library that lets IE have the same behavior as a compatible standard browser.
- CSS3 Pseudo class selector impersonation Ie-css3.js enables Internet Explorer to recognize CSS3 pseudo class selectors and render any style rules that use them. Simply drop the script into your page and use the Pseudo class selector in your stylesheet, and then IE can be used.
Reference Guide
- CSS 3.0 Reference Manual
Tencent ISD Webteam produced a CHM format reference manual, very comprehensive, introduction + examples, recommended download collection;
- when can I use CSS3? Browser compatibility List for CSS3, HTML5, SVG, and other page technologies that are about to be available;
- Browser Support Checklist Use the Modernizr Library to detect the "advanced" features supported by your browser, including CSS3 features and selector support.
- CSS3 selector Test automatically runs a large number of tests to determine whether your browser supports some CSS selectors;
- selectoracle An online tool that provides an introduction to CSS2 and CSS3 selectors. Simply give it a few selectors and he will return the instructions for the selector match.
- The CSS3 manual and Quick Guide provides a list of current CSS3 specifications, listing the values available for attributes, commonly used selector pattern references, type/organization, selector type reference and unit reference and information ( PDF version );
- CSS3 Pseudo class SitePoint CSS reference to the relevant part of the content;
- CSS3 Quick Search Manual CSS3 property, selector type, and list of available values, in PDF format;
CSS3 Color Name
Provides names for all 147 colors and alphabetically sorted values.
If there are more useful tools, please share them with comments.
