Opera 7's Alternate Stylesheets

Use them to check accessibility and debug layouts.

[papabaer]

For those who may not be aware of this feature, Opera 7 comes supplied with 12 Alternate stylesheets. You can enable these individually or in combination with others. I have to say, this is a must have feature for serious Webmasters.

Here is a list of the included Alternate Stylesheets:

Emulate text browser

Nostalgia

Accessibility layout

Show images and links only

High contrast (B/W)

High contrast (W/B)

Hide certain sized elements (agressive)

Disable tables

Show structural elements

Debug with outline

Use default forms design

I can't emphasize how valuable of a teaching mechanism these are. And how valuable a debugging tool. There was a post earlier today where a member was troubled by a "float vs. div" background color issue. If the page in question was viewed using the DEBUG stylesheet, the explanation would have been imediately apparent.

I'm curious if anyone else here has used this useful feature.

-papabaer

p.s.
Show Structural Elements is very cool too... look for the summary at the bottom of the page. Find out how many FONT TAGS and NESTED TABLES were found...

p.p.s. Birdman! Checkout the DEBUG for sandbag divs! Select DEBUG, but keep your own stylesheet active (don't select USER STYLESHEET, just check the Debug option)-- Great tool for sizing those sandbags...

[Nick_W]

Hmmm... looks like Nick will be spending a few hours in Windows tonight! ;)

Thanks Papabaer, I've not even downloaded O7 yet but that's all the encouragement I need!

Nick

[Birdman]

Hmm...interesting! Can I keep Opera 6.04 if I download V7?

[papabaer]

Yes, and Nick, Opera v.7 is available for Linux as well. *S*

And yes, you can have v.6 and v.7 on the same machines. They install into seperate folders.

What I find especially useful is the fact that you can mix n' match the various style sheets. For instance, DEBUG with OUTLINE combined with SHOW STRUCTURAL ELEMENTS is a very useful combo. You can view either, or both, with default page styles(developer's style sheet) enabled, or with USER style sheet(default page styles off) enabled.

Ala in all, this makes for a VERY comprehensive set of debugging tools.

[papabaer]

Assigning temporary borders to divs and other elements while building a layout has always been one of the power tools of CSS coders. I've used this technique for a very long time... it saves hours of frustation and second guessing. But only recently did I realize Opera 7's alternate stylesheet, DEBUG WITH OUTLINE will add borders to all structural page elements without the need of temporary addtions to my working stylesheets! This is a incredibly useful tool!

The SHOW STRUCTURAL ELEMENTS style sheet not only shows the HTML markup, but displays the class assignments as well... dang, I feel like a kid in a toy store!

[grahamstewart]

Debug is useful, but I also frequently use the 'Emulate Text Browser' stylesheet.

I know very few people actually use text browsers, but the information it displays gives me a good idea of how someone using screen reader software will experience my site.

Plus it also reflects how spiders see my site. :)

[mipapage]

Wow, I'd just used those features this morning for a couple of new layout's I'm workin on. Supercool and invaluable is right. I'd never seen a text browser before...

Cool to see the accessibility mode - people will actuall see my access keys.. Who'd a thunk it?

[Nick_W]

....ahem, where can I get at these features?

I can't seem to find them...?

Nick

[mipapage]

Nick,

Goto 'View - Style' and there begins the fun. Also, there's a little icon to the left of (my) addressbar that when I click it, it allows me to switch between 'user' mode and 'author' mode.

[Nick_W]

Right, got all that, thanks...

Don't see any of these sheets listed in papabaers post above though, c'mon guys, help a thickie.... ;-)

Nick

[BlobFisk]

Just installed Opera 7.11 (I had 7.0) and have finally bit the bullet and set it as my default browser. It'll take a little getting used to, but I'm seeing the benefits already!

Nick, I can see the styles being mentioned. Switch the modes in View > Styles and the options below become active.

In the Styles option, do you have the ability to toggle between user/author mode?

[Nick_W]

Well,

If I go to View > Styles :: I get to choose author/user only. Just two options.

If I go to prefs > page style :: then I get a list of 'orders' that stylesheets are shown in for both user and author modes. I also get a 'my style sheet' with a browse button for the directory that several sheets are in.

I can see quite a few but none look like the ones papabaer mentioned?

Nick

[BlobFisk]

In View>Styles, there's no seperator below these two choices with the list outlined above? That's what I see on mine.

[Nick_W]

Ahhhh........

Mine are disabled? - You know I got bad eyes, I just didn't notice ;-)

So, any idea of how to fix this guys?

Nick

[BlobFisk]

They are disabled for me in Author Mode, and get switched on when I toggle over to User Mode.

[Nick_W]

Oooooooooooooh! PRETTY PRETTY

See you in a couple of hours.....

thanks mate!

Nick

[Nick_W]

OMG - Accessiblility layout!

I have literally, seen the light!

Nick

[BlobFisk]

>See you in a couple of hours.....

I know what you mean - I've been playing around with them non-stop!

[papabaer]

Hmmm... sounds like some true converts havin' a bit o' fun! Enlightening is too tame a word.

Who could honestly say that this is NOT an invaluable Webmaster tool? Opera is definitely leading the pack here.

[BlobFisk]

>Hmmm... sounds like some true converts havin' a bit o' fun!

I've always resisted moving full-time away from Explorer (sounds like a marriage counselling session!), but Opera 7.11 is now my default browser. All IE bookmarks have been brought over and a good skin installed.

For anyone still unsure, here are some of the key features that sold me outright (in no order at all):

• Alternate Stylesheets
  
• Mouse Gestures
  
• Personal Bar
  
• Control, Control, Control... F12!
  
• Speed
  
• Tabbed browsing
  

Now to go and pay for the full thing (sans advertising)!

[Nick_W]

>>good skin installed

Which one?

Nick

[BlobFisk]

Metal Blue. I've been looking at a few and this one stood out! Nice and clean! Number 3 here [my.opera.com].

[papabaer]

<!important> To enable USER Stylesheets to be displayed in combination with AUTHOR Stylesheets, go to Preferences (Alt + P), PAGE STYLE, and be sure to check the My Style Sheets option for both Author Mode and User Mode. </!important>

The "grayed out" alternative style sheets options will then be available for viewing in combination with the page default stylesheets. Use these options for a MEGA-DEBUG session... Mix n' match! Have fun!

- papabaer

By the way, learn to use the NOTES feature... it's friggin' awesome!

<added>Metal Blue is sweeeeeeet!</added>
Thanks BF!

[iSani]

Oh, but it gets better. You can add any stylesheet into the list of user styles, then switch them on and off as you wish. Here's how:

1. Create a stylesheet
   
2. Find the file OperaDef6.ini in the directory where you installed Opera.
   
3. Open the file in an editor and find Local CSS Files.
   
4. Add your own description and stylesheet. Note the running numbering.
   
5. Restart Opera.
   

The new stylesheet(s) should now appear in the list of user styles.

Some ideas:

• Set table and cell dimensions to auto.
  
• Hide (most) spacers with

  img[height="1"],img[width="1"]{display:none}

  
  
• Highlight images without alt text.
  
• Show alt text beneath images with generated content.
  
• Highlight every deprecated element and attribute.
  
• Override inline CSS-P with

  *{position:static}

  
  

But be warned: you will be playing for hours.

[Nick_W]

Welcome to WebmasterWorld [webmasterworld.com] iSani

That sounds excellent! - Thanks for posting that, looks like it's time for me to stop putting off learning the CSS3 specs now huh? ;-)

Nick

[BlobFisk]

>By the way, learn to use the NOTES feature... it's friggin' awesome!

Very, very, very nice... F4 is a new friend to me (it toggles the Opera Hotlist on and off).

Welcome iSani and thanks for those great suggestions.

>But be warned: you will be playing for hours.

How true...

[Nick_W]

It appears that you need an account for 'notes'. What's that all about then?

Nick

[BlobFisk]

That's strange Nick - I never got any blurb on needing an account. Just hit the hotlist button and created a note....

[UncleDamn]

I've been using Opera since 6.xx, got 7.11 now (paid copy). It has to be the best browser I've tried and a definite boon for designers. If only more people bothered with it, the web would be a better place. I use the debug css all the time, especially when working with em as the unit of measurement.
I like the wand, mouse gestures, easy - toggle hotlist, the new notes feature is brilliant for research and of course the skins...

[Nick_W]

>>That's strange Nick

No, it's me that's strange ;)
I got it working now....

So, what good are these notes then, maybe I just don't get it?

Nick