Thiết kế giao diện cho website
Designing Web pages is challenging enough without having to build pages that work on every possible combination of Web browser and operating system in existence. So many Web designers choose to take the easy route and design just for the most popular browser, which is IE 6 right now.
But if you're going to focus your site on IE 6 you'll be causing some problems for yourself:
* When IE 7 comes out, your site will need to be redesigned.
* People who use other browsers won't get a good experience.
* If new browsers come out and gain popularity, chances are your site won't be able to support them.
Standards-Based Web Design Is Best
If you design for Web standards then your Web site will be functional with every browser that supports those standards. And even long into the future, your site will stay functional.
But Internet Explorer 6 and 5 are not standards compliant. So what do you do? The common response is to design just for them and then try to force your site to look okay in standards compliant browsers like Firefox, Safari and Opera. But this is both backwards and difficult.
How to Design for Internet Explorer
1. Build your site for Firefox or Safari first.
Build your site and test it using Firefox or Safari first. This will insure that your Web pages look good in standards compliant browsers. And it's actually fairly easy to do.
2. Use a DOCTYPE.
I prefer to use XHTML 1.0 Transitional, but another good one is HTML 4.01. By using a DOCTYPE, you insure that your page isn't displayed in quirks mode, and the browsers act the same.
3. Once you've got it looking perfect for Firefox, then start editing for IE 6 or 5.
IE 6 or 5 should come last because it's not standards compliant. When IE 7 comes out, your page will look correct because it looks correct in the other standards compliant browsers.
4. Don't use hacks to design for IE.
Instead, use the cascade and valid CSS properties and selectors that IE 6 and 5 don't recognize to hide styles for standards compliant browsers. Put the IE 6 styles first in the cascade - then the standard-compliant properties.
Hiding Styles from IE 6
It's actually really easy to hide styles from IE 6 but make them visible to standards compliant browsers. Use child selectors.
In one design I built, I created a two column layout that required margins and padding. This meant that I was hitting the box model differences when I viewed the page in IE 6. My first CSS style sheet for Firefox included a line like this:
div#nav { width: 150px; margin-left: 20px; }
This made the page line up perfectly in Firefox and Safari, but in IE the nav column was pushed over to the right too far.
So, I converted the line to use child selectors. The #nav div is a child of the body tag, so I changed the line to read:
body > div#nav { width: 150px; margin-left: 20px; }
Of course, doing this made the #nav div lose all it's properties in IE, so I needed to add in some IE styles to get IE 6 looking okay. I added this line to the CSS:
#nav { width: 150px; margin-left: 10px; }
The placement of this line of CSS is important if my page is still to look good in Firefox and Safari. The IE line needs to come first. Firefox and Safari will read that line and then it will be over-ridden by the body > div#nav selector lower in the document. IE 6 will read the first line and set the styles. It will then ignore the child selector, as it doesn't recognize them. When IE 7 comes along, it will act like Firefox and Safari.
By designing for a standards-compliant browser first, and then modifying your CSS to support IE's quirks, you spend a lot less time fiddling with the design and a lot more time actually designing.
Cascading Style Sheets Child Selectors
In CSS a parent element is an element that contains other elements. All elements that are contained within that parent are called "child" elements. Using the CSS child selector, you can define properties that only affect elements that are children of other specific elements. Every element is a child of another element except the root element, which has no parent.
To select all paragraphs that are children of the tag, you would write:
body > p { background-color : #00f; }
This is similar to the decendant selector but can only define children, not grandchildren or lower.
You can combine the child selector with other selectors, such as decendants:
div ul>li p { background-color : #00f; }
This affects a p element that is a decendent of li which is a child of ul which is a decendant of div.
Browser Support: Internet Explorer 6 and lower (Windows) and 4.5 and lower (Macintosh) don't support this selector. Netscape 4 and lower don't support this selector.
But if you're going to focus your site on IE 6 you'll be causing some problems for yourself:
* When IE 7 comes out, your site will need to be redesigned.
* People who use other browsers won't get a good experience.
* If new browsers come out and gain popularity, chances are your site won't be able to support them.
Standards-Based Web Design Is Best
If you design for Web standards then your Web site will be functional with every browser that supports those standards. And even long into the future, your site will stay functional.
But Internet Explorer 6 and 5 are not standards compliant. So what do you do? The common response is to design just for them and then try to force your site to look okay in standards compliant browsers like Firefox, Safari and Opera. But this is both backwards and difficult.
How to Design for Internet Explorer
1. Build your site for Firefox or Safari first.
Build your site and test it using Firefox or Safari first. This will insure that your Web pages look good in standards compliant browsers. And it's actually fairly easy to do.
2. Use a DOCTYPE.
I prefer to use XHTML 1.0 Transitional, but another good one is HTML 4.01. By using a DOCTYPE, you insure that your page isn't displayed in quirks mode, and the browsers act the same.
3. Once you've got it looking perfect for Firefox, then start editing for IE 6 or 5.
IE 6 or 5 should come last because it's not standards compliant. When IE 7 comes out, your page will look correct because it looks correct in the other standards compliant browsers.
4. Don't use hacks to design for IE.
Instead, use the cascade and valid CSS properties and selectors that IE 6 and 5 don't recognize to hide styles for standards compliant browsers. Put the IE 6 styles first in the cascade - then the standard-compliant properties.
Hiding Styles from IE 6
It's actually really easy to hide styles from IE 6 but make them visible to standards compliant browsers. Use child selectors.
In one design I built, I created a two column layout that required margins and padding. This meant that I was hitting the box model differences when I viewed the page in IE 6. My first CSS style sheet for Firefox included a line like this:
div#nav { width: 150px; margin-left: 20px; }
This made the page line up perfectly in Firefox and Safari, but in IE the nav column was pushed over to the right too far.
So, I converted the line to use child selectors. The #nav div is a child of the body tag, so I changed the line to read:
body > div#nav { width: 150px; margin-left: 20px; }
Of course, doing this made the #nav div lose all it's properties in IE, so I needed to add in some IE styles to get IE 6 looking okay. I added this line to the CSS:
#nav { width: 150px; margin-left: 10px; }
The placement of this line of CSS is important if my page is still to look good in Firefox and Safari. The IE line needs to come first. Firefox and Safari will read that line and then it will be over-ridden by the body > div#nav selector lower in the document. IE 6 will read the first line and set the styles. It will then ignore the child selector, as it doesn't recognize them. When IE 7 comes along, it will act like Firefox and Safari.
By designing for a standards-compliant browser first, and then modifying your CSS to support IE's quirks, you spend a lot less time fiddling with the design and a lot more time actually designing.
Cascading Style Sheets Child Selectors
In CSS a parent element is an element that contains other elements. All elements that are contained within that parent are called "child" elements. Using the CSS child selector, you can define properties that only affect elements that are children of other specific elements. Every element is a child of another element except the root element, which has no parent.
To select all paragraphs that are children of the tag, you would write:
body > p { background-color : #00f; }
This is similar to the decendant selector but can only define children, not grandchildren or lower.
You can combine the child selector with other selectors, such as decendants:
div ul>li p { background-color : #00f; }
This affects a p element that is a decendent of li which is a child of ul which is a decendant of div.
Browser Support: Internet Explorer 6 and lower (Windows) and 4.5 and lower (Macintosh) don't support this selector. Netscape 4 and lower don't support this selector.
Nhận xét
Đăng nhận xét