Webmail CSS support
March 6, 2008 at 6:00 PM by Steve| If you're a web developer that has ever had to put together an HTML formatted email you might have noticed it looked all wrong when you looked at it in Google's Gmail. This is because GMail strips out the <style> tags. You can use CSS styles but only inline in the HTML tag's style attributes. But, that sort of defeats the point of using CSS in the first place, you may as well use the horrible old <FONT> tag. The other webmail clients have similar issues (though not as bad as GMail). Here's a good resource showing the CSS support in the major webmail clients. I wasn't happy having to deal with applying styles to each and every HTML element in the email I was generating, and couldn't find any solutions on the web. So perhaps other developers facing the same dilemma will be interested in my humble solution to the problem. A little PHP function that'll take some HTML, reads in a CSS file and inserts the style declarations into the HTML elements. It's not too fancy, you have to dumb down the CSS because the function can only parse CSS declarations where there is a single selector, but at least in development I can put my CSS in one place and not have to maintain HTML with all the CSS placed in each tag. Here's the function: It takes the path to the external CSS file and the actual HTML as arguments and returns the HTML with the CSS inserted into the style attributes of the tags.
//*********************************************************************************************************
// Function: InsertCSS()
// What it Does: Inserts the CSS rules from a css file inline into the individual HTML elements < >
//*********************************************************************************************************
function InsertCSS($path_to_css,$html)
{
global $WebOS, $SYSCONFIG;
$css = file_get_contents($path_to_css);
$pattern = '/([\.#]*)([\w-]+)\s?\{([^}]*)/';
preg_match_all($pattern,$css,$matches);
$css_selectortypes = $matches[1];
$css_selectors = $matches[2];
$css_properties = $matches[3];
foreach( $css_selectors as $idx => $selector )
{
switch ($css_selectortypes[$idx])
{
case '#':
$find[] = ' id="' . $selector . '"';
$replace[] = ' id="' . $selector . '" style="' . trim( preg_replace('/\s+/',' ',$css_properties[$idx]) ) . '"';
break;
case '.':
$find[] = ' class="' . $selector . '"';
$replace[] = ' class="' . $selector . '" style="' . trim( preg_replace('/\s+/',' ',$css_properties[$idx]) ) . '"';
break;
case '':
$find[] = '<' . $selector;
$replace[] = '<' . $selector . ' style="' . trim( preg_replace('/\s+/',' ',$css_properties[$idx]) ) . '"';
break;
}
}
$html = str_replace( $find, $replace, $html );
return $html;
}
Update: 3/21 Also note that this will only work with one selector PER TAG as well... so if you have applied a style to the "<a>" tag and to the "side-link" class only the style for the <a> tag will work with the tag <a class="side-link"> because there will be two style attributes and the browsers will ignore the second one. |
 |  |
