Archive for the ‘CSS’ Category

Site specific stylesheets in Mozilla

Tuesday, December 20th, 2005

One of the new features in Mozilla Firefox 1.5 is the at-rule for matching on site/document. This allows you to make site specific[1] css rules in your userContent.css[2]file.

Example of the syntax:
@-moz-document url-prefix(http://www.domain.com/) {
 body {
   background: white !important;
   color: black ! important;
 }
}

In the example above the you would overrule any background and color style set for the body on the site www.domain.com. This is handy for sites that uses inaccessible colors or for some reason you just want to change the look of.

Real life example

On to a real life example and what isn’t a better place to start than slashdot.org?

Slashdot original screenshot:
slashdot original screenshot

This is the original screenshot from politics.slashdot.org, note when images are turned off you cannot see the headline. Since they haven’t specified a background for the header and uses white background in the parent element. This also happens if the background image isn’t cached. You have to waited for it to be downloaded to be able to read the headlines.

The the solution

@-moz-document url-prefix(http://politics.slashdot.org/){
 #slashboxes h4, .article h3, .generaltitle h3 {
   background-color: #04559f !important;
 }
}

Slashdot “fixed” screenshot:
slashdot fixed screenshot

As you can see, there isn’t much code needed to fix this annoyance. Note that this line does not overrule the background image that slashdot have set in their css file, it only adds a needed background color.

You can view my complete set of styles that I use on slashdot. I could of cource make one generic style for the whole slashdot site but I wanted to make the style for the each section fit in with their respectively designs.

References

  1. http://simon.incutio.com/archive/2004/08/19/specific/
  2. http://www.squarefree.com/userstyles/
  3. http://lists.w3.org/Archives/Public/www-style/2004Aug/0135.html
  4. https://bugzilla.mozilla.org/show_bug.cgi?id=238099

Usercontent and CSS3 selectors

Wednesday, September 7th, 2005

In CSS 3 there is a several new attribute selectors. Especially interesting is the “Substring matching attribute selectors

[att$=val]
Represents the att attribute whose value ends with the
suffix “val”

Both Mozilla and Safari has implemented support for this css3 property. Though it might be a bit early use to on the net considering the limit browser support for this. You can use it to enchant your own suring experience.

One of the great irritations I find on the net, is that no one denotes what they link to. Is it a normal link or is it a link to a document that either requires plugins or that you have to download to read, like links to pdf-documents.

So what I did was to add a simple line in the userContent.css file in mozilla.

a[href$=".pdf"]:after {
content:url(pdf.gif) !important; /* one might have to use a explicit url */
padding-left:0.5em !important;
}

There are several possibilities one how you can mark such links. I’ve made some examples that you can see here or in the screenshot below.

Screenshot:pdf icons

And you can do this to any kind of documents. Just add more lines in the userContent for suffixes like .doc, .xls, .mp3, .mov, wma etc. Endless posibilities. Granted some sites serve content without the file suffix. But this should probably work on most of the cases.

Generic font-family

Friday, April 22nd, 2005


Style sheet designers are encouraged to offer a generic font family as a last alternative. Generic font family names are keywords and must NOT be quoted. [1]

This should be common knowlegde for anyone that is working with CSS,
but what happens when you use a generic font-family that is not strictly defined.

The examples

Mozilla Firefox win
Screen capture Mozilla
Opera 7.6b win
Screen capture Opera
MS IE 6.0 win
Screen capture IE

This is what the three different browsers offered when displaying a font of the the generic font-family fantasy.
Both Mozilla and IE seems to pick out a font on random, most likely they choose the first font on the system of undeterminied font-family. Since both these fonts names comes high in the alphabet. 4YEOSTAMP[2] and Amerika Alternates[3] the fonts chosen by Mozilla and IE respectively .

The problem is that the generic font-family fantasy isn’t defined. As other has put it:.. a catch-all category, it is defined more by what it is not (the other four font families) than what it is.[4]
or as any kind of whimsical font[5]

References

  1. Generic font-family w3.org css2.1
  2. http://www.4yeo.com/fonts/
  3. http://www.flyerstarter.com/Free-Fonts/A/Amerika-Alternates.html
  4. http://www.oreillynet.com/pub/a/javascript/2001/07/26/ css_fonts.html?page=last
  5. http://www.j-a-b.net/web/char/font-general.phtml