CSS completed 10 years existence this year! Those who have been around for a while , earning their bread (or not) using CSS, then you might aware how we have been starving for  a good selection of fonts.  Even with the lack of fonts designers like those at  CSS Zen Garden have made use of CSS background images to replace fonts  in the pursuit of doing some justice to their designs .  We have also tried Flash/JavaScript® hacks to achieve our design goals.  By no means this is  a wrong way to get the fonts we desire into our web designs, but definitely, it is not the most desirable way.  and over years web designer, like me ,  have fully relied  on ten or so  fonts for their designs.

Recent developments in web standards and font formats make it possible to render HTML text in typefaces other than the same old default fonts.   Comes in  the “@fontface” CSS decleration.

@fontface provids a solution to link  to the actual font file and retrieve it from the web.  Using @fontface , designers can use  fonts without having to freeze the text as background images.  The implementation is very straight forward, as shown below but  as all good things have a CON part to it , NOT ALL browsers support a single “font type “.  If you are planning to use @fontface in site with requiring cross browser support, then you will have to provide sources to various font-types of the same.

1. TrueType – A format designed to look good on-screen. Recommended particularly for Windows browsers (Chrome).
2. OpenType (CFF) – This format is better for print work and does not always look good on Windows.
3. EOT – You need this format if you want to target Internet Explorer. IE will not use any other format. Our EOT’s would be considered “Lite,” since they are neither compressed nor domain-restricted.
4. SVG – This is an XML format supported by some browsers including the iPhone.
5. WOFF – This cross-browser, web-only font format is lightweight (font data is zip compressed) and can be compiled with either TrueType or PostScript (CFF) outlines. It is currently supported by FireFox 3.6+.

Using @fontface

@font-face {
font-family: 'CalligraphyFLFRegular';
src: url('CalligraphyFLF.eot');
src: local('CalligraphyFLF'), local('CalligraphyFLF'), url('CalligraphyFLF.woff') format('woff'), url('CalligraphyFLF.ttf')        format('truetype'), url('CalligraphyFLF.svg#CalligraphyFLF') format('svg');
}
@font-face {
  font-family: "Your typeface";
  src: url("fonts/font_filename.eot");
  src: local("Alternate name"), local("Alternatename"),
    url("fonts/font_filename.woff") format("woff"),
    url("fonts/font_filename.otf") format("opentype"),
    url("fonts/font_filename.svg#font_filename") format("svg");
  }
h2 { font-family: "Your typeface", Georgia, serif; }

As you can see from the above example, to include the chosen font typeface, one has to link to a set of fonttypes for the same typeface. Hence people refer to it as “Font Kit”.
There are Font Kits available that explicitly allows linking with the CSS @font-face property to it under End User License Agreement (EULA).

Useful WebFont Resources :

• Fonts available for @font-face embedding wiki page at http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie .  He is a renowned font designer who has made hundreds of interesting TrueType fonts freely available for use on the web. His fonts are elegant, decorative, and playful.
• Dieter Steffmann is another great font designer. He, too, has made many beautiful fonts available for anyone to use.
• Font shop : offers fonts designed specifically for web use.  More than 30 of the most successful FontFont families are now available as Web FontFonts.   FontShop  also has  a detailed WebFont user guide  http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel :  Showcases all the fonts that Font Squirrel offers for use with @font-face CSS embedding. Font Squirrel offers an impressive quantity of type, makes it dead simple to pick one out, and handily offers “kits” – the typeface of your choice, in several formats, packaged with demo HTML & CSS that uses very current @font-face syntax. They also offer a way to make your own @font-face kits.  If the typeface you want to use has been licensed appropriately (the ones that come with your computer are not necessarily okay), the generator produces EOT, SVG, and hey! WOFF files.

Another quick tut. Here is something simple and nice using the POWER of CSS… but was difficult concieve( and it surely wasn’t me) to begin with . Adding Dropshadow, might be a peice of cake for many of us, using some image editing tools like Photoshop anf Fireworks etc.
The reason why , I opted for drop shadow using CSS is that , usually while creating a page design/html of an application , the requirements keep iterating. What I mean is , In a existing web site with many images, like the ones displaying freinds list or an image gallery, it will be difficult to reprocess the entire load of images that had been already unloaded to add or remove the shadows, for that matter.
So If you have done a little forward thinking while creating the HTMLS to add these extra divisions or usually the situation is that you have a Loop Logic generating these icons/thumbnails in XSL, PHP. JAVA or any other programming /scripting language, you can add it anytime, then is just the matter of show and hiding these shadows using the CSS Display property,as per the clients ever changing requirements … I havn’t done this sort of forward thinking before this … but ahev started now!

In the example below, the original image is shadow free and the dropshadows are applied as required! ALSO, I have gone a little extra, by using the tricks of my earlier Tut ( Well! these probably are shortest variety of Tutorials , so it is only justified calling them “Tut”’s ) about Using CSS Clip Property for show off only

Original Image

CSS DropShadow Results

View Demo  | Download sourcefiles

Why do I want to understand this??? … Humm!!!!

Most of CSS writers would agree that CSS Clip property is probably one of most un-used CSS properties. It was so true for me too and was most happy to neglect it , until I started modifying the MOOTOOLS TWO Knob (Pin) Slider Component(with Range Indicator).

There was a good suggestion from one of the component users to modify the Slider Component using clipped backgroud images( against a variable width division) to indicate the slider range. Thus came my time to enter the fun but un-chartered (for me ofcourse) waters of the CSS Clip property.

Well! how difficult it can be? Not much at all …YES and NO. The syntax to use the CSS Clip property is pretty upright but the meaning/usuage is a bit croocked. With a memory like mine, everytime I sit to rework on my Slider Script… I have tokeep referring back to usage of this CLIP property , to remind myself the logic that I have created in my script …. HENCE! thought to pen it down, with a hope to remember it the future ( and also for the benefit of those who seem boggled by the CSS Clip Property)

What does CSS Clip do?

Clip is part of the visual effects module of CSS 2.1 . Simply put, its job is to place a visible window on top of an object that is being clipped , hence clipping images and creating thumbnails without having to create additional files( I have already put this feature to better use in the Slider Component )

Using the CSS Clip property, you can create a clipping using the rect shape. Like many other CSS Properties (like margin, padding etc),using rect requires four coordinates Top, Right, Bottom, Left (TRBL). The croocked nature of this property reflects when you take a closer look at how clip calculates the clipping region , using these four coordinates (sends brain into a toss for a while). Now to confuse you the bottom starts from the top, and the right starts from the left. . You see what i said? …. Hence this post …

This little confusion can easily disappear , with this visual explanation of the CSS Clip/rect property as below!!!!

CSS Clip Requirements

The task we have started is to clip the following Thumbnail image into a squarer looking image (and also a wide-angle image)

Original Thumbnal/Image	Clip Requirements for Sqaure Thumbmail

CSS Clip Results

View Demo  |  Download sourcefiles

Before we had to deal with CSS to create our page layouts, aligning some content inside a table cell seemed just child’s play. Simply set the “align” or “valign” property of the table to have the alignment of your choice, piece of cake!
With CSS layouts, though we have “vertical-align” property for the elements, it doesn’t seem to be as simple as the “align” or “valign” properties. To be more specifiic the “vertical-align” never seems to solve any of your problems, especially if are write a piece of cross-browser CSS.

Without the use of HTML Tables, THE PROBLEM of centering on object, be it an image or some text within a containing division, has probably been every UI/CSS developers nightmare at some point. This problem further extrapolates your worries of aligning, if the object to be centered is dynamic in nature, i.e. when its height is variable(unknown height).

Though there is no known straight forward solution that would work across the range of browsers we have to deal with, the solution that I have tried to arrive at does seem to work in the few browsers that I have tried it in ( IE6, IE 7, FF).

SOLUTION:
In browsers like Mozilla, Opera and Safari, The strange behaving “vertical-align” property can be brought to its senses, simply by setting the “display” property of the containing division to “table-cell” (display: table-cell).

The problem still remains with IE family of browsers, who, yet do not seem to understand what to with the “table-cell” property and ignorant as they are, they just ignore it. The solution given below, though simple, ads a few more DOM elements to your HTML to make things happen.

The CSS and HTML looks like this
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class=”outer_container” >
<div class=”obj_container” >
<div class=”obj”> <img src=”image1.jpg”/><br/> views :3456 </div>
</div>
</div>

The result looks like this:-

view the demo here | Download Source Files (Downloaded 304 times)

TOP Align CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class=”outer_container” >
<div class=”obj_container_top” >
<div class=”obj_top” > <img src=”image1.jpg”/><br/> views :1234 </div>
</div>
</div>

The result looks like this:-

BOTTOM Align CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class=”outer_container” >
<div class=”obj_container_bottom” >
<div class=”obj_bottom” > <img src=”image1.jpg”/><br/>views :1234 </div>
</div>
</div>

The result looks like this:-

view the demo here | Download here

Seems like ages, since I was trying to find a reasonable solution to this alignment problem. But now with this solution, I feel at little peace.

With a hope that someday

• vertical-alignment property in CSS will work like it does inside a table cell, WITHOUT having to beat much around the bush
• At least, setting margin –top:auto and margin-bottom:auto, will give as the same result as with margin-left and the margin-right set to auto
• The Browser wars will be over some day.
• There will just ONE Browser for ALL.

Download the CSS and HTML of the above solution here (Downloaded 304 times) ..for understandability, the CSS is not been optimized

PS: And by the way, those are thumbnails of some pictures I have clicked…

If your requirement is to split a node value in an XML, that contains a delimited string of value, into individual items, then you have reached the right place … have a look at the example below. If you are familiar with a little bit of XML and XSL … I don’t think you would need any explanation.
Also, this example includes usage of XSL functions like xsl:call-template , xsl:substring-before, xsl:substring-after, if that’s what you are after.

XML to be transformed (food.xml):-
Assume the task is to tokenize the string delimited by comma, in the the tag “keywords”

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<keywords>Fruits, Vegetables, Pulses, Meat, Cereals </keywords>
</food>

XSL (food.xsl):-

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XSL 1.0 Delimited String Tokeniser</title>
</head>
<body>
<xsl:value-of select="food/meta"/>
<div >
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="food/keywords" />
<xsl:with-param name="delimitr" select="','" />
</xsl:call-template>
</div>
</body>
</html>
</xsl:template>
<xsl:template name="tokenize">
<xsl:param name="string" />
<xsl:param name="delimitr" />
<xsl:choose>
<xsl:when test="contains($string, $delimitr)">
<div style="border:1px solid red;">
<h3><xsl:value-of select="substring-before($string,$delimitr)" /></h3>
<xsl:variable name="data" select="substring-before($string,$delimitr)"/>
</div>
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="substring-after($string, $delimitr)" /><xsl:with-param name="delimitr" select="$delimitr" /></xsl:call-template>
</xsl:when>
<xsl:otherwise>
<div style="border:1px solid red;">
<h3><xsl:value-of select="$string" /></h3>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

Resultant output HTML :-

<div>
<div style="border: 1px solid red;">
<h3>Fruits</h3>
</div>
<div style="border: 1px solid red;">
<h3> Vegetables</h3>
</div>
<div style="border: 1px solid red;">
<h3> Pulses</h3>
</div>
<div style="border: 1px solid red;">
<h3> Meat</h3>
</div>
<div style="border: 1px solid red;">
<h3> Cereals </h3>
</div>
</div>

Needless to say … just change the parameter “delimitr” to the delimiter of your choice

If you  have ever made ( or making one) a Vertical Menu using list items( li) tags and CSS, you  might encounter, this yet another bug in Internet Explorer, where IE 6 inserts these gaps between list items that contain block level elements, i.e. if there is any whitespace between the list items in the markup.  Thanks, but no thanks , the IE version 7  seems free from this bug.
If like me , and many more, you  belong to this  band of frustrated developers , who still have to get their new layouts , working in IE6 too, then this might prove useful . Have a look…

Sample markup:

<ul id=”menu”>
<li ><a href=”#”>Home</a></li>
<li ><a href=”#”>About</a></li>
<li ><a href=”#”>Services</a></li>
<li ><a href=”#”>Portfolio</a></li>
<li ><a href=”#”>FAQ</a></li>
<li ><a href=”#”>Contact Us</a></li>
</ul>

You might create some CSS , similar to one below, to transfrom the above  markup into a vertical menu ….

Sample CSS…
#menu {
margin: 0;padding: 0;background: #FF9900;
list-style-type: none;width: 150px;
}
#menu li {margin: 0;padding: 0;}
#menu  a {display: block;
color: #555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}

The results you will see…

Solution for this bug…(modified/added CSS in bold italics)

#menu {
   margin: 0;padding: 0;background: #FF9900;list-style-type: none;width: 150px;
  float: left; /* this contains floated list items */
}
#menu li {
    margin: 0;padding: 0;
   float: left;      /* This fixes the */
   width: 100%;  /*  whitespace bug in IE6 */
}
#menu a {
   display: block; color: #555555;
   text-decoration: none;
   padding: 0 15px;
   line-height: 2.5; border-bottom:1px solid #FFF;
}

If the above solution doesnot seem to work (for reasons known to IE6 only)… try this method instead

Just add this additional IE6 only styles to your markup …

<!–[if lt IE 7>
<style type="text/css">
#menu li a {display:inline-block;}
#menu li a {display:block;}
</style>
<![endif]–>

If XML/XSL Transforms is your domian, then there are times when we want a peice of Dynamic code to be used library item(to be made re-usable). What I mean , probably could be made more clear with this example scenario.

Imagine you are creating a website (and using XML, XSL transfroms ofcourse) and most of the pages would have a Comments Module . Well! then either you copy or paste this code into every page template (which I dont have say, but make maintenance and rework a nightmare) or even better, you create an INCLUDE file which could be pulled in where ever you want it in your page(s)…
So HOW DO WE CREATE a XSL INCLUDE file and include it inside another XSL file? Here is how…

Just to make things clear … here is quick list of files that you would create … here , we will be including info about fruits and vegetables into a parent page called food.

1. food.xml – xml data file on which the transformation will be applied
2. food.xsl  -  main XSL file, which will transform our food.xml
3. inc_fruits.xsl – XSL include file that will render fruits data
4. inc_vegtables.xsl – XSL include file that will render vetetables data

I dont think I have explain much , the codes for above elements , will be self explanatory…

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

 

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/> 
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/> 
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Download all the above files here (88 downloads)

Post IE 6 , MSIE has been kind enough to us UI developers by adding a few more CSS properties standard to most other standard browsers. One such usefull property in “min-height”.  Pretty straight forward property that needs no long winded explanation. When a min-height for a division is set, it always retains that set height when the content it houses occupies less than it can hold and importantly ( unlike the plain vanilla “height” property ) scales or in CSS words, it behaves like a division whose “height” is set to “auto”…

For some of us poor developers, who still are required to code CSS that must also work in IE6, un-availability of the “min-height” , could prove a show stopper sometime… Donot despair.  

Fortunately, we have enough quirks in IE , that we would use to out advantage and hack our way through to reach our goal…i.e. make a DIVISION division as though its min-height in IE6

Solution 1 : Using the Underscore Hack [ ...Read more]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML : - 
<div class="box1">Some dynamic content with variable height ...</div>

---

 Solution 2: Using the CSS Attribute Selector Hack

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML:-
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>
 

 The CSS Attribute Selector Hack takes advantage of the fact the browsers earlier tha IE6 ignored an atribute-selector. Note the requirement of another container division with class=”someclass” . Just the presense of the class attribute for this division, overrides the height back to auto for Opera, Mozilla and MSIE7 and later. IE6, which doesn’t support atribute selectors, ignores it.

View Demo of the min-height hack for IE6

If you use XML and XSL, then you might have come across a time , when you have to play around with attributes and values of XML nodes in you XSL. They are loads of sites with long winded info about this, but none I found were brief and precise … This is NO XML/XSL TUTORIAL,but my attempt to put-together some sort of cheat list …

The sample XML that we will working with looks like this…

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

So Lets begin transforming our above XML using XSL

Example 1 : Displaying value at a chosen Attribute

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

HTML result will look like

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">

Example 2 : Looping through and displaying all XML Attribute Names and their Values

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>, 
attribute value : <xsl:value-of select="."/>  <br />
</xsl:for-each>

HTML result will look like


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


Watch this space, I’ll keep updating this with new findings…

A CSS Reset is/are CSS to set a number of element styles to a specific baseline that creates consistency across various browsers.

We all  have been the through the nightmares of writing cross-browser CSS’s.  So when we start writing our CSS , It is a practice to reset it first to remove/reset any cross browser inconsistencies.  CSS Resets , are simple few lines of CSS that you begin your CSS with , giving you a clean base  to start building your  upon.

The CSS resets that I normally tend to use looks like this

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;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style:none;
}

h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}

Reset the browser font size
Also note the reset that has been applied to browser font size in the following line …

html {font-size: 76%;}

The above CSS resets the browser font size to 10 pixels, and this makes it possible to work with relative font sizes (which is every important from a WAI compliance prespective)
For e.g., in the following definition, font-size in a span is set to 10 pixels and that in the paragarph is set to 14 pixels…

span {font-size: 1em;}
p {font-size: 1.4em;}