{"id":276,"date":"2006-10-28T21:05:25","date_gmt":"2006-10-28T21:05:25","guid":{"rendered":"http:\/\/neosmart.net\/blog\/archives\/276"},"modified":"2023-01-28T15:53:46","modified_gmt":"2023-01-28T21:53:46","slug":"dynamic-php-driven-css-style-sheets-web-design","status":"publish","type":"post","link":"https:\/\/neosmart.net\/blog\/dynamic-php-driven-css-style-sheets-web-design\/","title":{"rendered":"Dynamic (PHP-Driven) CSS Style-Sheets &amp; Web Design"},"content":{"rendered":"<p>Can you imagine running a website with hundreds of pages off pure, static, html? Without a <em>single <\/em>bit of server-side code? No PHP, Perl, Ruby, or even SHTML? What about a site with hundreds of thousands of pages? or millions? Of course not. <strong>So why do you put up with static CSS files then?!<\/strong>\n<\/p>\n<p>Not only is Web 2.0 not just about looks, it\u2019s also originally about clean code and putting the power of design in the hands of the coder. We have no idea why it\u2019s taken so long for this to get through, but for some reason, people still aren\u2019t getting it. Dynamic web languages exist for a reason. Use them. <strong>Everywhere.<\/strong>\n<\/p>\n<p>It\u2019s not difficult, as a matter of fact, it\u2019s down-right easy. It let\u2019s you work magic with your stylesheets, makes changing settings and certain aspects down-right simple, and above all, puts <em>you<\/em> in complete control of how your data display\u2019s on end-user PCs.\n<\/p>\n<p><!--more--><\/p>\n<p>The most important thing to realize is, CSS files don\u2019t need to have the .css extension. It\u2019s one of those painfully obvious things that everyone knows but no one seems to get. All your HTML has to do is contain a reference that is defined as a CSS file that links to something. Anything. For instance:\n<\/p>\n<pre lang='java'>&lt;link media=&quot;Screen&quot; href=&quot;http:\/\/neosmart.net\/dynamicCSS.php&quot; type=&quot;text\/css&quot; rel=&quot;Stylesheet&quot; \/&gt;<\/pre>\n<p>At that point, you\u2019re set. The PHP file can contain anything, even plain CSS, but we\u2019ve done that for a reason \u2013 obviously we intend to make use of the PHP file. There are many things that you can do, but a (very) good idea is to first declare the content MIME type properly in \u201cdynamicCSS.php\u201d\n<\/p>\n<pre lang='php'>&lt;?php header(&quot;Content-type: text\/css&quot;); ?&gt;<\/pre>\n<\/p>\n<p>It\u2019s that simple. Now you\u2019re set, and you can put whatever you want after that in the PHP file. Here are some ideas\/examples to get you started.\n  <\/p>\n<ul>\n<li><strong>Minimizing Clutter. Minimizing Overhead. Minimizing Headaches.<br \/>\n    <br \/><\/strong>Shaun Inman\u2019s <a href=\"http:\/\/www.shauninman.com\/pendium\/\" rel=\"follow\">rather scary-looking<\/a> site <strong>gained attention for it\u2019s&nbsp;33,306 (366*91)&nbsp;CSS files<\/strong> \u2013 one for each day of the year. With each passing \u201cday\u201d file, the page \u201cfades\u201d with text and background hues blending together towards the lighter parts of the spectrum. With PHP CSS files, it couldn\u2019t be easier. Simply pass along the date of the post to the \u201cCSS\u201d file as such from the HTML side: <pre lang='java'>&lt;link media=&quot;Screen&quot; href=&quot;http:\/\/neosmart.net\/dynamicCSS.php?date=%date%&quot; type=&quot;text\/css&quot; rel=&quot;Stylesheet&quot; \/&gt;<\/pre> Leaving the rest to the php, where something as simple as: <pre lang='php'>&lt;?php function dateDiff($format, $begin, $end) { $p1=explode($format, $begin); $p2=explode($format, $end); $start=gregoriantojd($p1&amp;#91;0&amp;#93;, $p1&amp;#91;1&amp;#93;, $p1&amp;#91;2&amp;#93;); $stop=gregoriantojd($p2&amp;#91;0&amp;#93;, $p2&amp;#91;1&amp;#93;, $p2&amp;#91;2&amp;#93;); return $stop - $start; } $days = dateDiff($date, date(m-d-y)); $color = somehexafunc($days); ?&gt;<\/pre>Much easier! <\/li>\n<li><strong>In-Place Browser Identification<br \/>\n    <br \/><\/strong>No need to resort to JavaScript hacks to get pages to show the same across browsers. It\u2019s unreliable; use PHP instead! <a href=\"http:\/\/techpatterns.com\/downloads\/php_browser_detection.php\" rel=\"follow\">This script<\/a> was intended to be used in a PHP file to call different CSS files depending on what browser was picked. It identifies the browser and let\u2019s you take action accordingly \u2013 all Server-Side. But with dynamic CSS, you suddenly can do a lot more. You don\u2019t need a whole different CSS file for a different browser \u2014 a one-liner php script will do the trick. <\/li>\n<li><strong>Defining commonly-used elements as variables.<br \/>\n    <br \/><\/strong>This way you can easily make changes at ease without having to ctrl+h your entire document. Had a mood change? PHP-CSS is the answer! <\/li>\n<li><strong>Randomizing elements of stylesheets.<\/strong><br \/>\n    <br \/>PHP has long been used to randomize parts of HTML pages, and even randomizing the CSS used. But now you can have randomly-generated colors for headers without breaking the W3C standards (by using HTML for display instead of CSS), and switching background images\/patterns without using JavaScript or plain, old &lt;img&gt; tags. <\/li>\n<li><strong>User-Specific elements in PHP.<\/strong><br \/>\n    <br \/>Imagine a forum or blog where members can create customized themes simply by defining their favorite colors and having it stored in a database. CSS files (with a decent SQL library like ezSQL) can then grab the required info on-the-fly from the database, and apply the settings without resorting to crude HTML bgcolor tags and tables (yuck!). Images too \u2013 it\u2019s that easy. <\/li>\n<\/ul>\n<p>It\u2019s a whole new world waiting to be explored. It\u2019s something so simple yet so overlooked \u2013 it\u2019ll make you rethink the design of your entire site. It opens hundreds of possibilities for completely customized user experiences with minimal headache, maximum compliance, cleanest code, and fastest implementation times.\n  <\/p>\n<p>Of course this isn\u2019t limited to PHP. Ruby is the \u201cin\u201d term today, and yes, this would work just as well with Ruby (obviously with the necessary language changes) and with real-coder languages such as C# and Perl too. Anything can be done, it\u2019ll make the simplest of things a lot easier and cleaner (think faster-loading websites!) and the most challenging of jobs (read: 33,306 CSS Files!?) quite a lot more doable. Go for it!\n  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Can you imagine running a website with hundreds of pages off pure, static, html? Without a single bit of server-side code? No PHP, Perl, Ruby, or even SHTML? What about a site with hundreds of thousands of pages? or millions? &hellip; <a href=\"https:\/\/neosmart.net\/blog\/dynamic-php-driven-css-style-sheets-web-design\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":505,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[999],"tags":[73,124,125],"class_list":["post-276","post","type-post","status-publish","format-standard","hentry","category-programming","tag-css","tag-php","tag-web-design"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p4xDa-4s","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/neosmart.net\/blog\/wp-json\/wp\/v2\/posts\/276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/neosmart.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/neosmart.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/neosmart.net\/blog\/wp-json\/wp\/v2\/users\/505"}],"replies":[{"embeddable":true,"href":"https:\/\/neosmart.net\/blog\/wp-json\/wp\/v2\/comments?post=276"}],"version-history":[{"count":3,"href":"https:\/\/neosmart.net\/blog\/wp-json\/wp\/v2\/posts\/276\/revisions"}],"predecessor-version":[{"id":5014,"href":"https:\/\/neosmart.net\/blog\/wp-json\/wp\/v2\/posts\/276\/revisions\/5014"}],"wp:attachment":[{"href":"https:\/\/neosmart.net\/blog\/wp-json\/wp\/v2\/media?parent=276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/neosmart.net\/blog\/wp-json\/wp\/v2\/categories?post=276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/neosmart.net\/blog\/wp-json\/wp\/v2\/tags?post=276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}