Tweak

For a few years I've been maintaining up-to-date versions of Eric Meyer's HTML 4 Quick Reference and CSS 2 Quick Reference panels/sidebars. Keeping the HTML QR up-to-date is easy, as it never changes, but CSS 2 is slowly progressing towards a CSS 2.1 Recommendation and so changes every once in a while.

The fun part in CSS developments is in the emerging CSS 3 modules. Some have been untouched for years, others get some serious work, and sometimes even new ones get created. The CSS Working Group at the W3C has this Current Work page that you can use to keep track. The most fun is of course the implementation of new properties in browsers, the folks at CSS3.info do a nice job of following that.

But with CSS3 modules starting to become usable for real use on the web, the CSS 2.1 QR needed an update. So I've made a new CSS 3 Quick Reference panel that pulls all the new properties, selectors, at-rules etc together. Come and get it from Rijk's Panelizer!

Yesterday, the developers fixed a couple of issues, and Opera can now pass the Acid 2 test without breaking the rest of the web. So in todays weekly build, the smiley has clear eyes. This shows the steady progress in CSS support in Opera.

But yesterday was also a sad day. Chaals is a much better writer, I'll let him speak for me. I'll just say it's the end of an era for Opera.

A commom question in the newsgroups is: "Why is the link/visited link color in I set in 'My Link Style...' (see the Page Style preferences) ignored on most pages?" The same question can be asked about your choice for 'strike through' and/or 'underline'.

The link style is the base style you choose for links, always to be overriden by author styling when you allow author styling. So if the page sets a color for links and visited links (using a stylesheet or html attributes), Opera's settings will be ignored. And if the page stylesheet sets a value for 'text-decoration' (underline, no underline, strike-through, blink), Opera's setting for undeline and strike-though will be ignored.

If you want your preferred link style to be applied all the time, you need to use a 'User style sheet' and use the '!important' marker in it to make your styles override all author styles.

Example of such an user style sheet, just copy to a plain text file:


a:link {
color: #0000ff !important;
background-color: #ffffff !important;
text-decoration: underline !important;
}

a:visited {
color: #ff00ff !important;
background-color: #ffffff !important;
text-decoration: line-through !important;
}


To see your user stylesheet applied on top of author styling, enable it in the 'Author' presentation mode, like this:



But having you own link colors applied all the time is usually very ugly when visiting sites with a dark background.

Personally I'd use only this in my user stylesheet:


a:visited {
text-decoration: line-through !important;
}


... because it never interferes with the color scheme of sites.

Quick tutorial on using 'browser.css' and 'user.css' in Opera 7.5. This is meant as an introduction for people not well versed in CSS.

• A file stored as 'browser.css' in the directory \Profile\styles will be used to override browser default styling (and also author styling if you add '!important' to a rule); it will always be applied. Changes in browser.css need a restart before becoming effective.
  
• You can also create a 'user.css' file. You can control when to apply it with the settings under 'Tools > Preferences > Page Style > Configure modes' and Ctrl+G (Shift+G in Opera 8 and higher).
  
• See 'Help > About Opera' to locate you Profile directory.
  
• CSS files are rulesets stored as plain text files, easily created with, for example, Notepad.
  
• CSS rules consists of 'selectors', which select a piece of the HTML document to work on, and 'declarations' that say how to style that piece. Declarations consist of one or more 'property:value' pairs.
  
• * is the universal selector.
  

Here are some examples of a css rules to put in either browser.css or user.css files. You just put them after each other in the css file.

Rule to fix the font face

 * {font-family: "Trebuchet MS", Arial !important;}
 pre, code, tt, kbd {font-family: "Andale Mono", "Courier New" !important;}

Or leveraging your settings for 'Generic CSS font families':

 * {font-family: sans-serif !important;}
 pre, code, tt, kbd {font-family: monospace !important;}

Rules that fix font size
With some inflexible pages, this can lead to uglier display as text overflows too narrow boxes.

 * {font-size: 16px !important;}
 big {font-size: 18px !important;}
 small {font-size: 14px !important;}
 h1 {font-size: 26px !important;}
 h2 {font-size: 22px !important;}
 h3 {font-size: 20px !important;}
 h4 {font-size: 18px !important;}
 h5, h6 {font-size: 16px !important;}

Rules that fix colors

 * {color: black !important; background: white !important;}
 a:link {color: blue !important; background: white !important;}
 a:visited {color: purple !important; background: white !important;}
 a:active, a:hover {color: red !important; background: white !important;}

More info can be found at <http://nontroppo.org/wiki/OperaUserCSS>