Category Archives: CSS

SASS and CSScaffold

Posted by on March 31, 2011 No comments

I think the concept that SASS brings to the table (or CSScaffold, for that matter) is one we’ve all had when we play with CSS and think, “Gee, I would be nice if you could use variables and constants here, and if you could duplicate less code.” And then we would think of splitting our CSS up into many little files, since they’re easier to organize by function, only to find that that wasn’t such a hot idea because a browser will have to make a new HTTP connection for each one to download it.

So here’s SASS/CSScaffold adding just those features that CSS was missing. But is it all good news? I’d say on the whole, yes, but here’s a few points:

SASS requires that you compile your stylesheets every time you update them. My typical development cycle is make a little change to CSS (one one monitor) and hit refresh in my browser (other monitor) to see if the change did what I wanted it to do. That would have to change: now I would need to compile my CSS before I hit refresh. Not insurmountable, but it’s one more thing I can and will forgot and then I’ll think, “Hey, now why didn’t that change do anything?” only to find out after some head-scratching that I forgot to compile.

CSScaffold doesn’t seem to have this problem: since it’s written in PHP, it’ll run every time the CSS is requested from the server. I’m sure the authors have built in some sort of caching, so it should be quick enough. That actually sounds handier to me than SASS does, merely because I don’t need to compile. So the question is then, is CSScaffold just as good, better, or worse? If it’s just as good, I’ll go with it instead of SASS!

But is what SASS/CSScaffold do really that new? Like I said at the start of this post, it’s an idea all of us have thought of… and implemented! It’s always been possible to produce CSS through PHP. You can put a link to a PHP file in your page’s header, have it output a text/css header and you’re good to go. That’ll allow you to use variables, like SASS, constants, like SASS, functions and mixins, like SASS, all at zero cost since you had PHP anyway. You’ll basically only need to write the fancy gradient functions that SASS adds.

In order to add caching, you could pull your CSS through Smarty, thus prettifying the syntax a bit (it never feels quite right having PHP produce actual HTML or CSS what with the separation of code and presentation, so using Smarty gives a fuzzy warm feeling of righteousness). You could even write some spiffy new functions for Smarty, thus creating your own Sassy Smarty. So why all the hullabaloo?

Well, for one thing… SASS does more than I ever implemented with a CSS/PHP/Smarty approach, so hats off for that. But I still don’t like the compilation requirement.

Dynamic CSS through PHP

Posted by on March 31, 2011 No comments

When writing CSS,you will find yourself repeating information a lot, which is always a bad thing in programming. CSS 2 lacks constants, which would allow us to define a value once and refer to it many times. Instead, we are forced to repeat the actual value many times, making updating CSS a process that is prone to errors.

Also, in order to reduce the number of connections a client must make to the server, it’s necessary to place all CSS in a single file. But this may mean that you end up with a lot of possibly unrelated CSS in a single file, making it difficult to navigate while you’re developing. There are times when it’s simply handier to have lots of  small files instead of one big file, but it’s just not practical for download by your visitors.

These two problems can be resolved by loading your CSS through PHP. Instead of serving the CSS file directly, i.e.

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>

you can have the server load a PHP script that produces CSS like so:

<link rel="stylesheet" href="css/style.css.php" type="text/css" media="screen"/>

Note that this will only work if the scripts emits a text/css header:

<?php
  header("Content-type: text/css");
  ...
?>

Now your PHP script can define some constants that you simply insert into your CSS:

<?php
   header("Content-type: text/css");
   $mycolor = "#aaa";
?>
 
p {
  line-height: 1.1em;
  color: <?php echo $mycolor; ?>
}

Your script could also load various CSS files for processing and output the result in one go, solving the second problem we found. But we can do better still. You can have your PHP script use Smarty to produce the CSS, making the use of contants easier (and prettier):

<?php 
  header("Content-type: text/css"); 
  require_once "../smarty/Smarty.class.php";
  $smarty = new Smarty();
  $smarty->template_dir = "../smarty/templates";
  $smarty->compile_dir = "../smarty/templates_c";
  $smarty->cache_dir = "../smarty/cache";
  $smarty->config_dir = "../smarty/configs";
  $smarty->compile_check = true;
  $smarty->caching = 0;
  $smarty->display("file:style.css");
?>

The file style.css would be the main style sheet manifold; it could load other (sub-) stylesheets. For instance:

{assign var="defaultfont" value="normal 11px/1.2em Arial, sans-serif"}
{assign var="thinborder" value="solid 1px #aaa"}
{assign var="inputcolor" value="#666"}
{include file="sys/global-reset.css"}
{include file="sys/base.css"}
{include file="sys/loader.css"}
{include file="control/accordion.css"}
{include file="control/ajaxtable.css"}
{include file="control/button.css"}

The values that were assigned to defaultfont, thinborder and inputcolor can be used in the sub-stylesheets like so:

input
{
  border: {$thinborder};
  color: {$inputcolor};
}

Cross-browser min-height

Posted by on May 20, 2010 No comments
No IE, please
No IE, please

The min-height declaration is poorly understood by Internet Explorer. However, here’s a trick to force minimum height on a block element that works in all browsers:

height:auto !important;
height:200px;
min-height:200px;

This would set a min-height of 200px on all browsers. All browsers except IE6 will respect the !important flag and ignore the second height property, while IE6 will still use the second height property, then expand as needed.