CSS General
From FHTML
Contents |
1 What's the same as html?
1.1 Stylesheets
/* CSS */
</style>
The standard link tag is also supported. And, as with style nodes, use fhtmlignore as needed (see below).
1.2 Attributes
Needing no explanation comma:
1.3 Selectors
Fhtml supports a wide range of selectors. Support for more CSS3 selectors is coming.
- Universal selectors
- • (asterisk) Matches any element.
- Type selectors
- E Matches an element of type E.
- Descendant selectors
- E F Matches any F element that is a descendant of an E element.
- Child selectors
- E > F Matches any F element that is a child of an element E.
pseudo-classes
E:first-child
E:link
E:visited
E:active
E:hover
E:focus
- Adjacent selectors
- E + F Matches any F element immediately preceded by a sibling element E.
- Attribute selectors
- E[foo] Matches any E element with the "foo" attribute (whatever the value).
- E[foo="yo"] Matches any E element whose "foo" value is "yo".
- Class selectors
- E#myid Matches any E element with ID equal to "myid".
2 What's extra?
2.1 fhtmlignore
For CSS that you want the browser to process, but Fhtml to ignore, use the fhtmlignore attribute:
/* Fhtml will not apply this stylesheet, but the browser will. */
</style>
This allows you to use special Fhtml and Flash properties in your CSS when rendering in Fhtml and other properties when rendering in environments where Flash is not supported.
2.2 OOP Inheritance
- Fhtml supports OOP-style inheritance in CSS using the
@extendskeyword (must be first property in list). - In this example, the div with
class2overrides theclass1yvalue andyis changed fromcentertobottom:
box-shadow:8px 8px 8px #666666;
background:#F4F4F4;
x:center;
y:top|20;
w:100;
h:100;
}
.class2 {
@extends:.class1; /*extends keyword uses full selector name*/
y:bottom|-20;
w:60;
}
<div style="box-orient:none;" >
<div class="class1" />
<div class="class2" />
</div>
Despite the anticipated admonitions of CSS purists everywhere who will undoubtedly insist that OOP inheritance isn't necessary, once you have it, it becomes as necessary as inheritance in real programming languages. In other words, extremely necessary :-) - Mgmt.
2.3 Granular Overrides
FluidHtml allows you to override granular aspects of style properties as well:
/*a fancy gradient*/
background:myGradient:
}
.class2 {
/*override a single part of that property.*/
background.colors.2:black;
}
Unfortunately, there is currently a bug in this functionality. As soon as it's fixed, we'll put a working example here!
2.4 CSS Event handlers
- FluidHtml allows you to define event handlers in CSS. So you don't need to type them on every node...
- In the following example the
doOnClickfunction is assigned as theonclickevent handler.
div {
box-shadow:8px 8px 8px #666666, inset 8px 8px 16px #FFFFFF;;
margin:20px;
background:#F4F4F4;
border:none;
shape:circle;
width:40;
height:40;
onclick:doOnClick('text');
}
p {
background:null;
font-size:16px;
}
</style>
<script type="text/javascript" fhtmlignore="false">
function doOnClick(id) {
alpha-=.2;
$(id).text = "Event handlers assigned in CSS! Alpha is " + alpha;
}
</script>
<div />
<div />
<p id="text" >Click the circles!</p>
2.5 CSS Function calls
- FluidHtml also allows you to use javascript in CSS.
- In the case of coordinate properties, that function will be executed anytime the coordinates need to be redrawn.
- In all other cases, the function will be executed once - when the property is assigned.
- In this example we set the rotation of the element in CSS using a javascript call.
div {
background:#F4F4F4;
border:none;
box-shadow:8px 8px 8px #666666;
x:center;
y:center;
width:200;
height:200;
}
/*This element will get its 'rotation' value from a javascript function*/
#neighbor {
rotation:javascript:getRotation();
}
</style>
<script type="text/javascript" fhtmlignore="false">
function getRotation() {
return 23;
}
</script>
<div class="class1"></div>
<div id="neighbor" />