css snippets

Elastic 2 column XHTML and CSS layout

Tagged xhtml, css, layout, 2 column  Languages html

This is a slight modification of Roger Johansson's code that I found while reading this article. I've modified the code to use ems instead of pixels--Mike Jolley has written about why ems are preferrable over pixels.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content=""/>
  <style type="text/css">
  * {
    font-size:95%;
    font-family: georgia,'Times',serif;
  }

  body {
    min-width:62em;
  }
  
  #wrap {
    margin:0 auto;
    width:60em;
    border: 1px solid blue;
  }
  
  #content {
    float:left;
    width:40em;
    border: 1px solid blue;
  }

  #sidebar {
    float:right;
    width:19em;
    border: 1px solid blue;
  }

  #footer {
    clear:both;
    border: 1px solid blue;
  }
  </style>
</head>
<body>
  <div id="wrap">
    <div id="header">
      Header
    </div>
    <div id="nav">
    Navigation
    </div>
    <div id="content">
      Content
    </div>
    <div id="sidebar">
      Sidebar
    </div>
    <div id="footer">
      Footer
    </div>
  </div>
</body>
</html>

Reset CSS rules to render HTML identically in all browsers

Tagged css, reset, browser, compatibility  Languages css

These CSS rules remove most, if not all, browser specific styles from common HTML elements. Your page will look almost identical in all browser when using these CSS rules. Note that this is a combination of Tantek Celik's undohtml.css and YUI's reset.css.

/** START BLATANT RIP FROM Tantek Celik's undohtml.css */

/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/** END BLATANT RIP FROM Tantek Celik's undohtml.css */

/** START BLATANT RIP FROM YUI's reset.css */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {  
  margin:0; 
  padding:0; 
} 
table { 
  border-collapse:collapse; 
  border-spacing:0; 
} 
fieldset,img {  
  border:0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
  font-style:normal; 
  font-weight:normal; 
} 
ol,ul { 
  list-style:none; 
} 
caption,th { 
  text-align:left; 
} 
h1,h2,h3,h4,h5,h6 { 
  font-size: 1em; 
  font-weight:normal; 
} 
q:before,q:after { 
  content:''; 
} 
abbr,acronym { 
  border:0; 
} 

/** START BLATANT RIP FROM YUI's reset.css */

A simple image replacement technique for increased usability and SEO ranking

Tagged css, image, replacement, usability, seo  Languages css

This is currently my favorite image replacement technique. I don't remember where I found it... Using it can improve both your site's usability and your search engine ranking, by allowing both screen readers and search engines to find your h1 headlines. First create the h1 and the description of your page/site, for example:

<h1 id="logo">Viagra, Botox, you name it</h1>

Then create the CSS rule for the page title:

h1#logo {
  text-indent: -9000px;
  background: url(logo.gif);
  width: 200px; /* Width of image */
  height: 50px; /* Height of image */
}

People using a modern browser that support CSS will see your logo (the image), and search engines and people using less modern browsers will see the content of the h1 header tag.

Note that if you replace the text of a link then use the outline CSS property to remove the dotted border:

.text-replacement {
    text-indent: -9000px;
}

.text-replacement a {
    outline: none;
}

How to create a mixed 2 to 3 column layout with footer and header

Tagged golden ratio, vertical flow, design, css, html  Languages html

This is a draft, and an experiment with composing to a vertical flow and the golden ratio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>3 column</title>
<style type="text/css">

/** Reset styles */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
  margin:0;
  padding:0;
} 

/** 3 column layout */

#container{
  background-color:#9cc;
  width: 69em;
  margin: 0 auto;
}

#content{
  float: left;
  width: 41em;
}

#sidebar{
  float: right;
  width: 23em;
}

#column1{
  float: left;
  width:23em;
}

#column2{
  float: left;
  width:23em;
}

#column3{
  float: left;
  width:23em;
}


/* Vertical flow */

body {
  font-size: 75%;
}
  
html>body {
  font-size: 14px;
}
  
p {
  line-height 1.5em;
}


/* Temp styles */
#column1, #column2, #column3, #content, #sidebar {
#  background: blue;
  #  border: 1px solid black;
}

/** */
body{
  font-family: Palatino,"Palatino Linotype",Georgia,serif;
}

</style>
</head>
<body>

  <div id="header">
    <div id="container">
      <div id="column1">Header 1</div>
      <div id="column2">Header 2</div>
      <div id="column3">Header 3</div>
    </div>
  </div>

  <div id="container">
    <div id="content">Content</div>
    <div id="sidebar">Sidebar</div>
  </div>

  <div id="footer">
    <div id="container">
      <div id="column1">Footer 1</div>
      <div id="column2">Footer 2</div>
      <div id="column3">Footer 3</div>
    </div>
  </div>

</body>
</html>

Show and Hide (toggle) the Blueprint Grid with a JavaScript

Tagged blueprint, css, blueprintcss, toggle, grid, javascript  Languages javascript

This snippet--which could be improved on--allows you to easily display and hide the BlueprintCSS grid.

Put the following code inside the <head> element:

<style title="grid" type="text/css">
        .container { }
</style>
<script type="text/javascript">
    function toggleGrid() {
        if (!document.styleSheets) return;
    
        var cssTitle     = "grid"
        var selectorName = ".container";
        var cssText      = "background: url('images/grid.png');";
        var css = new Array();
    
        // Find the stylesheet
        for(i = 0; i < document.styleSheets.length; i++)
        {
            var styleSheet = document.styleSheets[i];
            
            if(styleSheet.title == cssTitle) {
                if (document.styleSheets[i].cssRules)
                    css = document.styleSheets[i].cssRules;
                else if (document.styleSheets[i].rules)
                    css = document.styleSheets[i].rules;
                else return;
                
                break;
            }
        }

        // Find the selector
        for (i = 0; i < css.length; i++) {
        
            if ((css[i].selectorText.toLowerCase() == selectorName)) {
                if(css[i].style.cssText == "") {
                    css[i].style.cssText = cssText;
                }
                else {
                    css[i].style.cssText = "";
                }
            }
        }
    }
</script>

Change selectorName or cssText, if needed. Next add the following link, for example, to the footer:

<a href="javascript:toggleGrid();" id="toggle-grid">Show grid</a>

Now when you click the link, the grid will be displayed. Click again to hide it.

Note that this is a simple example of how to change a CSS style sheet dynamically with JavaScript. You can use it to change any selector at runtime.

Combining CSS and JavaScript files with PHP to reduce page load time

Tagged css, javascript, combine, php  Languages php

This is a very simple utility class that I created which combines multiple files into one—in contrast to all other PHP scripts I've found elsewhere, which all work badly and are a million lines long, this one is simple to understand and maintain:

<?php
class Files
{
    private static function process($files, $output, $base_dir = '')
    {
        $contents   = '';
        
        # If this is a string then it's a search pattern
        if(is_string($files))
        {
            $files = glob($files);
        }
        
        foreach ($files as $file) 
        {
            $contents .= file_get_contents($base_dir.$file) . "\n\n";
        }
    
        # TODO locking 
        if ($fp = fopen($output, 'wb')) 
        {
            fwrite($fp, $contents);
            fclose($fp);
        }
    
        return $contents;
    }
    
    #
    # Combine all CSS files in the css directory:
    #
    #   echo Files::combine("css/*.css", "css/all.css");
    #
    # Combine only specified files in the given order:
    #
    #   echo Files::combine(array("css/core.css", "css/default.css"), "css/all.css");
    #
    #
    static function combine($files, $output_filename, $base_dir = '')
    {
        # Combine the files
        if(!file_exists($output_filename))
        {
            self::process($files, $output_filename, $base_dir);
        }
    }
}
?>

The call to Files::combine should go in a file that is called on each request. On the first request to this file, the files are combined into one, on subsequent requests nothing is done, the only overhead is a call to file_exists.

Ideally the name of the output filename should contain a version number, so that an updated CSS file is not taken from the browser cache. This can easily be supported by reading the build number from somewhere and appending it to the output filename:

Files::combine("css/*.css", "css/all-v$version.css");

Now all you have to do is add this to your HTML:

<link rel="stylesheet" type="text/css" href="/css/all-v<?php echo $version ?>.css" media="screen" />

This also works for JavaScript files. Note that I don't make an effort to minify anything as GZIP usually does a great job at minimizing bandwidth costs.

How to make rounded buttons with the button element

Tagged button, element, css, html, rounded  Languages html

25 pixel high buttons at your service:

button { 
    border: 0; 
    padding: 0;
    font-variant: small-caps;
    height:25px;
    background: transparent url('../images/button-background-left.png') no-repeat;
    cursor: pointer;
    text-align: center; 
}

button span { 
    font-family: georgia,serif;
    line-height: 25px;
    background: transparent url('../images/button-background.png') no-repeat top right;
    position:relative; 
    display:block; 
    white-space:nowrap; 
    margin-top: -2px;
    padding:0 15px; 
}

HTML:

<button type="submit" value="Hello"><span>Hello&nbsp;&raquo;</span></button>

IE 6 & 7 might need:

button { 
  width:auto; 
  overflow:visible; 
}
button span { 
  margin-top:1px; 
}

References

Cheat sheet for calculating CSS specificity

Tagged css, specificity, calculator, important  Languages css
*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

From the CSS specificity calculator

Note that using the !important CSS declaration raises the CSS specificity so avoid it.