Yahoo! initially introduced a CSS class that can be used to notify robots/spiders that a specific section or fragment of content should not be included for search purposes.
class=”robots-noindex”
REFERENCES:
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:
Partial (CSS3) support in current browsers:
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…
- Some browsers displays a blank space in place of the text that uses the font.
- … 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>
Most developers (myself included) are often unaware of the performance impact of the Content-Type / charset of a web page. Ideally you should set this as an HTTP Header vs. using META http-equiv. It’s often though that this only helps with the transport and display of data, however, the browser also makes use of it when parsing CSS & JS assets. Tags related to those provide an optional ‘charset‘ attribute should they ever need to vary from your content.
General guidance is to set this at the very top of the <head> before <title> and within the first 1024 bytes, though there are reports that Firefox will look at the first 2048 bytes of the page for this META information.
Not doing so may cause the browser to do a codepage restart to re-parse assets that were interpreted in the potentially incorrect codepage.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
REFERENCES:
Here’s an odd one…. I’ve found that if you use the common method of using Conditional Comments to separate MSIE specific CSS, you’ve likely added a performance problem without knowing it… that is, in addition to the network connection and time required for the different CSS files.
It turns out that the standard use of this approach blocks the other downloads until the main CSS is loaded.
The solution is both simple and painless to implement…. just add an empty condition above all of the other content. This works for all approaches, such as those where comments surround the <body> or various <link>, <style> or <script> tags.
<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html lang="en">
...
REFERENCES:
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>
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>
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…
I recently stumbled upon the use of this CSS element in some older code and document it here for future reference.
-moz-opacity. By now, you should be using simply opacity.opacity, rather it supports filter instead.progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).-ms-filter, which is synonymous with filter.-moz-opacity, -khtml-opacity has been dead since early 2004 (release of Safari 1.2).-khtml-opacity and had been supporting opacity since version 4.0.REFERENCES: