HTML table cellspacing and cellpadding in CSS

As I often find myself cleaning up legacy webapp codebases, this item seems pretty common, particularly for sites that were using TABLE based layouts.


<table cellpadding="0" cellspacing="0">
<thead>
<tr><th>Hello</th></tr>
</thead>
<tbody>
<tr><td>World</td></tr>
</tbody>

With modern browsers, this is easily accomplished with some simple CSS, as you might need some distinction between different tables or have some cases that require padding or spacing, you MIGHT consider assigning a CSS class as I have below.


<style type="text/css">
table.modern{
border-collapse: collapse; /* 'cellspacing=0' equivalent */
}
table.modern td,
table.modern th{
padding: 0; /* 'cellpadding=0' equivalent */
}
</style>

<table class="modern">
<thead>
<tr><th>Hello</th></tr>
</thead>
<tbody>
<tr><td>World</td></tr>
</tbody>

Defining word-break and word-wrap in CSS

I recently found a case where WebKit (Chromium, and Safari) was acting as if ‘overflow-x:visible;‘ was set in cases where text could not be wrapped inside a DIV due to a lack of spaces or hyphenation as it was a java stack trace. In this case I had to explicitly set the ‘word-wrap:break-word;‘ attribute for the problematic DIV.


.breakword { word-wrap: break-word; }

Also, for Unicode languages where there are other rules to complex to describe here…

.wordbreak { word-break: keep-all; }

Rupee

I’ve done a lot of Internationalization(I18N) and Localization (L10N) work in my various development positions. One particularly troubling area is currency support. Support of number formats is generally well supported (or can be accomplished with some trivial input translation). However, the tricky area come with support for currency symbols, western currencies such as USD (US$) and CAD(C$) and the Euro (EUR or €) are well supported across character sets and fonts some are not. One particular item is for the Indian Rupee (INR). Ubuntu 10.10 is the first operating system to ship with a font that supports this character ₹

Unicode = &#x20b9;

JavaScript TextNode for special characters

It can be difficult to create or output some characters as JavaScript TextNodes. Typically you might try to use the ampersand notation, unfortunately the ampersand itself gets escaped to & as such   becomes &nbsp; Use of the Unicode notation can easily resolve this issue.

Example for NBSP:
var nsbptextnode = document.createTextNode('\u00A0');

Override HTML style attribute specificity with CSS

I’ve recently run into a problem when attempting to create a CSS file for print media because some local JavaScript on the page was manipulating the style attributes on the page. Due to specificity issues, it can be very difficult to “correct” the elements to provide proper output. Here’s a new (to me) trick that I just found.

You can override the local style attribute (and any manipulated at runtime with JavaScript) by adding the the [style] modifier to your CSS declaration.

div#someid[style] {
/* your CSS here */
}

Link ‘canonical’ tag

This tag is applied to the page to define the preferred URL to be stored in most search engines, and reduces the odds that heuristics will be used and leave you will multiple listings of duplicated content (example: http://www.example.com/ vs. http://example.com/)

It can also be applied so that the URL’s exposed by search engine results do not expose the underlying technology such as PHP/JSP/ASP in the filenames)
<link rel="canonical" href="http://www.giantgeek.com/" />

Hide Focus attribute and CSS

This is an odd MSIE proprietary attribute (‘hidefocus‘) that is used to remove the dotted border (outline) of the focused elements, usually links or images, in the page. Modern CSS is much more robust and should be used in most cases for valid HTML.

The example below requires you to add the class specifically to elements, but your design may allow for you to do so for as elements of larger components of your design.

<style type="text/css">
.hidefocus:focus {
outline: none;
}
</style>

<a href="#" class="hidefocus" hidefocus="true">Some link</a>

NOTE: You should still provide some sort of visual focus mechanism for accessibility purposes, even when you prevent the default behavior.

REFERENCES:

Prevent resizing of HTML textarea in browser

Newer versions of Webkit based browsers (Safari & Chrome) as well as Firefox now allow users to resize HTML <textarea> elements by default. This can have unpredictable results on your user interfaces. Thankfully, you need only add a simple CSS attribute to prevent this newly default behavior.

textarea {resize:none;}

REFERENCES:

MSIE7+ image resizing interpolation

MSIE7 and later by default use an image resizing algorithm that means that scaled down images can look blocky and rasterized. To solve this and make them smoother, we simply enable a much better resizing algorithm that is available in MSIE that produces results similar to what you’d expect from most image editing software.


/* bicubic resizing for non-native sized IMG */
<style type="text/css">
img { -ms-interpolation-mode: bicubic; }
</style>

HTML5 INPUT placeholder text

One of the great improvements for forms in HTML5 is the ability to display placeholder text in your INPUT fields. Traditionally, this has required developers to add a variety of JavaScript methods to dynamically update the field, now (for browsers that support it) you can use a simple attribute on your tag elements.

OLD:
<input type="text" value="Search" onfocus="if(this.value == 'Search'){this.value = '';}" onblur="if(this.value == ''){this.value = 'Search';}" />

NEW:
<input type="text" value="" placeholder="Search" />

REFERENCES: