css hacks & filters - making cascading stylesheets work (2005)

TEAM LinG CSS Hacks and Filters Making Cascading Style Sheets Work 01_579851 ffirs.qxd 5/4/05 10:55 PM Page i TEAM LinG 01_579851 ffirs.qxd 5/4/05 10:55 PM Page ii TEAM LinG CSS Hacks and Filters Making Cascading Style Sheets Work Joseph Lowery 01_579851 ffirs.qxd 5/4/05 10:55 PM Page iii TEAM LinG For general information on our other products and services, please contact our Customer Care Department within the U.S. at 800-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit www.wiley.com/techsupport. Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books. Library of Congress Cataloging-in-Publication Data Lowery, Joseph (Joseph W.) CSS hacks and filters / Joseph Lowery. p. cm. Includes bibliographical references and index. ISBN 0-7645-7985-1 (paper/website) 1. Web sites Design. 2. Computer graphics. 3. Cascading style sheets. I. Title. TK5105.888.L693 2005 006.7 dc22 2005007456 Trademarks: Wiley, the Wiley logo, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. ExtremeTech and the ExtremeTech logo are trademarks of Ziff Davis Publishing Holdings, Inc., used under license. All rights reserved. All other trademarks are the property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor mentioned in this book. CSS Hacks and Filters: Making Cascading Style Sheets Work Published by Wiley Publishing, Inc. 10475 Crosspoint Boulevard Indianapolis, IN 46256 www.wiley.com Copyright © 2005 by Wiley Publishing, Inc., Indianapolis, Indiana Published by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada ISBN 13: 978-0-7645-7985-1 ISBN 10: 0-7645-7985-1 Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 1B/ST/QV/QV/IN No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4355, or online at http://www.wiley.com/go/permissions. Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Website is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Website may provide or recommendations it may make. Further, readers should be aware that Internet Websites listed in this work may have changed or disappeared between when this work was written and when it is read. 01_579851 ffirs.qxd 5/4/05 10:55 PM Page iv TEAM LinG About the Author Joseph Lowery is the author of the Dreamweaver MX 2004 Bible (Indianapolis, IN, Wiley Publishing, 2004) and the Fireworks MX Bible (Indianapolis, IN: Wiley Publishing, 2002), as well as Design and Deploy (San Francisco: Macromedia Press, 2004) and Joseph Lowery’s Beyond Dreamweaver (Berkeley, CA: New Riders Press, 2002). In recent years, he co-authored Dreamweaver MX 2004 Web Application Recipes (Berkeley, CA: New Riders Press, 2003) with Eric Ott and the Dreamweaver MX Killer Tips book (Berkeley, CA: New Riders Press, 2003) with Angela Buraglia. His books are international bestsellers, having sold more than 400,000 copies worldwide in nine different languages. As a programmer, he has developed numerous extensions for the Dreamweaver community, both free and commercial, including FlashBang! and Deva Tools for Dreamweaver. He also has presented at MacDesign in Chicago, Seybold in both Boston and San Francisco, and Macromedia MAX conferences in the U.S. and Europe. 01_579851 ffirs.qxd 5/4/05 10:55 PM Page v TEAM LinG Credits Executive Editor Chris Webb Development Editor Kevin Shafer Technical Editor Mark Fletcher Production Editor Gabrielle Nabi Copy Editor Kim Cofer Editorial Manager Mary Beth Wakefield Vice President & Executive Group Publisher Richard Swadley Vice President and Publisher Joseph B. Wikert Project Coordinator Erin Smith Graphic and Layout Technicians Lauren Goddard Jennifer Heleine Melanee Prendergast Amanda Spagnuolo Julie Trippetti Quality Control Technicians Laura Albert John Greenough Joe Niesen Proofreading and Indexing TECHBOOKS Production Services 01_579851 ffirs.qxd 5/4/05 10:55 PM Page vi TEAM LinG To the hundreds of CSS explorers who have charted this rough new terrain with unflinching vigilance and unwavering selflessness. 01_579851 ffirs.qxd 5/4/05 10:55 PM Page vii TEAM LinG 01_579851 ffirs.qxd 5/4/05 10:55 PM Page viii TEAM LinG Contents at a Glance Acknowledgments. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix Chapter 1: Why Hack CSS?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Chapter 2: Filtering CSS for Older Browsers . . . . . . . . . . . . . . . . . . . . . . . . 11 Chapter 3: Hiding CSS from Newer Browsers. . . . . . . . . . . . . . . . . . . . . . . . 33 Chapter 4: Applying Conditional Comments . . . . . . . . . . . . . . . . . . . . . . . . 57 Chapter 5: Scripting JavaScript and Document Object Model Hacks. . . . . . . . . . . . 71 Chapter 6: Coding Server-Side Solutions . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Chapter 7: Enhancing Graphics and Media with CSS . . . . . . . . . . . . . . . . . . . 99 Chapter 8: Maintaining Accessibility with CSS . . . . . . . . . . . . . . . . . . . . . . 121 Chapter 9: Integrated CSS Hack Layouts . . . . . . . . . . . . . . . . . . . . . . . . . 131 Chapter 10: Building Navigation Systems . . . . . . . . . . . . . . . . . . . . . . . . . 159 Chapter 11: Troubleshooting CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Chapter 12: Implementing CSS Hacks in Dreamweaver. . . . . . . . . . . . . . . . . . 191 Chapter 13: Creating CSS-Savvy Dreamweaver Templates . . . . . . . . . . . . . . . . 219 Appendix A: Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Appendix B: CSS Hacks and Filters Charts . . . . . . . . . . . . . . . . . . . . . . . . 243 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 02_579851 ftoc.qxd 5/4/05 11:05 PM Page ix TEAM LinG [...]... background-position Ⅲ list-style-position Ⅲ background-repeat Ⅲ vertical-align Ⅲ border-top Ⅲ word-spacing Ⅲ border-left Ⅲ white-space:nowrap Ⅲ border-bottom Ⅲ !important Ⅲ border-right Ⅲ @import Ⅲ display (except display:none) Ⅲ a:hover Ⅲ font-variant Ⅲ :first-line Ⅲ letter-spacing Ⅲ :first-letter You’ll also find that the vast majority of CSS selectors do not work in Netscape 4 Only class selectors work as expected;... hand or cross your fingers and perform an all-encompassing (and terrifying) search-and-replace operation If you wanted to repurpose Web content for print or any other media, you had one choice and one choice only: redesign the site, page-by-page Pages were top-heavy with dense mark-up code: a TEAM LinG 2 CSS Hacks and Filters: Making Cascading Style Sheets Work real structural jungle that designers had... server-side methods for serving the right CSS file to the right browser I did, however, attempt to ensure that whatever suggestions I made validated; where there was no recourse, the invalid technique is noted as such CSS Hacks and Filters follows, roughly, an old-to-new, simple-to-complex structure The oldest browsers CSS designers are still struggling with are covered first, followed by more up-to-date,... the position and tiling of background images (see Figure 1-1 ) is reason enough to use CSS in and of itself TEAM LinG 4 CSS Hacks and Filters: Making Cascading Style Sheets Work FIGURE 1-1 : With CSS image control, you can place a single, non-tiling image like this control panel in the background, precisely positioned Another key element in the CSS toolchest is the div tag, commonly referred to in Web... but it doesn’t work as well as it should Or rather, CSS doesn’t work as well as it could—with a little help And help is available, an amazing amount of help, in fact, in the form of CSS hacks and filters uncovered by a legion of working Web designers What exactly is a CSS hack? Typically, a CSS hack is a slight modification to the CSS or HTML code developed to work around a particular CSS problem on... background-color, and background-image on the body tag leads to good results in this browser Certain font properties (font-families, non-proportional font-sizes, font-weight) applied to selectors are properly rendered Likewise textindent and text-align are handled well CSS properties not supported at all are numerous and all over the map: Ⅲ background-attachment Ⅲ list-style-image Ⅲ background-position... world, however, CSS does not provide a perfect, clear-cut path to that goal To achieve the promise of CSS, working designers have employed a series of workarounds known collectively as hacks At the most basic level, a CSS hack is a modification to the standard CSS code Like any deviation from the norm, the use of CSS hacks has both its supporters and detractors: Some designers feel CSS hacks are an absolute... all other browsers), use the link syntax: TEAM LinG 14 CSS Hacks and Filters: Making Cascading Style Sheets Work The other approach (readable by all other browsers except Netscape 4) is to attach a style sheet using @import: < !-@ import url(“mainstyle .css ); > To assign the proper styles to the right browser,... of CSS, just point a screen reader–enabled browser to a page in a CSS- based layout— and then visit the same page in a table-based layout, especially those with deeply nested tables You won’t believe your ears when you hear what a difference CSS makes FIGURE 1-2 : Define your font sizes correctly with CSS, and text is easily rescaled with no sacrifice of design integrity TEAM LinG 6 CSS Hacks and Filters: ... table for CSS 3 bodes well for this much-needed functionality Why CSS Is Broken Cascading Style Sheets certainly were intended to be the Web designer’s promised land Unfortunately, the first time you attempt to implement a CSS solution for a site, you’ll quickly realize that the promise has not been kept How bad can it be? Take a look at a typical CSS problem shown in Figures 1-3 and 1-4 Figure 1-3 displays . LinG CSS Hacks and Filters Making Cascading Style Sheets Work 01_579851 ffirs.qxd 5/4/05 10:55 PM Page i TEAM LinG 01_579851 ffirs.qxd 5/4/05 10:55 PM Page ii TEAM LinG CSS Hacks and Filters Making. such. CSS Hacks and Filters follows, roughly, an old-to-new, simple-to-complex structure. The oldest browsers CSS designers are still struggling with are covered first, followed by more up-to-date, standards-based. Congress Cataloging-in-Publication Data Lowery, Joseph (Joseph W.) CSS hacks and filters / Joseph Lowery. p. cm. Includes bibliographical references and index. ISBN 0-7 64 5-7 98 5-1 (paper/website) 1.