MaggsWeb:7 » CSS http://www.maggsweb.com www.maggsweb.com Sat, 21 Aug 2010 20:50:00 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Compressing CSS files – on the fly http://www.maggsweb.com/php/compressing-files-on-the-fly/ http://www.maggsweb.com/php/compressing-files-on-the-fly/#comments Tue, 20 Jul 2010 07:30:20 +0000 admin http://www.maggsweb.com/?p=978 I hate compressing CSS files as they become totally unreadable for editing. I end up keeping 2 versions, compressed and uncompressed, etc.. But how about compressing all your CSS files into one file, ‘on-the-fly’. Now that has solved the problem.

?View Code PHP
<?php
 
header('Content-type: text/css');
 
ob_start("compress");
 
function compress($buffer) {
  /* remove comments */
  $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
  /* remove tabs, spaces, newlines, etc. */
  $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
  return $buffer;
}
 
/* your css files */
include('master.css');
include('typography.css');
include('grid.css');
include('print.css');
include('handheld.css');
 
ob_end_flush();
 
?>

Use it like this :

?View Code HTML
<link rel="stylesheet" href="style.php" type="text/css" media="all">
]]> http://www.maggsweb.com/php/compressing-files-on-the-fly/feed/ 0 CSS NoWrap http://www.maggsweb.com/css/css-nowrap/ http://www.maggsweb.com/css/css-nowrap/#comments Fri, 05 Feb 2010 08:35:07 +0000 admin http://www.maggsweb.com/?p=714 I used to use NOWRAP in my ‘s often to ensure that columns didn’t ‘wrap’ their contents – but have struggled to find an equivalent in CSS for a white.

Until now:
Short and simple equivalent for NOWRAP in a TD…?

?View Code CSS
 
<style language='text/css'>
  td.fixed-width {
    white-space:nowrap;
  }
  </style>
]]> http://www.maggsweb.com/css/css-nowrap/feed/ 0 CSS ‘content’ attribute http://www.maggsweb.com/css/css-content-attribute/ http://www.maggsweb.com/css/css-content-attribute/#comments Wed, 21 Oct 2009 18:49:20 +0000 chris http://tech.maggsweb.co.uk/?p=300 This is a new one, and pretty cool.  The ‘content’ attribute automatically adds code / text / attributes to the start or end of any tag, depending on the pseudo class.

For example:

?View Code CSS
 
a:after {
  content: "" attr(href) "";
}
 
a.external:after{
  content: "(Link opens in a new window)";
}
 
a.pdf:before {
  content: "<img src='/img/abobe-icon.gif' width='16' height='16' border='0'>";
}
  1. Would automatically add the content of the ‘href’ attribute of the link code to the end (because we used ‘:after’) of the link text.
  2. Would automatically add the quoted text to the end of the link text. See how this is applied to a ‘class’ of ‘external’.
  3. This one adds an icon to the beginning of the link text, and is controlled by the ‘class’. Imagine having classes for each type of document link…..

Web 2.0? Nah, this is CSS3!

]]> http://www.maggsweb.com/css/css-content-attribute/feed/ 0 CSS fixes for IE, using Javascript http://www.maggsweb.com/css/css-fixes-for-ie-using-javascript/ http://www.maggsweb.com/css/css-fixes-for-ie-using-javascript/#comments Fri, 13 Mar 2009 09:54:16 +0000 chris http://tech.maggsweb.co.uk/?p=217 Some CSS effects don’t work in IE, damn them, so that leaves 2 options.

Either forget that you have coded some nice roll-over effects that the majority of people wont see…

Or, add an IE-specific javascript fix.

?View Code CSS
<!--[if IE]>
<script type="text/javascript" src="/content/iehover-fix.js"><!-- ---></script>
<![endif]-->
]]> http://www.maggsweb.com/css/css-fixes-for-ie-using-javascript/feed/ 0 CSS3 and Rounded borders… http://www.maggsweb.com/css/css3-and-rounded-borders/ http://www.maggsweb.com/css/css3-and-rounded-borders/#comments Wed, 26 Nov 2008 08:16:37 +0000 chris http://tech.maggsweb.co.uk/?p=198 …but still not on IE.

?View Code CSS
<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;">
</div>

-moz-border-radius-topleft
-webkit-border-top-left-radius
-moz-border-radius-topright
-webkit-border-top-right-radius
-moz-border-radius-bottomleft
-webkit-border-bottom-left-radius
-moz-border-radius-bottomright
-webkit-border-bottom-right-radius

]]> http://www.maggsweb.com/css/css3-and-rounded-borders/feed/ 0 Expressions in CSS / IE fix http://www.maggsweb.com/css/ie-fix/ http://www.maggsweb.com/css/ie-fix/#comments Tue, 02 Sep 2008 07:09:15 +0000 chris http://tech.maggsweb.co.uk/?p=173 This wont pass CSS validation, but its usefull to know that expressions can be added into css.

?View Code CSS
/* IE FIX */
#div {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: expression(this.scrollWidth &gt; this.offsetWidth ? 15 : 0);
}
]]> http://www.maggsweb.com/css/ie-fix/feed/ 1 Head in the clouds? Tag yourself. http://www.maggsweb.com/php/head-in-the-clouds-tag-yourself/ http://www.maggsweb.com/php/head-in-the-clouds-tag-yourself/#comments Mon, 30 Jun 2008 12:21:21 +0000 chris http://www.cmaggs.co.uk/?p=42 I have been looking for a ‘simple’ tag cloud generator that will parse content from MySQL for ages and couldn’t find one. So I adapted – and heavily modified (reduced) – and CSS’d – the best one that I could find. It turned out nice and simple.

?View Code CSS
  .size9 {	color: #000;	font-size: 26px;	 }
  .size8 { 	color: #111;	font-size: 24px;	 }
  .size7 {	color: #222;	font-size: 22px;	 }
  .size6 {	color: #333;	font-size: 20px;	}
  .size5 {	color: #444;	font-size: 18px;	}
  .size4 {	color: #555;	font-size: 16px;	  }
  .size3 {	color: #666;	font-size: 14px;	  }
  .size2 {	color: #777;	font-size: 12px;	  }
  .size1 {	color: #888;	font-size: 8px;	  }
  .size0 {	color: #999;	font-size: 6px;	  }


?View Code PHP
<?php
 
$terms = array();
$maximum = 0;
 
$query = mysql_query("SELECT word, count FROM [tablename] WHERE display = '1'");
// could add LIMIT, SORT, etc.. if required
 
while ($row = mysql_fetch_array($query)) {
//create vars
    $word = $row['word'];
    $count = $row['count'];
 
    // set 'maximum' from counter
    if ($count > $maximum) $maximum = $count;
 
//create array
    $elements[] = array('word' => $word, 'count' => $count);
 
}
//random
//shuffle($elements);
//alphabetical
sort($elements);
 
foreach ($elements as $e){ // start looping through the tags
 
    // determine the popularity of this term as a percentage
    $percent = floor(($e['count'] / $maximum) * 100);
 
    // determine the class for this term based on the percentage
	if 	   ($percent >= 99)		$class = 9;
	elseif ($percent >= 70)		$class = 8;
	elseif ($percent >= 60)		$class = 7;
	elseif ($percent >= 50)		$class = 6;
	elseif ($percent >= 40)		$class = 5;
	elseif ($percent >= 30)		$class = 4;
	elseif ($percent >= 20)		$class = 3;
	elseif ($percent >= 10)		$class = 2;
	elseif ($percent >= 5)		$class = 1;
	else						$class = 0;
 
    // output this term
    //with links...
    //echo "<span class=\"$class\"><a href=\"search.php?search=" . urlencode($k['term']) . "\">" . $k['term'] . "</a></span>\n ";
  //without links.../
    echo "<span class='word size".$class."'>" . $e['word'] . "</span>\n ";
 
}
// for debugging....
//echo "<hr />";
//echo "<pre>";
//print_r($elements);
//echo "

“;
?> ]]> http://www.maggsweb.com/php/head-in-the-clouds-tag-yourself/feed/ 0 blur() no more.. http://www.maggsweb.com/css/blur-no-more/ http://www.maggsweb.com/css/blur-no-more/#comments Tue, 24 Jun 2008 11:24:54 +0000 chris http://www.cmaggs.co.uk/?p=37 Use FireFox? Can’t stand the dotted lines around links when you select them? Nope, nor me.

For ages I have been diligently adding a javascript:blur(); call to my links to stop these little white lines appearing.  Now I have found the holy grail.

For example, previously I would have done this:

?View Code HTML
<a href="..." onfocus="blur()" > [LINK] </a>

This works great, but guaranteed the one that you forget to code will be the one that annoys you most. So, add it to the style sheet once – like this.

?View Code CSS
a:active { outline:none; }
a:focus { outline:none; }

Cool ;)

]]> http://www.maggsweb.com/css/blur-no-more/feed/ 1 Using CSS for form layout (No more tables.. ) http://www.maggsweb.com/css/css-form-layout-2/ http://www.maggsweb.com/css/css-form-layout-2/#comments Sat, 01 Mar 2008 13:16:39 +0000 chris http://www.cmaggs.co.uk/html/32 Form fields need to line up. OK. Historically this was achieved using a table, and masses of markup. Although that’s still acceptable and would not fail validation, there is an easier and better way that uses less code and where using the correct tags will also cause the ‘name’ field become focused when you clicked the ‘name’ label.

Using CSS we can achieve this using less code, while providing improved usability.

  • Use a <P> tag to distinguish each line.
  • Use a <label> with the name attribute to link to an input with the same name attribute to create the links.
  • Put the <label> inside the <P> tag with a fixed width, floated left
  • Use the padding (inside) and margin (outside) on the <P> tag for spacing.

Perfect!

cssForm

?View Code HTML
 
<form action="#">
<p><label for="name">Name</label><input id="name" type="text" /></p>
<p><label for="e-mail">E-mail</label><input id="e-mail" type="text" /></p>
<p><input type="submit" value="Submit" /></p>
</form>

?View Code CSS
 
p {
  padding: 2px;
  margin: 5px;
}
p.submit {
  margin-left: 110px; 
}
label {
  width: 100px;
  float: left;
  text-align: right;
  margin-right: 5px;
  display: block;
}
]]> http://www.maggsweb.com/css/css-form-layout-2/feed/ 0 Fieldset as a border and title http://www.maggsweb.com/css/fieldset-as-a-border-title/ http://www.maggsweb.com/css/fieldset-as-a-border-title/#comments Fri, 15 Feb 2008 10:12:47 +0000 chris http://www.cmaggs.co.uk/html/31 These are a wicked (and widely underused) way to wrap similar actions together with a nice little header.
When I first saw them in use I tried to recreate them using CSS, a background image, overlapping layers… Wooaah – Cool Head!! Noah was using these…

?View Code HTML
 
<h2>TITLE</h2>
<fieldset>
<legend>Sub Title</legend>
STUFF HERE
</fieldset>
]]> http://www.maggsweb.com/css/fieldset-as-a-border-title/feed/ 0