css

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;
}

Recurse through a Ruby tree

Tagged recursive, tree, category, ruby  Languages css

The model:

class Category
...
  def recurse
    yield(self)

    children.each do |child|
      child.recurse {|sibling| yield sibling}
    end
  end
end

The recusion:

Category.root.recurse do |child|
  puts child
end

Trigger hasLayout for IE

Tagged haslayout, ie6, ie7, ie, browser, bug  Languages css
<!--[if IE]><style>
.layout {
    height: 0;
    he\ight: auto;
    zoom: 1;
}
</style><![endif]-->

How to make a DIV element fill the browser window

Tagged fullscreen, div, window, height  Languages css
<html>
<body>
<style type="text/css">
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#container { /* div you want to stretch */
  background-color: green;
  height: 100%; /** IE 6 */
  min-height: 100%;
}
</style>
  <div id="container">
    This div should cover the whole page.
  </div>
</body>
</html>

Here's an example with header and footer.

How to create CSS sprites with Adobe Photoshop

Tagged adobe, photoshop, css-sprites, sprites, css  Languages css

Install the following script from Github:

wget https://raw.github.com/euskadi31/Photoshop-CSS-Sprite/master/PSprite.jsx
mv PSprite.jsx /Applications/Adobe\ Photoshop\ */Presets/Scripts

Then: * create some layers in your PSD file * name your layers * select File->Scripts->PScript * open /.css in an editor

Font rendering tricks in CSS

Tagged css, antialiased, font, typography  Languages css
text-rendering: optimizeLegibility; // Improved handling of kerning pairs and ligatures
-webkit-font-smoothing: antialiased; // Make font look the same in Chrome & Safari

Kerning and ligature:

-webkit-font-feature-settings: "kern", "liga", "case";
-moz-font-feature-settings: "kern", "liga" , "case";
font-feature-settings: "kern", "liga", "case";