OCBNET-WebSprite
view release on metacpan or search on metacpan
t/fam/.gitignore
t/fam/generate/fam.css
t/fam/generate/fam.html
t/fam/generate/fam.pl
t/fam/result/expected.png
t/fam/sprites/accept.png
t/fam/sprites/add.png
t/fam/sprites/anchor.png
t/fam/sprites/application.png
t/fam/sprites/application_add.png
t/fam/sprites/application_cascade.png
t/fam/sprites/application_delete.png
t/fam/sprites/application_double.png
t/fam/sprites/application_edit.png
t/fam/sprites/application_error.png
t/fam/sprites/application_form.png
t/fam/sprites/application_form_add.png
t/fam/sprites/application_form_delete.png
t/fam/sprites/application_form_edit.png
t/fam/sprites/application_form_magnify.png
t/fam/sprites/application_get.png
background-repeat: no-repeat;
/* added a 1px safety margin */
background-position: -1px -1px;
background-image: url("spriteset.png");
/* /\ added by WebSprite /\ */
}
```
css-id and css-ref
------------------
WebSprite does not know about the actual css cascade (as it has no HTML DOM).
You can use `css-id` and `css-ref` to give hints to WebSprite how it should
resolve the css cascade. This greatly reduces the need to repeat properties
just for WebSprite. A common use case are width and height dimensions. This
feature ist part of [OCBNET::CSS3](https://github.com/mgreter/OCBNET-CSS3).
```
.icon
{
/* css-id: icon; */
width: 20px; height: 20px;
background-repeat: no-repeat;
}
t/fam/generate/fam.css view on Meta::CPAN
.application-add
{
/* css-ref: fam; */
background-repeat: no-repeat;
background-position: left top;
width: 16px; height: 16px;
background-image: url('../sprites/application_add.png');
}
.application-cascade
{
/* css-ref: fam; */
background-repeat: no-repeat;
background-position: left top;
width: 16px; height: 16px;
background-image: url('../sprites/application_cascade.png');
}
.application-delete
{
/* css-ref: fam; */
background-repeat: no-repeat;
background-position: left top;
width: 16px; height: 16px;
background-image: url('../sprites/application_delete.png');
}
t/fam/generate/fam.html view on Meta::CPAN
<html>
<head><title>FAM SpriteSet</title></head>
<link rel="stylesheet" href="fam.css">
<style>DIV { float: left; margin: 5px; }</style>
<body>
<div class="accept"></div>
<div class="add"></div>
<div class="anchor"></div>
<div class="application"></div>
<div class="application-add"></div>
<div class="application-cascade"></div>
<div class="application-delete"></div>
<div class="application-double"></div>
<div class="application-edit"></div>
<div class="application-error"></div>
<div class="application-form"></div>
<div class="application-form-add"></div>
<div class="application-form-delete"></div>
<div class="application-form-edit"></div>
<div class="application-form-magnify"></div>
<div class="application-get"></div>
( run in 0.527 second using v1.01-cache-2.11-cpan-3cd7ad12f66 )