Giant Geek Blog

The use of CSS cursors within your browser based application or website is a great way to add feedback to the user to increase usability. This is increasingly important for AJAX applications that may be “busy” even when the user is not directly taking action within their browser.

These are all easily appended to classes in your CSS files:

• default
• auto
• inherit
• pointer
• crosshair
• text
• help
• move
• progress
• wait
• e-resize
• ne-resize
• n-resize
• nw-resize
• w-resize
• sw-resize
• s-resize
• se-resize

Partial (CSS3) support in current browsers:

• none
• all-scroll
• context-menu
• cell
• vertical-text
• alias
• copy
• no-drop
• not-allowed
• col-resize
• row-resize
• ew-resize
• ns-resize
• nesw-resize
• nwse-resize

NOTE: for very old browser, you can also set several attributes to allow for the supported one to be used.

.example {
cursor:hand;/* IE5-IE5.5 only support (dropped in IE9) */
cursor:pointer; /* IE6 and later */
}


REFERENCES:

The use of non-traditional web fonts was once a very challenging task due to various browser specific implementations. Thankfully Google WebFonts have made this easy enough for most developers to add in a cross-browser manner in a matter of minutes.

WARNING, there are a few considerations to make here…

1. Some browsers displays a blank space in place of the text that uses the font.
2. … and then re-render text in the web font once it has loaded

Method 1: (most compatible, but cross-browser loading behavior varies)

<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css' />
<style type="text/css">
h1,p { font-family: 'Ubuntu', sans-serif; }
</style>


Method 2: (requires javascript, but is consistent cross-browser)

<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Ubuntu Mono','Ubuntu' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
<style type="text/css">
h1 { font-family: 'Ubuntu Mono','Courier New',monospace; }
p { font-family: 'Ubuntu','sans-serif'; }
</style>


No, you are not going crazy… MSIE 6 and 7 are case sensitive for the ‘frameBorder‘ (and a few other attributes).
It seems that the JavaScript attribute names are expected to be used in the HTML, should you expect them to behave and look properly you’ll have to make some small changes to support, this is even more important when using JavaScript to update or change attributes.

<iframe... frameBorder="0"></iframe>

As mobile devices become more prevalent in the web development domain, it is often advisable to provide appropriate CSS for each layout.

Here’s a starting point for browsers that support.


<style type="text/css">
@media all and (orientation:portrait) {
/* css adjustments for portrait go here */
}
@media all and (orientation:landscape) {
/* css adjustments for landscape go here */
}
</style>


While working on legacy apps, you might occasionally find that a developer has written a function to reload the existing page. I’ve found that in many cases, the optional javascript argument is neglected in this case and thus the ‘cached’ copy of the page is presented, often showing stale or invalid data. The solution here is simple, always specify ‘true’ to force the page to be requested from the server.


<script type="text/javascript">
window.location.reload(true);//NOTE: 'true' forces NON-cached copy to be returned
</script>

REFERENCES:

There are still a measurable number of internet users that browse without the use of JavaScript, use the NoScript plugin, or have disabled it for security purposes. In those cases, as well as for SEO. It’s often a good idea to manipulate the display to better accomodate these users. One of the most common methods is shown below, as we can toggle a CSS class on the HTML tag easily and use CSS “cascade” to hide or show alternate content.

NOTE: this example currently requires PrototypeJS, but can easily be changed to not do so.


<!DOCTYPE html>
<html class="no-js">
<head>
<script type="text/javascript">
var ar = document.getElementsByTagName('html');
var i = ar.length;// should only be one!
while(i--){
Element.removeClassName(ar[i],'no-js');
}
</script>
<style type="text/css>
html .no-js-show { display:none; }
html.no-js .no-js-show { display:block; }
html.no-js .no-js-hide { display:none; }
</style>
</head>
<body>
JavaScript is:
<p class="no-js-hide">enabled</p>
<p class="no-js-show">JavaScript is disabled</p>
</body>
</html>


The only built-in entities in XML are &, <, >, " and ' XHTML added the others via a DTD that is not a part of HTML5. As such, validators will report them as errors.

Safe replacements are the decimal notation:   or the character itself U+00A0;

Quite a few other common symbols are not available without similar changes.

• < = <
• > = >
• & = &
• ' = '
• " = "
•   –  
• © = ©
• ® = ®
• ™ = ™

REFERENCES:

Most web developers are familiar with ordered lists <ol> and unordered lists <ul>, though many are unfamiliar or uncomfortable with <dl>. While most useful for lists of definitions, they can also be styled and used semantically for navigation and forms.

EXAMPLE:
<dl>
<dt>Title1</dt>
<dd><p>Definition1.</p></dd>
<dt>Title2</dt>
<dd><p>Definition2.</p></dd>
</dl>

REFERENCES:

In the past few years the browser wars have heated up again. Performance and capabilities of some browsers varies greatly. There are several standard tests that are publicly available to benchmark your systems. WebKit (Safari, Chrome & Chromium) and Mozilla (Firefox) based browsers, as well as Opera perform pretty well, MSIE is currently trailing in most cases.

Here are a few common ones…

XHTML tags in the format <tag />.

<br />, <hr />, <img />, <input />, <base />, <link />

The space before closing slash was primarily done for legacy browsers that did not properly parse the value without an attribute or space, but does have some value in improving readability of XHTML markup. (In my experience this is NN4.x and earlier.)

Per http://www.w3.org/TR/xhtml1/#C_2:

C.2. Empty Elements

Include a space before the trailing / and > of empty elements, e.g. <br />, <hr /> and <img src="karen.jpg" alt="Karen" />. Also, use the minimized tag syntax for empty elements, e.g. <br />, as the alternative syntax <br /> allowed by XML gives uncertain results in many existing user agents.

REFERENCE: