Contextual Behaviors
I call contextual behavior the capacity of a style or class within the
stylesheet to depend on an external information that is, in most case, the value
of another configuration or visual parameter. The code sample in the “Code
Generation” section was demonstrating that kind of behavior by using the default
text font size visual parameter to calculate the font size of the Headings in
order to obtain a certain consistency between the different font sizes.
This
is not the use of contextual behaviors I prefer. Contextual behaviors are a lot
more interesting when used to make the stylesheet react on non visual
parameters. Again, there can be hundreds of examples and choosing one is quite
difficult so I will list some:
stylesheet to depend on an external information that is, in most case, the value
of another configuration or visual parameter. The code sample in the “Code
Generation” section was demonstrating that kind of behavior by using the default
text font size visual parameter to calculate the font size of the Headings in
order to obtain a certain consistency between the different font sizes.
This
is not the use of contextual behaviors I prefer. Contextual behaviors are a lot
more interesting when used to make the stylesheet react on non visual
parameters. Again, there can be hundreds of examples and choosing one is quite
difficult so I will list some:
- Adapt borders of an HTML table depending on the page layout: That’s the
main use I make of contextual behaviors in eDContainer. In eDContainer, the page layout can be easily customised by the
web designer via a configuration file and, for example, two horizontal tables
of the page can be joined (with no margin or spacing) or a blank space left
between them (like a line break). If both tables have a 1px border, having
them joined will have the common border displayed as a 2px border. To correct
that, I implemented a simple test in the stylesheet that remove one of the
borders if this layout configuration parameter is set to ‘joined’. - Adapt font size based on the length of a string: Let’s imagine that the
main title of your website or any other text is displayed from a PHP variable
that you define in a configuration file or in your index file. This text is
displayed in a specific area of your page and this area is limited in width.
The longer this text is, the smaller the font size should be (still without
certain boundaries) to be able to display it properly. PHP can easily be used
in the stylesheet to determine the number of characters of this string and you
can set the font size based on it. - Anything that you could think of …
Conclusion
Bringing the power of PHP inside the already powerful CSS stylesheets can
bring you a lot of new opportunities and as many problems.
The importance of
a good design prior to development (or during a prototyping phase) is always
essential and always more essential when dealing with technologies as rich as
PHP and CSS, and this all the more true when they are combined.
That the
reason why making a clear distinction between the structure, the visual and the
content related aspects of your web sites or web applications is an absolute
must if you want to achieve good results.
All your comments and suggestions
are, of course, welcomed.
bring you a lot of new opportunities and as many problems.
The importance of
a good design prior to development (or during a prototyping phase) is always
essential and always more essential when dealing with technologies as rich as
PHP and CSS, and this all the more true when they are combined.
That the
reason why making a clear distinction between the structure, the visual and the
content related aspects of your web sites or web applications is an absolute
must if you want to achieve good results.
All your comments and suggestions
are, of course, welcomed.
