Tag: chrome

Hiding Firebug Lite controls in browser

I started getting extremely tired of the FireBug Lite overlaying content in some of my legacy websites. By taking a look at the markup it was adding, I found a quick and easy way to hide it for most users.

Adding the following to one of your CSS files should do the trick…


/* Begin hide FireBug Lite */
#jsConsole,
#jsConsoleShowSourceButton,
#jsConsoleHideSourceButton,
#jsConsoleShowConsoleButton,
#jsConsoleHideConsoleButton { display:none; }
/* End hide FireBug Lite */

NOTE: I have not yet confirmed, but this approach should work in other browsers such as MSIE, Chromium and Safari that also may use FireBug Lite.

HTML5 speech input

Adding speech input to your webapp is much easier than it might first seem.
This is part of the proposed HTML5 enhancements to FORMS and is already implmented in some browsers.

Google Chrome (WebKit 534.24) added this in version 11 in April 2011.

XHTML compatible example:
<input type="text" x-webkit-speech="x-webkit-speech" speech="speech" value="" />

NOTE:
In this example, ‘x-webkit-speech’ is the proprietary attribute used by Google Chrome (WebKit). ‘speech’ is the expected HTML5 attribute when it is finalized.

REFERENCES:

Google ChromeFrame

There was some debate back when this was first revealed in 2009, but the use of ChromeFrame is still relevant for some organizations that are stuck on older browsers for legacy applications.


<meta http-equiv="X-UA-Compatible" content="chrome=1" /><!-- this is for all versions of IE -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE6" /><!-- this is for IE6 and lower -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE7" /><!-- this is for IE7 and lower -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE8" /><!-- this is for IE8 and lower -->
<meta http-equiv="X-UA-Compatible" content="chrome=IE9" /><!-- this is for IE9 and lower -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE6" /><!-- this is for IE9 and lower, passes Edge to others -->

NOTES:

  1. Installation can be done without Administrative rights on the Windows OS.
  2. Installation will append the ‘chromeframe’ version to the ‘User-Agent’ HTTP header sent by the browser to allow it to be parsed.

REFERENCES:

Killing hung, frozen or zombie programs

As a web developer, I’m often doing new (and interesting) things to stretch the boundaries of the browser. Sometimes, in doing so, the browser can hang or freeze, remaining in a state that makes it unresponsive.

Here are a few simple methods to force-close the browser on Windows and Linux, they can be expanded for other software executables as needed.

Windows:
taskkill /f /im iexplore.exe
taskkill /f /im firefox.exe
taskkill /f /im chrome.exe
taskkill /f /im safari.exe

Linux/Unix:
for i in `ps -A | grep firefox | awk '{print $1}'`; do kill -9 $i; done

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; }

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: