corz.org uses cookies to remember that you've seen this notice explaining that corz.org uses cookies, okay!
CSS Snippets..
/inc/css/snippets/
These are just like @@modules@@, except they are generally used for small
chunks of CSS that go *inside* CSS declarations{}. This is most useful for
vendor-specific CSS and other code you don't want to have to repeat over and
over.
In the future, when vendors agree on what is and isn't such-and-such and so
on, we only need to change a single file, and all @@semi-opaque@@,
@@rotate-right@@, et al sections get the new code dynamically. It also makes
writing these long declarations trivial, so you are more likely to use
groovy effects like semi-opacity, which not only look cool, but improve
usability and accessability.
Unlike regular @@modules@@ these chunks of CSS can be imported again and
again, as many times as you like in a single sheet. The CSS Init treats
anything in the "snippets" folder this way.
It also makes sense to split this sort of code into a separate location, for
ease of finding, editing, etc. Simply add the location into your module
paths preference.
Mine looks something like this..
$css_modules_paths = array();
$css_modules_paths[] = $root.'/css/modules';
$css_modules_paths[] = $root.'/css/snippets';
$css_modules_paths[] = $root.'/blog/inc/themes/modules';
For example, we might have a snippet called "semi-opaque.css" that contains..
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
In our style sheet we can do..
.up-arrow {
@@semi-opaque@@
}
.up-arrow:hover {
@@opaque@@
}
You can guess the contents of "opaque.css"!
Note: Snippets are usually placed hard left, to prevent irregular tabs in
un-minified CSS, though in reality, almost no one would see that.
Note: Snippets *cannot* contain modules or other snippets. They are the end
of the modularization line. However, snippets can contain %%tokens%%.*
En-Joy!!
;o) Cor
* Ideally, we would code our semi-opaque snippet as a generic declaration
with %%tokens%% for values, and send those values directly from inside the
style sheet, something like @@semi-opaque(o=67)@@. Guess what? YOU CAN!
See the readme in the modules directory for the easy-dozy details.
(c) 2003->tomorrow! cor + corz.org ;o)
Welcome to corz.org!
Since switching hosts (I hope you are alright, Ed! Wherever you are …) quite a few things seems to be wonky.
Juggling two energetic boys (of very different ages) on Coronavirus lockdown, I'm unlikely to have them all fixed any time soon. Mail me! to prioritise!