Hi Matthew/all,
Sorry for the irregular emails! I've just started playing with the
HeadStyle helper and had some quick Q's for yourself and the list:-
Escaping
The Helper escapes XHTML by using the <![CDATA[ and ]]> meta string,
however without that appropriate /* */ wrapper, my browser (Safari)
throws a wobbly. Would it be more appropriate to assume the /* <!
[CDATA[ */ prefix and /* ]]> */ suffix as default?
Multiple definitions
If I add styles atomically:-
<? $this->headStyle()->appendStyle('#heading1 { background-image: url(/
img/heading/member-foo.png) }') ?>
<? $this->headStyle()->appendStyle('#heading2 { background-image: url(/
img/heading/member-bar.png) }') ?>
<? $this->headStyle()->appendStyle('#heading3 { background-image: url(/
img/heading/member-other.png) }') ?>
...the output shows something like this:-
<style type="text/css">
<![CDATA[
#heading1 { background-image: url(/img/heading/member-foo.png) }
]]>
</style>
<style type="text/css">
<![CDATA[
#heading2 { background-image: url(/img/heading/member-bar.png) }
]]>
</style>
<style type="text/css">
<![CDATA[
#heading3 { background-image: url(/img/heading/member-other.png) }
]]>
</style>
Would it not be better to iterate through all the style items and then
provide the <style> tag as a wrapper to this? Or did you intend for
potentially more than 1 style declaration per document? What would be
the appropriate syntax for combining these 1-by-1?
Default attributes
Would media set to 'screen' be the best default (being the most likely
of the targets for a website) - obviously print pages, etc, can be
handled on a per-page basis.
...so ultimately I'd like to do this:-
View:-
<? $this->headStyle()->appendStyle('#heading1 { background-image: url(/
img/heading/member-foo.png) }') ?>
<? $this->headStyle()->appendStyle('#heading2 { background-image: url(/
img/heading/member-bar.png) }') ?>
<? $this->headStyle()->appendStyle('#heading3 { background-image: url(/
img/heading/member-other.png) }') ?>
Layout:-
<?= $this->headStyle() ?>
...and get this:-
<style type="text/css" media="screen">
/* <![CDATA[ */
#heading1 { background-image: url(/img/heading/member-foo.png) }
#heading2 { background-image: url(/img/heading/member-bar.png) }
#heading3 {background-image: url(/img/heading/member-other.png) }
/* ]]> */
</style>
Is this what other people expect, or is there a better way to achieve
this within the current API? Am keen to see what everyone thinks...
--
Simon Mundy | Director | PEPTOLAB
""" " "" """""" "" "" """"""" " "" """"" " """"" " """""" "" "
PeptoLab will be closed:
Saturday 15th December through until Monday 17th December
Saturday 22nd December through until Wednesday 2nd January
For urgent requests, please call 0438 046 061
202/258 Flinders Lane | Melbourne | Victoria | Australia | 3000
Voice +61 (0) 3 9654 4324 | Mobile 0438 046 061 | Fax +61 (0) 3 9654
4124
http://www.peptolab.com
