Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P15

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

lượt xem

Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P15

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P15: Morten Rand-Hendriksen is the owner and creative director of Pink & Yellow Media, a boutique-style design company providing digital media consulting and creations for individuals, businesses, and broadcast television. He was awarded the Microsoft MVP (Most Valuable Professional) Award for his work with Microsoft Expression in 2008.

Chủ đề:

Nội dung Text: Sams Teach Yourself Microsoft Expression Web 3 in 24 Hours- P15

  1. 402 HOUR 22: Beyond the Basics, Part 1: PHP in Expression Web 3 page is named contact.php. If so, make sure you followed all the steps when installing PHP on your computer. Workshop The Workshop has quiz questions to help you put to use what you just learned. If you get stuck, the answers to the quiz questions are in the next section. But try to answer the questions first. Otherwise you’ll be cheating yourself. Quiz 1. What is the difference between the email form you created in this hour and the one you created in Hour 20? 2. How does the browser know what part of a PHP page is PHP code and what should be considered standard HTML? Answers 1. The email forms you created in the two hours are virtually identical. The differ- ence lies in how the data or information generated from the forms is handled after the visitor presses the Submit button. In the form created in this hour, the data is sent to a PHP file that parses the information and creates an email mes- sage that is sent to the defined address. In the form from Hour 20, the data is processed by the FrontPage Server Extensions on the server and the email is generated by them. One of the biggest distinctions between the two is that while the PHP functions are contained in a separate file in this example, the FrontPage Server Extensions code is contained within the form code itself. 2. One of the many benefits of PHP is that it can live alongside regular HTML code without any problems. When the browser opens a PHP page, it reads all the regular HTML code as it normally would and sends only the PHP code con- tained within the PHP delimiters to be processed by the server before being displayed. This way the server helps out only when needed, and the browser does the rest of the work. In the extreme this means that you can cre- ate PHP pages that contain nothing but HTML, and the browser reads them as if they were HTML pages.
  2. Introduction 403 HOUR 23 Test Twice, Publish Once: Introducing SuperPreview What You’ll Learn in This Hour: . What SuperPreview is and how it came about . How to use Snapshot to get instant in-browser previews of your pages . How to use SuperPreview as a standalone application . How to diagnose and fix problems uncovered by SuperPreview . How to create a warning telling Internet Explorer 6 users to upgrade their browser Introduction As I have previously mentioned several times in this book, cross-browser and cross- platform testing of your web pages and sites is paramount if you want to ensure that all your visitors have the same experience. This has two reasons: First, even though the browser producers are converging on an agreement about how to interpret CSS and JavaScript (and in spite of the W3C conventions on the topics), there is still no absolute truth about how to do this; as a result all browsers available have idiosyn- crasies that can cause your pages to render improperly. This is further complicated because the same browsers running under different platforms (most notably Safari running under Mac OS and Windows) render different results. Whatever the reason, cross-browser testing is a necessary evil where web design is concerned. And it has been an annoying and time-consuming process that developers and designers alike would give a lot to go without. (So annoying, in fact, that many simply turn a blind eye to the problems and pretend they doesn’t exist!)
  3. 404 HOUR 23: Test Twice, Publish Once: Introducing SuperPreview The biggest hurdle for all involved has been to test against old and outdated browsers. It is a well-known fact that older versions of Internet Explorer, and in par- ticular Internet Explorer 6 (IE6), turn layouts and designs that work perfectly in pretty much every other browser into a garbled mess. The problem is that to test for IE6, you need a working version of IE6 to test against. But if you run an updated ver- sion of Windows XP, Windows Vista, or Windows 7, IE6 is long gone and you can only have one version of the browser installed on your computer at one time. The only way to do proper IE6 testing would be to have an old computer running an old operating system with the browser, to run a virtual PC inside your operating system, or to use one of the many online browser screenshot services available. And even if you did somehow get to test your page against IE6, all you’d end up with would be a screenshot telling you that something is wrong. Finding out exactly what went wrong is a trial-and-error game. Knowing the pains designers and developers went through to test their pages and sites against as many browsers as possible, the Expression Web team developed an application dedicated to not only perform proper cross-browser testing but also provide more detailed information about what goes on behind the scenes to help in diagnosing and fixing problems. The result is Microsoft Expression Web SuperPreview—a standalone application integrated into Expression Web 3 that makes cross-browser testing a one-stop-process. Having the Right Browsers SuperPreview comes with Internet Explorer 6 built in. But to get the most out of this application, you also need to be up-to-date on your other browsers. In particu- lar you need the latest version of Firefox (to get it visit and Internet Explorer (to get it visit Snapshot—Instant Browser Previews Inside Expression Web 3 SuperPreview is a powerful standalone application, but it also lends some functional- ity to Expression Web 3 in the form of a panel called Snapshot. With Snapshot you get instant and up-to-date screen shots of your current page from your different browsers. The functionality is quite basic, but it gives you a quick-and-easy way to check if your latest style change is current with all the necessary browsers. It is also a great tool for on-the-spot testing during the process of debugging browser problems.
  4. Snapshot—Instant Browser Previews Inside Expression Web 3 405 Snapshot itself doesn’t require a lot of explanation. To activate it go to Panels on the main menu and select Snapshot. This opens a new panel that floats above the work- space or in the View panel below Design view (see Figure 23.1). FIGURE 23.1 The Snapshot panel works along side the Code and Design view panels. You can dock it to an area of the work- space or float it like any of the other panels. The Snapshot panel can hover over the workspace like it does by default, or it can be docked to any of the panel zones by simply grabbing the top of the panel and drag- ging it to the desired location. As the panel hovers over potential zones, they are highlighted with a blue line. Personally in my dual-monitor setup, I place and size the Snapshot panel to cover the entire left monitor while keeping the Expression Web 3 workspace on the right. On my laptop I place the Snapshot panel below (or some- times in place of) the Design view. Snapshot Functionality Snapshot has two drop-down menus with options: The browser menu, which lets you pick what browser you want the snapshot to be taken from (see Figure 23.2), and the FIGURE 23.2 The browser menu lets you pick which browser the snapshot should be taken from.
  5. 406 HOUR 23: Test Twice, Publish Once: Introducing SuperPreview size menu, which lets you define what size the imagined screen the snapshot is taken from should have (see Figure 23.3). FIGURE 23.3 The size menu lets you pick the imagined size of the browser win- dow the snap- shot should be taken from. The size menu requires a little further explanation: Snapshot works by passing the page info to a browser and taking a screen grab of the output the browser generates. To allow you to see what the page looks like in different browser window sizes, you can define the size of the browser output. That way, even if you don’t have a 30-inch 2560 x 1600 pixel widescreen monitor, you can still see what the page would look like on that monitor. To display page output in Snapshot, you need to have a page open in Expression Web 3. If you already have Snapshot open and you open a page, that page is dis- played automatically. Depending on the content of the page and whether it is linked to online content and so on, the actual process of taking the snapshot might take some time, so you will probably encounter a spinning clock graphic quite frequently. The refresh button (circular arrows) toggles the Always Preview Active Document function on and off. With the function active Snapshot will update every time you switch between different pages. With the function inactive Snapshot is only updated when the currently open page is saved. The Snapshot is just that—a snapshot or a picture of what the page looks like in the selected browser on a selected size screen. The page is nonfunctional, so you can’t click to select any elements or buttons. In other words, Snapshot is in no way a replacement for Design view or viewing and interacting with your page in a web browser. Because it is a picture of the browser output, Snapshot is not dynamically updated as you make changes to your files. To refresh Snapshot, you need to save the page to which you have made changes. This automatically triggers Snapshot to update. That means if you make a change in your CSS file only, you still need to resave the page it relates to if you want to see the change reflected in Snapshot. Another more round- about way to refresh Snapshot is to change the browser from the browser menu. Changing the size does not trigger Snapshot to refresh, so if you want a different size
  6. Using SuperPreview for Cross-Browser Testing 407 you have to first change the size in the menu and then either save the page in ques- tion or change the browser. Try It Yourself ▼ Preview default.html in Snapshot To see how easy it is to preview pages in multiple browsers at different sizes and learn how Snapshot works, preview default.html. 1. Open default.html in Code view. 2. Go to Panels on the main menu and select Snapshot. The Snapshot panel opens as a hovering panel above the workspace. 3. If the new panel floats above the workspace, grab the top of the Snapshot panel with your mouse and drag it toward the bottom of the View pane until you see a blue line appear on the bottom. Let go of the panel, and Snapshot docks underneath the View panel showing default.html as it appears in your default browser (refer to Figure 23.1). 4. Use the browser menu to change the browser to Internet Explorer 6. 5. Use the size menu to change the browser size to 1600 x 1200. Save the page to refresh Snapshot. Note that when the Snapshot panel is docked below Code view, the Design, Split, and Code buttons shift up accordingly. This is because Snapshot is an independent panel, not part of the View panel. So if you click on the Split button, Split view appears above the Snapshot panel. ▲ Using SuperPreview for Cross-Browser Testing As I said before, Snapshot is a basic version of SuperPreview that can be used from inside Expression Web 3. The full-featured version of SuperPreview is a standalone application that has been integrated into Expression Web 3 for ease of use. To use FIGURE 23.4 SuperPreview SuperPreview you can either use the SuperPreview button next to the browser preview can be launched button on the Common toolbar, as shown in Figure 23.4, or launch it from the start from the Com- mon toolbar by menu of your operating system. clicking the SP button to the left of the browser preview button.
  7. 408 HOUR 23: Test Twice, Publish Once: Introducing SuperPreview Watch Do not run Snapshot and SuperPreview at the same time! Out! Both Snapshot and SuperPreview are complicated applications that put a lot of stress on your operating system. Running them both simultaneously can lead to your system getting sluggish or Expression Web 3 crashing. To avoid this problem, be careful to use only one of the applications at one time. If you think about it, they do the same thing, so it superfluous to use them both anyway. When you open SuperPreview, you are see a menu and two preview panels, each with a series of browser buttons (see Figure 23.5). FIGURE 23.5 SuperPreview as it appears in its default state. The easiest way to understand how the application works is to simply use it. If you haven’t already done so, open the default.html page in Expression Web 3 and press the SuperPreview button on the Common toolbar. If this is the first time you’ve opened SuperPreview, you need to select your baseline browser and the browser you want to test against. This is done by simply clicking the appropriate browser in the two view panels. The left panel contains your baseline browser—the browser you nor- mally test all your pages against. Mine is Firefox, but you can choose any of the other ones if you like. The right panel contains the browser you are testing against. You can assign multiple browsers to this panel but only one shows at a time. More on that later. After you select your baseline and testing browser, click the green Submit arrow next to the location box on the menu. This tells SuperPreview to generate previews of
  8. The Tools of SuperPreview 409 the selected page in all the browsers you defined. While SuperPreview is working, you see a spinning clock in each of the view panels (see Figure 23.6). Depending on the complexity and location of the page you load, this process can take anywhere from a couple of seconds to several minutes. FIGURE 23.6 Creating browser previews in SuperPreview takes time, so you’ll have to get used to the spin- ning clocks. When the pages are loaded, you can start using the different functions of SuperPreview to identify and diagnose problems. The Tools of SuperPreview SuperPreview has a series of different tools designed to help you diagnose problems. Most of them are actually variations of the same tool, but they each have a slightly different use and purpose. The majority of the tools are placed on the toolbar (see Figure 23.7). From here you control what kind of information the application provides and how the application displays your page in the different browsers. . In Selection Mode when you click on an element within the page, the selected element is highlighted in your view panels. . In Panning Mode, you can click and drag the page in the view panel. If you have two view panels open, the page in the other view panel moves in sync with the one you are moving.
  9. 410 HOUR 23: Test Twice, Publish Once: Introducing SuperPreview FIGURE 23.7 Overlay The menu bar in Layout SuperPreview Selection Mode helps you select Split Vertical Split how the pages Layout Layout are to display and how you want to interact Horizontal Split with them. Panning Mode Layout URL Location Zoom Box Highlighting Mode Submit/Cancel/Refresh Help Lights-Out Highlighting Toggle Ruler Toggle Guide Mode Visibility Visibility Toggle Thumbnail Visibility . In Box Highlighting Mode, SuperPreview draws a colored and outlined box high- lighting the affected area of the selected content. If both view panels are open, the box is highlighted in both panels with different colors (see Figure 23.8). FIGURE 23.8 Box Highlighting Mode highlights the selected box element with an overlay color and an outline. . Lights-Out Highlighting Mode highlights the same area as the Box Highlight- ing Mode by darkening all other content surrounding it (see Figure 23.9).
  10. The Tools of SuperPreview 411 FIGURE 23.9 Like the name suggests, Lights- Out Highlighting Mode highlights the selected box element by dark- ening everything not selected. . Toggle Ruler Visibility turns the rulers on and off. . Toggle Thumbnail Visibility turns the thumbnail navigator on and off (see Figure 23.10). The thumbnail navigator is a box in the bottom-right corner of each view panel that provides a thumbnail of the entire page with the currently visible area highlighted. You can use your mouse to drag the highlighted area around inside the thumbnail for quick navigation. FIGURE 23.10 The thumbnail navigator pro- vides a quick way to navigate inside large pages.
  11. 412 HOUR 23: Test Twice, Publish Once: Introducing SuperPreview . Toggle Guide Visibility turns guides on and off. Guides can be placed anywhere in the view panels by dragging and dropping them from the rulers. If you have both view panels open at the same time, a guide dragged into one panel will be duplicated in the other. The guides can be used to measure differences in size and position of elements. Note that you cannot make new guides if Toggle Ruler Visibility is turned off. . Vertical Split Layout is the default view panel layout in which the two browsers display side by side. . In Horizontal Split Layout, the two view panels display one on top of the other. This display is useful if you want to compare wide elements of a page across browsers. . Overlay Layout is the most unusual of the layout modes. This function displays the two selected layouts one on top of the other through what is often referred to as “onion skinning,” meaning you can see one shining through the other (see Figure 23.11). This function is particularly useful to identify minute changes in positioning. FIGURE 23.11 Overlay Layout allows you to place two browser outputs one on top of another to see if the content shifts between the two. . Single Layout displays only one browser at a time giving you a full screen view of the output. . The URL Location bar lets you enter any URL, local or external to be previewed in SuperPreview. Because the application is standalone, there is no limit to
  12. The Tools of SuperPreview 413 what page you can preview: If you can visit it in your browser, you can open it in SuperPreview (as long as the website doesn’t require you to log in first)! . The Submit/Cancel/Refresh buttons relate to the URL Location bar and require no further explanation. . The Zoom menu lets you zoom in and out in your view panels. As with the other functions, the zoom function affects both view panels identically. On the bottom of the window, two more tools are worth mentioning: the Preview Browser button and the DOM button. The Preview Panel(s) When you opened SuperPreview, you had to pick a baseline browser and a testing browser. But as I said before, you can define several testing browsers. To add another browser, simply click the + symbol next to the testing browser. When you do, the test- ing browser view panel changes back to the browser selection page, and you can pick another browser. Because many designers create image mock-ups of their pages, SuperPreview also enables you to test the real browser output against images. To do so, select the Open Image option (see Figure 23.12) and browse to the image you want to preview FIGURE 23.12 The Open Image option lets you import an image file such as an original mockup from a design application or a screen grab from another browser. against. The function supports all the standard image formats (.bmp, .gif, .jpg, .png) and Photoshop files (.psd). The image function can also be used to import screen grabs of other browsers not supported by SuperPreview. As with the browsers, there is no limit to how many images you can test the page against (see Figure 23.13). Keep in mind that SuperPreview compares only two browsers at a time, so to switch between the different testing browsers and images, you need to actively select them.
  13. 414 HOUR 23: Test Twice, Publish Once: Introducing SuperPreview FIGURE 23.13 SuperPreview enables you to test your pages against a multi- tude of browsers and images at the same time. The DOM Tree View The final and most-advanced feature of SuperPreview is the DOM Tree View that you can open by clicking the DOM button on the bottom of the window. Did you DOM or Document Object Model is the name of the code used in HTML and other Know? web code to allow programs, applications, and scripts to access specific elements of the content and modify, style, update or do other things to it. It sounds confus- ing but the term DOM refers to the tags that contain the content inside HTML and other web documents. So basically if someone talks about the DOM, what they mean is quite literally the beginning and end tags that surround content. When you click to select an element in your preview pages with the DOM Tree View open, SuperPreview provides a full breakdown of the entire DOM or tag structure for that element (see Figure 23.14). As a result you can see every tag that affects the con- tent and, if anything, what code is interpreted differently between the browsers. This is an advanced function that has limited usefulness unless you know what you are doing. Even so it can be a quick-and-easy way to find out why elements start behav- ing strangely when they are opened in different browsers. The key to using the DOM Tree View is to remember that different browsers have different DOMs, so when some- thing goes awry, it’s a fair bet that there might be something amiss in the tag tree.
  14. Identify, Diagnose, and Solve Cross-Browser Issues with SuperPreview 415 FIGURE 23.14 The DOM Tree View displays the DOM or tag tree of the selected element. Identify, Diagnose, and Solve Cross- Browser Issues with SuperPreview By following the lessons in this book, you have created a fully working version of the site. And if you followed my previous advice, you tested it against your browsers at every step along the way, and you probably have a fairly good idea of what, if any, cross-browser issues exist. But that applies only to current browsers. For older browser versions such as Internet Explorer 6 and 7, you don’t know unless you have a fairly advanced setup, or you have deliberately avoided updating your browser for some time. Now that the site is done, it is time to make sure it looks the same across all browsers. To do so, open default.html in SuperPreview with Firefox as the baseline browser and IE8, 8->7 and 6, respectively, as the testing browsers. As you can see from clicking through the different testing browsers and from Figure 23.15, a couple of elements look different between the browsers: In IE8 and Firefox the sidebar is next to the con- tent, but in IE7 and 6 the content appears below the sidebar. In addition, in IE6 everything seems slightly shifted, and the transparency is gone. Now that you know the main issues, it is time to do some browser triage: What prob- lems are most important and should be fixed, and what problems are either unim- portant or hard to fix without a massive amount of work? This requires a bit of knowledge of the different browsers.
  15. 416 HOUR 23: Test Twice, Publish Once: Introducing SuperPreview FIGURE 23.15 Default.html looks surpris- ingly different depending on what browser you use. Technically, Firefox and IE8 should look almost exactly the same. Any noticeable dif- ference between the two most likely means there is an actual error either in the HTML markup or the CSS styles. We already know that IE6 does not support PNG transparencies without some serious JavaScript workarounds. But apart from the transparencies and some slight shifting in the size and spacing of the text, there doesn’t seem to be anything else dramatically wrong with the IE6 output. For those reasons, there is no point in trying to fix the page for IE6, but we should probably add a warning on the page telling IE6 users they should upgrade to a new version of the browser. In SuperPreview, you can see that the heading and content appear on the right side of the sidebar in Firefox and IE8 and their positions are almost identical. (According to the position pop-ups, they are only 2 pixels apart.) But if you click on IE7 or IE6 the heading along with the rest of the content appears below the sidebar rather than beside it (see Figure 23.16)! The explanation for this discrepancy lies in Hour 13, “Getting Visual, Part 3: Images as Design Elements with CSS,” when you created a custom H2 style to ensure that the background image appeared behind the text rather than to the extreme left of the containing box. One of the things you did was to set the clear attribute to both to ensure that no other text appeared on the same line as the heading. Now it turns out the two older versions of Internet Explorer interpret the clear attribute a little too strictly and force the content down below the sidebar.
  16. Identify, Diagnose, and Solve Cross-Browser Issues with SuperPreview 417 FIGURE 23.16 Small browser inconsistencies can have big consequences. In this case the content is shifted down below the side- bar in IE7. This is a typical situation when dealing with browser incompatibilities: To fix a prob- lem in an older browser or one that doesn’t play nice with web standards, you have to start chipping away at your code and remove elements that are there for a reason. So for each such instance, you have to ask yourself a couple of questions: Is the dis- crepancy bad enough that I need to fix it? Is the fix going to adversely affect the design in browsers that interpret my code correctly to begin with? For this page, the answer to the first one is yes. For the second question, in most cases you need to do some trial and error to find the answer. Back in the default.html page in Expression Web 3, find the H2 style in the Manage Styles panel and open the Modify Styles dialog. Go to Layout and delete the clear:both attribute. Click OK, save the page, and save the attached CSS page. Save and open the page in SuperPreview. Clicking through the different testing browsers and testing the page in your other browsers, you see that the change fixed the problem without any undesired conse- quences for the rest of the content.
  17. 418 HOUR 23: Test Twice, Publish Once: Introducing SuperPreview Troubleshooting and Fixing the Sidebar in Internet Explorer 7 With the heading issue resolved, a new and much more serious problem emerges: Part of the sidebar is now blocked in Internet Explorer 7. Because this problem is visible only in IE7, it is likely one of those idiosyncrasies I previously mentioned in which the browser doesn’t interpret web standards properly. But because IE7 is still the most prevalent version of the browser, it is a problem we have to fix. Unfortunately, because it is a web standards-compliancy issue, the fix might result in the page looking a bit different—in other words, we might have to “dumb it down” to work in the broken browser. Using the tools in SuperPreview to select and highlight the different sidebar elements, you can see that the content isn’t merely blocked by the blockquote box, but it is cut off at the bottom. What makes this problem even stranger is that it appears only in IE7 but not IE6, meaning this is an isolated issue for that browser only. Because there is no obvious reason why the sidebar is interrupted by the blockquote, the only way to find the problem and fix it is through trial and error. Based on what you see in SuperPreview, it seems logical that the culprit is the blockquote, so let’s start there: 1. In Expression Web 3, open the kippleStyles.css file in Code view and find the blockquote style. 2. Use CSS comments to disable all the styling inside the curly brackets. The syn- tax for a CSS comment is forward slash + star (/*) for the beginning and star + forward slash (*/) for the end. When you comment out CSS, the affected code turns gray, as shown in Figure 23.17. FIGURE 23.17 Like in HTML, you can use special code to comment out sections of CSS. This is an easy way to turn CSS code on and off without delet- ing it. 3. Save the style sheet and reload default.html in SuperPreview. Without any of the style code, the sidebar appears as it should in IE7. 4. Back in kippleStyles.css move the beginning comment tag down one line so that the background-color attribute becomes active. Save the style sheet and
  18. Solve IE6 Problems by Telling Visitors to Upgrade Their Browsers 419 reload default.html in SuperPreview. The background color is added, but the sidebar menu is still visible. 5. Continue moving the beginning comment tag down one line, save the style sheet, and test the new style in SuperPreview until you find the style attribute that causes the problem. Going down the list of attributes, you find that it is font-style: italic; that is the culprit. For whatever reason, it looks like IE7 doesn’t like this particular style combination, and as a result the other elements are affected. The reason why I say it doesn’t like this style combination is because the problem isn’t actually caused by the font-style attribute alone: If you leave the font-style attribute active and com- ment out the background-color attribute, the menu is also visible. So it seems it is the combination of a background color (or a border for that matter) and italicized or oblique text that together cause the problem. That leaves you with a decision to make: What matters more to you? The background color or the italicized text? You can choose one or the other but not both. This, I’m afraid, is a typical browser-compatibility conundrum, and I built it in just to show you how weird things can get. Sometimes you are forced to make choices you don’t like because things don’t work the way they are supposed to. There are always ways around it, but they are usually complicated and time-consuming, and applying them becomes a question of whether the return on investment is good enough. Solve IE6 Problems by Telling Visitors to Upgrade Their Browsers As you can see by testing your site in IE6, things just don’t work properly in this old browser. The problem becomes blatantly obvious when you use the Overlay Layout mode in SuperPreview: Not only are the PNG transparencies not working but also the content positioning and text alignments are off. IE6 has been a thorn in the side of web developers and designers since day one, and there are no turnkey solutions to solve all the problems the browser creates. In many cases, designers are forced to either clutter their code with custom IE6 code (commonly known as IE hacks) or cre- ate whole separate style sheets just for this browser. Internet Explorer 6 was released in 2001, alongside Windows XP. It was replaced by Internet Explorer 7 in 2006, and Internet Explorer 8 was released in April 2009, so you would think that people had moved on to the newer browsers. But for myriad reasons, this has not happened. There are still a large percentage of web-faring users visiting your sites with this old-and-outdated dinosaur of a browser.
  19. 420 HOUR 23: Test Twice, Publish Once: Introducing SuperPreview Since IE6’s release in 2001, designers and developers have bent over backward to make their sites look and work properly in the browser. But over the past couple of years, more and more of us have decided that enough is enough and started working to educate people about why they should upgrade to a newer browser and how to do so. If you search the web for anti-IE6 campaigns, you’ll find a long list of campaigns that all have the same goal in mind: to phase out IE6 for good by getting people to upgrade. I started a campaign on my own back in January 2009, called StopLivingInThePast. com, and as part of that campaign, I created a small script anyone can add to their site. This script displays a warning to visitors using IE6 that they need to upgrade their browsers. Now that you know why IE6 is such a bad browser, I encourage you to add an IE6 warning to your sites to help your visitors get out of the rut and experi- ence the web the way it was meant to be, through newer and better browsers. In the process, you’ll learn a simple-and-easy trick to target specific browsers through the use of CSS! ▼ Try It Yourself Use Conditional CSS Comments to Target Specific Browsers In Hour 16, “Using Behaviors,” you learned how you can use JavaScript to target spe- cific browsers. But there is another way to do this using a cool but little-known CSS trick. It involves a conditional CSS comment tag and some basic programming language: 1. In Expression Web 3, open myKippleMaster.dwt in Code view. 2. Find the tag and create a couple of new lines below it to make some space. 3. Below the tag, insert the following code: . 6. Create a new line and duplicate steps 3 to 5, substituting the number 7 for the number 6 (see Figure 23.18). FIGURE 23.18 The tags can be used to target specific browsers.
  20. Solve IE6 Problems by Telling Visitors to Upgrade Their Browsers 421 7. Save the DWT and the linked pages, and test default.html in SuperPreview. Now when you open default.html in IE6 and IE7 in SuperPreview, you see the text you just entered at the top of the pages (Figure 23.19). These conditional CSS comments FIGURE 23.19 The conditional tags insert the browser-specific code in the pages. work only on Internet Explorer and can be used to target any of the browsers by changing the if statement to match the browser version (5, 5.0, 5.5, 6, 7) or by setting a less than or equal (lte) or greater than (gt) value like this: [if lte IE 6] or [if gt IE 6]. The great thing about this conditional CSS comment trick is that there is no limit to what you can put inside the commented-out sections. And because it doesn’t use JavaScript or other custom code to trigger, it works even on the most basic and stripped-down browser. To add a full IE6 warning to your site, go to the-code/, copy the code from that page, and paste it into the DWT in place of the code example you just created. This adds a nice blue box at the top of your page (see Figure 23.20) that tells your visitors to upgrade their browser and provides links both directly to the upgrade page under and also to more information about why they should upgrade.
Đồng bộ tài khoản