Now, Opera 10.5 has been released, and a wide variety of browsers support these effects, with the exception of Internet Explorer, which we all know will not support things like that natively for a while.

Well, actually, it does for some of them. For one thing, Internet Explorer actually supports transforms, and has for a while now. But the syntax for doing it is ridiculous and incredibly time-consuming. Remember that the CSS3 for transforming looks like this:

.element {
	transform: rotate(10deg);
}

In Internet Explorer, it looks something like this:

.element {
	filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.7071067811865476',
	M12='0.7071067811865475', M21='-0.7071067811865475'
	,M22='0.7071067811865476', sizingmethod='auto expand');
}

I won’t even begin to pretend I understand what any of that is. As far as I could tell, it’s probably something to do with radians and matrices.

So imagine my excitement when I came across something called cssSandpaper, which takes care of all the conversion from easy-to-understand numbers to the complex Microsoft method for you.

You can read all about cssSandpaper and how to use it at the original site, User Agent Man.

Although the Lateral Cache system works well and is great for general purposes, the CSS minifier can be aided by a more intelligent caching system. Well, what do I mean by that? That’s what you are going to find out.

View a Demo Download the Files

Please note that the demo link above directs you to Lateral Code’s own CSS file, where intelligent caching is used.

Re-caching for no reason? Say whaaat…?

Any general caching system normally allows you to provide a time interval to cache. This interval is used in a simple manner:

1. Store an initial cache of the data in a file.
2. Check if the time of the last cache is greater than the specified time interval.
3. If so, re-cache a new set of updated data and deliver it.
4. Otherwise, deliver the data in the cache
5. Repeat steps 2 – 4 indefinitely.

This system is a basic standard and has been used with much success. By re-caching at a specified interval, data will eventually be updated and the user won’t have to wait excessively after each request to the website. Essentially, if this system is used, a website will not have to check for new data at each user request; rather, it will check only after the specified time interval.

Note that the above works very well for data that is updated at a specific time interval. For example, if new data arrives every 30 minutes, a cache is ideal because it can be configured to update only when new information is available.

Returning back to the CSS minifier, it’s important to realize that the need for re-minifying only occurs when the original CSS file has been modified. Only under this circumstance will the cache have to be updated. In essence, keeping a cache with a specified interval such as one day will produce excessive re-caching that is not useful. On the flip side, if you were to use a very large cache interval, such as 30 days, updating the CSS file would be a pain, as you would have two main choices:

• Wait 30 days until the cache refreshes
• Change the code to temporarily stop caching

The first option is much worse than the second, but both are still a pain.

How can you check if a file is modified?

Now there’s the golden question you were all waiting for. If you know that the cache should only be updated when the original CSS file is modified, how would you adapt the code to meet this criterion? Luckily, the answer is simple due to magic filemtime PHP function, which can tell you the last time the file was modified.

The algorithm to accomplish the task now becomes quite trivial:

1. When caching, store both the last modified time and the minified CSS. This can be done by using two files or just one.
2. When checking what to deliver to the user, compare the stored time to the last modified time. If they are the same, return what is in the cache. Otherwise, re-cache and re-minify the CSS. Consequently, deliver the new data to the user.

Writing code using the algorithm

From the algorithm comes the following code:

header( "Content-type: text/css" );

// config --->
$dataFile = 'cache/styles'; // Make sure a cache directory exists
$timeFile = 'cache/styles-time';
$origFile = '/path/to/css/file'; // Change this
// < --- end config

$lastTime = -1;
if( file_exists( $timeFile ) )
	$lastTime = (int) file_get_contents( $timeFile );

$cache = false;
if( file_exists( $dataFile ) && file_exists( $origFile ) && $lastTime == filemtime( $origFile ) ) {
	$css = file_get_contents( $dataFile );
	$cache = true;
}
else {
	$css = file_get_contents( $origFile );
	$css = minify( $css );

	file_put_contents( $dataFile, $css );
	file_put_contents( $timeFile, filemtime( $origFile ) );
}

echo $css;

Remember to change $origFile to point to your CSS file and also ensure that a cache/ directory exists (you may change the name/placement of this directory by editing the $dataFile and $timeFile variables).

Note that the minify function used in the above code is present in the original article.

As a quick overview:

1. The configuration options set the location of the original CSS file. They also point to the data files for storing minified CSS and the last modified time.
2. The time file is loaded into a variable and compared with the filemtime of the original CSS file.
3. If the two differ, minification is applied and the data is re-cached. It is then delivered.
4. Otherwise, the cached file with minifed CSS is delivered.

Conclusion

So, with some simple analysis and one useful PHP function, caching can become much more intelligent for the CSS minifier.

Do you have any thoughts about the minifier? Do you know some way to make it better? It’s now your time to talk, so feel free to do so in a comment below!

Border-Radius

I’m going to start out with an oldie but goodie. Border-Radius has been making the rounds for a while – it’s basically a way to get curved corners on a box. Recent versions of Mozilla Firefox, Chrome, and Safari all support Border-Radius, and, although Opera supposedly supported it at one point, current versions of Opera do not. It has been reported, though, that Opera 10.5 will support this again.

Here’s how to make it work:

.element {
	border-radius:10px; /* Official statement */
	-moz-border-radius:10px; /* For Firefox */
	-webkit-border-radius:10px; /* For Safari and Chrome */
	-o-border-radius:10px; /* Reported statement for Opera 10.5 */
}

Border-radius takes up to four numerical arguments (meaning in px, pt, or em), separated by spaces. The arguments denote the radius for the corners starting from the top-left corner and circling clockwise. If less than four arguments are given, then the arguments are duplicated for the remaining corners, similar to what happens with padding and margin when less than four arguments are given.

If you wanted to apply a rounded corner to only one corner, it is possible with individual statements. These statements differ between Firefox and Webkit-based browsers:

If you want rounded corners on a cross-browser basis, there have been numerous hacks to get it to work. I recommend using the jQuery Rounded Corners Plugin.

Box-Shadow

Box-Shadow is a fun one. It adds a shadow to the element affected, but it is capable of a great deal of customization.

Box-Shadow takes up to five arguments:

1. Horizontal offset
2. Vertical offset
3. Blur radius
4. Spread
5. Color

The first two arguments are required, as is the last one. Blur radius and Spread are optional. The first four arguments take numerical value inputs, and the last one, obviously, takes a color input.

How the offsets work is fairly obvious. A positive horizontal offset means that the shadow is offset to the right of the element, and a negative horizontal offset means that the shadow is offset to the left. Similarly, a positive vertical offset means the shadow is offset toward the downward direction, and a negative vertical offset offsets the shadow upwards.

The color argument can be in hexadecimal format, RGB format, or, if the browser supports it, RGBA, HSL, or HSLA.

Blur radius and spread are interesting concepts.

The Blur radius argument is how big the blur of the shadow is. An input of 0 for the Blur radius means that the shadow will have solid edges, much like the element it is shadowing. The higher the value of the input, the more blurred the edges are. However, because you can’t have a more solid edge than 0, you can’t pass a negative number for Blur radius.

The Spread argument can expand or contract the shadow. A positive value means that the dimensions of the shadow are bigger than the dimensions of the element, while a negative value makes the dimensions smaller. An input of 0 gives the shadow the same dimensions as the element.

The CSS statements for Box-Shadow are as follows:

.element {
	box-shadow: 10px 10px 5px 0 #888888; /* Official statement */
	-moz-box-shadow: 10px 10px 5px 0 #888888; /* For Firefox */
	-webkit-box-shadow: 10px 10px 5px 0 #888888; /* For Safari and Chrome */
}

As you can see, Opera does not support Box-Shadow yet, but, like Border-Radius, it is reported that Box-Shadow will be supported in Opera 10.5.

Transform

I’m actually kind of scared of Transform and what it means for the future of web design. Traditionally, layouts have been done in rectangular, blocky grids, because that’s what CSS supported: rectangular, blocky grids. Transform kind of turns that idea on it’s head. Or side, or corner. And skews it.

Basically, transform can do a lot of stuff to an element. Here’s a basic list of what it can do:

rotate

Rotates the element clockwise by the specified angle.

scale

Scales the element by the specified decimal value: a value of >1 will make the element bigger, while a value of <1 will make the element smaller.

skew

Skews the element by the specified number of angle.

translate

Shifts the element by the specified numerical value.

All these are passed to transform in the following fashion:

.element {
	transform: command(comma-separated-inputs);
}

For example, the command for translating an element 10px to the right and 20px down would look like this:

.element {
	transform: translate(10px,20px);
}

Rotate takes a single parameter: the angle that the element is rotated. The angle can be specified in either degrees or radians; the distinctions is made by appending deg or rad after the number. The appendix is required, or the transform will not occur.

Scale takes one or two input. If only one input is given, it is applied in the horizontal direction, while the second input would be applied in the vertical direction. The arguments are given in decimal format, meaning that an input of 1.2 means the element is scaled to 120% in the applicable direction, while an input of .75 means the element is scaled to 75% in the applicable direction.

Skew, like scale, takes one or two inputs. Similarly, the first input is applied horizontally, while the second input is applied vertically. Inputs are given as angles, meaning that the values must be appended with deg or rad, like rotate.

Translate, like the previous two, takes one or two inputs with the same directional applications. Inputs are given in px, pt, or em.

Scale, Skew, and Translate also come with X and Y only versions, that look like this:

• scale – scaleX, scaleY
• skew – skewX, skewY
• translate – translateX, translateY

Applying multiple translations is done like this:

.element {
	transform: skew(5deg,-15deg) scale(1.2, 1.5) rotate(10deg);
}

You can see the effects of the multiple translations, along with Border-Radius, Box-Shadow, and the CSS2 feature Text-Shadow:

Transform is supported by newer versions of Firefox, Chrome, Safari, and will be supported in Opera starting from Opera 10.5:

.element {
	transform: [commands]; /* Official statement */
	-moz-transform: [commands]; /* For Firefox */
	-webkit-transform: [commands]; /* For Safari and Chrome */
	-o-transform: [commands]; /* For Opera 10.5 */
}

I hope you’ve enjoyed reading this wall of text about the new CSS3 features. Feel free to subscribe to our RSS feed or follow us on Twitter for more goodies like this in the future.

CSS3 comes with a few new ways of manipulating colors, such as using HSL (Hue, Saturation, Light) and opacity/alpha-channels. Unfortunately, only Firefox 3+, Opera 10+, Chrome 1.0+ and Safari 3+ and a few derivatives fully support these at the moment, but we make do with what we can, seeing as Internet Explorer doesn’t even start supporting CSS3 elements until Internet Explorer 9.

Opacity

This one is an old one that, surprisingly, is available in current versions of IE, albeit in a more complicated way.

Opacity turns the entire CSS object transparent, and the opacity of any child element is scaled appropriately. The official CSS3 statement is as follows:

    opacity: [number between 0-1];

So a setting of opacity: 0.5; would make the object 50% transparent. Although newer browsers support this head-on, older browsers require some custom code, as well as Internet Explorer.

So for older Firefox versions, we use the -moz- prefix, and for older Safari/Chrome versions, we use the -webkit- prefix. For really oldschool versions of Safari that used KHTML instead of Webkit, we use -khtml-. So if we really wanted to support everyone, our code might look something like this:

    opacity: 0.5;
    -moz-opacity: 0.5;
    -webkit-opacity: 0.5;
    -khtml-opacity: 0.5;

But wait! What about Internet Explorer? Well, Internet Explorer doesn’t actually support this outright, but rather through a proprietary Microsoft filter. The traditional way of doing it was short and sweet:

    filter:alpha(opacity=50);

Note that we now use a scale of 0-100 for Internet Explorer, not 0-1 as we do for other browsers. Internet Explorer 8 provides a new beast to have to deal with. Don’t try to memorize this one like you would the other ones, this is a long one:

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

Of course, if you wanted to support older versions of Internet Explorer, you would have to use the shorter version as well, meaning you would need a total of six CSS statements if you wanted to support a large range of browsers.

RGBa

Let’s next talk about RGBa. RGBa is an extension of the original RGB, but it takes a fourth argument: the alpha channel. The alpha channel argument takes a number between 0 and 1, just like opacity did. The main advantage of using RGBa over opacity is that when using RGBa, the transparency isn’t applied to child elements. What this means is that you can have a completely solid object inside a transparent object, whereas when you use opacity, child elements of transparent objects are also transparent.

Using RGBa couldn’t be simpler:

    div {
        background: rgb(255,0,0); /* The old one */
        background: rgba(255,0,0,0.5); /* The new one */
    }

As you can see, we have gone from a solid red to a half-transparent red by adding a letter and another argument. RGBa is supported in Firefox 3+, Opera 10+, Safari 3+, and Chrome 1.0+, but not Internet Explorer. CSS-Tricks provides a proprietary filter workaround to make this work in Internet Explorer:

    <!--[if IE]>
        <style type="text/css">
            .color-block {
                background:transparent;
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
                zoom: 1;
            }
        >/style>
    <![endif]-->

HSL

HSL is a pretty intuitive way of choosing colors. If you need “just a little darker” or “just a little brighter”, playing around with hexadecimal combinations takes a bit of time. Luckily, with HSL, it’s just a simple number change.

HSL stands for Hue, Saturation, Lightness. Hue is the color in a color wheel (see picture above). Color choice is done using degrees, with 0º being Red, 120º being Green, and 240º being Blue. Of course, you have the different color combinations as in-betweens, so you sort of have this going on:

• 0º – Red
• 60º – Yellow
• 120º – Green
• 180º – Cyan
• 240º – Blue
• 300º – Magenta

Saturation is how much of the color we are using. 0% means a greyscale, since we aren’t using any of the color, whereas 100% means the chosen color in full.

Lightness is basically how bright the color is. A lower setting means darker, and a higher setting means lighter, with 0% and 100% meaning black and white respectively.

So an object with a background of an orange-ish color at 50% saturation and 80% lightness would look like this:

    div {
        background: hsl(30, 50%, 80%);
    }

Making this a bit lighter or a bit darker would merely entail changing the last argument.

HSLA

HSLA would, of course, be just an extension of HSL that, like RGBa, adds a fourth argument of opacity. Usage of HSLA is just as easy as that of RGBa: just stick the extra argument in there:

    div {
        background: hsla(30, 50%, 80%, 0.5);
    }

The last example is the previously used orange-ish color, but at 50% opacity.

Conclusion

Of course, HSL and HSLA are only supported in newer versions of Firefox, Opera, Safari, and Chrome. There are no proprietary workarounds for Internet Explorer for these two as there are for Opacity and RGBa. However, that should never stop you from trying them out and experimenting with them.

See you next time!

Note: This article is for CSS beginners!

What makes top navigation so special?

When a user first visits a site, they immediately see the top half of a web page. For a quick fact, this half is known as the area above the fold.

Top navigation concentrates on the above property. By having navigation in the area a user first looks at, links gain more attention. This principle makes top navigation a viable alternative to the regular sidebar menu.

How is a top navigation menu created?

Top navigation menus are typically created through HTML and CSS, though JavaScript can help spice them up.

HTML

A navigation menu is inherently a type of list. Thus, it is only proper to contain this sort of menu in an HTML list:

<ul>
<li><a href="/">Home</li>
<li><a href="/about/">About</li>
<li><a href="/contact-us/">Contact Us</li>
<li><a href="/portfolio/">Portfolio</li>
<li><a href="/gallery/">Gallery</li>
<ul>

The above snippet contains an unordered list with links in each list item. It will be the base for our CSS.

CSS

Bullet Points

Now, when you first look at an unordered list, you will see something like this:

Notice how I’m using firebug and creating custom HTML + CSS within a blank page that has no URL. It is a key add-on to firefox that all web developers should have. With that side-note finished, let’s return to the problem:

There are little bullet points at the beginning of each element. In our case, these are unnecessary. We need a simple list with no bullet points that can be displayed horizontally. To remove this effect, we can use the list-style-type property:

ul {
list-style-type: none;
}

Horizontal Display

Next, we must remove the normal vertical-style display of the unordered list. This will take a small bit of work.

The first thing we must notice is that list items are normally displayed in a “block box.” This is specified with the CSS property display: list-item;. Unfortunately, this produces a line break before and after each list item. We must change this property to display the items in a one single line. This is simply done by changing the display property:

li {
display: inline;
}

The above CSS statement changes the display of the list elements so that they are next to one another in a horizontal line.

Along with this, it is also a good rule of thumb to float each list element to the left. This will remove browser inconsistencies and also place the list in the left most position because floated elements stack. Essentially, this means that the list elements will be placed side by side and not on top of one another:

li {
float: left;
}

A word of caution

Let me side-track a bit to explain a problem that you may run into when customizing this menu. Once you complete writing the above code, you might want to add a left-offset to each list element in order to space them out:

li {
float: left;
display: inline;
margin-left: 20px;
}

Do you see anything wrong with this?

The old double-margin trick

An element that is floated left with a left margin. This should immediately put up a flag in your head. When a floated element is given a margin that is on the same side as the float, IE 6 doubles the margin. Just remember to take this into account if you want a left margin.

Now that we’ve avoided that calamity, let’s move forward.

Adding some inital style

Now, I feel that this menu looks very bland at this point. I want to spice it up a bit. Let’s add a custom font and some link styling:

body {
font: 14px/22px Georgia, "Times New Roman", Times, Serif;
}

a {
color: #DA4B4B;
text-decoration: none;
}

a:hover {
color: #000;
}

That might be a bit much to digest. Let me explain what is going on.

The first thing we do is set an overall font. It has a size of 14px, line-height of 22px, and font-family of Georgia, “Times New Roman”, Times, Serif. We then move on to our links and set a color for them. Notice how we also remove the default underlining through text-decoration: none. Finally, we set hover styles. The :hover selector is a psuedo-class that activates every time the mouse hovers over a link. When this does occur, we change the link color to black – #000.

At this point, many of you must be annoyed with how closely each list element is placed next to one another. Let’s fix this up.

Styling the links

If you scroll to the top of the CSS blog, you will notice that a large portion of each navigation element can be hovered over to click on it. In other words, you don’t have to click directly on “What’s new?”. Instead, you can place your cursor a bit under it and still click to have the same effect.

How can we accomplish this?

It is actually quite simple to create this effect. The key is in each link. Instead of displaying the links normally, we can put them in a block box. When this occurs, the whole area the text takes up will also be a part of the link. Well, you might ask, isn’t this what links normally do?

Here is where the tricky part comes in. Links do take up the text area, but they do not consider line-height. If a link is displayed as block, line-height will determine the actual height unless overridden. This can work to our advantage! We can simply set the line-height of the unordered list to achieve a larger link:

ul {
line-height: 50px;
}

li a {
display: block;
border: 1px solid #000;
}

Notice how I am setting a border around the link so you can see the dimensions of it.

We are almost there! At this point, we can finally get rid of that bad spacing. All we need to do is add padding and/or margin to the link element. In this case, I will add a 20px left and right padding:

li a {
padding: 0 20px;
}

Finally, we can put in a few extra styles to make it look nice:

li a {
background: #ececec;
font-size: 18px;
border: 1px solid #ccc;
}

li a:hover {
background: #f6f6f6;
font-size: 20px;
}

In this above snippet, we just add a background color, border, and font size to each link element. These values then get adjusted when the mouse hovers over them.

Here is the final product:

The Finished CSS

body {
font: 14px/22px Georgia, "Times New Roman", Times, Serif;
}

a {
color: #DA4B4B;
text-decoration: none;
}

a:hover {
color: #000;
}

ul {
list-style-type: none;
line-height: 50px;
}

li {
display: inline;
float: left;
}

li a {
display: block;
background: #ececec;
padding: 0 20px;
font-size: 18px;
border: 1px solid #ccc;
}

li a:hover {
background: #f2f2f2;
font-size: 20px;
}

Conclusion

I hope this helped refine your CSS skills! Stay tuned for more and feel free to drop a comment with any questions/comments/concerns!

We will once again make use of PHP, this time cookies. We will explore how to set the cookie for the user’s choice, and two methods of using this information.

First, we shall create a file. For purposes of demonstration, this file shall be called switch.php.

This file takes in a parameter color, sets the cookie value to that color, and redirects the user to the previous page. You can use other nomials than color if you wish.

<?php
	$color = $_GET['color'];
	$_COOKIE['color'] = $color;
	header("Location: " + $_SYSTEM['HTTP_REFERER']);
?>

Next, we need to add links. The URLS will call switch.php with the relevant color.

	<a href="switch.php?color=red">Red scheme<a>

When a user clicks on the link, the cookie will be set that their choice is their preferred scheme.

Now let’s look at ways of calling this information and showing the right scheme to the user.

Method One

The first method requires that your HTML page be done in PHP.

First, let’s look at the call to the CSS file from last time:

<link rel="stylesheet" type="text/css" file="styles.php?color=green" />

What we want to do is make the color variable and not hard-coded. We’ll look for the user’s cookie for this site called color. Remember that you may name it whatever you choose.

<?php
	$color = $_COOKIE['color'];
	echo '<link rel="stylesheet" type="text/css" file="styles.php?color='.$color.' />';
?>

Method Two

The second method requires that your CSS file be done in PHP, which it already is. It allows for not passing any argument at all in the HTML page:

<link rel="stylesheet" type="text/css" file="styles.php" />

What this method does is call for the user preference in the CSS file.

In the CSS file from last time, there existed these three lines:

	$scheme-name = $_GET['color'];
	$scheme = $schemes[$scheme-name];
	if ( !$scheme ) { $scheme = $schemes['green']; }

We will replace the first line with the following:

	$scheme-name = $_COOKIE['color'];

By using one of these two methods, you can now remember the user preference and serve up different color schemes based on their preferences.

Solving the problem

One simple way to achieve this balance is by using a minifier. By taking a CSS file in as input, a minifier removes white space and other unnecessary elements to significantly reduce file size.

Oops, did you forget about something?

At first glance, this seems to be a zero-drawback system. Upon closer inspection, it becomes apparent that removing white space creates poor formatting, a leading cause of what we call read-once write-once code. You might be able to edit the styles directly after creation, but in a few days or weeks, this task becomes tedious.

This is mainly why using online minifiers aren’t 100% supported. In fact, by creating your own minifer, there is a way to both keep formatting and produce minified code. You might think these are mutually exclusive. This post, which demonstrates how to create a stunningly simple CSS minifier, aims to prove you wrong.

Meet our dear friend: PHP

In our previous post, we showed you how to generate CSS using PHP. In this article, we will utilize a similar concept.

Before you can actually solve the minifier’s main problem, it is imperative to first write a minifier. Luckily, we have created an extremely simple PHP function to do so. In approximately 10 lines, the following code will finish over 90% of all possible minifications:

function minify( $css ) {
	$css = preg_replace( '#\s+#', ' ', $css );
	$css = preg_replace( '#/\*.*?\*/#s', '', $css );
	$css = str_replace( '; ', ';', $css );
	$css = str_replace( ': ', ':', $css );
	$css = str_replace( ' {', '{', $css );
	$css = str_replace( '{ ', '{', $css );
	$css = str_replace( ', ', ',', $css );
	$css = str_replace( '} ', '}', $css );
	$css = str_replace( ';}', '}', $css );

	return trim( $css );
}

Who knew simplifying CSS could be that easy? Using preg_match, the above code is able to replace extraneous white space with just a single character. It then proceeds to minfy even more elements using str_replace.

Huh? How am I supposed to use the above code?

Well, now that we have created our PHP function, you might wonder how to use it. The answer to this question stems, once again, from the previous article. Instead of linking to a css file from our HTML, we will actually refer to a php one:

<link rel="stylesheet" type="text/css" href="minify.php?css=styles.css" />

Notice how we call our minify.php file with the parameter css. The value of css actually refers to the file we want to minify. With this in place, create the minify.php file and add in the function we previously created. In addition, place the following code at the beginning of the file:

header( "Content-type: text/css" );

$file = isset( $_GET[ 'css' ] ) ? $_GET[ 'css' ] : '';
if( !file || array_pop( split( '\.', $file ) ) != 'css' || strpos( $file, '/' ) !== false )
	die( 'Invalid Parameters' );

$content = @file_get_contents( $file );

The above snippet obtains the contents of the specified css file. To add security, it first verifies that the file name is not blank, ends in .css, and that it is located in the current directory. Feel free to edit the last setting as necessary by removing:

strpos( $file, '/' ) !== false

To complete our CSS minifier, all we have to do is call minify on the obtained content and then print it:

echo minify( $content );

Voila! You now have a fully functioning CSS minifier in minimal code. In addition, the formatting of your code stays 100% in-tact. All you need to do is edit the CSS file that you pass to minify.php in order to make changes.

Here is a simple copy-paste version of our code:

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

$file = isset( $_GET[ 'css' ] ) ? $_GET[ 'css' ] : '';
if( !file || array_pop( split( '\.', $file ) ) != 'css' || strpos( $file, '/' ) !== false )
	die( 'Invalid Parameters' );

$content = @file_get_contents( $file );
echo minify( $content );

function minify( $css ) {
	$css = preg_replace( '#\s+#', ' ', $css );
	$css = preg_replace( '#/\*.*?\*/#s', '', $css );
	$css = str_replace( '; ', ';', $css );
	$css = str_replace( ': ', ':', $css );
	$css = str_replace( ' {', '{', $css );
	$css = str_replace( '{ ', '{', $css );
	$css = str_replace( ', ', ',', $css );
	$css = str_replace( '} ', '}', $css );
	$css = str_replace( ';}', '}', $css );

	return trim( $css );
}
?>

Thanks for stopping by!

Disclaimer: This makes use of CSS variables, over which there has been much debate. This article will not discuss whether one should or should not use CSS variables, only present a way to use them.

First, the call in the HTML will no longer call a CSS file, but a PHP file.

<link rel="stylesheet" type="text/css" file="styles.css" />

to

<link rel="stylesheet" type="text/css" file="styles.php?color=green" />

Of course, color can be any nomial you wish, and green can be any color you wish, or even the name of a color scheme, such as hotlava.

Now we move on to the CSS file. For the purposes of demonstration, we will be using the following sample CSS file:

body {
	background: #7BA05B;
}
#header {
	background: url(lush-forest.jpg);
}
#content {
	background: #FFFFFF;
	color: #465945;
}

First, if you haven’t already, change the extension of your CSS file to .php. For example, styles.css would become styles.php

Here is a very important step; don’t omit this. At the top of your new PHP file, add this line:

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

This makes the server send the page as CSS. If you do not add this line, it will default to sending as HTML, and your browser will interpret it as this, thus leaving your actual page CSS-less.

The next step is to define some color schemes. For example, let’s add in a red color scheme to our example CSS. The following should go between the header line and the beginning of your CSS.

<?php
	$schemes = array (
		'green' => array (
			'header' => 'lush-forest.jpg',
			'page-bg' => '#7BA05B',
			'content-bg' => '#FFFFFF',
			'text' => '#465945'
			),
		'red' => array (
			'header' => 'flamin-lava.jpg',
			'page-bg' => '#FA8072',
			'content-bg' => '#FFFFFF',
			'text' => '#800000'
			)
		);
?>

Now that we have defined the schemes, we need a way to figure out which scheme is being called for.

/*
 * Because the variable is being specified in the request URL
 * we can use the GET array. You can replace 'color' with
 * whatever you have named your variable
 */
$scheme-name = $_GET['color'];
$scheme = $schemes[$scheme-name];
// If the specified scheme does not exist, default to 'green'
if ( !$scheme ) { $scheme = $schemes['green']; }

Then, in the CSS part, we replace the colors with PHP echos

body {
	background: <?php echo $scheme['page-bg']; ?>;
}
#header {
	background: url(<?php echo $scheme['header']; ?>);
}
#content {
	background: <?php echo $scheme['content-bg']; ?>;
	color: <?php echo $scheme['text']; ?>;
}

So in whole, the file would look like this:

<?php
	header("Content-type: text/css");
	$schemes = array (
		'green' => array (
			'header' => 'lush-forest.jpg',
			'page-bg' => '#7BA05B',
			'content-bg' => '#FFFFFF',
			'text' => '#465945'
			),
		'red' => array (
			'header' => 'flamin-lava.jpg',
			'page-bg' => '#FA8072',
			'content-bg' => '#FFFFFF',
			'text' => '#800000'
			)
		);
	$scheme-name = $_GET['color'];
	$scheme = $schemes[$scheme-name];
	if ( !$scheme ) { $scheme = $schemes['green']; }
?>
body {
	background: <?php echo $scheme['page-bg']; ?>;
}
#header {
	background: url(<?php echo $scheme['header']; ?>);
}
#content {
	background: <?php echo $scheme['content-bg']; ?>;
	color: <?php echo $scheme['text']; ?>;
}

Through this, it is possible to serve up different color schemes from the same file. Stay tuned for our next article in which we will explain how to “remember” the user’s preference and serve up the designated color scheme.

1. blueprint

2. YAML

3. YUI Grids CSS

4. 960 Grid System

5. Tripoli

6. SenCSs

7. jQuery UI CSS Framework

8. logicss

9. ___layouts

10. Elements

11. BlueTrip

12. Unobtrusive CSS

Hopefully these will save you time and frustration!

1. Definitive List of CSS Frameworks

CSS Frameworks are meant to be used to save precious development time. However, not all of them are right for everyone. Find out about them at this resource.

2. 22 Most Amazing Css Tricks

Here you can find a collection of many things you can do with CSS, ranging from things you may use regularly to things that you might never have thought of doing.

3. 47+ Excellent Ajax CSS Forms

Noupe presents a huge amount of different ways you can style Forms using CSS.

4. 10 Excellent CSS Tips and Tutorials

These are just things that everyone in web development should know, because they come in handy very often.

5. The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

CSS Sprites are quite undoubtedly one of the coolest CSS tricks you can use to optimize your site. The sheer number of examples, tutorials, and generators that this post provides makes it very much worth reading.

I hope that these have helped you grow as a web developer.