user stylesheets

26
User Stylesheets A Tool for Design (and Destruction!)

Upload: john-ross

Post on 01-Jan-2016

64 views

Category:

Documents


1 download

DESCRIPTION

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? - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: User Stylesheets

User Stylesheets

A Tool for Design (and Destruction!)

Page 2: User Stylesheets

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?

Page 3: User Stylesheets

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;}

Page 4: User Stylesheets

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

Page 5: User Stylesheets

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

Page 6: User Stylesheets

How Does It Work?

Normal rules !important rules

User agent styles

Author styles

Reader (user) styles

Page 7: User Stylesheets

Rule Types By Weight

Weightiest first: !important reader (use) rules !important author rules !important user agent rules author rules reader rules user agent rules

Page 8: User Stylesheets

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!

Page 9: User Stylesheets

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)

Page 10: User Stylesheets

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

Page 11: User Stylesheets

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

Page 12: User Stylesheets

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

Page 13: User Stylesheets

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

Page 14: User Stylesheets

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;}

Page 15: User Stylesheets

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

Page 16: User Stylesheets

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?

Page 17: User Stylesheets

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?

Page 18: User Stylesheets

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

Page 19: User Stylesheets

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...

Page 20: User Stylesheets

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

Page 21: User Stylesheets

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

Page 22: User Stylesheets

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

Page 23: User Stylesheets

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

Page 24: User Stylesheets

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

Page 25: User Stylesheets

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

Page 26: User Stylesheets

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...