DOCSLIB.ORG

Contents at a Glance

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Contents at a Glance 02_579851 ftoc.qxd 5/4/05 11:05 PM Page ix 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 COPYRIGHTED MATERIAL 02_579851 ftoc.qxd 5/4/05 11:05 PM Page x 02_579851 ftoc.qxd 5/4/05 11:05 PM Page xi Contents Acknowledgments . xvii Introduction . xix Chapter 1: Why Hack CSS? . 1 The Cascading Style Sheets Promise . 1 Separate Presentation from Content. 2 Flexible Design Model. 2 Faster Loading Times . 3 Easy, Instant Maintenance . 3 Portability. 3 Advanced Design Possibilities . 3 Enhanced User Control . 4 Accessibility . 5 Why CSS Is Broken . 6 To Hack or Not to Hack . 8 Chapter 2: Filtering CSS for Older Browsers . 11 Hacking Netscape 4 . 11 Linking vs. Importing Style Sheets . 13 Hiding Individual Rules from Netscape 4 . 14 Dealing with Fonts Properly . 18 Adjusting Margins and Borders. 21 Working Through Background Problems. 23 Correcting List Issues. 25 Handling Table Discrepancies . 26 Fixing Internet Explorer 3 and 4 . 27 Hiding Style Sheets from Internet Explorer 3 and 4. 27 Concealing Individual Rules . 28 Adjusting for Table Properties . 29 Font Problems to Avoid. 29 Making Margins and Padding Useful. 30 02_579851 ftoc.qxd 5/4/05 11:05 PM Page xii xii Contents Chapter 3: Hiding CSS from Newer Browsers. 33 Controlling Internet Explorer 5 and Above . 34 Managing CSS in Internet Explorer 5.x for Mac. 34 Balancing Internet Explorer 5,5.5, and 6. 37 Taming Gecko-Based Browsers . 48 CSS Hack Strategies . 49 Float Clearing with the :after Pseudo-Element . 49 Filtering Out Safari . 51 The Lang Pseudo-Class Hack . 52 The Exclamation Mark Hack. 52 Handling Opera Problems. 53 Be Nice to Opera Hack . 53 Media Queries Hack . 54 Applying the Owen Hack. 56 Chapter 4: Applying Conditional Comments . 57 About Conditional Comments . 57 Showing/Hiding Styles from Individual Versions . 59 Showing or Hiding a Range of Versions. 60 Working with Non–Internet Explorer Browsers . 62 Practical Applications of Conditional Comments . 63 Three-Pixel Gap . 63 Italics Float Bug. 65 First Letter Bug. 67 Chapter 5: Scripting JavaScript and Document Object Model Hacks . 71 Dynamically Loading Style Sheets . 72 Determining Browsers with JavaScript Objects . 72 Reading the userAgent Property . 73 Styling for a Detected Browser . 75 Switching Style Sheets with the DOM . 76 Style Value Switching for Interactivity . 81 Chapter 6: Coding Server-Side Solutions . 87 Styling with ASP . 87 Controlling CSS with PHP . 91 ColdFusion Integration with CSS. 94 02_579851 ftoc.qxd 5/4/05 11:05 PM Page xiii Contents xiii Chapter 7: Enhancing Graphics and Media with CSS. 99 Styling Images for Controlled Layout . 99 Replacing Styles with Images Automatically. 103 Scaling Images for Accessibility . 105 Making Rounded Rectangles with CSS . 106 Adding Drop-Shadow Styles. 112 Extending PNG Support. 115 Implementing Flash Replacement . 117 Chapter 8: Maintaining Accessibility with CSS . 121 Setting Up for Accessible Text . 122 Handling Print Media Style Sheets . 125 Attaching a Print Media Style Sheet . 125 Defining General Properties. 126 Correcting Print-Specific Problems . 127 Adding CSS Hacks for Screen Readers . 128 Chapter 9: Integrated CSS Hack Layouts. 131 Positioning with CSS. 131 Position: Relative . 132 Position: Absolute . 135 Position: Fixed . 138 Managing the Float . 142 Crafting Two- and Three-Column Designs . 146 Two-Column Layouts . 146 Three-Column Layouts . 151 Placing Footers Correctly. 154 Centering Page Layouts . 156 Chapter 10: Building Navigation Systems . 159 Designing CSS Navigation Bars . 159 Vertical Navigation . 160 Horizontal Navigation . 164 Creating Multilevel Drop-Downs . 166 Crafting CSS Tabs . 170 02_579851 ftoc.qxd 5/4/05 11:05 PM Page xiv xiv Contents Chapter 11: Troubleshooting CSS . 177 Avoiding the Flash of Unstyled Content. 177 Debugging CSS Problems . ..
Load more

Recommended publications
  • Paper Proposes a Technique for Automatically Repair- Appearance of a Website’S UI
    Automated Repair of Layout Cross Browser Issues using Search-Based Techniques Sonal Mahajan Abdulmajeed Alameer University of Southern California, USA University of Southern California, USA Phil McMinn William G. J. Halfond University of Sheeld, UK University of Southern California, USA ABSTRACT e constantly increasing number of web browsers with which A consistent cross-browser user experience is crucial for the suc- users can access a website has introduced new challenges in prevent- cess of a website. Layout Cross Browser Issues (XBIs) can severely ing appearance related issues. Dierences in how various browsers undermine a website’s success by causing web pages to render in- interpret HTML and CSS standards can result in Cross Browser correctly in certain browsers, thereby negatively impacting users’ Issues (XBIs) — inconsistencies in the appearance or behavior of impression of the quality and services that the web page delivers. a website across dierent browsers. Although XBIs can impact Existing Cross Browser Testing (XBT) techniques can only detect the appearance or functionality of a website, the vast majority — XBIs in websites. Repairing them is, hitherto, a manual task that is over 90% — result in appearance related problems [42]. is makes labor intensive and requires signicant expertise. Addressing this XBIs a signicant challenge in ensuring the correct and consistent concern, our paper proposes a technique for automatically repair- appearance of a website’s UI. ing layout XBIs in websites using guided search-based techniques. Despite the importance of XBIs, their detection and repair poses Our empirical evaluation showed that our approach was able to numerous challenges for developers. First, the sheer number of successfully x 86% of layout XBIs reported for 15 dierent web browsers available to end users is large — an informal listing re- pages studied, thereby improving their cross-browser consistency.
    [Show full text]
  • Advanced CSS
    www.allitebooks.com AdvancED CSS Joseph R. Lewis and Meitar Moscovitz www.allitebooks.com AdvancED CSS Copyright © 2009 by Joseph R. Lewis and Meitar Moscovitz All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-4302-1932-3 ISBN-13 (electronic): 978-1-4302-1933-0 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail kn`ano)ju<olnejcan)o^i*_om, or visit sss*olnejcankjheja*_ki. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail ejbk<]lnaoo*_ki, or visit sss*]lnaoo*_ki. Apress and friends of ED books may be purchased in bulk for academic, corporate, or promotional use. eBook versions and licenses are also available for most titles. For more information, reference our Special Bulk Sales–eBook Licensing web page at dppl6++sss*]lnaoo*_ki+ejbk+^qhgo]hao.
    [Show full text]
  • Opera 9.26 Download
    Opera 9.26 download Opera is a secure web browser that is both fast and rich in features. It has a slick interface that embraces a modern, minimalist look, coupled. Title: Opera Filename: File size: MB (4,, bytes). Requirements: Windows (All Versions). Languages: Multiple. Opera browser for Windows, Mac and Linux. Opera for computers is a fast, secure and easy-to-use browser with a built-in ad blocker. Opera's mobile apps. Changelog for Opera for Mac. Opera for Mac is available for download. Release Notes. This release is a recommended security and stability upgrade. Opera is a fast and secure browser. Developed in Europe, used by millions around the world. Now with a built-in ad blocker and free VPN. Opera for Windows computers gives you a fast, efficient, and personalized way of browsing the web. It comes with a sleek interface. Opera web browser free of charge, widely supported and feature-rich. Opera includes tabbed browsing, zooming, gestures, a download manager. Opera Opera Software - Free Software. MB. Share? Description · Info Download This Version MB, Download. Latest Version: Opera Opera 12 June, (9 years ago). MB. Opera 03 April, (10 years ago). MB. Opera 20 February, (10 years ago). MB. Microsoft Internet Explorer (IE) 6+; Mozilla Firefox +; Opera +; Google NTT / DoCoMo; SoftBank Mobile; KDDI; Opera +; Major Operators inc. Opera Change Log. Release Notes This release is a recommended security and stability upgrade. See the Security section for additional. Anda pun dapat melakukan instalasi browser Opera dengan installer tersebut. yang sudah Anda download tadi dengan cara mengklik ganda file tersebut.
    [Show full text]
  • Without a Net: Librarians Bridging the Digital Divide in 2018, I Asked the Original Publisher, ABC-CLIO, to Revert the Rights to Me So I Can Revert Them to You
    Note from the author I wrote this book in 2011, but much of it holds true today. Understanding the digital divide means understanding the people affected by it and understanding the technology that thwarts them. This book is a combination of practical and philosophical approaches to working with the digitally divided. You can read more about this book on its website: Without a Net: Librarians Bridging the Digital Divide In 2018, I asked the original publisher, ABC-CLIO, to revert the rights to me so I can revert them to you. With help from 44 generous folks on Unglue.it, I was able to pay the reversion fee, and add a Creative Commons license so you can share this book freely. - Jessamyn 3 This is an unglued ebook Unglued ebooks are made possible through the Unglue.it website by contributions from 44 readers like you. Supporters of this edition: Wendi A. Dunlap klmccook jhwcrossett Gail Dawson dphiffer Kevin Waters Sean Dague sudama Ross Tyner Romany Manuell Rogers Cadenhead Benefactors of this edition: grantbarrett Andrew Pollock bandit Anonymous (1) Bibliophiles of this edition: Paul Ford "This is for everyone." —Tim Berners-Lee, Creator of the WWW, at the 2012 London Olympics Dave Polaschek John & Marcy Manning To all dogs everywhere 5 © 2011-04-30 by Jessamyn C. West ISBN: 9781598844535 . URI: https://unglue.it/work/113915/ (this work). This unglued edition is distributed under the terms of the Creative Commons CC BY license. To view a copy of this license, visit https://creativecommons.org/licenses/by/3.0/. The Creative Commons licensing is made possible by the support of readers like you.
    [Show full text]
  • Why Hack CSS? Chapter
    04_579851 ch01.qxd 5/4/05 11:09 PM Page 1 Why Hack CSS? chapter he theory of Cascading Style Sheets (CSS) is a means to an end: bet- ter, more efficient Web site design. In the real world, however, CSS Tdoes 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 modifi- cation 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 necessity and others are fervently opposed to them. in this chapter To figure out why the Web design community is divided over CSS hacks— and which camp you should be in—you’ll need a little background on the ˛ The Cascading Style emergence of CSS. Sheets Promise ˛ Why CSS Is Broken The Cascading Style Sheets Promise ˛ To Hack or Not to When work was begun in 1995 on the first CSS specification, the Web was Hack one giant kludge. Hypertext Markup Language (HTML) tags were being pressed into service to handle chores they were never intended for. Tables, for example, meant to contain structured data were largely used for layout. But missapplied tags were the least of the designer’s woes when it came to working with HTML. HTML is perfectly suited for its original design: to represent scientific papers and other documents that adhered to a highly structured format.
    [Show full text]
  • Utdrag Ur Max Räckvidd Med HTML & CSS -- Webbguruns Bästa Stilknep
    Provläs boken! Max räckvidd med HTML & CSS – webbguruns smartaste stilknep av Tommy Olsson 336 sidor, illustrerad, häftad utkom i november 2008 ISBN: 978-91-972705-2-6 Ur innehållet Omslagets framsida.......................................2 Omslagets baksida.......................................3 Innehållsförteckning.......................................5 Förord av Roger Johansson................................... 11 Kapitel 3: Stilmallar....................................... 13 Bilaga A: Elementreferens för HTML 4.01 Strict.......................... 91 Sakregister........................................... 97 Köpställen och kontakt..................................... 113 Förlaget påminner om att varje form av kopi- ering eller annat mångfaldigande av text och bild ur följande utdrag är förbjuden enligt la- gen om upphovsrätt. ✐ ✐ ``mrhc-bok'' --- 2008/11/4 --- 14:43 --- page v --- #5 ✐ ✐ INNEHÅLL Förord xi Introduktion . Vem, när, hur, var, varför?. Vem bör läsa den här boken? . Hur läser man boken lämpligast? . Vad behöver man för att följa med i bokens exempel? . . De tre skikten. Innehåll: HTML. Presentation: CSS . Interaktion: JavaScript . . Glasnost – den öppna dörrens politik . Funktionshinder . Tekniska hinder . Tillgänglighet på webben . Myter och vanföreställningar . Med användaren i centrum . Ett webbdokuments anatomi . För protokollets skull . . Som man frågar får man svar . . Hur ettor och nollor blir till bokstäver . ASCII . ISO . Unicode och UTF- . Deklarera rätt teckenkodning . . HTML – en
    [Show full text]
  • Fortgeschrittene CSS-Techniken Inkl
    Ingo Chao, Corina Rudel Fortgeschrittene CSS-Techniken inkl. CSS-Debugging und Performance-Optimierung k Auf einen Blick C i L Teil i CSS-Prinzipien, die nicht selbsterklärend sind 1 Eine Annäherung an die Spezifikation ........................... 21 2 Vertikale Anordnung .................................................... 31 3 Horizontale Anordnung ................................................ 61 einen B 4 Floats ........................................................................... 77 F 5 Das Inline-Formatierungsmodell ................................... 127 6 Positionierung und Stapelung ....................................... 137 Au 7 Background-Images ...................................................... 167 8 Das CSS-Tabellenmodell ............................................... 201 9 Ausgabe für Medien ..................................................... 221 Teil ii Inkonsistenzen in Browsern und die Grundlagen des Debuggings 10 Debugging ................................................................... 231 11 CSS-Erweiterungen ...................................................... 275 Teil iii Die praktische umsetzung von komplexen Layouts 12 Navigation: Listen und Menüs ...................................... 295 13 Mehrspaltenlayouts ...................................................... 337 14 Gleich hohe Spalten ..................................................... 389 Teil iV Was vor uns liegt 15 Frontend-Engineering .................................................. 417 16 Neue Konzepte ...........................................................
    [Show full text]
  • Automated Repair of Layout Cross Browser Issues Using Search-Based Techniques
    This is a repository copy of Automated Repair of Layout Cross Browser Issues Using Search-Based Techniques. White Rose Research Online URL for this paper: http://eprints.whiterose.ac.uk/116990/ Version: Accepted Version Proceedings Paper: Mahajan, S., Alameer, A., McMinn, P.S. orcid.org/0000-0001-9137-7433 et al. (1 more author) (2017) Automated Repair of Layout Cross Browser Issues Using Search-Based Techniques. In: ISSTA 2017 Proceedings of the 26th ACM SIGSOFT International Symposium on Software Testing and Analysis. International Symposium on Software Testing and Analysis (ISSTA 2017), 10 - 14 July 2017, Santa Barbara, California. ACM , pp. 249-260. ISBN 978-1-4503-5076-1 https://doi.org/10.1145/3092703.3092726 Reuse Unless indicated otherwise, fulltext items are protected by copyright with all rights reserved. The copyright exception in section 29 of the Copyright, Designs and Patents Act 1988 allows the making of a single copy solely for the purpose of non-commercial research or private study within the limits of fair dealing. The publisher or other rights-holder may allow further reproduction and re-use of this version - refer to the White Rose Research Online record for this item. Where records identify the publisher as the copyright holder, users can verify any specific terms of use on the publisher’s website. Takedown If you consider content in White Rose Research Online to be in breach of UK law, please notify us by emailing [email protected] including the URL of the record and the reason for the withdrawal request. [email protected] https://eprints.whiterose.ac.uk/ Automated Repair of Layout Cross Browser Issues Using Search-Based Techniques Sonal Mahajan Abdulmajeed Alameer University of Southern California, USA University of Southern California, USA Phil McMinn William G.
    [Show full text]
  • Copyrighted Material
    19_579851 bindex.qxd 5/4/05 10:51 PM Page 249 Index SYMBOLS AND NUMERICS Aslett, Tony (:after pseudo-element hack), /* ... */ enclosing comments, 14–15 50–51 3-pixel gap bug, 63–65, 189 ASP, dynamically controlling CSS output using, 37signals css_layouts Web site, 240 87–91 auto tag completion, Dreamweaver, 193–194 A a:visited pseudo-class a:active pseudo-class for button interactivity, 162 for button interactivity, 162 order of, with other pseudo-classes, 187 order of, with other pseudo-classes, 187 absolute value, position property, 135–137 B accessibility background features for, 5–6, 121–122 Internet Explorer 5 for Mac, problems print media style sheets, 125–128 with, 34 screen readers, 128–129 Internet Explorer 7 functionality, 45 text resizing, 122–125 Netscape 4 support, 12, 23–25 Web sites about, 240 properties, in Dreamweaver, 202 a:focus pseudo-class, 188 for rounded rectangles, 109 :after pseudo-element, 49–51, 144–145 Safari support, 52 a:hover pseudo-class shorthand syntax for, Dreamweaver, 195 for button interactivity, 162 background-attachment property Netscape 4 support, 12 in Dreamweaver, 195, 202 order of, with other pseudo-classes, 187 Netscape 4 support, 12 for tab interactivity, 172 background-color property a:link pseudo-class in Dreamweaver, 202 for button interactivity, 162 Netscape 4 support, 12, 23–24 order of, with other pseudo-classes, 187 Safari support, 52 All CSS Flyout Navigation Web site, 242 background-image property AlphaImageLoader, 116 in Dreamweaver, 195, 202 Apple Safari browser Netscape 4 support, 12 CSS support in, 33 COPYRIGHTEDbackground-position MATERIALproperty detecting versions of, 73–74 in Dreamweaver, 195, 202 Exclamation Mark Hack, 52 Internet Explorer 7 functionality, 45 :lang pseudo-class hack, 52 Netscape 4 support, 12, 24–25 problems with, 51–52 for rounded rectangles, 109 application servers.
    [Show full text]
  • Script Text Javascript Code Js
    Script Text Javascript Code Js dickersEngelbart lowse. is stupidly Dysplastic hackly Hamish after inconclusive shooing, his Blair vibriosis opiating bumbled his riempies energised jawbreakingly. fussily. Fibrillose and obtect Aubert brining her shrieking compost or Values change authorization cookie contains a related to appear or script code highlighting with the information about it can Are available on your text editor and script text javascript code js is javascript injection also be cached by its own xpath and write a backend. This was one of third most amazing solutions I myself seen. The ultimate permission manager tool to add adobe flash and can be reproduced without requiring relative path from a plugin. Code highlighting in React using Prism. Its own experience b shows you need way would look different. If first site verifies that the user agreed to its terms or service, or filters invalid characters out of fields that should only contain numbers, it working do so knew the server, not bleach the client. When text field must also be done you performed javascript code! Net methods are a script from a collection and javascript injection also display modified or framework abstracts common functions. Normally users using while testing, or shapes when they are using framework js syntax? New custom code as those of javascript code in confluence with css selectors in full note that. Variable with splats can i find an event attributes out, as well documented in these changes are familiar with good overview of this example demonstrates how. This makes your code easy to test, maintain, reuse, and again free from boilerplate.
    [Show full text]
  • 2006 Transcending
    001_TCSS-5_x.indd1_TCSS-5_x.indd 2 110/27/060/27/06 22:00:17:00:17 PPMM 1 Discovery Think differently about the Web design process. See how to improve the design workflow. Look forward to exciting possibilities. 3 001_TCSS.indd1_TCSS.indd 3 111/2/061/2/06 22:18:04:18:04 PPMM 001_TCSS-5_x.indd1_TCSS-5_x.indd 4 110/27/060/27/06 22:00:21:00:21 PPMM Introducing Transcendent CSS Transcendent CSS is more than a plea to use the latest, coolest CSS. It’s a quest to use the lessons you’re learning in CSS as a means to becoming the finest artist and designer you can be. Transcendent CSS asks you to embrace the new rather than the old and to stimulate new ways to find inspiration, create more agile and appropriate workflows for Web design, and encourage yourself to constantly learn more about both the design and the technical issues with which you work. Which tools do you need to get started? Which tools do you need to adopt the Transcendent CSS approach and to work along with the principles explained in this book? You don’t need anything more than you are probably using already. Don’t worry, you won’t need a spanner or a monkey wrench. You won’t even need special software or new server configurations. This book is not aimed at beginners; I assume you already have a good, working knowledge of XHTML (eXtensible HTML) markup and CSS and you understand the core concepts of Web standards. If you are still at the stage of using tables for layout, this book won’t teach you about the basics of selectors or common CSS properties; many other fantastic references are already available that will do just that.
    [Show full text]
  • CSS Hacks Para Firefox, Internet Explorer, Chrome, Opera, Safari… » Print
    19/03/13 Racó tècnic » CSS hacks para Firefox, Internet Explorer, Chrome, Opera, Safari… » Print - Racó tècnic - http://www.racotecnic.com - CSS hacks para Firefox, Internet Explorer, Chrome, Opera, Safari… Posted By Booletaire On 8 febrer 2010 @ 23:38 In Programació,Web | 43 Comments Todos sabemos lo divertido y emocionante que es hacer la compatibilidad crossbrowser de nuestras páginas web. Por suerte para nosotros, existen un gran número de hacks CSS que podemos utilizar en cada una de las versiones de cada navegador para ayudarnos a poder mostrar por igual los contenidos de una web en todos los navegadores. Partiré de este estilo: .selector { color: #CCCCCC; } Empezaré por Internet Explorer, dado que es para el que usualmente se necesitan más hacks: Internet Explorer 6 .selector { _color: #CCCCCC; } Recordad que IE6 no interpreta la propiedad (o palabra clave..) de CSS “!important” por lo que podéis jugar con ello (aunque no es lo más recomendable): Internet Explorer 6 (!important) .selector { color: #CCCCCC !important; color: #000000; /* Éste estilo sólo se aplicará a Internet Explorer 6 */ } Internet Explorer 7 y anteriores: .selector { *color: #CCCCCC; } Internet Explorer 8 Este es un poco putilla, ya que el mismo hack de IE8 a veces lo interpreta IE7… así que, si nos interesa, primero habrá que poner algo que interprete únicamente IE7 y después hay que poner el hack de IE8: /* Interpretado únicamente por IE7 (actúa como un !important) */ *:first-child+html .selector { color: #CCCCCC; } .selector { color /*\**/: #CCCCCC\9 /* Sin
    [Show full text]