Tag: browser

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:

Firefox Beta and Aurora Release Channels

With the rapid release cycle (currently every 6 weeks) for Firefox, it’s a good idea for developers and testers to use the upcoming release versions before they are released to the general public.

For Windows users, you can download and install an appropriate version from:
http://www.mozilla.org/en-US/firefox/channel/

On Ubuntu, it’s a little more difficult, but rater straight-forward:

  1. Open a new Terminal window
  2. sudo add-apt-repository ppa:mozillateam/firefox-next
  3. sudo apt-get update
  4. sudo apt-get install firefox

REFERENCES:

That’s all…. Happy Testing!

Sniff for SSL capability of browser

If you run a secure server, you often have some non-secure content prior to authentication of a secure session. To provide a mechanism to show a page prior to authentication, you can “sniff” for the clients capability with a small bit of JavaScript.

First establish a global variable on the page:
<script type="text/javascript">
var sslok = 0;
</script>

Then, include a JavaScript file that is ONLY available via a secure
<script type="text/javascript" src="https://www.giantgeek.com.com/secure/sniff.js"></script>

The ‘sniff.js’ file should contain (at a minimum):
sslok = 1;

Finally, check and act on the value:
<script type="text/javascript">
if (sslok === 1) {
window.location.href = 'https://www.giantgeek.com/secure/';
}
</script>

Done!

Masquerading browser User-Agent strings

As it’s Halloween, it’s only relevant that I share a method of covering your browsers identity.

  • For MSIE, you must modify the registry. HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\User Agent]
  • For Chrome (on Windows, and I assume other OS’s), you can use a startup parameter.
    C:\Users\{USERID}\AppData\Local\Google\Chrome\Application\chrome.exe --user-agent="Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_7_0; en-us) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1"
  • For Firefox and other Mozilla based browsers, you can mofiy the configuration in (user.js) or use a variety of add-on extensions, such as:

Interested in knowing your current User-Agent, just visit one of the following:

Many robots and spiders that are used by search engines also identify themselves by their User-Agent, if you see this activity in your logs you can often learn more about it at:

REFERENCES:

Happy Halloween!

Replacing deprecated use of HTML ‘nobr’ tags and ‘nowrap’ attributes

It’s not uncommon to find yourself working on applications that were often build before the widespread adoption of CSS. Alongside legacy <table> based designs, the use of various mechanisms to prevent word-wrapping are often implemented.

I’ve found that the following allows for low-risk transition between technologies…

<style type="text/css">
table.nobr tr th, table tr.nobr th, table tr th.nobr, table thead.nobr tr td, table tbody.nobr tr td,
table.nobr tr td, table tr.nobr td, table tr td.nobr, table thead.nobr tr td, table tbody.nobr tr td,
.nobr {white-space:nowrap;}
</style>

With the above approach, you can apply class="nobr" to any element directly, for <table>‘s I’ve taken it a little further and allowed for the class to be set at various levels in the heirarchy to fill various needs.

Firefox Beta and Aurora Release Channels

With the recent rapid release cycle (currently every 6 weeks) for Firefox, it’s a good idea for developers and testers to use the upcoming release versions before they are released to the general public.

For Windows users, you can download and install an appropriate version from:
http://www.mozilla.org/en-US/firefox/channel/

On Ubuntu, it’s a little more difficult, but rather straight-forward:

  1. Open a new Terminal window
  2. sudo add-apt-repository ppa:mozillateam/firefox-next
  3. sudo apt-get update
  4. sudo apt-get install firefox

REFERENCES:

That’s all…. Happy Testing!

Fix for Flash files ignoring z-index

Flash objects often interfere with your layering within your DHTML applications and appear above them in the DOM stacking order, standard CSS and HTML solutions do not have any impact. Fortunately there is a simple solution to this ‘problem’ thats been supported in all common browsers since MSIE4.

On <object>
<param name="wmode" value="transparent" />

In <embed ... wmode="transparent" >

REFERENCES: