I’ve written a number of posts about CSS3 on my personal blog, so when I was asked to write on CSS3.info I jumped at the chance. To get the quick disclaimer out of the way, my day job is working for Opera Software as their Chief Web Opener. Any thoughts are my own, and any use of CSS3 properties doesn’t imply that they will or will not be supported by Opera in an upcoming release, unless otherwise explicitly stated.
With that out of the way, I was discussing the difference between opacity and RGBA in the office, and thought that it would be useful to write an example showing what the later can be useful for. In the main part, using RGBA is different from opacity, as the transparency only applied to the property you are setting the colour of, while opacity sets the transparency of the entire element. For example, setting opacity on a
pelement will set text as well as the background colour to the setting chosen, while setting RGBA will only make the background colour transparent, and not the text, if
background-colorproperty is used. I decided that overlaying a text block over an image would show this quite well, so I’ve knocked up an example using this to style a figure contain within an article. This example can be found here.
To mark-up the figure, I wrapped the
pcontaining the caption in a
divelement. While this wasn’t strictly needed, I feel like the figure is a division of the page, and so give some semantic meaning and convenient grouping of the figure’s components. I gave it the class name of
figureas suggested in Dan Cederholm’s blog post on marking up figures and Chris Messina’s post on a similar topic. I then added a class of
captionon the caption, to state explicitly what the element contains.
The first important point to note when using CSS3 is that only the very latest browser versions support any given feature, if any do at all. Therefore as Peter points out in the previous post, it is important to use graceful degradation. this is especially important when using RGBA colour values, as browsers are instructed to ignore the CSS statement if it doesn’t understand the Alpha channel part. It doesn’t fallback to just using the Red Green and Blue channels. In the example used here, the figure caption has been set to red with a alpha channel value of 0.6, using
background-color: rgba(255, 0, 0, 0.6);. A value of 1 would mean the colour would be fully opaque, while 0 would be fully transparent. For browsers that don’t support RGBA, there would be no background colour at all, and the text would be illegible. To solve this, a regular background colour is given, in this case
background-color: red;. This has to be included before the statement using RGBA, so that it will be overridden by browsers that do support RGB with Alpha channel.
To get the caption to overlay the image, the paragraph in question was set to use
position: relative;, and given
topvalues that position the element in the correct position; in this case the bottom right corner of the image. A positive
z-indexvalue was given to ensure that it was displayed above the
imgelement. I was tempted to use
emvalues for the sizing and placement of the caption and the padding/margin of the figure, but as the image uses pixels for it’s height and width, it made the cross browser placement of the caption inconsistent across the browsers tested (Opera, WebKit, Minefield). Even using pixels, Minefield (current nightly of Firefox 3) is 1 pixel out on the vertical placement compared to Opera and WebKit. I’m sure there is probably a better way to place the element than what I’ve used in this example.
As this blog is about CSS3 I added a couple more features. I gave the caption a slight shadow (okay, not strictly CSS3) using
text-shadow: 2px 2px 2px black;(This works in Opera Kestrel and Safari) and gave the whole figure a slight 3D effect by specifying a shadow around it. This was done using
box-shadow. In truth no browser supports this without prefixes but Safari 3 supports it using
-webkit-box-shadow. I also initially added a CSS3 selector to style the first line of text in the article as bold, using
.content p:first-of-type:first-line. Unfortunately Safari 3 currently has a bug where it will apply this to every
pand not just the first one, while Firefox totally ignores it as it doesn’t support the
first-of-typeselector. Safari will probably fix this bug before version 3 is released as I noticed they’ve just fixed a similar bug with using
p:first-of-type:first-letter, but as I can predict when the first paragraph will come in this example (after the figure) and it works across each of the three browsers I tested, I just settled on using
.figure+p:first-line. If anyone has any questions comments or has any better way of doing things, then feel free to leave a comment.
You can skip to the end and leave a response.
RGBA looks quite promising as I’ve always found transparency limited in its use due to it affecting both background and content.
And I wanted to ask after I first saw your signature on the WSG mailing list – what exactly does a Chief Web ‘Opener’ do? Not trying to be funny; I just think it’s an interesting choice of term.
John: Well, we have a department (or in truth a sub department) called Open the Web, which contains Web Openers. I’m the team leader, and as such the Chief Web Opener. Opera has a problem where a number of sites do not work in our browser, not because Opera isn’t standards complient or has a bug, but because a site sends Opera broken content in some way. This could be that it sniffs the user agent and gives us broken code or blocks us entirely (just try going to docs.google.com ;)) or that the developer has only tested in IE or Firefox and accidentally takes advantage of a bug or vendor specific extension of those browsers. It is quite common thinking that if you test in Firefox it means your code will work in standards based browsers and is standards compliant. This is not always the case however as all browsers have bugs. So it is my team’s task to open the web by getting these sites to both work in our browser and other standards based browsers. Fixing an issue that breaks Opera can often fix it for Firefox and Safari. We make sure that any suggest fixes we give to sites also work in the major browsers.
Robin wrote: “Your first-line and first-letter commands are pseudoelements so should be denoted by the ‘::’ syntax, not ‘:’ (which is used for pseudoclasses).”
In (Postel) principle I would disagree with you, “Be liberal in what you accept, and conservative in what you send.” CSS2 had a very limited number of pseudo-classes and pseudo-element, while CSS3 has a great many. Syntactically it makes sense to separate between the two, but a CSS2 agent didn’t need to. By being “liberal in what you send” you would needlessly exclude CSS2 user agents that would otherwise be capable of handling those pseudo-elements.
In practice it doesn’t matter. There aren’t that many original CSS2 agents, of these very few supported these pseudo-elements and those that did made this switch early on. I know Opera did almost immediately after it was established (I forget when, Opera 6?) and to my knowledge so did the rest. The converse, discontinuing “:before”, “:after”, “:first-line”, and “:first-element” in browsers, should not happen until CSS2 is obsolete, and that is unlikely to happen before at least a decade from now.