English
资源说明：A set of PHP scripts that automatically add browser prefixed CSS values, minify and compress your code, and cache the results.
### Variables
CSS Ally has basic support for variables in your CSS! The primary benefit to
using variables is that changing colors or other aspects of your code can be
done in one place with that change propogating throughout your stylesheets.
The variable syntax for CSS Ally is as follows:
`$[a-zA-Z][-_a-zA-Z0-9]{0,31}`
In other words, a variable is a 1-32 character string that starts with a letter
and contains letters, numbers, hyphens, and underscores.
*Note:* Variables are an optional part of CSS Ally. If you choose not to use
variables in your CSS, then your files can be used with or without this
software.
### Mixins
CSS Ally supports mixins in your CSS! We use the same syntax as SASS, a CSS
pre-processor written Ruby. A simple example mixin would look like this:
```css
@mixin rounded() {
border-radius: 5px;
}
div.myclass {
@include rounded();
}
```
Using this in your code would result in the following output:
```css
div.myclass {
border-radius: 5px;
}
```
Mixins can optionally include parameters, giving you the ability to change the
specifics of the code included in your mixin.
```css
@mixin rounded($side: top-left, $radius: 10px, $color: green) {
border-#{$side}-radius: $radius;
border-color: $color;
}
div.myclass {
@include rounded();
}
div.myclass2 {
@include rounded(bottom-right, 2px, blue);
}
```
Results in:
```css
div.myclass {
border-top-left-radius: 10px;
border-color: green;
}
div.myclass2 {
border-bottom-right-radius: 2px;
border-color: blue;
}
```
*Note:* Mixins are an optional part of CSS Ally. If you choose not to use
mixins in your CSS, then your files can be used with or without this
software.
### Nested selectors
Like other CSS preprocessors, CSS Ally supports nesting selectors in your CSS,
giving you the ability to write cleaner CSS rules which will be compiled into
valid hierarchical CSS rules.
```css
.class1 {
border: 1px solid red;
margin: 5px;
.innerClass1 {
border: 5px dashed blue;
}
}
```
Using this in your code would result in the following output:
```css
.class1 {
border: 1px solid red;
margin: 5px;
}
.class1 .innerClass1 {
border: 5px dashed blue;
}
```
*Note:* Nested selectors are an optional part of CSS Ally. If you choose not to
use nesting in your CSS, then your files can be used with or without this
software.
### Cleaning Up Your Code
CSS Ally has more than one way to clean up your code.
#### Remove comments and whitespace
By removing comments and whitespace, you can shrink the total size of your CSS
files by a significant amount. Since browsers don't care about these things,
this should have no effect (other than an increase in speed) on your site.
### Caching
CSS Ally stores a cached copy of the processed CSS file. This way, you can use
the script directly, and it will only rebuild all of your CSS if you have made
changes to one of the files.
A better way to use this script, however, is to generate your processed CSS file
and include that file in your website. The benefit to this is that browsers can
cache your CSS for even faster retrieval. Then, when you need to make changes,
you generate a new compiled CSS file and replace the existing one on your site.
AUTHOR
---------------------
CSS Ally is created and maintained by Bill Parrott
FUTURE DEVELOPMENT
---------------------
- Complete the implementation of common CSS rules which require vendor-specific
code to work.
- Add support for targeting specific versions of specific browsers
- ??? (Have a suggestion? [Email me!](mailto:bill@cssally.com "Send me your suggestions"))
- PROFIT!
COMMENTS?
---------------------
Feel free to [email me](mailto:bill@cssally.com) any comments or suggestions you
have, or use Github's [issue tracker](https://github.com/chimericdream/CSS-Ally/issues)
tool.
### Bug Reports
Please use the [issue tracker](https://github.com/chimericdream/CSS-Ally/issues)
built into Github for all bug reports.
CSS Ally ==================== DESCRIPTION --------------------- CSS Ally is a set of PHP scripts that allow you to write clean, valid CSS while maintaining cross-browser compatibility. This library can automatically perform any or all of the following functions: - Add browser prefixes for CSS rules (e.g. "-moz-border-radius") - Minify and compress your CSS by removing excess white space, comments, and (optionally) gzipping the result - Save the resulting code to a cached file for faster rendering on subsequent page loads. - Use custom variables in your CSS to aid in development FEATURES --------------------- ### Browser Prefixes CSS Ally can add browser-prefixed versions of a wide variety of CSS rules. This gives you the ability to write clean CSS just once without worrying about the specific syntax of each browser. For browsers that require a prefixed version of a given CSS rule, the rule is automatically added. #### Supported CSS Rules The following CSS rules can be autmatically prefixed by CSS Ally.
| Rule | Prefixes |
|---|---|
| @keyframes | ms, moz, webkit |
| animation | ms, moz, webkit |
| animation-delay | ms, moz, webkit |
| animation-direction | ms, moz, webkit |
| animation-duration | ms, moz, webkit |
| animation-iteration-count | ms, moz, webkit |
| animation-name | ms, moz, webkit |
| animation-play-state | ms, moz, webkit |
| animation-timing-function | ms, moz, webkit |
| background-clip | khtml, moz, webkit |
| background-origin | khtml, moz, webkit |
| background-size | moz, o, webkit |
| border-image | ms, moz, o, webkit |
| border-radius | moz, o, webkit |
| border-top-right-radius | moz, o, webkit |
| border-top-left-radius | moz, o, webkit |
| border-bottom-right-radius | moz, o, webkit |
| border-bottom-left-radius | moz, o, webkit |
| box-shadow | moz, webkit |
| column-count | moz, webkit |
| column-gap | moz, webkit |
| column-rule | moz, webkit |
| column-span | moz, webkit |
| column-width | moz, webkit |
| columns | moz, webkit |
| linear-gradient | ms, moz, o, webkit |
| radial-gradient | ms, moz, o, webkit |
| transform | ms, moz, o, webkit |
| transform-origin | ms, moz, o, webkit |
| transition | ms, moz, o, webkit |
| transition-delay | ms, moz, o, webkit |
| transition-duration | ms, moz, o, webkit |
| transition-property | ms, moz, o, webkit |
| transition-timing-function | ms, moz, o, webkit |
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
