{"id":1336,"date":"2018-01-19T19:22:43","date_gmt":"2018-01-19T19:22:43","guid":{"rendered":"http:\/\/goofy-trucks.flywheelsites.com\/php-enabled-stylesheets-page-10\/"},"modified":"2018-01-19T19:24:42","modified_gmt":"2018-01-19T19:24:42","slug":"php-enabled-stylesheets-page-10","status":"publish","type":"post","link":"https:\/\/phpbuilder.com\/php-enabled-stylesheets-page-10\/","title":{"rendered":"PHP enabled stylesheets Page 10"},"content":{"rendered":"<div class=\"phpbuilder-content\">\n<div class=\"phpbuilder-meta\">\n<div class=\"\">By Bertrand Potier<\/div>\n<div class=\"\">on November 24, 2002<\/div>\n<\/p><\/div>\n<div id=\"overflow-content\">\n<h2>Contextual Behaviors<\/h2>\n<div class=\"articlePara\">I call contextual behavior the capacity of a style or class within the<br \/>\nstylesheet to depend on an external information that is, in most case, the value<br \/>\nof another configuration or visual parameter. The code sample in the &#8220;Code<br \/>\nGeneration&#8221; section was demonstrating that kind of behavior by using the default<br \/>\ntext font size visual parameter to calculate the font size of the Headings in<br \/>\norder to obtain a certain consistency between the different font sizes.<br \/>This<br \/>\nis not the use of contextual behaviors I prefer. Contextual behaviors are a lot<br \/>\nmore interesting when used to make the stylesheet react on non visual<br \/>\nparameters. Again, there can be hundreds of examples and choosing one is quite<br \/>\ndifficult so I will list some: <\/div>\n<div class=\"articleList\">\n<ul>\n<li>Adapt borders of an HTML table depending on the page layout: That&#8217;s the<br \/>\n  main use I make of contextual behaviors in <a href=\"http:\/\/edreamers.org\/?folder=cons&amp;name=eDContainer\" target=\"_blank\">eDContainer<\/a>. In <a href=\"http:\/\/edreamers.org\/?folder=cons&amp;name=eDContainer\" target=\"_blank\">eDContainer<\/a>, the page layout can be easily customised by the<br \/>\n  web designer via a configuration file and, for example, two horizontal tables<br \/>\n  of the page can be joined (with no margin or spacing) or a blank space left<br \/>\n  between them (like a line break). If both tables have a 1px border, having<br \/>\n  them joined will have the common border displayed as a 2px border. To correct<br \/>\n  that, I implemented a simple test in the stylesheet that remove one of the<br \/>\n  borders if this layout configuration parameter is set to &#8216;joined&#8217;.<\/li>\n<li>Adapt font size based on the length of a string: Let&#8217;s imagine that the<br \/>\n  main title of your website or any other text is displayed from a PHP variable<br \/>\n  that you define in a configuration file or in your index file. This text is<br \/>\n  displayed in a specific area of your page and this area is limited in width.<br \/>\n  The longer this text is, the smaller the font size should be (still without<br \/>\n  certain boundaries) to be able to display it properly. PHP can easily be used<br \/>\n  in the stylesheet to determine the number of characters of this string and you<br \/>\n  can set the font size based on it. <\/li>\n<li>Anything that you could think of &#8230; <\/li>\n<\/ul>\n<\/div>\n<h2>Conclusion<\/h2>\n<div class=\"articlePara\">\nBringing the power of PHP inside the already powerful CSS stylesheets can<br \/>\nbring you a lot of new opportunities and as many problems.<br \/>The importance of<br \/>\na good design prior to development (or during a prototyping phase) is always<br \/>\nessential and always more essential when dealing with technologies as rich as<br \/>\nPHP and CSS, and this all the more true when they are combined.<br \/>That the<br \/>\nreason why making a clear distinction between the structure, the visual and the<br \/>\ncontent related aspects of your web sites or web applications is an absolute<br \/>\nmust if you want to achieve good results.<br \/>All your comments and suggestions<br \/>\nare, of course, welcomed. <\/div>\n<\/div>\n<p><\/p>\n<div style=\"float: left; padding:15px; color:#17AAF3\">\n<div style=\"float:left; padding:2px;\"><a class=\"paginationPageLink\" href=\"potier200211220b08.html?page=9\">\u00ab Previous Page<\/a><\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"potier20021122.html\">1<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"potier200211224658.html?page=2\">2<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"potier200211229ba9.html?page=3\">3<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"potier20021122fdb0.html?page=4\">4<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"potier20021122af4d.html?page=5\">5<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"potier20021122c575.html?page=6\">6<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"potier20021122235c.html?page=7\">7<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"potier20021122fdfa.html?page=8\">8<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"float:left; padding:2px 4px 2px 4px;\"><a class=\"pageNumber\" href=\"potier200211220b08.html?page=9\">9<\/a> <\/div>\n<div style=\"float:left; font-size:16px; color:#FF7A22; padding:2px 2px 2px 2px; \">| <\/div>\n<div style=\"background-color:#B6E5FC; font-size:16px; margin-top:1px; padding:1px 4px 1px 4px; color:#000; font-style:bold; float:left;\">10<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>From Perl scripts to PHP, a lot of technologies are today available to move HTML to the dynamic age but why not, going even further and do the<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1336","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/comments?post=1336"}],"version-history":[{"count":1,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1336\/revisions"}],"predecessor-version":[{"id":3222,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1336\/revisions\/3222"}],"wp:attachment":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/media?parent=1336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/categories?post=1336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/tags?post=1336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}