Firefox already has more than 18 percent of the global market, according to Net Applications. With the release of Firefox 3, Mozilla could see a boost in downloads and market share. Microsoft’s next version of Internet Explorer won’t come to market until later this year.

Tomorrow, Mozilla will release Firefox 3. After more than 34 months of active development and the contributions of thousands of people, Firefox 3 will be downloadable free from the Mozilla Web site. Mozilla is promising this is the best browser — period.”

[ more here and here]

CSS Full Length Graphical Borders on Fluid Layout

It's quite easy to use graphical side borders on fixed width elements as you can simply repeat an appropriate sized image down the y-axis of the container and draw both edges at the same time. However, it is often not well understood how to achieve this effect with an element that has a fluid width especially in a 100% high environment.

We will first learn how to apply an image to both sides of a normal content height (but fluid width) container and then later on explore the possibilities of using this for a 100% (viewport high) container.

Normal Height Layout

Let's start with a simple example that has graphical borders on both sides of a fluid layout.

The technique is to repeat the left border down the left side of the first wrapper and then repeat the right border down the right side of an inner wrapper. You must be careful not to overwrite the first image when you overlay the second image so any background colours would need to be on the first element and not the nested element.

CSS:

The side image is 20px wide so the elements are nested allowing for a 20px gap using margins to keep the content away from the borders. We could have done the same thing with padding and saved ourselves an extra div.

The only thing to note in both the above snippets is the "haslayout" fix for IE. If you are not familiar with "haslayout" then I have a good explanation here.

Figure 1 shows the result of the above code.

Figure 1

If you have a little imagination you can improve the look -- here is another example as shown in Figure 2.

Figure 2

All that was needed was to change the image slightly and give the background a colour that merges in with the image.

The simple change above gives the layout a nice torn look down each side.

100% Height Borders

So far we have established that it is easy to place a repeating graphic on each side of a normal height layout, but what about 100% high layouts where the layout stretches from the top of the viewport to the bottom of the viewport?

This is more complicated because 100% height is a tricky subject at the best of times. In effect you can only ever have one 100% high element to play with and therefore with a fluid width element you can't tile both edges of the element in one go with a background image.

100% Height Explained

I suppose I should explain why you cannot have more than one 100% high element!

In order to achieve an initial 100% high container the html and body elements are first set to 100% height. This allows us to use the main-container on the page and to give it min-height:100%. We use min-height because we want a minimum of 100% height but we also want the height to expand should content exceed the viewport height. If we had used height:100% for the main container then the container would never expand past the viewport and content would just spill out. Therefore we use min-height:100% to get our initial 100% height.

However, because we must use min-height on the main container we cannot nest another element inside that container and use min-height again.

Why Not?

The reason is that a percentage height of an element must be based on the parent's height. If the parent is defined as height:auto (the default) then the child has no height to base its measurements on and the height collapses to auto (for both height and min-height) which is effectively content height. This is an impossible conundrum and the reason is that in most cases you can only ever work with one 100% high container and that must be the first container on the page.

I should point out that IE6 and under do not understand min-height but treat height as a minimum anyway so that is the reason you will see the IE hacks for this. In some cases IE6 will allow you to nest successive 100% high elements but other browsers will not so it's best avoided.

Now with the 100% height issue explained we can set about creating our 100% high borders. Let's start with the basic page.

Here is a live page using the above code. Simple stuff so far with the 100% height routine as mentioned earlier. Now we need a method of painting both edges with our repeating graphics. We can't nest any inner elements because they will only be content height and will look bad.

Therefore we are going to use a technique I devised for making equal columns and will apply it to make our borders. You should read the article for the full details but briefly the idea goes like this...

An absolute element is placed using top and bottom properties at the same time to hold it in tune with the outer parent. The outer parent has position:relative applied and this keeps the inner absolute element relative to itself at all times. By specifying top and bottom properties at the same time the absolute element will keep its top and bottom in place with the top and bottom of the parent always creating a 100% high element.

Unfortunately IE6 and under don't understand it when you use top and bottom together so instead for IE6 and under only we place the absolute element at the bottom of the element and give it a height that will be bigger than we ever need. It doesn't matter that the height is too big because it will simply disappear through the top of the viewport without any ill-effects.

In fact, for other browsers we don't need to use top and bottom properties at the same time. We can simply give the element a top position and then specify 100%:height. Unlike static elements, absolute elements will keep track of an auto height container.

Time for a demonstration.

The css we add to the snippet above is as follows.

The html is simple also:

The two extra divs that we are utilizing for the borders are shoved to the bottom of the current stacking context and kept nicely out of the way. This method is so simple and the extra mark-up is minimal as only one extra div than the normal height method.

Adding Transparent Shadows

A lot of sites like to have their main page bordered down the side with a transparent shadow effect. In order to do this properly transparent pngs need to be used so that the body background isn't rubbed out and can still be seen below the shadow. This is especially important if the body background has a gradient effect or has fixed images that need to be visible under the shadow.

Unfortunately IE6 (and older) don't understand how to use transparent pngs and you lose any opacity with horrible effect. Fortunately we can use the proprietary alpha image loader filter to provide IE6 and 5.5 with some sort of fix. As the filter is a Microsoft extension it's best to feed it to only IE6/5.5 (preferably via Conditional comments). For ease I have used the star selector hack to target IE6 and 5.5. I am ignoring IE5.0 as it doesn't understand the filter but you may wish to supply alternative non-transparent images to IE5 only using conditional comments.

For all other browsers we can simply use the code as shown above and instead of the border images we will use transparent pngs for the borders. For IE5.5/6 we need to add the filter which will make the relevant code look like this.

The image gets supplied to IE6 using the star selector hack but an important point to note is that you must remove the original image because it would conflict with the filter image and ruin the effect. That is the reason for the "background:none" in the IE hack.

Note also that the sizingMethod attribute is set to scale so that the image is scaled to the full height of the element it sits in. This filter is not a substitute for the background property and has limited capabilities. Read more about it in the Ultimate CSS Reference.

Here is a live example with the changes recommended (view source for the full code).

Figure 3

If you want the main wrapper to have a background colour then you need to move the edges outside of the wrapper so that the transparency isn't affected. This can easily be done by adjusting the left and right positions of the absolute elements.

Here is another live example with the background color added and the edges moved outside the main background (view source for the full code).

Figure 4

That about wraps it up for today and I'm sure you can come up with some better examples than me. Hope you find it useful.

I know that probably doesn't quite make sense but what I mean is that quite often you know how things work but it's how they are applied that can make all the difference. This is the beauty with CSS where you can always be surprised at the different ways the same layout can be achieved. This happened to me the other week when I noticed a different way that a site had been centered using simple techniques already known to us all. Indeed, many of you may already have used this method but it seems to have escaped my attention until now.

The Old Way

One of the first things I learned to do in CSS was how to horizontally and vertically center a fixed width and height element. This could be an image for a splash page (god forbid) or a small centered site that some designers love to do. Originally this was accomplished with absolutely positioning an element 50% from the top and 50% from the left of the viewport. This of course only places the top left corner of the element at the center of the viewport and you then need to drag the element back into a central position with a negative margin equal to half the height and half the width of the element.

Let's take a look at the old way of doing this and note what the problems are.

A live version can be found here and the result as shown in the Figure 1 below.

Figure 1

I have added a background image to the body just to make the page look nice so the only part we are really interested in here is the gray centered portion. (As an aside you should note that to get the background image centered in the viewport you need to set html,body to be 100% high.)

As you can see the result is what we wanted and the element is perfectly centered both horizontally and vertically. This is achieved as already mentioned by putting the top left corner of the element at 50% from the top and 50% from the left. Then using a negative top margin and a negative left margin the element is pulled into a central position using half the elements' height and half the elements' width for the appropriate negative margins.

Although at first glance this seems to work well, there are some severe downsides to using this method and they can be seen by closing the browser window both horizontally and vertically. As the window gets smaller than the element's size the element starts sliding out of view at both the top of the window and the left side of the window. The areas that have slid outside the window are now in fact unreachable even by using the scrollbars on the window. This would mean that users with small screen sizes could not access the content at all.

Figure 2 shows what has happened to the one line of text from our example when the window is closed smaller.

Figure 2

The text is half missing at the top and has also disappeared to the left. If we closed the window further the text would disappear completely. In order to try and address these issues a min-height and min-width has been added to the body, but as you can see this has had no effect at all and the element still lies outside the viewport.

Revised Method

In light of these problems another similar version of this centering technique can be used where the element is still placed absolutely from the top but this time the horizontal centering is achieved using auto margins. This also eliminates the element from sliding off the left of the window.

Here is the revised code.

A live version can be found here.

This has the desired effect horizontally but still leaves the top disappearing upwards when the height of the window is made smaller as shown in Figure 3.

Figure 3

The Fix

Now to get over this problem (and to get to the point of this post) I have previously used more complicated methods but there is a simpler, more robust solution involving a float instead of the absolute element.

The first element on the page is a float that is set at 50% of the height of the page. Then we drag the float upward by half the height of the element we want centered.

Here are the changes needed:

Here is the link to a live version so you can see for yourself.

Figure 4

The important part is that we use a float of 100% width and then also remember to add clear:both to the following element as some browsers will get confused otherwise. If we did not use "float" then the element would still be centred but it would also disappear through the top of the screen unlike the floated method.

Why This Works

This throws up an interesting behavior concerning floats and it's good to understand what's going on here exactly. Why is it that when we use a static element (or an absolute element as in the first example) that the content disappears through the top of the viewport but doesn't do this with a float?

The nature of floats is that they are removed from the flow (although you can regain control by using "clear" on following elements). The content following a float is displaced to make room for the float (usually by the browser increasing the top margin on the static content to clear the float). If the float were not there at all then the content would occupy its normal position in the page. Therefore when using a negative top margin on a float, the float will travel outside the confines of any containing block because as we stated previously a float is basically removed from the flow. However if we drag the float far enough outside the containing block so that none of it exists inside, then any following content cannot continue to follow the float upwards but resides inside its containing block allowing the float to float way.

This is in fact what happens in our example as the float is dragged upwards away from the body and the following content has to remain inside the containing block formed by the body element. This may be a little hard to understand straight away but can be seen in a simple demo as follows.

The code above sets a static element at the top of the page followed by a float and then followed by more static content which produces the result seen in figure 5 below and in a live example here.

Figure 5

Nothing special there and all working as expected.

If we next add a 100px negative top margin to the float we get the result as shown in Figure 6.

Figure 6

Still everything as expected but what happens if we increase the negative top margin to 200px?

Figure 7 shows the result once again.

Figure 7

As you can see the float has moved away from the following content but the content that was below the float stays at the top of its own containing block (i.e. beneath the green block). This is exactly what happens when we drag the float outside the viewport in our main example.

However if we were to simply remove the float property from our red div then both the red div and the content below would be dragged up over the green element.

Figure 8

With a static element the flow of the page under the element with the negative margin is changed and all the content is dragged upwards accordingly.

I hope you have enjoyed this little tip (even if you already knew about it) and it shows that there is always something new to learn for all of us. Refer to the original example for the full source code as it is all in the head to be grabbed easily.

If you want to look at some more advanced centering techniques then I have a few other methods documented here. Have Fun!

Why Should I Validate?

I don’t know the answer “why you should validate” but I certainly know why I validate.

In a recent article on Search-This a poster commented that it was unnecessary to validate HTML and CSS and served little benefit so I thought it would be wise to explain why I always validate and why it is good for me. You can then make up your own minds whether you should validate or not.

The usual response of the uninformed is that "validation is not necessary" and while I agree that validation for the sake of validation is not necessary, it most certainly is necessary if you want to keep tight control of your work and limit the chances that something will go wrong.

Probably as many as 5 out of 10 calls for help that I receive are things that could have been solved by simply running CSS and HTML through the W3C validation service.

Take the following code for example which is a snippet from a recent call for help.

If you run the above code in Firefox you will see that all the styles for #outer fail to show up. Although the CSS is just a few lines the error is quite hard to spot straight away. Now imagine if the file was hundreds of lines long; the task of finding the problem would be even harder. As soon as you see that something is wrong the first step should be to run the CSS and HTML through the validator to see what it has to say about the code.

Running the above CSS through the CSS Validator flags an error straight away.

Sorry! We found the following errors (1)
URI : file://localhost/TextArea
5 Parse error - Unrecognized }

Straight away we can see that there is a stray closing bracket causing #outer to become unrecognized and the styles to not get applied. For finding errors like this and other errors such as mis-typed properties and values there is no quicker way to spot the exact error than simply running the code through the validator before you start to blame the browser.

More advanced coders can get away with validating their work less frequently during development but for beginners it is a must and should be done frequently. In this way, silly errors are avoided and the beginner is also alerted to the fact that they may be using an incorrect property or value.

It's basically like using a spell checker which will fix your words but doesn't mean that you can write anything sensible. You still need common sense and to have some idea of what you are doing.

When you've looked through as many sites as I have (over 20,000) you know that validation is necessary to weed out all the silly errors and typos that creep even into the best code.

I never validate my pages just so that I can put a sticker on the page (which I don't do) but I do validate my page to see what errors are on the page and then make a decision to live with them or not. If the errors are missing div tags or typos then I will fix them.

If the error is because I am using a non-standard proprietary CSS then I can live with that as long as I understand the implications. Validating your page regularly will keep the code clean of silly errors and allow you to get on quickly with the job in hand.

It's basically like using a spell checker which will fix your words but doesn't mean that you can write anything sensible. You still need common sense and to have some idea of what you are doing.

Validation for the sake of validation is a different matter but validation for the sake of weeding out silly errors and typos is a must and I strongly recommend doing this to save at least some hair-pulling.

Of course just having valid code does not mean that the page will be rendered correctly but it does at least allow you to look in the correct place for the error when something is not right. Too many times I see the browser blamed for something which was an error in the author's code and not the browser's fault at all. The fact that one browser may display the code OK and another may not does not mean that either browser is wrong but just they may have different procedures for when errors are encountered. Using the correct code in the first place would have avoided the issue at stage one.

However, I will agree that the validators may appear a little unfriendly at first but understanding the validator is another skill that needs to be learned (along with all the other things a web developer has to cope with). It's worth the effort and will pay dividends in the long run.

"Why should I validate" is still therefore a valid question with an easy answer.

"It will save you time and effort and also shows you care about your work".

With IE7 out, you would think that most people have upgraded their browser, but that just isn't the case. For some people IE6 was good enough for them and they don't want Windows pushing down an update. Also, a lot of people aren't signed up for automatic updates. So how do you handle this? A few months ago I came across this nice little app that lets you install and run multiple versions of IE. Once I installed IE7 there was no going back to 6, until I found this cool little tool. If you need to test in multiple versions of IE, this is the way to go. You can find the various versions of IE for download at evolt.

Safari users have always been a unique bunch and a very small minority; one worth considering though. I created an outline for this post a couple of weeks ago, and for testing I was going to recommend swift as it's built on Apple's WebCore engine; since then however, a beta version of Safari 3.0 has been released which includes support for Windows users now! Before this release, developers didn't have a good way of testing websites on Safari without having access to a Mac. Swift worked SOMETIMES but I routinely had issues with it. I know my mac friends just LOVED me bugging them to test a site for me. I have tried several sites out with Safari since downloading it and am pleased with the results. Get the latest version of Safari from Apple.

Opera! There is no reason NOT to test your sites in Opera. It is available for *nix platforms as well as Mac and Windows. How they scored this domain I have no idea, but to download the latest version, go to Opera.com.

What about all 5623 other browsers? Okay, that may be a slight exaggeration, but you can see a full list of browsers at evolt. Something else I use to help me test my sites is a browsercam subscription. You may be quite shocked at some of the pricing but if you find a BrowserCam Groupe Purchase to piggy back on, you can get a year for $25 which is WELL worth it. I use mine quite frequently. You can get screenshots of what your url looks like in various browsers on various operating systems. It's been invaluable to me. Click on the image for a larger size:

So do you have any special browsers you test in or special tricks to share? I have given my standard suggestions, but would love to hear more.

Overview

They say that in the land of the blind, the one-eyed man is king. In the case of the World Wide Web, the blind people are the ones stuck using a single Web browser, usually without even being aware that alternative browsers exist (or against their will, if they are aware that other browsers exist). This is not a slam against Microsoft’s Internet Explorer (which is installed by default on almost every computer running Windows); not at all. What I am saying is that sometimes you are stuck using a particular Web browser to browse the Web and get your work done online, and the particular site you are viewing "is best viewed in a browser other than the one you are using" because the person (or team) responsible for that particular Web site is either stuck in 1998, too lazy to code properly (or worse, doesn’t even know how to), or isn’t even aware that your browser exists in the first place (if the latter was the case, I am sure it would have been added to that site’s "browser sniffing" script once they became aware of it).

Now don’t get me wrong, most people are happy to use their computer’s default browser "just because it’s there" and "because it’s good enough for me" (my own brother included). As a Web developer, I respect the user’s choice, rather than forcing him or her to "Get Browser X" or "Download Browser Y" either out of greed (advertising revenue sharing) or ignorance that the browser doesn’t even exist. To kick off this article series, I’ll be covering one of these "oft-ignored" browsers: Opera. I’ll warn you now, this is a long article, and will be broken into two (possibly three) parts; I learned a lot more about Opera and what it can do "out of the box" than what even I thought was possible when I started researching the inner workings of this browser a month ago. (For the sake of Search-This's readers, I solemnly swear to do my best to ensure that future articles are nowhere near as long.)

I’m not making this up. It really is a Web browser.

Time after time, when helping other Web designers and developers, I see the same "advice" used all the time. "You’re coding for Internet Explorer. Internet Explorer is displaying it wrong. Code for FireFox; then hack for IE." Not only is this harmful to the health of your Web site (which I’ll cover in a future article), but it also leads people to believe that there are only two browsers on the market (Internet Explorer and FireFox). I’m sure that Microsoft, Google and the Mozilla Foundation appreciate the free advertising, but I like to keep all the options on the table. Opera is one of those options.

A (not so) brief history of the Opera Web browser

The brain-child of Jon Stephenson von Tetzchner and Geir Ivarsøy, Opera got its start in 1994 as a research project at Telenor, Norway’s largest telecommunications company. A year later, the project was spun off as an independent development company called Opera Software ASA. 1997 saw the release of the first public version of Opera Software’s desktop browser, Opera 2.1. Despite being a leader in such technologies as MDI (Multiple Document Interface), which allowed the user to run more than one browser window while using just one instance of the program, managed logins, mouse gestures (introduced in Opera 8.0), integrated search, blocking in-line content, saved sessions, the browser’s own trash can, and tabbed browsing (which was based on MDI), the browser was horrible. Its rendering engine lagged behind the other desktop browser vendors for years, and thus was quickly regarded as an "also-ran" browser (for example, Opera 3.6 was roughly equal to Netscape Navigator 3.x, and really didn't improve that much until Opera 7 came out in 2003), despite being older than either Netscape Navigator or Microsoft Internet Explorer (both Netscape Navigator and Internet Explorer were originally forks of the NCSA’s Mosaic Web browser). But given that this was the height of the "browser wars" between Microsoft Corporation and Netscape Communications, I can tell you that nobody really noticed, nor did they probably care.

Nor did people care that Opera Software’s vision of an emerging "Internet device market" materialized in the form of a project to port their browser to multiple platforms (such as Windows PC, Apple Macintosh and Unix/Linux boxes). This decision would ultimately lead Opera to become the market leader in the mobile and hand-held device industry, with their browser being the dominant software on various Internet-capable devices, such as PDAs (personal digital assistants), Web-enabled cell phones, even Sony’s PSP (PlayStation Portable) and Nintendo’s Wii gaming console. Not bad for a company that looks towards the future, a future in which they are not only the leaders of the non-standard device market, but also a promising alternative to the traditional device market (your computer) as well.

Fast-forward to 2001. That year, Opera Software signed an agreement with Symbian Ltd. to incorporate the browser on smart phones. Later that year, Opera 5 (which is the first version I was exposed to) reached a record 5 million downloads (it reached ten million desktop browser downloads two years later). You might not think that’s incredible, but it is for the simple fact that at the time, Opera was not free. It was commercial software, with a $40 price tag. That’s right folks; if you wanted to use this browser, you had to pay for it. It was also the first browser to have tabbed browsing (yep, that’s correct; Opera had it first, not Mozilla FireFox).

So, if the browser sucked so much, why wasn’t it relegated to the scrap heap with the other also-rans and has-beens? Because Opera wasn’t satisfied with just making money on the mobile market, that’s why. Think about it. You’re a mobile browser vendor, and you want to be the leader of that market. Yet when most people hear the word browser, they think of Netscape Navigator or Internet Explorer (nowadays it’s Internet Explorer and FireFox). So how do you change that? Give your red-headed stepchild a makeover, that’s how.

And that’s exactly what they did. They re-wrote the browser from the ground up, starting with a new rendering engine, which they nicknamed "Presto". The new rendering engine finally supported the W3C DOM Level 2 (though not completely), CSS 1 and 2, ECMAScript (an international client-side scripting standard very similar to JavaScript), and improved HTML 4.01 support, plus complete support for Wireless Markup Language versions 1.3 and 2.0. Add to that XML, HTTP 1.1, JavaScript 1.3, 128-bit encryption, SSL 2 and 3, and you had one heck of a punch. Opera 7 also introduced a new email client, M2, which included an integrated spam filter, new features like QuickFind and QuickReply, and automatically sorted and categorized emails by contact. It also supported POP3, IMAP, ESMTP and threaded displays, plus news servers with password authentication.

Opera 7 also had "The Wand" - and I do not mean the magician’s wand either (thought it might as well be). Not only did it let you "remember" passwords, but you could also log in to your favorite Web site with one single click of the wand, or by pressing CTRL (Cmd on a Mac) + Enter (Return on a Mac). Pretty neat, huh?

With a Web browser that had finally caught up with the standards, plus innovative features that everyone and their uncle would soon rip off wholesale, Opera finally had a winner. But there was still a catch. The price was not right. Sorry Bob Barker, but Opera still wasn’t free. Unless you wanted to put up with ads that were built into the browser chrome, you had to shell out $40 for the "premium" version of the browser (which, in addition to removing the ads also gave you direct access to Opera's help desk).

All that changed on 20 September 2005 with the release of Opera 8.5. On that day, Opera Software released the first truly free version of their flagship desktop browser. No longer did you have to pay for it, or put up with the annoying advertisements. Just download and go. Opera 9.0 beta was also released around that time; one person I know took one look at it and said "This is a BETA? Seems just as stable (so far) as 8.5 was. You can tell they are appeasing Firefox converts with the addition of opera:config which is functionally identical to about:config... while the addition of support for XSLT, Web Forms 2.0 and Canvas2D puts it back ahead of the curve on innovation." Enough of the history lesson, though. You want to see what Opera 9 has under the hood, don’t you?

A Peek Under the Hood

Unlike the above excerpt from "Family Guy" you don’t have to pay anything to use Opera anymore. It’s free. Not "free as in freedom" (like with FireFox) but "free as in beer." So, what does Opera have under the hood? Good question. I’m going to start with the basics.

First off, Opera is a browser. A computer program available as a free download from Opera's Web site (yes, it’s free, and no you don’t have to uninstall anything to use it). Simply download the file, run it, and let it do its thing. It’ll install itself for you, saving you the hassle of having to hold its hand through the entire installation process. It’s also relatively small, with the international English version coming in at 6.14 MB. While not as small as FireFox (4.5 MB last I checked), Opera does have a lot of features built right into the browser that are lacking from the open source Gecko-based browsers currently available (such as FireFox). Opera is also available for Macintosh and Unix/Linux machines as well. The standard English installer is only 4.7 MB with the classic English installer weighing in at 3.9 MB (for the record, I downloaded the International English version).

Rather than offering third-party extensions, Opera chooses to integrate the most useful features directly into the browser as a quality assurance measure. With third party plug-ins, only the developer is responsible (and let’s face it, the "developer" may be some 10 year old kid with a few weeks of programming experience – they’re not called "script kiddies" for nothing). I don’t know about you, but I prefer to see a vendor hold itself accountable in case it screwed something up. Opera can be extended with "widgets", but I’ll talk about them once I have covered the basics.

Basic Training

No, this isn’t the Army or Marine Corps. You don’t have to worry about an ornery drill instructor waking you up at 0430 by screaming in your face calling you a filthy greenhorn maggot (or worse). I’m a nice guy, or so my therapist would say (if I had one). Let’s get started, shall we? The first thing to look at is tabbed browsing. Yes, FireFox has this, and even Internet Explorer 7 has it as well. But remember, Opera had it first. Tabbed browsing was introduced with Opera 5, which was based on the browser’s earlier MDI (Multiple Document Interface) technology. Using it is surprisingly easy. Just click on the "New Tab" button at the top of the browser (directly below the program menu) and voila, you’re done. Type the location of a Web page or site into the address bar and you’re off. Couldn’t be easier, or could it? Turns out there are other ways to open a new tab as well. You can press Ctrl T (hold the CTRL button down and press "T" – Mac users need to press CMD instead), right click over a link and choose "Open in New Tab" or "Open in Background Tab" and even press "Ctrl" "Shift" and "Enter" while the mouse is over a link (though this didn’t work on my copy of Opera). To close a tab, just press Ctrl W.

Importing bookmarks and favorites into Opera is also easy. All you have to do is go to File > Import and Export, then choose which bookmarks you wish to import into Opera. You can choose from older versions of Opera, Internet Explorer, Netscape, FireFox, and even Konqueror. I don’t have a Mac, so I can’t tell you if the Macintosh version of Opera will let you import bookmarks from Safari, Camino and iCab/OmniWeb, but I wouldn’t be surprised if it could.

Another great feature that Opera has is the trash can. If you ever close a tab (either intentionally or by mistake) you can get it back by clicking on the trash can, which is located near the upper right hand corner of the browser, or by pressing Ctrl+Z (which is the typical "Undo" command found in many computer programs). Click the little icon and choose the tab you want to bring back. That’s all there is to it. Just make sure you don’t close the browser; if you do, you’ll lose the tabs that are stored there.

If you ever close the entire browser, don’t worry. You won’t lose anything (other than what is in the trash can). All you have to do is re-start Opera, and it will ask you if you want to continue where you left off, start with a clean slate, or start with Opera’s home page. I’ve had this happen to me on occasion, and I always choose to pick up where I left off when it happens (in fact, while writing this article, I had two copies of Opera open when the browser crashed on me unexpectedly; not only did the browser ask me where I wanted to continue, but also re-opened both copies and reloaded all the tabs in them as well). You can also save your "session" with Opera for later. I’ve never used it, but it’s fairly easy to do. Just click File > Sessions > Save This Session. Then give your session a name and save it. You can have Opera start with your session each and every single time. I don’t do this, but like I said, I don’t use sessions anyway.

Searching for Web sites and pages is also very easy with Opera. Next to the address bar is the integrated search bar; it will let you search sites like Google, eBay, Amazon.com and others. Click on the search field, type in the words you want to search for, then press Enter. If you want to see multiple search results, right-click and select "Open in Background Tab" to make the link open in a background browser tab (you can also press Ctrl+Shift when clicking). Not only that, but you can also use the fast-forward button to make Opera go to the next search results page. If that wasn’t enough, you can also use the address bar, by typing a letter followed by a space and the search term, item or page you want to look for. For a list of available search field shortcuts, go to Tools > Preferences > Search. You can add new shortcuts by clicking the "Add" button and filling in the details of that site’s search engine. To make things even easier when adding a search engine to the integrated search bar, right-click in the search field and select Create Search. Opera will then add the new search engine to its list, allowing you to search that site directly from your browser.

Not In My Browser (Yuck)

The Truth About Browser Security

A browser is only as secure as the developers who created it and the person who’s using it. This is a proven fact. Every browser vendor says their browser is the most secure. I hate to say it, but unless you’re using Opera, you don’t have the most secure browser. I use Internet Explorer, FireFox and Opera on a regular basis, along with AVG Anti-Virus, Lavasoft Ad-Aware SE, Spybot Search & Destroy, SpywareBlaster and Microsoft’s Windows Firewall on Windows XP Professional with Service Pack 2. Each time I update my malware blockers and run my scans, they catch garbage that gets through both IE and FireFox (usually just tracking cookies, but two viruses did manage to slip through FireFox last year). Nothing has gotten past Opera since I started using it in 2003. Nothing. Period. End of story.

So what makes Opera so secure? Well, for starters, Opera determines how it handles files based on the MIME-type of the file it’s been told to use (or download). On top of that, Opera doesn’t support ActiveX or VBScript, instead relying on Sun Microsystems’ Java platform (I recommend that you turn this feature off) and open Internet standards. However, Opera can still be vulnerable to macro viruses embedded in Microsoft Office applications (Word, Excel, PowerPoint), so don’t use the browser to view those files. Use the program that was intended to view these types of files instead (this is true regardless of what browser you use). For more information on browser security (and browsing best practices), please visit Opera’s pages on browser security at Opera's Security Tutorial page.

Opera supports Secure Socket Layer (SSL) versions 2 and 3, as well as TLS 1.0 and 1.1 (transport layer security). TLS, a cryptographic protocol which provides secure communication authentication between a client (in this case, the Web browser) and a server over TCP/IP networks, is an enhancement to the latest version of SSL 3, and a proposed Internet standard created by the Internet Engineering Task Force (IETF) which is intended to replace SSL in the near future. It can also be used to verify the identities of the client and server and exchange encrypted information necessary to create encryption keys that both sides can use. Each part of the message sent between the client and server contains a signature verifying the authenticity of that part of the message; these signatures are very hard to counterfeit without knowing what the encrypted information was sent between the client and server when the connection was established. It’s nice to know that TLS has been supported by Opera since version 3.5, but that’s beside the point. It works, and when combined with other technologies, will help to keep your computer safe from those who wish to compromise your security. The browser also offers 256-bit encryption, which is the highest available level of security in any Web browser.

On top of that, Opera’s security manager and fraud protection measures help protect you from malicious Web sites. When viewing a secure Web site, click on the address bar (it’ll be yellow instead of the default color) and you’ll be able to view additional information about the validity of the security certificate in question. You can also determine if a site may be fraudulent by clicking on the icon directly to the right of the search bar. Opera will check the domain name against a database of known phishing Web sites and also display even more security information about the site you are visiting. If it determines the site may be a fake, it will give you the option to report it. You will also be given a choice of whether to continue on to the possibly fraudulent Web page or to return to the home page. Fraud protection is enabled by default, and can be turned on and off by going to Tools > Preferences > Advanced > Security and then checking/un-checking the box marked "Enable Fraud Protection."

If that wasn’t enough, Opera’s cookie manager also gives you control over what cookies you want to accept and deny. Opera handles cookies the same way as the other major browsers; in fact, it uses the exact same file format as Internet Explorer and Mozilla FireFox. However, Opera saves its cookies in a file called cookies4.dat which is located in the user’s Opera profile folder (Linux users can find it on .opera and Macintosh users can find it on Opera Preferences). This file cannot be edited by hand; if you want to remove cookies from your hard drive, go to Tools > Advanced > Preferences > Cookies then select "Manage Cookies".

One last thing on the topic of security (you’ll want to know this). If you ever want to erase all traces of where you have been online, you can clear your browser history and cache at any time. This is done simply by going to Tools > Delete Private Data. Piece of cake.

Cosmetic Surgery: Getting Rid of Advertisements

I hate ads. I hate them with a passion. I hate them more than health nuts hate junk food. Fortunately I can do something about it. Once again, Opera comes to the rescue with its pop-up blocker, inline content blocking technology, and even the capability to allow for user style sheets that specifically block advertisements. It’s like performing cosmetic surgery on a Web page.

Blocking pop-ups is easy. All you have to do is either press F12 or go to Tools > Quick Preferences and choose how you want to set up the pop-up blocker. I have mine set to block all unwanted pop-ups, which works very well for me. Your mileage may vary of course. These days though almost every browser has a built in pop-up blocker, but the next two options available to you will make any Web designer or online advertiser cringe.

A lot of Web sites rely on advertisements to bring their owners/creators money, and a lot of people don’t want to look at them. Fortunately Opera agrees, and has provided us with the means to get rid of them. In-line content blocking is one of them. This feature can be used either by pressing Ctrl (Cmd on a Mac) and M followed by K, or by right-clicking on a Web page and selecting "Block Content" from the menu that appears. Unfortunately I couldn’t find a way to block content just by using the keyboard; this may be one of the few features to require the use of a mouse. What you’ll have to do instead is take the mouse cursor, hover it over the content you want to block (it won’t be faded out, so you can see it clearly) and click on it. When you are finished, click "Done" and Opera will block the content for you.

If that wasn’t bad enough, someone came up with a unique way to remove (almost) all the advertisements found on Web pages – even Google Ads. This requires a custom user stylesheet, which I’ll cover in the next installment of this multi-part article. But suffice to say (for now) it will literally remove advertisements from the Web pages you visit.

Ok, that’s enough for this week. It’s time for an intermission. Go take a break, comment on what’s been written so far, play a game, hug your children (if you have them), and relax. In the next installment, I’ll talk more about some of the intermediate level and advanced browser features, as well as the built-in email client, BitTorrent, IRC client, and even how to extend Opera to suit your needs.

Dan is another SitePoint catch and a good one. He draws from a wide area of web expertize, but his passions run deep for CSS, XHTML, usability and standards compliant code.

One thing is for sure, with the Search-This team we have assembled, you won't find any crappy code here.

Enjoy Dan's bio below:

User Name: Dan Schulz

• childhood ambition: to get out of the house
• fondest memory: meeting my best friend
• favorite music: whatever sounds good. Usually classical, rock, alternative-rock. I don't listen to rap. Record company executives took the "C" off of a certain word to make it marketable.
• retreat: nature
• proudest moment: two of them, getting out on my own, and becoming self-employed
• biggest challenge: staying self-employed
• alarm clock: I have a biological clock (and a 27-hour sleep schedule)
• perfect day: every day I wake up
• first job: bagger at the local Jewel-Osco
• indulgence: sports, reading, table-top warfare gaming, computer games, being with friends
• favorite movie: no favorite movie - there's too many I like
• inspiration: too many to list here

At first this Firefox extension might just seem like eye candy. However, after surfing at home with it for the last few days and then surfing at work without it. You really start to get attached to it. Give it a try for at least a week and see if you don't become attached to it too.

Get it here: Tab Effect - Firefox Add-on