1 / 26

User Stylesheets

User Stylesheets. A Tool for Design (and Destruction!). So There I Was…. …taking over someone else's Web site after they left the company How was the HTML structured? Did it use tables or DIVs? Where did the elements begin and end? How did the pieces relate to each other?

wbenson
Download Presentation

User Stylesheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. User Stylesheets A Tool for Design (and Destruction!)

  2. So There I Was… • …taking over someone else's Web site after they left the company • How was the HTML structured? • Did it use tables or DIVs? • Where did the elements begin and end? • How did the pieces relate to each other? • How many days would it take me to piece together the answers?

  3. Showing the Tables • The stylesheet: • table {border: 1px solid red !important; margin: 2px !important;}th, td {padding: 2px !important;}th {border: 1px dashed purple !important;}td {border: 1px dotted purple !important;} • Want to see forms, too? Just add: • form {border: 1px dashed green !important;}

  4. The Tools You Need • A modern Web browser • NS6.1, IE5/Mac, IE6/Win, and Opera 5.x are all good choices • Each has its own quirks and limitations, so you'll probably want more than one of them around • NS6.1 is a lot less convenient to use unless you set up some profiles in advance • A way to create your own stylesheets • A text editor is fine, or you can use a CSS editor

  5. Designating a User Stylesheet • It depends on the browser... • …but in every case, you need an external stylesheet sitting on your hard drive • Either through a preferences dialog or editing a certain file, you tell the browser to make use of those styles when rendering any page • Make sure your rules are marked !important, or else they could get overridden

  6. How Does It Work? • Normal rules • !important rules Author styles Reader (user) styles User agent styles

  7. Rule Types By Weight • Weightiest first: • !important reader (use) rules • !important author rules • !important user agent rules • author rules • reader rules • user agent rules

  8. Overcoming Legacy Markup • Trying to achieve xhtml compliance? • Look for FONT, or any other deprecated element, just by surfing around your site! • Wondering how your tags balance? • Put a border on everything! • Trying to clean up after an overhaul? • Call out "spacer" GIFs!

  9. Finding FONT • The stylesheet: • font, font * {font-weight: bold !important; background: red !important; color: yellow !important; padding: 0.25em !important;} • You could add more deprecated elements (e.g., center)

  10. Bordering Everything • The stylesheet: • * {border: 1px dotted gray !important; padding: 0.5em !important; margin: 0.5em !important;} • Now you can see everything, regardless of what it is

  11. Spacers Made Visible • The stylesheet: • img {background-color: red !important;} • Possible changes: • Add 'height' and 'width' to make all images the same size, or 'min-height' and 'min-width' to bump up the small ones

  12. Find Those Hash Links! • The stylesheet: • a[href="#"] {border: 5px solid red !important;} • Points to places where Javascript-driven links appear • You can also select based on Javascript attributes, but we'll get to that later

  13. Accessibility Aids • Simulate some of the problems handicapped users face with user stylesheets • Remove images (or only those images with no ALT text) • Change your font sizes dramatically • Strip out all color

  14. Expanded Text • The stylesheet: • * {font-size: 18px !important;}h1 {font-size: 200% !important;}h2 {font-size: 166% !important;}h3 {font-size: 133% !important;}h4 {font-size: 100% !important;}h5 {font-size: 90% !important;}h6 {font-size: 75% !important;}big {font-size: 110% !important;}small {font-size: 90% !important;}

  15. No ALT, No Image • The stylesheet: • img {visibility: hidden !important;}img[alt] {visibility: visible !important;}img[alt=""] {visibility: hidden !important;} • The goal: to only display those images with ALT text provided • You could also set an ugly border around no-ALT images

  16. Go Retro • The stylesheet: • * {background: white !important; color: black !important;} • This will strip out all background images and set all text to "default" • Is your site still navigable? • Do directions still make sense?

  17. Usability Testing • A really cheap way to look at your site in a new light • Can it survive on images alone? • Can it survive on text alone? • What if the hyperlinks "disappear?" • Does your site work if Javascript is disabled? • How do things balance? • How will things look at various resolutions?

  18. Imageless Pages • The stylesheet: • img, input, object, embed, applet {visibility: hidden !important;} • Possible changes: • Use 'display: none' instead • Drop one or more of the elements to see what changes

  19. Bannerless Pages! • The stylesheet: • *[height="60"][width="468"], *[height="60px"][width="468px"] {visibility: hidden !important;} • Simulates the typical reader's habit of ignoring advertisements • There is also the possibility of killing off all ad banners of any standard size...

  20. Textless Pages • The stylesheet: • * {background-color: white !important; color: white !important;} • Now all text will be white-on-white… so it's still there, but you can't see it • Note that any cell background colors will get wiped out as well, but it's only while you check out the design balance

  21. Anchors Away! • The stylesheet: • a:link, a:visited {color: inherit !important; background: inherit !important; cursor: inherit !important; text-decoration: inherit !important;} • Possible changes: • Leave out the 'text-decoration' declaration • Add inheritance of 'font' just to cover your bases

  22. Is That A Link…? • The stylesheet: • a:link, a:visited {cursor: default !important;} • Now the cursor won't change when the mouse moves over hyperlinks • Useful to test interaction with image-based links

  23. Sans Javascript • The stylesheet: • *[onMouseClick], *[onMouseDown], *[onMouseUp], *[onKeyPress], *[onKeyDown], *[onKeyUp], *[onSelect], *[onClick], *[onDblClick] {visibility: hidden !important;} • Possible changes: • Consider using 'display: none' instead • Add other events if relevant; 'onFocus' and 'onBlur' are good candidates

  24. Washing Out Images • The stylesheet: • img {-moz-opacity: 0.5 !important; filter: alpha(opacity=.5) !important;} • This employs a combination of Netscape and Microsoft markup to get the same effect

  25. Other Resolutions • The stylesheet: • body {background: #FCC !important; width: 640px !important; height: 480px !important;} • Possible changes: • Change the 'height' and 'width' to match any other device, like a PalmOS device or WebTV

  26. The Power Is Yours • Thanks to user stylesheets you can: • Find legacy markup • Simulate some accessibility situations • Do rapid usability testing • Even work on style changes from home without touching the Web server • Plus, of course, there's always messing up everyone else's designs...

More Related