In the world of web design, nothing frustrates designers and developers more than having to deal with cross browser testing. Cross browser testing is something that is expected from most clients making sure his or her website or software works properly in all major browsers. This process involves taking the end result and using it in other browsers seeing there are any major bugs or fixes that need to be made before the site or software goes live. That list includes Mozilla Firefox, Google Chrome (a new yet widely accepted browser), Apple Safari, and Internet Explorer.
Each one of these browsers has their own ups and downs but the one that causes the most headaches is Internet Explorer. IE is the browser that is shipped by default on all Windows machines and the browser that you probably use if you are on a machine in a library, college campus, or any other pubic forum. (In Europe where Microsoft has stopped shipping machines with a default browsers). Just in the last few years there have been quite a few versions of IE released. None of them, however, gives designers and developers as much grief as Internet Explorer 6.
But Microsoft recently released some features that will be appearing in their next version, Internet Explorer 9. I am guilty of using multiple browsers. I don’t use them to test necessarily, but just for surfing the web. I currently have Firefox, Chrome, Safari, and Internet Explorer on my machine. There are other browsers out there, like Opera, which I have used but those are by far my favorites and the most appropriate for my needs. But with the release of Internet Explorer 9, what Microsoft claims to be their best browser to date, I wanted to take a moment to share with you one of the more exciting and my favorite feature. There are many more new features of this browser, but this one will make the most sense right out of the gate. Alas, I doubt this new release will compete with Firefox or Chrome, but being the thought leader they are, Microsoft will continue to produce this web browser.
Utilizing Cascading Style Sheets 3
Any web designer out there knows what a cascading style sheet is. CSS is only half of what makes a website look the way it does. Think of CSS as the visual side of the website while HTML is the brains and the functionality of the site. When you look at a website the content that is there was created through simple HTML tags while the look and the design of the page was done in a cascading style sheet. So if you want to take a <p> tag and increase the font size, on the CSS you would write something like this:
p {font-size:16px;}
If you wanted to do the same thing, but write that in the HTML, you would have something like this:
<p style=”font-size:16px;”>
The first would take any and all unmarked paragraph tags in that document and make them all 16px in size. When I say unmarked, that means that if a certain paragraph falls within a unique <div> id it would not accept those styles. But, one of the things that designers have struggled with has nothing to do with text, but rather images. Better yet, the borders that you put on those images in your CSS. If you have an image that has rounded corners, which is a definite trend in web design right now, you have to actually slice that image out in a program such as Photoshop. and make that a background image in the CSS. However, with Internet Explorer 9 and CSS3 that is no longer necessary.
In the world of web design CSS has gone through just about as many changes as Internet Explorer has. Currently CSS is said to be on version CSS2 with CSS3 making its introduction to the market over the last few months and moving forward. One of the things that Internet Explorer 9 will automatically support at release is CSS3. While other browsers try and lay catch up trying to compete with this, IE 9 will be a step ahead from the gate.
This is important, thinking back to the image borders, because one of the calls in CSS3 is border radius. This is huge for borders on images because not only can you write a radius on the image itself, but it also cuts off any part of that image inside of that radius. I can only begin to imagine the possibilities with this new added feature. This is going to change the way websites are laid out and I am excited to see this in action and implemented into design.
I know that unless you are a web designer this means very little, but this is a big step in the right direction for Microsoft. This is also big for other browsers in their attempt to play catch up. With Internet Explorer’s attempt to make their browser better, this shines a light on the future of websites. It increases interest to the experience you have while on a website, and even the future of websites on mobile devices. Rounded corners have never looked so good. Happy coding!
Your p element example isn’t quite correct, or perhaps the wording about “the unique div id” was just odd.
The p style would apply to all p elements in the document unless it was specifically overridden by another style – wrapping it in a div with a unique id wouldn’t affect it, unless that unique id was styled differently.
I don’t think this is any advantage for IE9 – though it’s certainly good and welcomed that it will be supporting more standards. Most other modern browsers have already been supporting border-radius and other CSS3. IE is the one that’s playing catch up.